/* css/15-incident-sheet.css — INCIDENT DETAILS sheet.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- INCIDENT DETAILS SHEET (the detailed decision path) ---------- */
#incSheet{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:62;pointer-events:none}
#incSheet.on{pointer-events:auto}
#incSheet .veil{display:none}
#incSheet .box{position:absolute;inset:0;
  display:flex;flex-direction:row;gap:16px;padding:16px 18px;
  background:var(--bg);
  box-shadow:var(--sh-lg);transform:translateY(18px);opacity:0;
  transition:transform .28s var(--ease),opacity .28s var(--ease);overflow:hidden;scrollbar-width:none}
#incSheet .box::-webkit-scrollbar{display:none}
#incSheet.on .box{transform:none;opacity:1}
/* LEFT 62%: stacked media — captured frame ~60% of the column height, the
   looping camera clip ~40%. A tap on the frame swaps the split (compare mode:
   frame small, clip big) — cheap and useful for cross-checking the AI box
   against the live loop. */
/* 62/38 of the space that is LEFT after the 16 px gap: a bare 62%+38% is
   100% of the content box PLUS the gap, which clipped 16 px off the right of
   the side column at 1280 (W15-4). Single media pane now (W-seg): one
   #incMedia fills the whole left column and toggles frame/clip in place via
   a segmented control, instead of stacking two separately-sized panes. */
#incSheet .media{flex:0 0 calc(62% - 8px);min-width:0;min-height:0;height:100%}
#incSheet .media#incMedia{position:relative}
/* wave16 fix — the segmented control sat at top:12/left:12, directly on top
   of the pane's own "Captured frame" / "Camera clip" label (top:8/left:8),
   clipping it to "...d frame". The four corners now carry one thing each:
   label top-left, clip length top-right, capture time bottom-left, the
   frame/clip control bottom-right. */
/* the sheet's own column: main is pointer-events:none, and #incSheet.on turns
   pointer events back on for the whole overlay — but the two columns are
   re-asserted here so no ancestor rule can leave the decision row inert. */
#incSheet.on .box,#incSheet.on .media,#incSheet.on .side,#incSheet.on .side *{pointer-events:auto}
#incSheet .side{position:relative;z-index:2}
#incSheet .sacts .btn{position:relative;z-index:3}
#incSheet .media .segtabs{position:absolute;bottom:10px;right:10px;z-index:4;display:flex;gap:8px;padding:4px;border-radius:12px;background:rgba(8,14,12,.78);border:1px solid rgba(255,255,255,.14)}
#incSheet .media .segbtn{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;color:#fff;background:transparent;border:0}
#incSheet .media .segbtn svg{width:20px;height:20px}
#incSheet .media .segbtn[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
#incSheet .media .capchip{position:absolute;bottom:8px;left:8px;font-size:var(--fz-meta);font-weight:700;letter-spacing:.03em;color:var(--tx2);background:var(--glass-solid);border:1px solid var(--hair);padding:3px 9px;border-radius:999px;z-index:3}
#incSheet .media #incImg,#incSheet .media #incVid{transition:opacity .18s linear}
/* CLIP PLAYER (wave17): the clip is a recorded-evidence player, not a loop —
   a glass controls bar inset 12 px along the bottom of the pane, 48 px tall,
   with play/pause, a seekable scrubber, the timecode (whose duration half IS
   the old "Clip · 6 s" chip) and Replay. Auto-hides after 2.5 s while
   playing; always up when paused or ended. */
#incSheet .media .vctl{position:absolute;left:12px;right:12px;bottom:12px;height:48px;z-index:5;
  display:flex;align-items:center;gap:10px;padding:0 8px;border-radius:12px;
  background:rgba(8,14,12,.78);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  opacity:1;transition:opacity .18s linear}
#incSheet .media .vctl.hid{opacity:0;pointer-events:none}
#incSheet .media .vctl button{width:44px;height:44px;min-height:44px;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--hair);flex:0 0 auto;padding:0}
#incSheet .media .vctl button svg{width:20px;height:20px;pointer-events:none}
#incSheet .media .vctl button.hot{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
#incSheet .media .vscrub{flex:1 1 auto;min-width:40px;height:44px;position:relative;display:flex;align-items:center;cursor:pointer;touch-action:none}
#incSheet .media .vscrub .trk{position:absolute;left:0;right:0;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
#incSheet .media .vscrub .fil{position:absolute;left:0;height:4px;border-radius:2px;background:var(--acc);width:0}
#incSheet .media .vscrub .thb{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--acc);
  border:2px solid #06201A;left:0;transform:translateX(-10px);box-shadow:0 1px 4px rgba(0,0,0,.5)}
#incSheet .media .vtime{font-family:var(--mono);font-size:var(--fz-meta);font-weight:700;color:var(--tx2);
  font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
#incSheet .media .vtime b{color:var(--tx)}
#incSheet .media .vctl .cliplen{position:static;background:none;border:0;padding:0;color:var(--tx2);font-family:var(--mono);font-size:var(--fz-meta)}
/* the box drawn over the VIDEO, mapped to the rendered (contain-fit) rect */
#incSheet .media .box2v{position:absolute;border:2px solid var(--sev,var(--acc));border-radius:4px;z-index:2;pointer-events:none;
  transition:opacity .15s linear;opacity:1}
#incSheet .media .box2v.dim{opacity:.35}
#incSheet .media .box2v span{position:absolute;left:-2px;bottom:100%;margin-bottom:5px;background:var(--sev,var(--acc));color:#04150D;
  font-size:var(--fz-body);font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
#incSheet .media.mode-frame .box2v,#incSheet .media.mode-frame .vctl{opacity:0;pointer-events:none}
#incSheet .media.mode-clip .segtabs{bottom:70px}
#incSheet .media.mode-clip #incImg,#incSheet .media.mode-clip .box2{opacity:0;pointer-events:none}
#incSheet .media.mode-frame #incVid{opacity:0;pointer-events:none}
#incSheet .media.mode-frame .cliplen,#incSheet .media.mode-clip .capchip{display:none}
#incSheet .media.mode-clip .cliplen,#incSheet .media.mode-frame .capchip{display:inline-block}
#incSheet .media.mode-clip .frameonly{display:none}
#incSheet .media.mode-frame .cliponly{display:none}
#incSheet .shead{display:flex;align-items:flex-start;gap:12px}
#incSheet .shead .h{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
#incSheet .shead h3{margin:0;font-size:var(--fz-ttl-lg);font-weight:750;letter-spacing:-.025em;line-height:1.15;flex:1 1 100%}
#incSheet .shead .sevchip{font-size:var(--fz-meta);font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px;color:#04150D;background:var(--sev,var(--acc))}
/* 13px is the in-car legibility floor for the mono id line (EX44) — the
   full-screen sheet has the room, so it does not shrink below the base rule. */
#incSheet .shead .confline{font-size:var(--fz-meta);color:var(--tx2)}
#incSheet .sclose{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--tx2);background:rgba(255,255,255,.06);border:1px solid var(--hair);flex:0 0 auto}
/* RIGHT 38%: header, a 2-column fact grid (severity/confidence live in the
   header now, so only camera/street/time/gps/kpi/sla remain), status line,
   then the decision row pinned to the bottom of the column. */
#incSheet .side{flex:0 0 calc(38% - 8px);min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0;height:100%;overflow-y:auto;scrollbar-width:none}
#incSheet .side::-webkit-scrollbar{display:none}
#incSheet .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto}
#incSheet .fact{background:rgba(255,255,255,.045);border:1px solid var(--hair);border-radius:12px;padding:8px 11px;min-width:0}
#incSheet .fact .l{font-size:var(--fz-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-weight:700}
#incSheet .fact .v{font-size:var(--fz-body);font-weight:650;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#incSheet .fact .v.num{font-family:var(--mono)}
#incSheet .ev{position:relative;border-radius:16px;overflow:hidden;background:#050807;border:1px solid var(--hair);min-height:0}
#incSheet .ev img,#incSheet .ev video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
#incSheet .ev .evlab{position:absolute;top:8px;left:8px;font-size:var(--fz-meta);font-weight:700;letter-spacing:.02em;background:var(--glass-solid);border:1px solid var(--hair);padding:4px 9px;border-radius:999px;z-index:3}
#incSheet .ev .cliplen{position:absolute;top:8px;right:8px;font-size:var(--fz-meta);font-weight:700;letter-spacing:.03em;color:var(--acc);background:rgba(34,200,130,.14);border:1px solid rgba(34,200,130,.4);padding:3px 9px;border-radius:999px;z-index:3}
#incSheet .ev .box2{position:absolute;border:2px solid var(--acc);border-radius:4px;z-index:2;pointer-events:none}
#incSheet .ev .box2 span{position:absolute;left:-2px;bottom:100%;margin-bottom:5px;background:var(--acc);color:var(--on-acc);font-size:var(--fz-body);font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
#incSheet .ev.crit .box2{border-color:var(--crit)}
#incSheet .ev.crit .box2 span{background:var(--crit);color:#1A0608}
#incSheet .ev .noev{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fz-body);color:var(--tx3);text-align:center;padding:12px}
#incSheet .dupnote{display:flex;align-items:center;gap:10px;font-size:var(--fz-body);color:var(--minor);background:rgba(255,209,102,.10);border:1px solid rgba(255,209,102,.3);border-radius:12px;padding:9px 12px;flex:0 0 auto}
#incSheet .dupnote button{margin-left:auto;height:44px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--hair2);color:var(--tx);font-size:var(--fz-md);font-weight:700}
/* wave13: the sheet's action row IS the card's action row — same three
   labelled buttons at equal flex widths, same colours, same order — so a
   decision looks and lands identically on the card and in the sheet. Now
   pinned to the bottom of the right column, 56 px tall. */
#incSheet .sacts{margin-top:auto;display:flex;flex-direction:row;gap:10px;flex:0 0 auto}
#incSheet .sacts .btn{flex:1 1 0;min-width:0;height:56px;min-height:56px;font-size:var(--fz-md-lg);
  border-radius:13px;gap:7px;padding:0 8px;white-space:nowrap;overflow:hidden}
#incSheet .sacts .btn svg{width:19px;height:19px;flex:0 0 auto}
#incSheet .sacts .btn[hidden]{display:none}
/* loop pass 1 (U3): in the pending state this line is the only thing between
   the fact grid and the two decisions, and it was set at body size with a 8 px
   dot -- a footnote where it is actually the sheet's answer to "what happens
   if I tap Valid". 16 px, a 10 px dot, and the fact grid drops 20 px off the
   KPI row so the column's empty space sits under the reading, not inside it. */
#incSheet .statusline{font-size:16px;color:var(--tx2);display:flex;align-items:center;gap:9px;flex:0 0 auto}
#incSheet .statusline i{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--info)}
#incSheet .facts{margin-top:8px}


/* =====================================================================
   REVAMP 10 — THE SHEET IS FLIPPED: TEXT LEFT, EVIDENCE RIGHT.
   Client, 14 Sep. The reading order in the cab is left-to-right and the
   decision is a reading task — what it is, which KPI it violates, how
   confident, how long the ESP has — with the frame as the corroboration on
   the right, not the headline. `row-reverse` does it without moving a single
   node: the markup order (media, side) still puts the evidence pane first for
   a screen reader and for the narrow layouts in 20/21, where the two columns
   stack rather than sit side by side.
   ===================================================================== */
#incSheet .box{flex-direction:row-reverse}
/* the title is the first thing read, so it is the biggest thing on the page */
#incSheet .shead h3{font-size:26px;font-weight:800;letter-spacing:-.025em}
#incSheet .shead .confline{font-family:var(--mono);letter-spacing:.02em}
/* the KPI row: the same labelled fact the hero card carries, at the same
   weights, directly under the title */
#incSheet .kpirow{display:flex;align-items:baseline;gap:10px;flex:0 0 auto;min-width:0}
#incSheet .kpirow .kl{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3)}
#incSheet .kpirow .kv{font-size:17px;font-weight:600;color:var(--tx);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* every measured value is mono now, not only the numeric ones: the fact grid
   is a HUD readout and one proportional value in it broke the column. */
#incSheet .fact .v{font-family:var(--mono);letter-spacing:-.01em}
/* the timeline is context, not the subject, in the flipped column */
#incSheet .tl{max-height:118px}

/* --- the assignment process takes the whole left column ------------------
   Same pane, same ring, same two lines as the hero card (css/17). Everything
   else in the column stands down for the 3.8 s it runs, and closeIncident()
   -- armed by the Valid handler -- closes the sheet at 3.7 s, just before
   decide()'s settle timer would put the ordinary content back. */
#incSheet.proc .side>*{display:none}
#incSheet.proc .side>#incProc{display:flex;flex:1 1 auto;align-items:center;min-height:0}
/* client pass 23: the sheet's copy of the pane follows the Drive hero into the
   vertical stack -- same component, same beat, so the two must not read
   differently. Only the gap and the padding are the sheet's own. */
#incSheet #incProc .procpane{display:flex;width:100%;min-height:0;padding:0;gap:16px}
#incSheet #incProc .procring{width:84px;height:84px}
#incSheet #incProc .procring.done svg{width:40px;height:40px}
#incSheet #incProc .proctx b{font-size:26px}
#incSheet #incProc .proctx span{font-size:16px;white-space:normal}