/* ============================================================
   Reports (Protection) — page styles, ported from the v7 Reports handoff.
   Extracted from the CSS-in-JS string in sections/reports.js: the section is a
   god-file size-ratchet target (scripts/architecture-budgets.json, 292 lines with
   NO headroom) and the architecture rule says to split along the seams rather than
   grow it. Linked from public/dashboard/index.html so the tab paints styled on
   first open.

   Cards are the shared .glass kit (chrome.css). Anything duplicated here — .dstat,
   .chip, .vbtn, .seg, .fbtn/.ffly — is a verbatim copy of the handoff's rules and is
   byte-identical to the copies in usage.js / api.js / tripwires.css, so the sections
   can't drift. The submit wizard's own styles stay in pages/report-form.js.
   ============================================================ */

/* page shell */
.rp-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.rp-head{display:flex;align-items:center;gap:18px}
.rp-head h1{font-size:1.5rem;margin:0}
.rp-head p{font-size:.84rem;color:var(--dim);margin-top:2px}
.rp-head .grow{flex:1}
.btn-plus{display:inline-flex;align-items:center;gap:9px}
.btn-plus .pl{font-size:1.05rem;line-height:1;margin-top:-1px}

/* stat strip — .dstat lives in the shared dash-kit.css */
.rp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* toolbar: tabs | search | filter | sort. overflow:visible + z-index so the flyouts
   can escape the bar instead of being clipped by it. */
.rp-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;flex-wrap:wrap;overflow:visible;z-index:5;position:relative}
.rp-search{flex:1;min-width:150px;height:36px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03)}
.rp-search svg{width:14px;height:14px;color:var(--faint);flex:0 0 auto}
.rp-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-family:var(--sans);font-size:.84rem}
.rp-search input::placeholder{color:var(--faint)}
/* .seg/.fbtn/.ffly/.fwrap/.fcount/.f-lbl2/.fpills/.tpill/.fopt/.fchk2 are the
   shared primitives (/assets/shared/dash-kit.css). The search-toolbar tab shape
   (36px / 11px track / 8px inset active fill) is canonical there too under
   `.rp-bar .seg` — not redeclared here. */

/* report rows */
.rp-list{padding:4px 0}
.rp-row{display:flex;align-items:center;gap:13px;padding:11px 18px;border-top:1px solid rgba(255,255,255,.045);cursor:pointer}
.rp-row:first-child{border-top:0}
.rp-row:hover{background:rgba(255,255,255,.028)}
.rp-row:focus-visible{outline:none;background:rgba(255,255,255,.045);box-shadow:inset 2px 0 0 var(--a2)}
.rp-ic{width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a1) 13%,transparent);color:var(--t1)}
.rp-ic.dim{background:rgba(255,255,255,.04);color:var(--faint)}
.rp-ic svg{width:16px;height:16px}
.rp-who{flex:1;min-width:0}
.rp-who b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--head)}
.rp-who b.dim{color:var(--faint)}
.rp-who .sub{display:block;font-size:.72rem;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-when{flex:0 0 auto;font-size:.7rem;color:var(--faint);min-width:82px;text-align:right}

/* chips. The st-* set is live's REAL report statuses, styled with the handoff's chip
   anatomy — the handoff only draws three (actioned/rejected/review) but the API also
   returns needs-reply / dismissed / duplicate, so those get the same treatment rather
   than being collapsed into a status they aren't. */
/* .chip base lives in the shared dash-kit.css; live's REAL report-status modifiers stay here */
.chip.off{color:var(--t2);border:1px solid color-mix(in srgb,var(--a2) 40%,transparent)}
.chip.st-actioned{color:var(--success);border:1px solid color-mix(in srgb,var(--success) 42%,transparent);background:color-mix(in srgb,var(--success) 7%,transparent)}
.chip.st-rejected,.chip.st-dismissed{color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 42%,transparent);background:color-mix(in srgb,var(--danger) 7%,transparent)}
.chip.st-review{color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 42%,transparent);background:color-mix(in srgb,var(--warning) 7%,transparent)}
.chip.st-reply{color:var(--t3);border:1px solid color-mix(in srgb,var(--a3) 45%,transparent);background:color-mix(in srgb,var(--a3) 8%,transparent)}
.chip.st-duplicate{color:var(--faint);border:1px solid var(--border2)}

/* empty states */
.rp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:38px 20px 44px;text-align:center}
.rp-empty.slim{padding:26px 20px}
.rp-empty.slim span{font-size:.84rem;color:var(--faint)}
.rp-eic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a1) 14%,transparent);color:var(--t1)}
.rp-eic svg{width:19px;height:19px}
.rp-empty b{font-size:.94rem;color:var(--head)}
.rp-empty > span:last-child{font-size:.8rem;color:var(--faint);max-width:320px;line-height:1.5}

/* footnote */
.rp-note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px}
.rp-note svg{width:15px;height:15px;flex:0 0 auto;color:var(--t2);margin-top:2px}
.rp-note p{font-size:.78rem;color:var(--dim);line-height:1.5;margin:0}
.rp-note p b{color:var(--text)}

/* witness invites — a consent gate with no handoff counterpart, so it borrows the
   canonical card-on-card + accent-border treatment rather than the legacy .card. */
.rp-invite{display:flex;flex-direction:column;gap:8px;margin:0 18px 10px;padding:11px 13px;border-radius:12px;border:1px solid color-mix(in srgb,var(--a2) 40%,transparent);background:color-mix(in srgb,var(--a2) 6%,transparent)}
.rp-invite p{font-size:.82rem;color:var(--text);line-height:1.5;margin:0}
.rp-invite .rp-ivbtns{display:flex;gap:8px}

/* modal */
.rp-ovl{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:rgba(4,4,10,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto;animation:rpOvlIn .18s ease}
@keyframes rpOvlIn{from{opacity:0}to{opacity:1}}
.rp-modal{width:100%;max-width:480px;max-height:calc(100vh - 48px);overflow-y:auto;border-radius:20px;background:rgba(15,15,26,.97);border:1px solid var(--border2);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);position:relative;animation:rpModIn .22s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.rp-modal.wide{max-width:600px}
@keyframes rpModIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.rp-modal::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:.7;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat;mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat}
/* .mod-head / .mod-x / .mod-body / .mod-foot base come from the shared kit
   (dash-kit.css). Reports keeps its status-chip + close-button spacing and a
   right-aligned footer. (The .rp-ovl/.rp-modal shell above stays prefixed.) */
.mod-head .chip{margin-top:4px}
.mod-head .mod-x{margin-left:6px}
.rp-id{font-family:var(--mono);font-size:.82rem;color:var(--t3);font-weight:600}
.mod-foot{justify-content:flex-end}

/* detail bits */
.rp-desc{font-family:var(--sans);font-size:.84rem;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;padding:12px 14px;border-radius:11px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.05)}
.rp-sec{display:flex;flex-direction:column;gap:8px}
.rp-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.rp-th{position:relative;width:74px;height:56px;border-radius:8px;border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .12s;object-fit:cover}
.rp-th:hover{transform:translateY(-2px)}
.rp-msgs{display:flex;flex-direction:column;gap:8px;max-height:170px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.rp-msg{display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.rp-msg.you{border-color:color-mix(in srgb,var(--a2) 36%,transparent)}
.rp-msg b{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.rp-msg span{font-size:.8rem;color:var(--text);line-height:1.5}
.rp-msg i{font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--faint)}

/* staff "need more info" banner — no handoff counterpart (it only exists once staff
   actually leave a request), so it uses the canonical warning tint rather than the
   hardcoded amber it had. */
.rp-req{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:11px;border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);background:color-mix(in srgb,var(--warning) 10%,transparent)}
.rp-req b{font-size:.82rem;font-weight:600;color:var(--warning)}
.rp-req span{font-size:.84rem;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.rp-req i{font-style:normal;font-size:.72rem;color:var(--faint)}

/* witness chips */
.rp-wits{display:flex;flex-wrap:wrap;gap:6px}
.rp-wit{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.rp-withandle{font-family:var(--mono);font-size:.74rem;color:var(--text)}
.rp-wit .rd-cx{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:.9rem;line-height:1;padding:0;transition:color .12s}
.rp-wit .rd-cx:hover{color:var(--danger)}

/* fields */
.rp-fr{display:flex;flex-direction:column;gap:6px}
.rp-lb{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rp-lb em{font-style:normal;text-transform:none;letter-spacing:.02em;opacity:.8}
.rp-in{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--text);font-family:var(--sans);font-size:.86rem;outline:none;transition:border-color .15s}
.rp-in:focus{border-color:color-mix(in srgb,var(--a2) 55%,transparent)}
.rp-in.mono{font-family:var(--mono);font-size:.8rem}
.rp-in.area{resize:vertical;min-height:76px;line-height:1.55}
.rp-hint{font-size:.7rem;color:var(--faint);line-height:1.5}
.rp-row2{display:flex;gap:8px;align-items:flex-start}
.rp-row2 .rp-in{flex:1}
.rp-row2 .vbtn,.rp-row2 .btn{flex:0 0 auto}

/* outline buttons — .vbtn lives in the shared dash-kit.css */

@media(max-width:1080px){
  .rp-stats{grid-template-columns:1fr 1fr}
  .rp-when{display:none}
}
@media(max-width:600px){.rp-stats{grid-template-columns:1fr}}