/* Analyst Platform UI shell.
   Adapted from docs/mockup/phish_triage_console.html. Differences are deliberate:
   no inline styles, no inline script, and no external font, so the strict CSP
   from security/headers.py holds with no unsafe-inline anywhere. */

:root{
  --paper:#F4F6F8; --panel:#FFFFFF; --ink:#18212B; --steel:#5A6878; --rule:#D9DFE5;
  --indigo:#2E3C99; --indigo-soft:#E8EBF8;
  --bad:#B42318; --bad-soft:#FDECEA; --warn:#A6540A; --warn-soft:#FDF1E3;
  --ok:#0B7043; --ok-soft:#E6F4EC;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
[hidden]{display:none !important}

.top{display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--rule)}
.brand{font-weight:600;font-size:17px}
.brand small{font-weight:400;color:var(--steel);margin-left:8px;font-size:13px}
.top .spacer{flex:1}
.who{color:var(--steel);font-size:13px}
.btn{border:1px solid var(--rule);background:var(--panel);border-radius:6px;padding:8px 14px;cursor:pointer}
.btn:hover{border-color:var(--steel)}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.primary:hover{background:#24307d}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.shell{display:grid;grid-template-columns:300px 1fr 320px;min-height:calc(100vh - 57px)}
aside.queue{background:var(--panel);border-right:1px solid var(--rule);padding:16px 0}
.queue h2,.decide h2{font-size:13px;font-weight:600;color:var(--steel);margin:0 20px 10px}
.qitem{display:block;width:100%;text-align:left;border:0;border-left:3px solid transparent;background:none;padding:12px 20px;cursor:pointer}
.qitem:hover{background:var(--paper)}
.qitem[aria-current="true"]{background:var(--indigo-soft);border-left-color:var(--indigo)}
.qitem .subj{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qitem .meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--steel);margin-top:4px}
.score-pill{font-weight:600;font-size:12px;padding:1px 8px;border-radius:10px}
.s-bad{background:var(--bad-soft);color:var(--bad)}
.s-warn{background:var(--warn-soft);color:var(--warn)}
.s-ok{background:var(--ok-soft);color:var(--ok)}
.empty{padding:0 20px;color:var(--steel);font-size:14px}

main{padding:24px 32px;min-width:0}
.intake{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:20px;margin-bottom:24px}
.intake h2{margin:0 0 12px;font-size:17px;font-weight:600}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-bottom:14px}
.seg button{border:0;background:var(--panel);padding:6px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--indigo);color:#fff}
.drop{border:1.5px dashed var(--steel);border-radius:8px;padding:22px;text-align:center;color:var(--steel)}
.drop strong{color:var(--ink);display:block;margin-bottom:6px}
textarea{width:100%;min-height:120px;border:1px solid var(--rule);border-radius:8px;padding:10px;font-family:var(--mono);font-size:13px;resize:vertical}
.hint{font-size:13px;color:var(--steel);margin:10px 0 0}
.err{font-size:13px;color:var(--bad);margin:8px 0 0}
.intake .row{display:flex;gap:10px;margin-top:14px}

.case-head{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.case-head h1{font-size:24px;font-weight:600;line-height:1.25;margin:0 0 6px;max-width:34ch}
.from{color:var(--steel);font-size:14px}
.from code{font-family:var(--mono);font-size:13px;color:var(--ink)}
.verdict{text-align:right}
.verdict .num{font-size:44px;font-weight:600;line-height:1}
.verdict .label{font-weight:500;margin-top:4px}
.v-bad{color:var(--bad)} .v-warn{color:var(--warn)} .v-ok{color:var(--ok)}
.facts{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--steel);margin:14px 0 26px}
.facts b{color:var(--ink);font-weight:500}
.flag{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:1px 10px;font-size:12px;font-weight:600}

section.block{margin-bottom:28px}
section.block h3{font-size:16px;font-weight:600;margin:0 0 10px}
.ledger{display:flex;height:34px;border-radius:6px;overflow:hidden;background:#EEF1F4}
.seg-bar{height:100%;border-right:2px solid var(--paper);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600}
.seg-bar.b-bad{background:var(--bad)} .seg-bar.b-warn{background:var(--warn)} .seg-bar.b-ok{background:var(--ok)}
.seg-bar.hot{filter:brightness(1.2)}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--steel);margin-top:4px}

table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:top}
th{font-size:12px;font-weight:600;color:var(--steel);background:#FAFBFC}
tr:last-child td{border-bottom:0}
tr.hot td{background:var(--indigo-soft)}
td.pts{font-weight:600;white-space:nowrap}
td code,.mono{font-family:var(--mono);font-size:13px;word-break:break-all}
.pivot{border:1px solid var(--rule);background:none;border-radius:4px;padding:2px 8px;font-size:12px;cursor:pointer}

.panelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.panelgrid div{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:12px 14px}
.panelgrid span{display:block;font-size:12px;color:var(--steel)}
.panelgrid b{font-weight:600;word-break:break-all}

.summary{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--indigo);border-radius:0 8px 8px 0;padding:14px 18px}
.summary p{margin:0 0 8px;max-width:72ch}
.summary small{color:var(--steel)}
.summary ul{margin:0 0 8px;padding-left:20px}

aside.decide{background:var(--panel);border-left:1px solid var(--rule);padding:20px}
.decide h2{margin:0 0 12px}
fieldset{border:0;padding:0;margin:0 0 18px}
legend{font-weight:600;margin-bottom:8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;margin-bottom:6px;cursor:pointer}
.opt:has(input:checked){border-color:var(--indigo);background:var(--indigo-soft)}
.opt small{display:block;color:var(--steel);font-size:12px}
.decide textarea{font-family:var(--sans);font-size:14px;min-height:90px}
.decide .btn.primary{width:100%;margin-top:12px;padding:10px}
.history{margin-top:24px;font-size:13px;color:var(--steel)}
.history ul{padding-left:18px;margin:8px 0 0}
.history li{margin-bottom:6px}
.history b{color:var(--ink)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

.login{max-width:360px;margin:12vh auto;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:28px}
.login h1{font-size:20px;margin:0 0 4px}
.login p.sub{color:var(--steel);font-size:14px;margin:0 0 20px}
.login label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
.login input{width:100%;border:1px solid var(--rule);border-radius:6px;padding:9px 10px}
.login .btn.primary{width:100%;margin-top:18px;padding:10px}

@media (max-width:1100px){.shell{grid-template-columns:260px 1fr}aside.decide{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule)}}
@media (max-width:720px){.shell{grid-template-columns:1fr}aside.queue{border-right:0;border-bottom:1px solid var(--rule)}main{padding:20px 16px}.verdict{text-align:left}.panelgrid{grid-template-columns:1fr}.who{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* --- queue header and filter --- */
.queue-head{padding:0 20px 8px}
.queue-head h2{margin:0 0 8px;padding:0}
.seg.filter{margin:0;font-size:12px}
.seg.filter button{padding:4px 10px;font-size:12px}
.qitem .decided{background:#EEF1F4;color:var(--steel);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:600}

/* --- recorded decision --- */
.verdict-record{border:1px solid var(--rule);border-left:3px solid var(--ok);border-radius:0 8px 8px 0;background:var(--panel);padding:12px 14px;margin-bottom:14px}
.verdict-record .what{font-weight:600;margin-bottom:2px}
.verdict-record .who{font-size:12px;color:var(--steel);margin-bottom:8px}
.verdict-record .notes{font-size:14px;white-space:pre-wrap;word-break:break-word}
.verdict-record.v-confirmed_phish{border-left-color:var(--bad)}
.verdict-record.v-escalated{border-left-color:var(--warn)}
.verdict-record.v-false_positive{border-left-color:var(--ok)}
.reopen{margin-top:10px}

/* --- collapsible case list --- */
.btn.icon{padding:6px 11px;line-height:1;font-size:15px}
.shell.queue-hidden{grid-template-columns:1fr 320px}
.shell.queue-hidden aside.queue{display:none}
@media (max-width:1100px){
  .shell.queue-hidden{grid-template-columns:1fr}
}

/* --- dashboard ---------------------------------------------------------
   Forms chosen by the data's job: scalars are stat tiles, not charts;
   magnitude across categories gets bars.

   Band colours are status colours and are never placed adjacent to each
   other. Measured with the palette validator, amber and red separate by only
   9.0 normal-vision dE (floor is 15) and 3.3 deutan, so a stacked bar would be
   unreadable. Each band is its own labelled row with its own count, which
   carries identity by text rather than by hue.                        */

.dash{display:grid;gap:22px}
.dash h3{font-size:16px;font-weight:600;margin:0 0 10px}
.dash section{min-width:0}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:14px 16px}
.tile .n{font-size:28px;font-weight:600;line-height:1.1}
.tile .k{font-size:12px;color:var(--steel);margin-top:4px}
.tile .sub{font-size:12px;color:var(--steel);margin-top:2px}
.tile .n.muted{color:var(--steel);font-size:20px}

/* Bar rows: thin marks, 4px rounded data-end, recessive track. */
.bars{display:grid;gap:8px}
.bar-row{display:grid;grid-template-columns:minmax(120px,26%) 1fr auto;gap:10px;align-items:center}
.bar-row .label{font-size:13px}
.bar-row .track{background:#EEF1F4;border-radius:4px;height:14px;overflow:hidden}
.bar-row .fill{height:100%;border-radius:0 4px 4px 0;min-width:2px}
.bar-row .val{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:2.5ch;text-align:right}
.fill.f-bad{background:var(--bad)}
.fill.f-warn{background:var(--warn)}
.fill.f-ok{background:var(--ok)}
.fill.f-seq{background:var(--indigo)}
.bar-row.zero .fill{background:var(--rule)}

.dash table{margin-top:0}
.dash .empty{padding:0;font-size:13px}

.verdict .btn.rescan{margin-top:10px;font-size:12px;padding:5px 12px}

.summary small em{font-style:italic}