/* audit_views: doc 208 item 2, the audit log: saved views, the activity chart, one row beside the list and the alert rules. A PREVIEW screen's own styles, loaded only where it is switched on.
   Tokens from app.css; no side stripes; status is a dot and a label. Scoped to #view[data-screen="audit"]. */
#view[data-screen="audit"]{--av-money:var(--azure);--av-take:var(--teal);--av-signin:var(--violet);--av-opened:rgba(160,180,230,.34);
  --av-export:#7fb0ff;--av-other:#56627a;--av-refused:var(--warn)}
#view[data-screen="audit"] .ui2-head .ui2-actions{margin-left:auto}
#view[data-screen="audit"] .ui2-head .btn .ui2-icon{width:17px;height:17px}
#view[data-screen="audit"] .ui2-intro{max-width:46rem}
#view[data-screen="audit"] .num{font-variant-numeric:tabular-nums}
#view[data-screen="audit"] .sub{display:block;font-size:.74rem;color:var(--quiet)}
#view[data-screen="audit"] .eyebrow{margin:0}
#view[data-screen="audit"] .av-panel h3.eyebrow{margin:1.6rem 0 .75rem}

/* saved views, with their counts */
.av-views{display:inline-flex;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:rgba(8,14,30,.35)}
.av-views .btn{border-color:transparent;background:transparent;min-height:40px}
.av-views .btn .n{color:var(--quiet);font-variant-numeric:tabular-nums}
.av-views .btn[aria-current=page]{background:rgba(50,95,255,.28);border-color:rgba(120,150,255,.45)}
.av-views .btn[aria-current=page] .n{color:#dfe6ff}

/* the 24 hour chart */
.av-activity{padding:1.4rem 1.6rem 1.2rem}
.av-activity header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.av-chart{display:block;width:100%;height:auto;margin-top:.8rem}
.av-chart .grid{stroke:var(--row);stroke-width:1}
.av-chart text{fill:var(--quiet);font:400 10px var(--sans)}
.av-chart .hit{fill:transparent}
.av-chart g:hover .hit{fill:rgba(255,255,255,.04)}
.av-money{fill:var(--av-money);background:var(--av-money)}.av-take{fill:var(--av-take);background:var(--av-take)}
.av-signin{fill:var(--av-signin);background:var(--av-signin)}.av-opened{fill:var(--av-opened);background:var(--av-opened)}
.av-export{fill:var(--av-export);background:var(--av-export)}.av-other{fill:var(--av-other);background:var(--av-other)}
.av-refused{fill:var(--av-refused);background:var(--av-refused)}
.av-activity .ui2-legend span{display:inline-flex;align-items:center;gap:.45rem}
.av-activity .ui2-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px}

/* search and chips */
.av-find{display:flex;align-items:center;gap:.6rem;max-width:40rem;min-height:46px;margin:0 0 .7rem;padding:0 1rem;border:1px solid rgba(209,221,255,.2);
  border-radius:999px;background:rgba(8,14,30,.45);color:var(--quiet)}
.av-find .ic{display:inline-flex}
.av-find input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:400 .9rem var(--sans);outline:none;padding:.7rem 0}
.av-find:focus-within{border-color:rgba(120,150,255,.6)}
.av-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1rem}
.av-chip{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:0 .4rem 0 .95rem;border:1px solid rgba(209,221,255,.2);border-radius:999px;
  background:rgba(255,255,255,.03);font-size:.82rem;color:var(--muted)}
.av-chip select{border:0;background:transparent;color:#fff;font:600 .82rem var(--sans);padding:.5rem .3rem;max-width:14rem;cursor:pointer}
.av-chip select option{background:#151d31;color:#fff}
.av-chip:focus-within{border-color:rgba(120,150,255,.6)}
.av-clear{min-height:40px;font-size:.82rem}

/* the list, and the row beside it */
.av-split{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
.av-split.open{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.av-split.open .av-wide{display:none}
.av-list{padding:.4rem 0 0;overflow:clip}   /* clip, not hidden: hidden makes the card the scroll box, and the frame's sticky table head then sits 152px into the rows */
.av-table th{padding:1rem .9rem .8rem}
.av-table td{padding:.95rem .9rem}
.av-table th:first-child,.av-table td:first-child{padding-left:1.5rem}
.av-table tr.av-day td{padding:.9rem 1.5rem .55rem;font:500 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);
  background:rgba(8,14,30,.25)}
.av-table tbody tr[data-id]{cursor:pointer;transition:background .15s ease}
.av-table tbody tr[data-id]:hover td{background:rgba(255,255,255,.03)}
.av-table tbody tr[data-id]:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}
.av-table tr.av-picked td{background:rgba(50,95,255,.16)}
.av-who{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.av-what{font-weight:600;color:#fff}
.av-what .sub{font-weight:400}
.av-target{white-space:nowrap}
.av-target a{color:var(--eyebrow);text-decoration:none}
.av-target a:hover{text-decoration:underline}
.av-ba{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .45rem;font-size:.82rem;color:var(--lead)}
.av-ba .k{color:var(--quiet)}
.av-ba del{color:var(--quiet)}
.av-ba b{color:#fff;font-weight:600}
.av-ba .ui2-icon{width:13px;height:13px;color:var(--quiet)}
.av-hint{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0;padding:.9rem 1.5rem 1.1rem;font-size:.8rem;color:var(--quiet)}

.av-panel{padding:0 1.5rem 1.5rem;overflow:hidden}
.av-panel > header{display:flex;align-items:center;gap:.3rem;margin:0 -1.5rem 1rem;padding:1rem 1rem 1rem 1.5rem;
  border-bottom:1px solid var(--row)}
#view[data-screen="audit"] .av-panel > header .eyebrow{margin-right:auto}
.av-panel h2{margin:.2rem 0 .7rem}
.av-line{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;font-size:.88rem;color:var(--lead)}
.av-people{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.av-people li{display:flex;align-items:center;gap:.6rem;flex:1 1 11rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:16px;background:rgba(8,14,30,.3)}
.av-people li[aria-current]{border-color:rgba(120,150,255,.5)}
.av-people b{display:block;font-weight:600;font-size:.88rem}
.av-rule{display:flex;gap:.7rem;margin:.8rem 0 0;padding:.9rem 1rem;border:1px solid rgba(0,199,197,.35);border-radius:16px;background:rgba(0,199,197,.07);
  font-size:.84rem;line-height:1.45;color:var(--lead)}
.av-rule .ui2-icon{color:var(--teal);margin-top:.1rem}
.av-ba-grid{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.av-ba-grid > div{display:grid;grid-template-columns:1fr 1fr}
.av-ba-grid > div + div{border-top:1px solid var(--row)}
.av-ba-grid span{padding:.7rem .9rem;font-size:.88rem;overflow-wrap:anywhere;min-width:0}
.av-ba-grid span + span{border-left:1px solid var(--row)}
.av-ba-grid small{display:block;font-size:.72rem;color:var(--quiet);margin-bottom:.2rem}
.av-ba-grid i{font-style:normal;color:var(--quiet)}
.av-ba-grid .h span{font:500 .68rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);background:rgba(8,14,30,.35)}
.av-ba-grid .h span + span{color:var(--teal)}
.av-ba-grid .changed span + span{background:rgba(0,199,197,.08)}
.av-panel dl.kv{margin:0}
.av-panel dl.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--row)}
.av-panel dl.kv dt{font-size:.8rem;color:var(--quiet)}
.av-panel dl.kv dd{margin:0;text-align:right;font-size:.88rem}
.av-session{margin:.4rem 0 0;padding:0;list-style:none}
.av-session li{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--row);font-size:.86rem}
.av-session li .num{color:var(--quiet)}
.av-session li[aria-current] .num,.av-session li[aria-current]{color:var(--eyebrow)}
.av-session .sub{display:inline;font-size:.78rem}
.av-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0 0}
.av-acts .n{color:var(--quiet);font-variant-numeric:tabular-nums}
.av-acts [data-done]::after{content:"Copied";margin-left:.2rem;font-weight:400;color:#dfe6ff}
#av-copy[data-done]::after{content:none}
.av-foot{display:flex;gap:.6rem;margin:1.2rem 0 0;font-size:.78rem;line-height:1.45;color:var(--quiet)}
.av-foot .ui2-icon{width:15px;height:15px;flex:none;margin-top:.1rem}

/* Tell me when */
.av-off{padding:1.1rem 1.5rem;margin-bottom:1rem}
.av-off h2{font-size:1.35rem;margin:0 0 .35rem}
.av-off .note{margin:0}
#view[data-screen="audit"] .ui2-kpis .stat dd.sub{font:400 .8rem/1.4 var(--sans);margin-top:.5rem}
#view[data-screen="audit"] .ui2-kpis .stat dd.av-good{color:var(--teal)}
#view[data-screen="audit"] .ui2-kpis .stat dd.av-bad{color:var(--warn)}
.av-rules{padding:1.4rem 0 .6rem}
.av-rules > header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding:0 1.6rem .6rem}
.av-rules > header h2{margin:0}
.av-rules ul{margin:0;padding:0;list-style:none}
.av-rules li{display:grid;grid-template-columns:auto minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:1.2rem;align-items:center;padding:1.05rem 1.6rem;
  border-top:1px solid var(--row)}
.av-rules li.off .av-r-main b{color:var(--muted)}
.av-r-main b{display:block;font-size:1rem;font-weight:600;margin-bottom:.2rem}
.av-r-main .note{display:block}
.av-r-told,.av-r-last{display:flex;flex-direction:column;gap:.2rem;font-size:.88rem}
.av-r-told > span:last-child{display:inline-flex;align-items:center;gap:.45rem}
.av-r-told .ui2-icon{width:15px;height:15px;color:var(--quiet)}
.av-left-out{margin:0;padding:.9rem 1.6rem 0;border-top:1px solid var(--row)}
.av-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.av-two .card{margin:0}
.av-state{margin:.8rem 0 .6rem;font-weight:600}
.av-state .st{white-space:normal;align-items:baseline}
.av-whole dl.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--row)}
.av-whole dl.kv div:last-child{border-bottom:0}
.av-whole dl.kv dt{font-size:.82rem;color:var(--quiet)}
.av-whole dl.kv dd{margin:0;text-align:right;font-size:.9rem}
.av-lately ol{margin:.6rem 0 0;padding:0;list-style:none}
.av-lately li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--row);font-size:.88rem;line-height:1.45}
.av-lately li:last-child{border-bottom:0}
.av-lately a{color:var(--eyebrow)}

@media (max-width:1100px){
  .av-split.open{grid-template-columns:minmax(0,1fr)}
  .av-split.open .av-list,.av-page.open > :not(.av-split){display:none}
  .av-rules li{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem}
  .av-r-told,.av-r-last{grid-column:2}
  .av-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  #view[data-screen="audit"] .ui2-head .ui2-actions{margin-left:0}
  .av-views{display:flex;border-radius:22px}
  .av-activity{padding:1.1rem 1.1rem 1rem}
  .av-activity .ui2-legend .sum{margin-left:0;width:100%}
  .av-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .av-chips > *{flex:none}
  .av-list{padding:0}
  .av-table tbody tr[data-id]{padding:.9rem 1.1rem}
  .av-table td,.av-table td:first-child{padding:.22rem 0}
  .av-table tr.av-day{padding:0}
  .av-table tr.av-day td::before{content:none}
  .av-table tr.av-day td{display:block;padding:.9rem 1.1rem .55rem}
  .av-table td.av-what{order:-1;justify-content:flex-start;font-size:.98rem;text-align:left;padding-bottom:.35rem}
  .av-table td.av-what::before{content:none}
  .av-table td.av-what{display:block}
  .av-table td.av-what .sub{display:inline;margin-left:.5rem}
  .av-chart text{font-size:22px}
  .av-table tbody tr[data-id]{display:flex;flex-direction:column}
  .av-table td .av-who{text-align:right}
  .av-ba{justify-content:flex-end}
  .av-hint{padding:.8rem 1.1rem 1rem}
  .av-panel{padding:0 1.1rem 1.2rem}
  .av-panel > header{margin:0 -1.1rem 1rem;padding:.8rem .6rem .8rem 1.1rem}
  .av-people{flex-direction:column}
  .av-people li{flex:none}
  .av-rules > header{padding:0 1.1rem .6rem}
  .av-rules li{padding:1rem 1.1rem;gap:.8rem}
  .av-left-out{padding:.9rem 1.1rem 0}
  .av-lately li{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .av-acts .btn{width:100%}
}