/* EponEdge Vision — Industrial AI Command Center.
   "Paper and ink" light console: calm warm neutrals, flat rounded surfaces,
   no shadows, indigo accent used sparingly, pastel washes for empty states. */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2'); }

:root {
  --bg:        #F4F3F3;
  --panel:     #FFFFFF;
  --panel-2:   #ECECEC;
  --panel-3:   #E2E2E2;
  --line:      #E3E1DF;
  --line-2:    #D3D1CF;
  --ink:       #1D1C1B;
  --ink-dim:   #45423F;
  --muted:     #767069;
  --faint:     #8F8984;

  --primary:   #5864ED;
  --primary-light: #5864ED;
  --primary-deep:  #4348C9;
  --primary-a8:    rgba(88,100,237,.07);
  --primary-a16:   rgba(88,100,237,.16);
  --primary-a30:   rgba(88,100,237,.34);
  --primary-btn:   #1D1C1B;
  --primary-btn-hover: #33312F;

  --blue:   #5864ED;  --blue-a: rgba(88,100,237,.09);
  --grad-brand: linear-gradient(100deg, #5864ED 0%, #8B7CF0 100%);

  /* pastel accents (empty states, washes) */
  --peach:  #FFD3BE; --butter: #FDE3A2; --pink: #FFDFEB; --sky: #C4EEFE; --mint: #D9F2E2;

  --ok:   #177449;  --ok-a:   rgba(28,138,90,.10);
  --warn: #7E5809;  --warn-a: rgba(253,227,162,.55);
  --bad:  #B23F28;  --bad-a:  rgba(194,69,45,.09);
  --crit: #C72B4B;  --crit-a: rgba(199,43,75,.10);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --r-sm: 8px; --r: 12px; --r-lg: 24px;
  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: none;
  --shadow-cta: none;
  --sidebar-w: 226px;
  --gutter: 32px;
  --t: .15s ease;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html, body { margin:0; padding:0; }
body {
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  color: var(--ink); background: var(--bg); min-height: 100vh;
}
/* author display rules must never resurrect [hidden] elements */
[hidden] { display:none !important; }
::placeholder { color:var(--muted); opacity:1; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
::selection { background: var(--primary-a30); }
a { color: var(--primary); text-decoration: none; }
h1,h2,h3,h4 { line-height:1.3; margin:0; }
h1,h2 { font-family: var(--font-display); font-weight:400; letter-spacing:-.01em; }
h1 { font-size:1.5rem; } h2 { font-size:1.12rem; } h3 { font-size:.95rem; font-weight:500; }
p { margin:0; }
b, strong { font-weight:500; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num  { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.muted { color:var(--muted); } .faint { color:var(--faint); }

/* ---------- Shell ---------- */
.shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
.sidebar {
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:transparent;             /* sits directly on the page background */
  display:flex; flex-direction:column; padding:18px 14px 18px;
}
.brand { display:flex; align-items:center; gap:.55rem; padding:2px 6px 16px; }
.brand .logo { width:30px; height:30px; border-radius:9px; background:var(--ink);
  display:grid; place-items:center; color:var(--bg); font:500 15px/1 var(--font); }
.brand .word { font:500 1.02rem var(--font); letter-spacing:-.01em; color:var(--ink); }
.brand .word em { font-style:normal; color:var(--primary); }
.brand .sub { display:block; font:400 .64rem var(--font); letter-spacing:.4px; color:var(--muted); }

.nav { display:grid; gap:2px; margin-top:4px; }
/* nav groups are separated by whitespace, not labels or rules */
.nav-label { height:18px; overflow:hidden; font-size:0; }
.nav a {
  display:flex; align-items:center; gap:.6rem; padding:8px 12px; border-radius:12px;
  color:var(--ink-dim); font-size:.875rem; font-weight:400; position:relative; min-height:36px;
  white-space:nowrap; transition:background var(--t), color var(--t);
}
.nav a:hover { background:#E5E4E3; color:var(--ink); }
.nav a.active { background:#DCDBDA; color:var(--ink); font-weight:500; }
.nav a svg { width:16px; height:16px; flex:none; order:3; margin-left:auto; opacity:.65; }
.nav .nav-pill { order:2; margin-left:auto; font-size:.64rem; font-weight:500; padding:1px 7px; border-radius:999px;
  background:var(--crit); color:#fff; font-variant-numeric:tabular-nums; }
.nav a:has(.nav-pill:not([hidden])) svg { margin-left:6px; }

.newmenu { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30;
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:6px; display:grid; gap:2px; }
.newmenu a { display:flex; align-items:center; gap:.6rem; padding:9px 12px; border-radius:10px;
  color:var(--ink-dim); font-size:.84rem; }
.newmenu a:hover { background:var(--panel-2); color:var(--ink); }
.newmenu a svg { width:15px; height:15px; opacity:.7; }
.brand .drawer-close { display:none; margin-left:auto; }
.sidebar .foot { margin-top:auto; display:grid; gap:10px; padding-top:14px; }
.sys-card { border:1px solid var(--line-2); border-radius:16px; padding:12px 13px; background:var(--panel); display:grid; gap:6px; }
.sys-card .row { display:flex; justify-content:space-between; font-size:.74rem; color:var(--muted); }
.sys-card .row b { color:var(--ink-dim); font-weight:500; font-variant-numeric:tabular-nums; }
.user-row { display:flex; align-items:center; gap:.6rem; padding:4px 6px; }
.user-row .avatar { width:28px; height:28px; border-radius:50%; background:var(--peach); color:var(--ink);
  display:grid; place-items:center; font-size:.72rem; font-weight:500; }
.user-row .who { font-size:.76rem; line-height:1.25; overflow:hidden; color:var(--ink-dim); }
.user-row .who .em { color:var(--muted); font-size:.68rem; display:block; text-overflow:ellipsis; overflow:hidden; }
.user-row a { margin-left:auto; color:var(--muted); display:inline-flex; }
.user-row a svg { width:16px; height:16px; }
.user-row a:hover { color:var(--bad); }

.content { min-width:0; display:flex; flex-direction:column; }
.topbar { display:none; }
.page { width:100%; padding:32px var(--gutter) 56px; display:grid; gap:22px; align-content:start; }
/* grid items must be allowed to shrink, or wide tables blow the page open */
.page > *, .grid > *, .grid-main > * { min-width:0; }
.page-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.page-head .sub { color:var(--muted); font-size:.85rem; }
.page-head .actions { margin-left:auto; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

.grid { display:grid; gap:14px; }
.grid-2 { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.grid-3 { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.grid-5 { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.grid-main { display:grid; gap:16px; grid-template-columns:minmax(0,2.2fr) minmax(320px,1fr); align-items:start; }
.toolbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.toolbar .input { min-width:0; }

/* ---------- Cards ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; }
.card.flush { padding:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  position:relative; /* contain absolutely-positioned children (.sr-only) in the scroll area */ }
.card-title { font-family:var(--font); font-size:.95rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--ink); display:flex; align-items:center; gap:.5rem; margin:0; }
.card-title .right { margin-left:auto; font-weight:400; font-size:.78rem; }

.stat { display:grid; gap:4px; }
.stat .v { font:500 1.7rem/1.1 var(--font); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .v small { font-size:.9rem; color:var(--muted); font-weight:400; }
.stat .d { font-size:.76rem; color:var(--muted); }
.stat.accent .v { color:var(--primary); }
.stat.danger .v { color:var(--crit); }

/* ---------- Buttons / forms ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font:inherit; font-size:.85rem;
  font-weight:400; padding:8px 14px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; background:var(--panel-3); color:var(--ink);
  transition:background var(--t), border-color var(--t); }
.btn:hover { background:#D8D7D5; }
.btn:focus-visible, .suggestions button:focus-visible, [role=button]:focus-visible, .tl-check input:focus-visible,
.res-card .sel input:focus-visible, .nav a:focus-visible, .user-row a:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px; }
.btn svg { width:15px; height:15px; }
.btn-primary { background:var(--primary-btn); border-color:var(--primary-btn); color:var(--bg); font-weight:400; border-radius:12px; }
.btn-primary:hover { background:var(--primary-btn-hover); border-color:var(--primary-btn-hover); }
.btn-danger { color:var(--bad); border-color:rgba(194,69,45,.25); background:transparent; }
.btn-danger:hover { background:var(--bad-a); }
.btn.sm { padding:5px 11px; font-size:.78rem; border-radius:8px; }
.btn.lg { padding:11px 18px; font-size:.95rem; border-radius:12px; }
.btn.block { width:100%; }
.btn[disabled] { background:var(--panel-3); color:var(--muted); opacity:1; pointer-events:none; }
.btn-primary[disabled] { background:var(--primary-btn); border-color:var(--primary-btn); color:var(--bg); opacity:.45; }

.field { display:grid; gap:5px; }
.field > span { color:var(--ink-dim); font-size:.82rem; font-weight:400; }
.input, .field input:not([type=checkbox]):not([type=radio]), .field textarea, .field select {
  font:inherit; font-size:.88rem; padding:8px 12px; background:var(--panel);
  border:1px solid var(--line-2); color:var(--ink); border-radius:12px; width:100%;
  transition:border-color var(--t), box-shadow var(--t); }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-a16); }
.field select option { background:var(--panel); }
.checkbox { display:flex; align-items:center; gap:.55rem; font-size:.85rem; color:var(--ink-dim); }
.checkbox input { accent-color:var(--ink); width:15px; height:15px; border-radius:4px; }

/* segmented multi-toggle — e.g. the Incidents confidence filter.
   Each segment toggles independently; the tier dot carries the colour. */
.seg-wrap { display:inline-flex; align-items:center; gap:.5rem; }
.seg-label { font-size:.78rem; color:var(--muted); }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:10px;
  background:var(--panel); overflow:hidden; }
.seg-btn { font:inherit; font-size:.8rem; line-height:1; display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:background var(--t), color var(--t); }
.seg-btn:first-child { border-left:0; }
.seg-btn::before { content:""; width:6px; height:6px; border-radius:50%;
  background:var(--dot,var(--muted)); opacity:.3; transition:opacity var(--t); }
.seg-btn:hover { background:var(--panel-2); color:var(--ink); }
.seg-btn[aria-pressed="true"] { background:var(--panel-3); color:var(--ink); font-weight:500; }
.seg-btn[aria-pressed="true"]::before { opacity:1; }
.seg-btn:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.seg-btn[data-conf="high"]   { --dot:var(--ok); }
.seg-btn[data-conf="medium"] { --dot:var(--warn); }
.seg-btn[data-conf="low"]    { --dot:var(--bad); }
.form-actions { display:flex; justify-content:flex-end; gap:.6rem; }

/* ---------- Table ---------- */
.table { width:100%; border-collapse:collapse; font-size:.85rem; }
.table th, .table td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); }
.table th { color:var(--muted); font-weight:500; font-size:.74rem; letter-spacing:0; text-transform:none; background:#FAFAF9; white-space:nowrap; }
.table th.num { text-align:right; }
.table tbody tr:hover td { background:#FAFAF9; }
.table tbody tr:last-child td { border-bottom:none; }
.table .cell-main { font-weight:500; color:var(--ink); }
.table .cell-sub { color:var(--muted); font-size:.75rem; }
.table .num { text-align:right; }
.table .row-link { cursor:pointer; }

/* ---------- Chips ---------- */
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:2px 10px; border-radius:999px;
  background:transparent; border:1px solid var(--line-2); font-size:.72rem; font-weight:400; color:var(--ink-dim); }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }
.chip-live     { color:var(--ok); border-color:rgba(28,138,90,.35); }
.chip-live::before { animation:pulse 1.6s ease-in-out infinite; }
.chip-connecting { color:var(--warn); border-color:rgba(154,107,11,.35); }
.chip-connecting::before { animation:pulse 1.2s ease-in-out infinite; }
.chip-error, .chip-down { color:var(--bad); border-color:rgba(194,69,45,.35); }
.chip-offline, .chip-stopped { color:var(--muted); }
.chip-embed_only { color:var(--primary); border-color:var(--primary-a30); }
.chip-up, .chip-done, .chip-confirmed, .chip-analyzed, .chip-indexed { color:var(--ok); border-color:rgba(28,138,90,.35); }
.chip-processing, .chip-analyzing, .chip-pending, .chip-running, .chip-downloading { color:var(--warn); border-color:rgba(154,107,11,.35); }
.chip-processing::before, .chip-analyzing::before, .chip-downloading::before { animation:pulse 1.2s ease-in-out infinite; }
.chip-dismissed, .chip-skipped { color:var(--muted); }
.chip-conf-high   { color:var(--ok); border-color:rgba(28,138,90,.35); }
.chip-conf-medium { color:var(--warn); border-color:rgba(154,107,11,.35); }
.chip-conf-low    { color:var(--bad); border-color:rgba(194,69,45,.35); }
.sev { display:inline-flex; align-items:center; gap:.35rem; padding:2px 10px; border-radius:999px;
  font-size:.68rem; font-weight:500; letter-spacing:.4px; text-transform:uppercase; border:1px solid transparent; }
.sev-low      { color:var(--primary); background:var(--blue-a); }
.sev-medium   { color:var(--warn); background:var(--warn-a); }
.sev-high     { color:var(--bad);  background:var(--bad-a); }
.sev-critical { color:#8D1F38; background:var(--pink); border-color:rgba(199,43,75,.4); }
@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:.3;} }

/* ---------- Camera wall ---------- */
.wall { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); }
.cam-tile { position:relative; border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  background:#232120; transition:border-color var(--t); }
.cam-tile:hover { border-color:var(--ink); }
.cam-tile .vp { aspect-ratio:16/9; position:relative; display:grid; place-items:center; cursor:pointer; }
.cam-tile .vp img, .cam-tile .vp iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.cam-tile .vp .novideo { color:#B9B4AF; font-size:.8rem; display:grid; gap:8px; justify-items:center; padding:20px; text-align:center;
  background:linear-gradient(180deg, var(--peach) 0%, #8F8984 160%); position:absolute; inset:0; place-content:center; }
.cam-tile .vp canvas.zones { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cam-tile .head { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:.5rem;
  padding:8px 10px; background:linear-gradient(180deg, rgba(20,18,17,.78), transparent); z-index:2; color:#fff; }
.cam-tile .head .nm { font-size:.8rem; font-weight:500;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-tile .head .loc { font-size:.68rem; color:rgba(255,255,255,.7); flex:none; }
.cam-tile .foot { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; gap:.6rem;
  padding:7px 10px; background:linear-gradient(0deg, rgba(20,18,17,.78), transparent); z-index:2;
  font-size:.7rem; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; }
.cam-tile .foot .spacer { margin-left:auto; }
.rec-dot { display:inline-flex; align-items:center; gap:.3rem; font-size:.66rem; font-weight:500; letter-spacing:1px; color:#6EE7A0; }
.rec-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:#6EE7A0; animation:pulse 1.6s infinite; }
.rec-dot.off { color:rgba(255,255,255,.55); } .rec-dot.off::before { background:rgba(255,255,255,.55); animation:none; }
.ai-badge { font-size:.62rem; font-weight:500; letter-spacing:.8px; padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); }

/* ---------- Timeline ---------- */
.tl { display:grid; gap:10px; }
.tl-item { display:grid; grid-template-columns:36px 150px 1fr; gap:0 14px; border:1px solid var(--line); background:var(--panel);
  border-radius:16px; overflow:hidden; cursor:pointer; transition:border-color var(--t); }
.tl-check { display:grid; place-items:center; cursor:pointer; border-right:1px solid var(--line); background:#FAFAF9; }
.tl-check input { width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.tl-item:hover { border-color:var(--line-2); }
.tl-item .th { aspect-ratio:16/9; background:linear-gradient(180deg, var(--sky), #8F8984 170%) center/cover no-repeat; min-height:84px; }
.tl-item .bd { padding:10px 14px 10px 0; display:grid; gap:5px; align-content:center; }
.tl-item .ti { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-weight:500; font-size:.9rem; }
.tl-item .meta { display:flex; gap:1rem; font-size:.74rem; color:var(--muted); flex-wrap:wrap; }
.tl-item .ai { font-size:.78rem; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Search results ---------- */
.res-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.res-card { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); cursor:pointer;
  transition:border-color var(--t); }
.res-card:hover { border-color:var(--ink); }
.res-card .th { aspect-ratio:16/9; background:linear-gradient(180deg, var(--peach), #8F8984 170%) center/cover no-repeat; position:relative; }
.res-card .score { position:absolute; top:8px; right:8px; font-size:.66rem; font-weight:500; padding:2px 8px;
  border-radius:999px; background:rgba(29,28,27,.72); color:#fff; font-variant-numeric:tabular-nums; }
.res-card .sel { position:absolute; top:6px; left:6px; z-index:2; display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px; background:rgba(29,28,27,.45); cursor:pointer; }
.res-card .sel input { width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.res-card .bd { padding:10px 12px; display:grid; gap:4px; }
.res-card .ti { font-size:.84rem; font-weight:500; }
.res-card .meta { font-size:.72rem; color:var(--muted); display:flex; gap:.8rem; }

/* ---------- Mini incident rows (command center sidebar) ---------- */
.row-mini { display:flex; gap:10px; align-items:center; padding:10px 16px; border-top:1px solid var(--line);
  cursor:pointer; transition:background var(--t); }
.row-mini:hover { background:#FAFAF9; }
.row-mini img { width:64px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; flex:none; }
.row-mini .bd { min-width:0; }
.row-mini .ti { font-size:.82rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-mini .sub { color:var(--muted); font-size:.72rem; }
.row-mini .sev { margin-left:auto; flex:none; }

/* ---------- Chat ---------- */
.chat { display:grid; grid-template-rows:1fr auto; min-height:0; height:calc(100dvh - 170px); }
.chat-log { overflow-y:auto; display:grid; gap:14px; padding:4px 2px 16px; align-content:start; }
.msg { max-width:760px; display:grid; gap:8px; }
.msg .who { font-size:.7rem; font-weight:500; letter-spacing:.4px; color:var(--muted); }
.msg .bubble { border:1px solid var(--line); border-radius:16px; padding:12px 15px; font-size:.9rem; background:var(--panel); }
.msg.user { justify-self:end; }
.msg.user .bubble { background:var(--panel-2); border-color:transparent; }
.msg .bubble :is(h1,h2,h3) { font-size:.95rem; margin:.6em 0 .3em; }
.msg .bubble p { margin:.4em 0; } .msg .bubble ul, .msg .bubble ol { margin:.4em 0; padding-left:1.3em; }
.msg .bubble code { font-family:var(--mono); font-size:.8rem; background:var(--panel-2); padding:1px 5px; border-radius:5px; }
.msg .bubble pre { background:var(--ink); color:#ECEAE7; border:0; border-radius:12px; padding:12px; overflow-x:auto; }
.msg .bubble table { border-collapse:collapse; margin:.5em 0; font-size:.82rem; }
.msg .bubble th, .msg .bubble td { border:1px solid var(--line-2); padding:4px 9px; }
.tool-note { display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; color:var(--muted);
  border:1px dashed var(--line-2); border-radius:999px; padding:3px 11px; }
.tool-note .spinner { width:11px; height:11px; }
.evidence { display:flex; gap:10px; flex-wrap:wrap; }
.ev-card { display:grid; gap:4px; border:1px solid var(--line-2); border-radius:12px; padding:8px 11px;
  background:var(--panel); font-size:.76rem; cursor:pointer; min-width:170px; transition:border-color var(--t); }
.ev-card:hover { border-color:var(--ink); }
.ev-card .k { font-size:.64rem; font-weight:500; letter-spacing:.6px; text-transform:uppercase; color:var(--primary); }
.chat-input { display:flex; gap:.6rem; padding-top:12px; border-top:1px solid var(--line); }
.chat-input textarea { flex:1; resize:none; min-height:48px; max-height:160px; }
.suggestions { display:flex; gap:.5rem; flex-wrap:wrap; }
.suggestions button { font-size:.76rem; padding:5px 12px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink-dim); cursor:pointer; transition:border-color var(--t), color var(--t); }
.suggestions button:hover { border-color:var(--ink); color:var(--ink); }
.suggestions button.active { border-color:var(--ink); color:var(--ink); background:var(--panel-3); }

/* ---------- Gauges / meters ---------- */
.meter { display:grid; gap:4px; }
.meter .lbl { display:flex; justify-content:space-between; font-size:.74rem; color:var(--muted); }
.meter .lbl b { color:var(--ink-dim); font-variant-numeric:tabular-nums; font-weight:500; }
.meter .bar { height:7px; border-radius:999px; background:var(--panel-2); overflow:hidden; }
.meter .bar i { display:block; height:100%; border-radius:999px; background:var(--primary);
  transition:width .6s ease; }
.meter.warn .bar i { background:var(--bad); }
.gpu-head { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.gpu-head .uuid { font-size:.64rem; color:var(--muted); font-family:var(--mono); }

/* ---------- Toggle switch ---------- */
.switch { position:relative; display:inline-flex; flex:none; cursor:pointer; }
.switch input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.switch .track { width:38px; height:21px; border-radius:999px; background:var(--panel-3);
  border:1px solid var(--line-2); transition:background var(--t), border-color var(--t); }
.switch .track::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px;
  border-radius:50%; background:#fff; transition:transform .15s ease, background var(--t); }
.switch input:checked + .track { background:var(--ink); border-color:var(--ink); }
.switch input:checked + .track::after { transform:translateX(17px); background:var(--bg); }
.switch input:focus-visible + .track { outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- Upload dropzone ---------- */
.drop { border:2px dashed var(--line-2); border-radius:var(--r-lg); padding:34px 20px; display:grid; gap:8px;
  justify-items:center; color:var(--ink-dim); font-size:.86rem; cursor:pointer; text-align:center;
  background:linear-gradient(180deg, rgba(255,211,190,.35) 0%, rgba(196,238,254,.22) 100%);
  transition:border-color var(--t); }
.drop svg { width:28px; height:28px; opacity:.6; }
.drop:hover, .drop.over { border-color:var(--primary); }
.progress { height:7px; border-radius:999px; background:var(--panel-2); overflow:hidden; }
.progress i { display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .2s; }

/* ---------- Modal / toasts / misc ---------- */
dialog.modal { border:1px solid var(--line-2); border-radius:var(--r-lg); padding:0; max-width:860px;
  width:calc(100% - 40px); color:var(--ink); background:var(--panel); }
dialog.modal::backdrop { background:rgba(29,28,27,.35); backdrop-filter:blur(2px); }
dialog.modal .mhead { display:flex; align-items:center; gap:.7rem; padding:14px 18px; border-bottom:1px solid var(--line); }
dialog.modal .mbody { padding:16px 18px; display:grid; gap:14px; max-height:76vh; overflow-y:auto; }
dialog.modal .mhead button { margin-left:auto; }

.toasts { position:fixed; right:20px; bottom:20px; z-index:90; display:grid; gap:8px;
  max-width:min(400px, calc(100vw - 40px)); }
.toast { display:flex; gap:.6rem; align-items:flex-start; padding:11px 14px; border-radius:16px; font-size:.85rem;
  background:var(--panel); border:1px solid var(--line-2); color:var(--ink);
  animation:toast-in .2s ease; }
.toast::before { content:""; flex:none; margin-top:5px; width:8px; height:8px; border-radius:50%; background:var(--primary); }
.toast-error::before { background:var(--bad); }
.toast-success::before { background:var(--ok); }
.toast button { margin-left:auto; background:none; border:0; color:var(--faint); cursor:pointer; font-size:1rem; }
@keyframes toast-in { from { transform:translateY(8px); opacity:0; } }

.spinner { width:14px; height:14px; border:2px solid var(--line-2); border-top-color:var(--primary); border-radius:50%;
  animation:spin .7s linear infinite; display:none; }
.busy .spinner { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

.callout { display:flex; gap:.7rem; align-items:flex-start; padding:12px 15px; border-radius:16px;
  font-size:.83rem; border:1px solid var(--line); background:var(--panel); color:var(--ink-dim); }
.callout svg { width:18px; height:18px; flex:none; margin-top:2px; }
.callout.warn { border-color:transparent; background:var(--butter); color:#5D430C; }
.callout.bad  { border-color:transparent; background:var(--pink); color:#8D2F3E; }
.callout.ok   { border-color:transparent; background:var(--mint); color:#17603F; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:.82rem; }
.kv dt { color:var(--muted); } .kv dd { margin:0; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.empty { display:grid; gap:8px; justify-items:center; padding:38px 16px; color:var(--muted); font-size:.86rem; text-align:center; }
.empty svg { width:30px; height:30px; opacity:.5; }
video.player, img.player { width:100%; border-radius:12px; background:#1D1C1B; display:block; }
/* detection-box overlay on incident clips (normalized coords → percentages) */
.player-wrap { position:relative; }
.player-wrap .bbox-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:12px; }
.player-wrap .bbox { position:absolute; border:2px solid var(--primary); border-radius:6px;
  outline:1px solid rgba(255,255,255,.75); animation:bbox-in .55s ease-out 2; }
@keyframes bbox-in { 0%{opacity:1} 40%{opacity:.15} 100%{opacity:1} }
.player-wrap .bbox span { position:absolute; left:-2px; bottom:100%; background:var(--primary); color:#fff;
  font-size:.66rem; line-height:1.5; padding:0 7px; border-radius:6px 6px 0 0; white-space:nowrap; }

/* ---------- Auth ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.auth-pitch { padding:48px 56px; display:grid; align-content:center; gap:18px;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,211,190,.55), transparent 60%),
    radial-gradient(700px 600px at 100% 100%, rgba(196,238,254,.5), transparent 70%), var(--bg); }
.auth-pitch h1 { font-size:2.1rem; line-height:1.15; letter-spacing:-.02em; font-weight:400; }
.auth-pitch ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; color:var(--ink-dim); font-size:.9rem; }
.auth-pitch li::before { content:"✓"; color:var(--primary); font-weight:500; margin-right:.55rem; }
.auth-form { display:grid; place-items:center; padding:40px 24px; background:var(--panel); border-left:1px solid var(--line); }
.auth-card { width:100%; max-width:380px; display:grid; gap:18px; }
.auth-card h2 { font-weight:500; }
.small { font-size:.82rem; }
.tiny  { font-size:.74rem; }
.auth-card .foot { font-size:.84rem; color:var(--faint); }
.auth-card .foot a { color:var(--primary); }
.auth-card .code-input { font-family:var(--mono); font-size:1.5rem; letter-spacing:.45em; text-align:center; }
.link-btn { font:inherit; background:none; border:0; padding:0; color:var(--primary); cursor:pointer; text-decoration:underline; }
/* Social sign-in */
.social { display:grid; gap:10px; }
.social-sep { display:flex; align-items:center; gap:.8rem; color:var(--faint); font-size:.76rem; }
.social-sep::before, .social-sep::after { content:""; flex:1; height:1px; background:var(--line); }
.social-row { display:flex; justify-content:center; gap:8px; }
.social-btn { gap:.5rem; padding:9px 10px; min-width:180px; }
.social-btn svg { width:16px; height:16px; flex:none; }
.social-btn[aria-disabled="true"] { cursor:not-allowed; }
.social-btn[aria-disabled="true"] svg { filter:grayscale(1); }
@media (max-width:420px){ .social-btn { flex:1; min-width:0; } }

/* ---------- Nav drawer scrim ---------- */
.scrim { position:fixed; inset:0; z-index:49; background:rgba(29,28,27,.3);
  opacity:0; pointer-events:none; transition:opacity .2s ease; }
body.nav-open .scrim { opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:1180px){ .grid-main { grid-template-columns:1fr; } .grid-main > aside { order:-1; } .grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:900px){
  .shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(300px,84vw); transform:translateX(-100%);
    transition:transform .2s ease; z-index:50; background:var(--bg); border-right:1px solid var(--line-2); }
  body.nav-open .sidebar { transform:translateX(0); }
  .topbar { display:flex; align-items:center; gap:.8rem; padding:12px var(--gutter); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:40; background:var(--bg); }
  body.nav-open { overflow:hidden; }
  .brand .drawer-close { display:inline-flex; }
  .card.flush { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .auth { grid-template-columns:1fr; }
  .auth-form { order:-1; border-left:0; border-bottom:1px solid var(--line); } /* sign-in first on mobile */
  .auth-pitch { padding:36px 24px; }
  .tl-item { grid-template-columns:40px 110px 1fr; }
  .tl-check input { width:18px; height:18px; }
  .chat { height:calc(100dvh - 230px); }
}
@media (pointer:coarse){
  .btn.sm { min-height:40px; }
  .user-row a { padding:10px; margin-right:-10px; }
  .suggestions button { min-height:36px; }
  dialog.modal .mhead button { min-height:36px; min-width:36px; }
}
@media (max-width:560px){
  .page { padding:18px 14px 34px; }
  .page-head .actions { width:100%; }
  .page-head .actions > * { flex:1 1 45%; }
  .toolbar > .input[type=text], .toolbar > input.input { flex:1 1 100%; }
  .grid-5 { grid-template-columns:1fr 1fr; }
  .grid-5 > :last-child:nth-child(odd) { grid-column:1/-1; }
  .form-actions { flex-wrap:wrap; }
  dialog.modal { width:calc(100% - 20px); }
}

/* ---- video transcript panel ---- */
.transcript{max-height:320px;overflow-y:auto;display:grid;gap:2px;scroll-behavior:smooth}
.tr-line{display:flex;gap:.6rem;padding:5px 8px;border-radius:10px;cursor:pointer;
  font-size:.82rem;line-height:1.45;color:var(--ink-dim)}
.tr-line:hover,.tr-line:focus-visible{background:var(--panel-2)}
.tr-line.active{background:var(--primary-a8);color:var(--ink)}
.tr-line.active .tr-t{color:var(--primary)}
.tr-t{color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto;font-size:.74rem;padding-top:2px}