/*
  styles.css — Increment I2 UI.

  Mobile-first: the base rules assume a phone; the one @media block near the
  bottom widens the layout for a desktop browser. No external fonts or assets —
  the font stack is the device's own system fonts, so the page loads with only
  the API on the network (the portability principle).

  The visual language deliberately matches the frozen phone demo
  (sdcps_demo.html) so the two read as the same product: navy chrome, amber for
  a running regulatory clock, teal for a satisfied one, red for a breach.
*/

:root{
  --ink:#0F2440; --ink2:#1B3A63; --paper:#F4F6F8; --card:#FFFFFF;
  --line:#DCE3EA; --text:#1D2B3A; --muted:#5B6B7B;
  --amber:#B45309; --amber-bg:#FDF3E3; --amber-line:#EAC98F;
  --teal:#0E6E5C; --teal-bg:#E7F4F0;
  --red:#AE2A19; --red-bg:#FBEDEA;
  --violet:#4C3FA0; --violet-bg:#EEECF9;
  --gold:#F5C46B;
  --radius:12px;
  --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  font-family:var(--sys);font-size:15px;line-height:1.5;
  background:var(--paper);color:var(--text);
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
h1,h2,h3{letter-spacing:.01em}

/* Layout is centred and width-capped; on a phone this is edge-to-edge. */
.wrap{max-width:760px;margin:0 auto;padding:0 14px}

/* ---- header / chrome ---------------------------------------------------- */
header{background:var(--ink);color:#EAF0F7;position:sticky;top:0;z-index:20}
.hbar{display:flex;align-items:center;gap:10px;padding:12px 14px;max-width:760px;margin:0 auto}
.mark{width:30px;height:30px;flex:none;border-radius:8px;background:var(--ink2);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--gold)}
.hti{flex:1;min-width:0}
.hti h1{font-size:17px;font-weight:600;line-height:1.2}
.hti small{color:#9FB2C8;font-size:11.5px;display:block}
.whoami{text-align:right;min-width:0}
.whoami .nm{font-weight:600;font-size:13px;color:#EAF0F7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.whoami .rl{color:#9FB2C8;font-size:11px;display:block}
.whoami .switch{background:none;border:0;color:var(--gold);font:600 11.5px var(--sys);
  cursor:pointer;padding:2px 0 0;text-decoration:underline}
.poc{background:var(--gold);color:#4A3308;font:700 11px var(--sys);
  text-align:center;padding:5px 10px;letter-spacing:.06em;text-transform:uppercase}

/* ---- bottom nav --------------------------------------------------------- */
nav{position:fixed;left:0;right:0;bottom:0;background:var(--ink);z-index:20;
  padding-bottom:env(safe-area-inset-bottom)}
.nbar{display:flex;max-width:760px;margin:0 auto}
.nbtn{flex:1;background:none;border:0;color:#8FA5BE;padding:10px 4px 12px;cursor:pointer;
  font:600 12px var(--sys);letter-spacing:.04em;text-transform:uppercase;
  border-top:3px solid transparent}
.nbtn.on{color:#fff;border-top-color:var(--gold)}
.nbtn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

main{padding-top:16px}

/* ---- cards & type ------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px}
.card h2{font-size:18px;margin-bottom:4px}
.sub{color:var(--muted);font-size:13px;margin-bottom:12px}
.stack>*+*{margin-top:12px}
.section-title{font-size:16px;margin:14px 2px 8px}

label{display:block;font:600 12.5px var(--sys);color:var(--muted);margin-bottom:5px}
input[type=text],input[type=password],textarea,select.field{
  width:100%;font:400 15px var(--sys);color:var(--text);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}
textarea{min-height:96px;resize:vertical}
input:focus-visible,textarea:focus-visible,select.field:focus-visible{
  outline:2px solid var(--ink2);outline-offset:1px}

.btn{display:inline-block;border:0;border-radius:9px;padding:11px 16px;cursor:pointer;
  font:600 14px var(--sys);background:var(--ink);color:#fff}
.btn.sec{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.small{padding:7px 12px;font-size:13px;border-radius:8px}
.btn.block{display:block;width:100%}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:default}

/* ---- login -------------------------------------------------------------- */
.acct{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;margin-bottom:10px;cursor:pointer;font:inherit;color:inherit}
.acct:hover{border-color:var(--ink2)}
.acct:focus-visible{outline:2px solid var(--ink2)}
.acct .av{width:38px;height:38px;flex:none;border-radius:50%;background:var(--ink2);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.acct .who{flex:1;min-width:0}
.acct .who b{display:block;font-size:15px}
.acct .who small{color:var(--muted);font-size:12.5px}
.acct .go{color:var(--muted);font-size:20px;flex:none}

/* ---- chips -------------------------------------------------------------- */
.chip{display:inline-block;font:600 11px var(--sys);padding:3px 9px;border-radius:99px;white-space:nowrap}
.c-run{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line)}
.c-sat{background:var(--teal-bg);color:var(--teal)}
.c-sup{background:#EEF1F4;color:var(--muted);text-decoration:line-through}
.c-brc{background:var(--red-bg);color:var(--red)}
.c-new{background:var(--violet-bg);color:var(--violet)}
.c-cls{background:#EEF1F4;color:var(--muted)}

/* ---- queue rows --------------------------------------------------------- */
.row{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:10px;cursor:pointer;font:inherit;color:inherit}
.row:focus-visible{outline:2px solid var(--ink2)}
.row .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.row h3{font-size:16px}
.row .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.row .worst{margin-top:8px;font:600 13px var(--mono)}

/* ---- clocks — the signature element ------------------------------------- */
.clocks{display:grid;grid-template-columns:1fr;gap:9px}
.clk{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;
  padding:10px 11px;background:#fff}
.clk.run{border-left-color:#E9A23B;background:var(--amber-bg)}
.clk.sat{border-left-color:var(--teal)}
.clk.sup{opacity:.62}
.clk.brc{border-left-color:var(--red);background:var(--red-bg)}
.clk .n{font:600 11.5px var(--sys);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.clk .t{font:600 20px var(--mono);margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.clk.run .t{color:var(--amber)} .clk.brc .t{color:var(--red)}
.clk .s{margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clk .ev{font-size:11.5px;color:var(--muted);margin-top:6px}
/* Escalation indicator on a clock (FR-A08) — amber for an approaching step,
   red for a breach step (top of the chain). */
.esc{font:600 12px var(--sys);color:var(--amber);margin-top:6px}
.esc.brk{color:var(--red)}
.esc .muted{font-weight:500;color:var(--muted)}
.muted{color:var(--muted)}

/* ---- vault -------------------------------------------------------------- */
.vault{display:flex;align-items:center;gap:10px;border:1px dashed var(--line);
  border-radius:10px;padding:10px 12px;background:#FAFBFC;margin-top:8px}
.vault .lock{font-size:18px}
.vault .ref{font:500 12px var(--mono);color:var(--muted)}
.vault .who2{flex:1;min-width:0}
.vault .who2 b{font:600 13px var(--sys)}

/* ---- audit -------------------------------------------------------------- */
.aev{display:flex;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px}
.aev:last-child{border-bottom:0}
.aev .dot{width:8px;height:8px;border-radius:99px;margin-top:6px;flex:none;background:var(--teal)}
.aev.den .dot{background:var(--red)}
.aev .what b{font-weight:600}
.aev .what small{display:block;color:var(--muted);font-size:12px}
.aev time{margin-left:auto;color:var(--muted);font:500 11px var(--mono);white-space:nowrap}

/* ---- misc --------------------------------------------------------------- */
.note{border-left:3px solid var(--amber);background:var(--amber-bg);border-radius:0 10px 10px 0;
  padding:10px 12px;font-size:13.5px;color:#6b4a12}
.note.plain{border-left-color:var(--ink2);background:#EEF3F9;color:var(--ink2)}
.back{background:none;border:0;color:var(--ink2);font:600 13px var(--sys);cursor:pointer;padding:0 0 10px}
.kv{display:flex;gap:8px;font-size:13.5px;margin-top:6px}
.kv b{color:var(--muted);font-weight:600;min-width:90px;flex:none}
.err{color:var(--red);font-size:13px;margin-top:8px;min-height:1em}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;padding:11px 16px;border-radius:10px;font-size:13.5px;
  max-width:92vw;opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}
#toast.show{opacity:1}
#toast.bad{background:var(--red)}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}

/* ---- desktop widening --------------------------------------------------- */
@media (min-width:640px){
  .clocks{grid-template-columns:1fr 1fr}   /* clocks sit two-up on a wide screen */
  .whoami .nm{max-width:none}
}

/* ---- Reporter tier & feedback loop (Increment R1, FR-S13/FR-A11) ---------- */
/* The report body shown to a reporter and on the triage report panel. */
.body{margin:8px 0 2px;color:var(--text);white-space:pre-wrap;line-height:1.45}
/* Feedback thread: the safety team's replies to a reporter. Author is a
   POSITION, never a person (FR-S04) — the markup has no place for a name. */
.fb{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.fb h4{font-size:13px;color:var(--muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
.fb.none{color:var(--muted);font-size:13px;font-style:italic}
.fbi{background:var(--teal-bg);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.fbmsg{color:var(--text);line-height:1.45}
/* The triage-side box for sending feedback to a reporter. */
.fbbox{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.fbbox textarea{width:100%;min-height:64px;margin:6px 0}
.fbbox .tick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px}
.fbbox .tick input{width:auto}
/* Department picture: a plain count row, one per type/status. */
.statrow{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);padding:7px 0;font-size:14px}
.statrow:last-child{border-bottom:0}
.statrow b{font-variant-numeric:tabular-nums}

/* ---- Risk-decision buttons (Increment R2, FR-B04) ------------------------- */
/* Only the decisions the zone allows are rendered; they sit in a row. */
.decbtns{display:flex;flex-wrap:wrap;gap:8px}

/* ---- Safety Manager override (Increment R5, FR-S14) ---------------------- */
/* The override banner shown to a Safety Manager acting without triage. */
.ovr-banner{margin-top:12px;border:1.5px solid var(--red);background:var(--red-bg);
  border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45}
.ovr-banner input{width:100%;margin-top:8px}
/* The "OVERRIDE USED" badge on an occurrence, and each override entry. */
.ovr-used{margin-top:12px;border-left:3px solid var(--red);background:var(--red-bg);
  border-radius:0 10px 10px 0;padding:8px 12px}
.ovr-tag{font:700 12px var(--sys);color:var(--red);letter-spacing:.03em;margin-bottom:6px}
.ovr-item{font-size:13px;padding:4px 0;border-top:1px solid var(--red-line, #e6c3bd)}
.ovr-item:first-of-type{border-top:0}
/* A flagged override row in the audit trail. */
.aev.ovr{background:var(--red-bg);border-radius:8px}

/* ---- Evening look-ahead alerts (Increment R4, FR-I04) -------------------- */
/* A look-ahead / unhandled alert is set off from the threshold-chain alerts. */
.alert-la{border-left:3px solid var(--violet)}