/* EHM kit stylesheet. B's CSS (ehm_journeys_prototype.html) restyled to tokens and extended in the same idiom.
   Only var(--token) values: no hex, no px. Tokens come from tokens.css (generated). */
:root{
  --line: var(--size-border-width-thin) solid var(--border-subtle);
  --line-strong: var(--size-border-width-thin) solid var(--border-strong);
  --focus: var(--size-focus-ring-width) solid var(--focus-ring);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font:var(--font-body)}
a{color:var(--text-link);text-decoration:none} a:hover{color:var(--action-primary-hover);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:var(--focus);outline-offset:var(--size-focus-ring-offset)}
.mono{font-family:var(--family-mono)}
.num{font-family:var(--family-mono);text-align:right;white-space:nowrap}
.strong{font-weight:var(--fw-emphasis)}
.muted{color:var(--text-tertiary)}
.faint{color:var(--text-placeholder)}
.nowrap{white-space:nowrap}
.vh{position:absolute;width:var(--space-1);height:var(--space-1);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

/* ---------- ID link: record IDs and asset names are text.primary, underline on hover ---------- */
.idl{color:var(--text-primary);font-family:var(--family-mono);font-weight:var(--fw-label);white-space:nowrap}
.idl:hover,.idl:focus-visible{color:var(--text-primary);text-decoration:underline}
.namel{color:var(--text-primary);font-weight:var(--fw-emphasis)}
.namel:hover,.namel:focus-visible{color:var(--text-primary);text-decoration:underline}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{flex:0 0 var(--layout-side-nav-width);width:var(--layout-side-nav-width);background:var(--surface-nav);border-right:var(--line);align-self:stretch;min-height:100vh;z-index:var(--z-nav)}
.sb-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.sb-brand{display:flex;align-items:center;gap:var(--space-8);padding:0 var(--space-16);height:var(--layout-topbar-height);font:var(--font-emphasis);border-bottom:var(--line);white-space:nowrap}
.sb-brand .sb-mark{display:none}
.sb-brand .sb-name{flex:1;min-width:0;white-space:normal;line-height:1.2}
.sb-toggle{flex:none;margin-left:auto}
.app.sb-collapsed .sb-toggle{margin-left:0}
.sb-tip{position:fixed;left:calc(var(--tip-x, 0) * var(--space-1));top:calc(var(--tip-y, 0) * var(--space-1));transform:translateY(-50%);z-index:var(--z-tooltip);background:var(--text-primary);color:var(--text-on-accent);font:var(--font-label);padding:var(--space-4) var(--space-8);border-radius:var(--radius-control);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-overlay)}
.sb-mark{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-4);height:var(--size-icon-lg);border-radius:var(--radius-control);background:var(--action-primary);color:var(--text-on-accent);font:var(--font-label);flex:none}
.sb-dep{margin:var(--space-12) var(--space-12) var(--space-8);position:relative}
.sb-dep-btn{width:100%;display:flex;align-items:center;gap:var(--space-8);min-height:var(--size-control-height-touch);padding:var(--space-4) var(--space-8);border:var(--line-strong);border-radius:var(--radius-control);background:var(--surface-raised);cursor:pointer;text-align:left}
.sb-dep-btn:hover{border-color:var(--border-hover)}
.sb-dep-btn .t{flex:1;min-width:0}
.sb-dep-btn .t b{display:block;font:var(--font-emphasis);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-dep-btn .t span{display:block;font:var(--font-metadata);color:var(--text-tertiary)}
.sb-nav{flex:1;overflow:auto;padding:var(--space-4) var(--space-8);display:flex;flex-direction:column;gap:var(--space-2)}
.sb-item{display:flex;align-items:center;gap:var(--space-8);min-height:var(--size-control-height-default);padding:0 var(--space-8);border-radius:var(--radius-control);color:var(--text-secondary);font:var(--font-body);cursor:pointer;border:0;background:none;text-align:left;width:100%}
.sb-item:hover{background:var(--interactive-hover);color:var(--text-primary);text-decoration:none}
.sb-item.on{background:var(--interactive-selected);color:var(--action-primary);font-weight:var(--fw-emphasis)}
.sb-item svg{flex:none;color:var(--text-tertiary)}
.sb-item.on svg{color:var(--action-primary)}
.sb-item .lbl-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-count{font:var(--font-data-sm);color:var(--text-tertiary)}
.sb-group{font:var(--font-label);color:var(--text-tertiary);padding:var(--space-12) var(--space-8) var(--space-4)}
.sb-sub .sb-item{padding-left:var(--space-32)}
.sb-foot{border-top:var(--line);padding:var(--space-8)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface-chrome);border-bottom:var(--line);height:var(--layout-topbar-height);display:flex;align-items:center;gap:var(--space-16);padding:0 var(--space-24)}
.topbar .tb-menu{display:none}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-6);min-width:6rem;flex:1 1 8rem;font:var(--font-body);line-height:1.25;color:var(--text-tertiary);white-space:normal}
.crumb a,.crumb .here,.crumb > span{white-space:nowrap}
.crumb a{color:var(--text-tertiary)} .crumb a:hover{color:var(--text-primary)}
.crumb .sep{color:var(--text-placeholder)}
.crumb .here{color:var(--text-primary);font-weight:var(--fw-emphasis)}
.search{flex:0 1 calc(var(--layout-search-width) * .75);min-width:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center;gap:var(--space-8);height:var(--size-control-height-default);padding:0 var(--space-12);border:var(--line-strong);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text-placeholder);cursor:pointer;font:var(--font-body)}
.search:hover{border-color:var(--border-hover)}
.search .k{margin-left:auto;font:var(--font-data-sm);color:var(--text-tertiary);border:var(--line);border-radius:var(--radius-badge);padding:0 var(--space-4)}
.tb-right{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-12);min-width:0;white-space:nowrap}
.tb-link{display:inline-flex;align-items:center;gap:var(--space-6);border:0;background:none;padding:var(--space-4) var(--space-6);border-radius:var(--radius-control);font:var(--font-metadata);color:var(--text-tertiary);cursor:pointer}
.tb-link:hover{background:var(--interactive-hover);color:var(--text-primary)}
.tb-link.warn{color:var(--text-primary);font-weight:var(--fw-label)}
.tb-user{display:inline-flex;align-items:center;gap:var(--space-6);border:0;background:none;cursor:pointer;padding:var(--space-4);border-radius:var(--radius-control);font:var(--font-body)}
.tb-user:hover{background:var(--interactive-hover)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--size-icon-lg);height:var(--size-icon-lg);border-radius:var(--radius-pill);background:var(--surface-group);font:var(--font-label);color:var(--text-secondary)}

.app.bare .sidebar,.app.bare .topbar{display:none}
.app.bare main.page{padding:0;max-width:none}
main.page{padding:var(--space-24);max-width:var(--layout-max-content-width);width:100%;display:flex;flex-direction:column;gap:var(--space-16)}

/* ---------- Page header, count line ---------- */
.page-head{display:flex;align-items:flex-start;gap:var(--space-16);flex-wrap:wrap}
.page-head .ph-t{flex:1 1 auto;min-width:0}
.page-title{margin:0;font:var(--font-page-title)}
.page-meta{font:var(--font-body);color:var(--text-tertiary);margin-top:var(--space-2)}
.page-acts{display:flex;gap:var(--space-8);align-items:center;flex-wrap:wrap}
/* Live summary strip: four labelled groups on one flat row, 1 px dividers between */
/* Live top row: four summary islands, then the filters, on one line (filters wrap right-aligned) */
.live-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12)}
.sumstrip{display:flex;align-items:stretch;gap:var(--space-12)}
.sumstrip .sg{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;min-height:56px;padding:var(--space-8) var(--space-12);background:var(--surface-raised);border:var(--line-strong);border-radius:var(--radius-card);color:var(--text-primary);font:var(--font-body)}
.sumstrip a:hover{text-decoration:none}
.sumstrip a.sg:hover{border-color:var(--border-hover)}
.sumstrip a.sg:hover .lbl,.sumstrip a.sg:hover .sv{text-decoration:underline}
.sumstrip .lbl{color:var(--text-tertiary)}
.sumstrip .sv{display:block;font:var(--font-body);white-space:nowrap}
.sumstrip .sv b,.sumstrip .sub2 b{font-weight:inherit}
.sumstrip .sv b{font:var(--font-data);font-weight:var(--fw-emphasis)}
.sumstrip .sc{display:inline-flex;align-items:baseline;gap:var(--space-4);color:var(--text-primary);white-space:nowrap}
.sumstrip .sc + .sc,.sumstrip .sv .sub2{margin-left:var(--space-8)}
.sumstrip .sc:hover{text-decoration:underline}
.sumstrip .sc svg{align-self:center}
.sumstrip .sub2{font:var(--font-body);color:var(--text-tertiary)}
.sumstrip .sub2 b{font-family:var(--family-mono)}
.sumstrip .sub2.unack{color:var(--text-secondary)}
.sumstrip .sub2.unack b{color:var(--text-primary);font-weight:var(--fw-emphasis)}
.sumstrip .zero,.sumstrip .zero b{color:var(--text-tertiary)}
.toolbar.live-tools{gap:var(--space-4)}
.toolbar.live-tools .chip{padding:0 var(--space-8)}
.live-tools label{margin-left:var(--space-4);gap:var(--space-4)}
.live-tools select{max-width:112px}
.live-tools .cols-pick{gap:var(--space-4);margin-left:var(--space-4)}
.toolbar.live-tools{margin-left:auto;justify-content:flex-end;min-height:0;row-gap:var(--space-4)}
.cols-pick{display:inline-flex;align-items:center;gap:var(--space-6);margin-left:auto}
.cols-pick .lbl{color:var(--text-tertiary)}
@media (max-width:64em){.cols-pick{display:none}}

/* ---------- Layout: B's .row/.grow/.side as main + rail ---------- */
.row,.split{display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:flex-start}
.grow,.main{flex:999 1 var(--layout-page-main-basis);min-width:0;display:flex;flex-direction:column;gap:var(--space-16)}
.side,.rail{flex:1 1 var(--layout-page-rail-basis);max-width:var(--layout-page-rail-max);min-width:0;display:flex;flex-direction:column;gap:var(--space-16)}
.full{flex:1 1 100%;min-width:0}
.stack{display:flex;flex-direction:column;gap:var(--space-16)}
.hstack{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.spacer{flex:1}

/* ---------- Region (B's .card.pad) ---------- */
.card,.region{background:var(--surface-raised);border:var(--line-strong);border-radius:var(--radius-card)}
.pad{padding:var(--space-16)}
.region-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;padding:var(--space-12) var(--space-16)}
.region-body{padding:0 var(--space-16) var(--space-16)}
.region > .tbl-wrap{border-top:var(--line)}
.h{font:var(--font-section-title);margin:0}
.sub{font:var(--font-metadata);color:var(--text-tertiary);margin-top:var(--space-2)}
.lbl{font:var(--font-label);color:var(--text-tertiary)}
.note{font:var(--font-metadata);color:var(--text-tertiary)}
.divide > * + *{border-top:var(--line)}
.empty{display:flex;align-items:center;gap:var(--space-8);color:var(--text-tertiary);font:var(--font-body);padding:var(--space-8) 0}
.empty svg{flex:none;color:var(--text-placeholder)}
.region-foot{padding:var(--space-8) var(--space-16);border-top:var(--line);font:var(--font-body)}

/* ---------- Buttons (B) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);min-height:var(--size-control-height-default);padding:0 var(--space-12);border-radius:var(--radius-control);font:var(--font-emphasis);border:var(--line-strong);background:var(--surface-raised);color:var(--text-primary);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--border-hover);text-decoration:none;color:var(--text-primary)}
.btn.pri{background:var(--action-primary);border-color:var(--action-primary);color:var(--text-on-accent)}
.btn.pri:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--text-on-accent)}
.btn.ghost{border-color:transparent;background:none;color:var(--text-secondary)}
.btn.ghost:hover{background:var(--interactive-hover);color:var(--text-primary)}
.btn.sm{min-height:var(--size-control-height-compact);padding:0 var(--space-8);font:var(--font-label)}
.btn:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}
.btn.busy{opacity:var(--opacity-disabled);pointer-events:none}
.btn.icon{padding:0;width:var(--size-control-height-default)}
.btn.sm.icon{width:var(--size-control-height-compact)}

/* ---------- Segmented toggle (B) ---------- */
.seg{display:inline-flex;border:var(--line-strong);border-radius:var(--radius-control);overflow:hidden;background:var(--surface-raised)}
.seg button{border:0;background:none;padding:0 var(--space-12);min-height:var(--size-control-height-compact);font:var(--font-label);color:var(--text-tertiary);cursor:pointer;border-right:var(--line-strong)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--text-primary);color:var(--text-on-accent)}

/* ---------- Inputs ---------- */
select,input[type=text],input[type=email],input[type=number],input[type=search],textarea{min-height:var(--size-control-height-default);border:var(--line-strong);border-radius:var(--radius-control);padding:0 var(--space-8);font:var(--font-body);background:var(--surface-raised);color:var(--text-primary)}
textarea{padding:var(--space-6) var(--space-8);min-height:calc(var(--size-control-height-default) * 2);resize:vertical;width:100%}
select:hover,input:hover,textarea:hover{border-color:var(--border-hover)}
.field{display:flex;flex-direction:column;gap:var(--space-4)}
.field > span{font:var(--font-label);color:var(--text-secondary)}
.field input,.field select{width:100%}
.field .err{font:var(--font-metadata);color:var(--level-critical-text)}

/* ---------- Toolbar, filter chips (quiet, one row) ---------- */
.toolbar,.filters{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;min-height:var(--layout-toolbar-height)}
.filters label,.toolbar label{font:var(--font-label);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-6)}
.toolbar select{min-height:var(--size-control-height-compact)}
.chip{display:inline-flex;align-items:center;gap:var(--space-4);min-height:var(--size-control-height-compact);padding:0 var(--space-12);border:var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-raised);font:var(--font-label);color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--border-hover)}
.chip[aria-pressed=true]{background:var(--interactive-selected);border-color:var(--action-primary);color:var(--action-primary)}
.chip .ck{display:none}
.chip[aria-pressed=true] .ck{display:inline-flex}

/* ---------- Underline tabs (record sections, alarms tabs) ---------- */
.utabs{display:flex;gap:var(--space-24);border-bottom:var(--line);overflow-x:auto;scrollbar-width:none}
.utabs a,.utabs button{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-8) 0;border:0;border-bottom:var(--size-border-width-thick) solid transparent;background:none;color:var(--text-tertiary);font:var(--font-body);cursor:pointer;white-space:nowrap;margin-bottom:calc(var(--size-border-width-thin) * -1)}
.utabs a:hover,.utabs button:hover{color:var(--text-primary);text-decoration:none}
.utabs .on{color:var(--text-primary);border-bottom-color:var(--action-primary);font-weight:var(--fw-emphasis)}

/* ---------- Tables (B), group rows, row expansion ---------- */
.tbl-wrap,.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font:var(--font-label);color:var(--text-tertiary);text-align:left;padding:0 var(--space-8);height:var(--size-row-height-compact);border-bottom:var(--line);background:var(--surface-sunken);white-space:nowrap;position:sticky;top:0}
th.num,td.num{text-align:right}
th.num{font-family:var(--family-ui)}
td{padding:var(--space-6) var(--space-8);height:var(--size-row-height-default);border-bottom:var(--line);font:var(--font-body);vertical-align:middle}
th:first-child,td:first-child{padding-left:var(--space-16)}
th:last-child,td:last-child{padding-right:var(--space-16)}
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-hover)}
tr.sel td{background:var(--interactive-selected)}
tr.grp td{background:var(--surface-group);font:var(--font-label);color:var(--text-secondary);height:var(--size-row-height-compact)}
tr.exp td{background:var(--surface-sunken);padding-top:var(--space-8);padding-bottom:var(--space-12)}
tr.crit-row td{background:var(--level-critical-tint)}
.tbl-compact td{height:var(--size-row-height-compact);padding-top:var(--space-4);padding-bottom:var(--space-4)}
.xbtn{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;width:var(--size-icon-md);height:var(--size-icon-md);cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-badge);vertical-align:middle;margin-right:var(--space-4)}
.xbtn:hover{background:var(--interactive-hover);color:var(--text-primary)}
.xbtn svg{transition:transform var(--dur-feedback) var(--ease-standard)}
.xbtn[aria-expanded=true] svg{transform:rotate(90deg)}
.nw td,.tbl-wrap td{white-space:nowrap}
.tbl-wrap td.wrap{white-space:normal}

/* ---------- Level badge (B's .lv), state chip (B's .st), tag, count ---------- */
.lv{display:inline-flex;align-items:center;gap:var(--space-6);border-radius:var(--radius-pill);padding:0 var(--space-8);min-height:var(--size-icon-lg);font:var(--font-label);white-space:nowrap;border:var(--size-border-width-thin) solid}
.lv.critical{color:var(--level-critical-text);background:var(--level-critical-tint);border-color:var(--level-critical-edge)}
.lv.major{color:var(--level-major-text);background:var(--level-major-tint);border-color:var(--level-major-edge)}
.lv.minor{color:var(--level-minor-text);background:var(--level-minor-tint);border-color:var(--level-minor-edge)}
.lv.normal{color:var(--level-normal-text);background:var(--level-normal-tint);border-color:var(--level-normal-edge)}
.lv.fixed{color:var(--level-fixed-text);background:var(--level-fixed-tint);border-color:var(--level-fixed-tint)}
.lvtxt{display:inline-flex;align-items:center;gap:var(--space-6);white-space:nowrap}
.lvtxt.critical{color:var(--level-critical-text)} .lvtxt.major{color:var(--level-major-text)} .lvtxt.minor{color:var(--level-minor-text)} .lvtxt.fixed{color:var(--level-fixed-text)}
.st{display:inline-flex;align-items:center;gap:var(--space-6);border-radius:var(--radius-badge);padding:0 var(--space-6);min-height:var(--size-icon-md);font:var(--font-label);white-space:nowrap;border:var(--line-strong);background:var(--surface-raised);color:var(--text-secondary)}
.st.unack{background:var(--level-critical-fill);border-color:var(--level-critical-fill);color:var(--text-on-accent)}
.st.ack,.st.clr{color:var(--text-tertiary)}
.st.sil{background:var(--surface-group);color:var(--text-secondary)}
.st.ok{color:var(--level-fixed-text);border-color:var(--level-fixed-tint);background:var(--level-fixed-tint)}
.st.attn{color:var(--text-primary);border-color:var(--border-strong);background:var(--surface-raised)}
.pulse{outline:var(--size-border-width-thick) solid var(--level-critical-edge);outline-offset:var(--space-1);animation:pulse var(--dur-pulse) ease-in-out infinite}
@keyframes pulse{50%{outline-color:transparent}}
.tag{display:inline-flex;align-items:center;padding:0 var(--space-6);border-radius:var(--radius-badge);background:var(--surface-group);color:var(--text-secondary);font:var(--font-metadata);white-space:nowrap}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-icon-md);padding:0 var(--space-4);border-radius:var(--radius-badge);background:var(--surface-group);font:var(--font-data-sm);color:var(--text-secondary)}
.pill{display:inline-flex;align-items:center;gap:var(--space-6);border:var(--line-strong);border-radius:var(--radius-pill);padding:0 var(--space-8);min-height:var(--size-icon-lg);font:var(--font-label);background:var(--surface-raised);white-space:nowrap;cursor:pointer;color:var(--text-primary)}
.pill:hover{border-color:var(--border-hover)}
.pill.crit{border-color:var(--level-critical-edge);background:var(--level-critical-tint);color:var(--level-critical-text)}

/* ---------- Closeness bar, thumb ---------- */
.bar{display:inline-flex;align-items:center;gap:var(--space-6);white-space:nowrap;font:var(--font-data-sm)}
.bar .track{display:inline-block;width:var(--size-bar-width);height:var(--size-bar-height);border-radius:var(--radius-pill);background:var(--surface-group);overflow:hidden;position:relative}
.bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius-pill);background:var(--level-normal-fill)}
.bar.critical .fill{background:var(--level-critical-fill)} .bar.major .fill{background:var(--level-major-fill)} .bar.minor .fill{background:var(--level-minor-fill)}
.thumb{display:block;align-self:flex-start;height:var(--size-thumb-md);width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-badge);border:var(--line);background:var(--surface-camera);cursor:zoom-in}
.evidence{display:block;width:100%;height:var(--layout-evidence-height);object-fit:cover;border-radius:var(--radius-control);border:var(--line);background:var(--surface-camera);cursor:zoom-in}
.bigimg{display:block;max-width:100%;max-height:calc(100vh - var(--space-48) * 3);margin:0 auto;border-radius:var(--radius-control)}

/* ---------- Key-value (B) ---------- */
.kv{display:grid;grid-template-columns:var(--layout-kv-label-width) 1fr;gap:var(--space-8) var(--space-12);font:var(--font-body)}
.kv > dt{color:var(--text-tertiary);margin:0}
.kv > dd{margin:0;min-width:0}

/* ---------- Slim alarm rows ---------- */
.arow{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-8) 0;font:var(--font-body);flex-wrap:wrap}
.arow .ar-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.arow + .arow{padding-top:0}
.al-row{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8) 0;font:var(--font-body)}
.al-row + .al-row,.al-row + .arow,.arow + .al-row,.arow + .arow{border-top:var(--line)}
.al-row .al-l1{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.al-row .al-lvl{font:var(--font-emphasis);color:var(--level-critical-text);display:inline-flex;align-items:center;gap:var(--space-6)}
.al-row .al-l3{color:var(--text-secondary)}
.al-row .al-l3:empty{display:none}
.al-row .al-acts{display:flex;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-4)}
.arow.folded{color:var(--text-tertiary);font:var(--font-metadata)}
.lines > * + *{border-top:var(--line)}
.line{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-8) 0;font:var(--font-body)}
.line .spacer{flex:1}
.line > svg,.arow svg{flex:none}

/* ---------- Toast (B) ---------- */
.toast-wrap{position:fixed;right:var(--space-24);bottom:var(--space-24);display:flex;flex-direction:column;gap:var(--space-8);z-index:var(--z-toast)}
.toast{background:var(--text-primary);color:var(--text-on-accent);padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);font:var(--font-body);max-width:var(--layout-dialog-width-sm);box-shadow:var(--shadow-overlay)}
.toast.err{background:var(--level-critical-text)}

/* ---------- Drawer (B), modal (B), popover, palette ---------- */
.scrim{position:fixed;inset:0;background:var(--surface-scrim);z-index:var(--z-drawer)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--layout-side-panel-width),100vw);background:var(--surface-overlay);border-left:var(--line-strong);box-shadow:var(--shadow-modal);z-index:var(--z-drawer);transform:translateX(105%);transition:transform var(--dur-routine) var(--ease-standard);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .dh{padding:var(--space-12) var(--space-16);border-bottom:var(--line);display:flex;justify-content:space-between;gap:var(--space-8);align-items:center}
.drawer .db{padding:var(--space-16);overflow:auto;display:flex;flex-direction:column;gap:var(--space-16);flex:1}
.drawer .dsec{display:flex;flex-direction:column;gap:var(--space-8)}
.drawer .dsec + .dsec{border-top:var(--line);padding-top:var(--space-16)}
.modal-bg{position:fixed;inset:0;background:var(--surface-scrim);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-16)}
.modal{background:var(--surface-overlay);border-radius:var(--radius-dialog);box-shadow:var(--shadow-modal);padding:var(--space-20);width:min(var(--layout-dialog-width-sm),100%);display:flex;flex-direction:column;gap:var(--space-12);max-height:100%;overflow:auto}
.modal.lg{width:min(var(--layout-dialog-width-lg),100%)}
.modal .m-acts{display:flex;gap:var(--space-8);justify-content:flex-end}
.popover{position:fixed;top:calc(var(--pop-y, 0) * var(--space-1));left:calc(var(--pop-x, 0) * var(--space-1));z-index:var(--z-dropdown);background:var(--surface-overlay);border:var(--line-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay);width:min(var(--layout-popover-width),calc(100vw - var(--space-32)));padding:var(--space-4) var(--space-12);max-height:70vh;overflow:auto}
.menu{position:absolute;z-index:var(--z-dropdown);background:var(--surface-overlay);border:var(--line-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay);padding:var(--space-4);min-width:100%;display:flex;flex-direction:column}
.menu button,.menu a{display:flex;align-items:center;gap:var(--space-8);text-align:left;border:0;background:none;padding:var(--space-6) var(--space-8);border-radius:var(--radius-control);cursor:pointer;color:var(--text-primary);font:var(--font-body)}
.menu button:hover,.menu a:hover,.menu .on{background:var(--interactive-hover);text-decoration:none}
.palette-bg{position:fixed;inset:0;background:var(--surface-scrim);z-index:var(--z-palette);display:flex;justify-content:center;align-items:flex-start;padding:12vh var(--space-16) 0}
.palette{width:min(var(--layout-palette-width),100%);background:var(--surface-overlay);border-radius:var(--radius-dialog);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.palette input{border:0;border-bottom:var(--line);border-radius:0;min-height:calc(var(--size-control-height-touch) + var(--space-12));padding:0 var(--space-16);font:var(--font-section-title);font-weight:var(--fw-body);outline:none}
.palette .p-list{overflow:auto;padding:var(--space-4)}
.palette .p-grp{font:var(--font-label);color:var(--text-tertiary);padding:var(--space-8) var(--space-12) var(--space-4)}
.palette .p-item{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-6) var(--space-12);border-radius:var(--radius-control);cursor:pointer;font:var(--font-body)}
.palette .p-item .p-meta{margin-left:auto;font:var(--font-metadata);color:var(--text-tertiary)}
.palette .p-item.on{background:var(--interactive-selected)}
.palette .p-foot{border-top:var(--line);padding:var(--space-6) var(--space-12);font:var(--font-metadata);color:var(--text-tertiary)}

/* ---------- Demo controls drawer ---------- */
.demo-sec{display:flex;flex-direction:column;gap:var(--space-8)}
.demo-sec + .demo-sec{border-top:var(--line);padding-top:var(--space-16)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}

/* ---------- Record header (persistent) ---------- */
.rec-head{position:sticky;top:var(--rec-top, var(--layout-topbar-height));z-index:calc(var(--z-sticky) - 1);background:var(--surface-canvas);margin:calc(var(--space-24) * -1) calc(var(--space-24) * -1) 0;padding:var(--space-16) var(--space-24) 0;display:flex;flex-direction:column;gap:var(--space-8)}
.rec-title{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap}
.rec-title .page-title{display:inline}
.rec-meta{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-12);font:var(--font-body);color:var(--text-tertiary);align-items:center}
.rec-meta .sep{color:var(--text-placeholder)}

/* ---------- Repair stepper ---------- */
.steps{display:flex;gap:0;align-items:center;flex-wrap:wrap;font:var(--font-label)}
.steps .s{display:inline-flex;align-items:center;gap:var(--space-6);color:var(--text-placeholder)}
.steps .s .d{width:var(--size-dot);height:var(--size-dot);border-radius:var(--radius-pill);border:var(--size-border-width-thick) solid var(--border-strong)}
.steps .s.done{color:var(--text-secondary)} .steps .s.done .d{background:var(--text-secondary);border-color:var(--text-secondary)}
.steps .s.now{color:var(--text-primary);font-weight:var(--fw-emphasis)} .steps .s.now .d{background:var(--action-primary);border-color:var(--action-primary)}
.steps .bar-l{width:var(--space-24);height:var(--size-border-width-thick);background:var(--border-strong);margin:0 var(--space-8)}

/* ---------- Timeline (B) ---------- */
.tl{display:flex;flex-direction:column}
.tl .s{display:grid;grid-template-columns:var(--layout-kv-label-width) 1fr;gap:var(--space-12);padding:var(--space-6) 0;font:var(--font-body)}
.tl .s .t{font:var(--font-data-sm);color:var(--text-tertiary);padding-top:var(--space-2)}

/* ---------- Route / belt map (B) ---------- */
.map{position:relative;user-select:none}
.map svg{display:block;width:100%;height:auto;overflow:visible}
.map .strand-carry{stroke:var(--map-carry)} .map .strand-return{stroke:var(--map-return)}
.map .pulley{fill:none;stroke:var(--map-carry)}
.map .station{stroke:var(--map-station)}
.map .axis{stroke:var(--data-baseline)}
.map .tick{stroke:var(--data-baseline)}
.map text{font:var(--font-chart-axis);fill:var(--text-tertiary)}
.map text.lab{font:var(--font-metadata);fill:var(--text-secondary)}
.map text.idt{font:var(--font-data-sm);fill:var(--text-primary);paint-order:stroke;stroke:var(--map-label-bg);stroke-width:4}
.map text.idt.hl{font-weight:var(--fw-emphasis);fill:var(--action-primary)}
.map .mg{opacity:var(--opacity-muted-mark)}
.map .mk{cursor:pointer}
.map .mk:hover text.idt{text-decoration:underline}
.map .ring{fill:none;stroke:var(--action-primary)}
.map .past{opacity:var(--opacity-muted-mark)}
.fill-critical{fill:var(--level-critical-fill)} .fill-major{fill:var(--level-major-fill)} .fill-minor{fill:var(--level-minor-fill)} .fill-normal{fill:var(--level-normal-fill)} .fill-fixed{fill:var(--level-fixed-fill)}
.stroke-critical{stroke:var(--level-critical-fill)} .stroke-major{stroke:var(--level-major-fill)} .stroke-minor{stroke:var(--level-minor-fill)} .stroke-normal{stroke:var(--level-normal-fill)} .stroke-fixed{stroke:var(--level-fixed-fill)}
.fill-raised{fill:var(--surface-raised)}
.ico-critical{fill:var(--level-critical-fill)} .ico-major{fill:var(--level-major-fill)} .ico-minor{fill:var(--level-minor-fill)} .ico-normal{fill:none;stroke:var(--level-normal-fill)} .ico-fixed{fill:none;stroke:var(--level-fixed-fill)}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-16);font:var(--font-metadata);color:var(--text-secondary);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:var(--space-6)}

/* ---------- Charts ---------- */
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:var(--font-chart-axis);fill:var(--text-tertiary)}
.chart .grid{stroke:var(--data-gridline)}
.chart .base{stroke:var(--data-baseline)}
.chart .series{fill:none;stroke:var(--text-primary);stroke-width:2}
.chart .dot{fill:var(--text-primary)}
.chart .thr{stroke-dasharray:5 4}
.chart .thr-critical{stroke:var(--level-critical-fill)} .chart .thr-major{stroke:var(--level-major-fill)}
.chart text.thr-critical{fill:var(--level-critical-text);stroke:none} .chart text.thr-major{fill:var(--level-major-text);stroke:none}
.chart .s-1{stroke:var(--data-category-1)} .chart .s-2{stroke:var(--data-category-2)}

/* ---------- Cameras (B's camera station) ---------- */
.cams{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--layout-page-rail-basis) * .7),1fr));gap:var(--space-12)}
.cam{position:relative;height:var(--layout-camera-height);border-radius:var(--radius-control);overflow:hidden;background:var(--surface-camera);cursor:zoom-in;display:block;width:100%;border:0;padding:0}
.cam img{width:100%;height:100%;object-fit:cover;display:block}
.cam .ts{position:absolute;left:var(--space-8);top:var(--space-8);font:var(--font-data-sm);color:var(--text-on-camera);background:var(--map-chip);padding:0 var(--space-4);border-radius:var(--radius-badge)}
.cam .box{position:absolute;border:var(--size-border-width-thick) solid;border-radius:var(--radius-badge)}
.cam .box.critical{border-color:var(--level-critical-fill)} .cam .box.major{border-color:var(--level-major-fill)} .cam .box.minor{border-color:var(--level-minor-fill)}
.cam .ctag.below{transform:none}
.cam .ctag{position:absolute;transform:translateY(-100%);font:var(--font-data-sm);color:var(--text-on-accent);padding:0 var(--space-4);border-radius:var(--radius-badge) var(--radius-badge) 0 0;white-space:nowrap}
.cam .ctag.critical{background:var(--level-critical-fill)} .cam .ctag.major{background:var(--level-major-text)} .cam .ctag.minor{background:var(--level-minor-text)}
.cam .off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--space-8);color:var(--text-on-camera);background:var(--map-chip);font:var(--font-body)}
.cam-cap{display:flex;justify-content:space-between;gap:var(--space-8);font:var(--font-metadata);margin-top:var(--space-6)}


/* ---------- Live asset tile: one container, camera collage flush inside (primary = top camera) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--layout-tile-min),100%),1fr));gap:var(--space-16)}
.tile{background:var(--surface-raised);border:var(--line-strong);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tile.tile-nodata{align-self:start}
.tile.tile-crit{border-color:var(--level-critical-edge)}
.tile-head{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-16);min-height:var(--size-row-height-default);flex-wrap:wrap}
.tile-head .namel{font:var(--font-section-title)}
.open-counts{display:inline-flex;align-items:center;gap:var(--space-6);font:var(--font-body);white-space:nowrap}
.open-counts .oc{display:inline-flex;align-items:center;gap:var(--space-2)}
.open-counts b{font:var(--font-data);font-weight:var(--fw-emphasis)}
.last-an{margin-left:auto;font:var(--font-body);color:var(--text-secondary);white-space:nowrap}
.last-an.stale{color:var(--text-primary);font-weight:var(--fw-emphasis)}
.tile-body{padding:0 var(--space-16)}
.group-label{font:var(--font-label);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-6)}
.collage{display:grid;gap:var(--space-2);height:var(--layout-collage-height);background:var(--surface-raised)}
.collage.n1{grid-template-columns:3fr 2fr}
.shot img.native{object-fit:scale-down}
.collage.n2{grid-template-columns:3fr 2fr}
.collage.n3{grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr}
.collage.n3 .shot:first-child{grid-row:1 / 3}
.collage.n4{grid-template-columns:3fr 1fr 1fr;grid-template-rows:1fr 1fr}
.collage.n4 .shot:first-child{grid-row:1 / 3}
.collage.n4 .shot:nth-child(2){grid-column:2 / 4}
.shot{position:relative;overflow:hidden;background:var(--surface-camera);min-width:0;min-height:0;display:block;width:100%;height:100%}
.shot-hit{position:absolute;inset:0;border:0;padding:0;margin:0;background:none;cursor:zoom-in;display:block;width:100%;height:100%}
.shot-hit:focus-visible{outline:var(--size-focus-ring-width) solid var(--focus-ring);outline-offset:calc(var(--size-focus-ring-width) * -1)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot .box{position:absolute;border:var(--size-border-width-thick) solid;border-radius:var(--radius-badge);display:block}
.shot a.box:focus-visible{outline:var(--size-focus-ring-width) solid var(--focus-ring);outline-offset:var(--size-focus-ring-offset)}
.shot .box.critical{border-color:var(--level-critical-fill)} .shot .box.major{border-color:var(--level-major-fill)} .shot .box.minor{border-color:var(--level-minor-fill)}
/* Detection label = type and size, neutral fill; the outline carries the level like the box does. No level badge, no record ID. */
.shot .ctag{position:absolute;display:inline-flex;align-items:center;gap:var(--space-4);font:var(--font-data-sm);color:var(--text-primary);background:var(--surface-raised);padding:0 var(--space-4);border-radius:var(--radius-badge);border:var(--size-border-width-thin) solid;white-space:nowrap;text-decoration:none}
.shot .ctag.critical{border-color:var(--level-critical-fill)} .shot .ctag.major{border-color:var(--level-major-fill)} .shot .ctag.minor{border-color:var(--level-minor-fill)}
.shot .ctag.off{display:none}
.shot .shot-badge.alt{display:none}
.shot.lbl-off .shot-badge.alt{display:inline-flex}
.shot.many .ctag{opacity:0;pointer-events:none}
.shot.many:hover .ctag,.shot.many:focus-within .ctag{opacity:1;pointer-events:auto}
/* Camera name with its live dot, top left. Never a level colour. */
.shot .cname{position:absolute;left:var(--space-8);top:var(--space-8);max-width:calc(100% - var(--space-16));display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-6);font:var(--font-label);color:var(--text-on-camera);background:var(--map-chip);padding:0 var(--space-6);border-radius:var(--radius-badge);pointer-events:none}
.live-dot{display:inline-flex;align-items:center;gap:var(--space-4);white-space:nowrap}
.live-dot i{display:inline-block;width:var(--space-8);height:var(--space-8);border-radius:50%;background:var(--status-success-border);flex:none}
.live-dot.stale i{background:transparent;border:var(--size-border-width-thin) solid var(--text-on-camera);box-sizing:border-box}
.shot .shot-badge{position:absolute;right:var(--space-8);bottom:var(--space-8);display:inline-flex;align-items:center;gap:var(--space-4);font:var(--font-label);color:var(--text-primary);background:var(--surface-raised);padding:0 var(--space-6);border-radius:var(--radius-pill);pointer-events:none;white-space:nowrap}
.shot .off{position:absolute;inset:0;padding-top:var(--space-24);box-sizing:border-box;display:flex;align-items:center;justify-content:center;pointer-events:none;gap:var(--space-8);color:var(--text-on-camera);background:var(--map-chip);font:var(--font-emphasis)}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-16)}
.login .region{width:min(var(--layout-dialog-width-sm),100%);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-16)}

/* ---------- Responsive: rail sidebar below 1200, phone below 720 (em, no px) ---------- */
/* Live tiles per row (1 / 2 / 3) at 1024 px and up; below that the tile list keeps one column and the picker is hidden */
@media (min-width:64.01em){
  .tiles[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
  .tiles[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 2 and 3 per row: primary image full width at 16:9, the other cameras in one equal row under it */
  .tiles[data-cols="2"] .collage,.tiles[data-cols="3"] .collage{height:auto;grid-template-columns:repeat(var(--thumbs),minmax(0,1fr));grid-template-rows:auto var(--layout-collage-thumb)}
  .tiles[data-cols="3"] .collage{grid-template-rows:auto var(--layout-collage-thumb-sm)}
  .tiles[data-cols="2"] .collage .shot:first-child,.tiles[data-cols="3"] .collage .shot:first-child{grid-column:1 / -1;grid-row:1;height:auto;aspect-ratio:16 / 9}
  .tiles[data-cols="2"] .collage .shot:nth-child(2),.tiles[data-cols="3"] .collage .shot:nth-child(2){grid-column:auto}
  .tiles[data-cols="2"] .collage .shot:not(:first-child) .cname,.tiles[data-cols="3"] .collage .shot:not(:first-child) .cname{max-width:calc(100% - var(--space-12));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tiles[data-cols="2"] .collage .shot:not(:first-child) .off,.tiles[data-cols="3"] .collage .shot:not(:first-child) .off{font:var(--font-label);text-align:center;padding:var(--space-24) var(--space-4) 0;gap:var(--space-4)}
  .tiles[data-cols="3"] .collage .shot:not(:first-child) .off svg{display:none}
  .tiles[data-cols="3"] .collage .shot:not(:first-child) .ctag{opacity:0;pointer-events:none}
  .tiles[data-cols="3"] .collage .shot:not(:first-child):hover .ctag,.tiles[data-cols="3"] .collage .shot:not(:first-child):focus-within .ctag{opacity:1;pointer-events:auto}
  .tiles[data-cols="2"] .collage.n1,.tiles[data-cols="3"] .collage.n1{grid-template-rows:auto}
  .tiles[data-cols="3"] .tile-head{gap:var(--space-4) var(--space-8);padding:var(--space-8) var(--space-12)}
}
@media (max-width:75em){
  .search .lbl-t{display:none} .search{flex:0 0 auto}
}
/* Collapsed sidebar: a 56 px icon rail (the choice is remembered; phones keep the menu drawer) */
@media (min-width:45.01em){
  .app.sb-collapsed .sidebar{flex-basis:var(--layout-rail-width);width:var(--layout-rail-width)}
  .app.sb-collapsed .sidebar .lbl-t,.app.sb-collapsed .sidebar .sb-count,.app.sb-collapsed .sidebar .sb-group,.app.sb-collapsed .sidebar .sb-name,.app.sb-collapsed .sb-dep-btn .t,.app.sb-collapsed .sb-dep-btn .chev,.app.sb-collapsed .sb-sub{display:none}
  .app.sb-collapsed .sb-dep{margin:var(--space-8)} .app.sb-collapsed .sb-dep-btn{justify-content:center;padding:var(--space-4)}
  .app.sb-collapsed .sb-nav{padding:var(--space-4)}
  .app.sb-collapsed .sb-item{justify-content:center;padding:0}
  .app.sb-collapsed .sb-brand{justify-content:center;padding:0}
}
@media (max-width:45em){
  .sidebar{position:fixed;min-height:0;left:0;top:0;bottom:0;width:var(--layout-side-nav-width);transform:translateX(-105%);transition:transform var(--dur-routine) var(--ease-standard);box-shadow:var(--shadow-modal)}
  .sb-toggle{display:none}
  .sb-item{justify-content:flex-start;padding:0 var(--space-8)} .sb-brand{justify-content:flex-start;padding:0 var(--space-16)} .sb-brand .sb-mark{display:none}
  .app.nav-open .sidebar{transform:none}
  .topbar .tb-menu{display:inline-flex}
  .topbar{padding:0 var(--space-12);gap:var(--space-8)}
  .tb-hide-sm,.tb-long{display:none !important}
  .tb-right{gap:var(--space-4)}
  .crumb{flex:1 1 6rem;flex-wrap:wrap;white-space:normal;row-gap:0;column-gap:var(--space-4);line-height:1.25;overflow:visible}
  .crumb a,.crumb .here,.crumb > span{white-space:nowrap}
  main.page{padding:var(--space-16)}
  .rec-head{margin:calc(var(--space-16) * -1) calc(var(--space-16) * -1) 0;padding:var(--space-12) var(--space-16) 0}
  .rail{max-width:none}
  .phone-reorder{display:contents}
  .phone-first{order:-1}
  .split > .main,.split > .rail,.phone-reorder > *{flex:1 1 100%;max-width:none}
  .o0{order:0}.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}
  .phone-last{order:5}
  .kv{grid-template-columns:1fr;gap:0 var(--space-12)} .kv > dd{margin-bottom:var(--space-8)}
  /* tables become compact records: label (11 px, muted) over value (13 px), two pairs per line; lead cells share the first line; actions share the last */
  table.records thead{display:none}
  table.records,table.records tbody{display:block;width:100%}
  table.records tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-4) var(--space-12);border-bottom:var(--line);padding:var(--space-8) var(--space-16)}
  table.records td{border:0;height:auto;padding:0;display:block;flex:1 1 calc(50% - var(--space-12));min-width:0;text-align:left;font:var(--font-body);white-space:normal;overflow-wrap:anywhere}
  table.records td::before{content:attr(data-label);display:block;color:var(--text-tertiary);font:var(--font-label);text-align:left}
  table.records td[data-label=""]::before{content:none}
  table.records td.num{text-align:left}
  table.records td.cell-title{flex:1 1 100%}
  table.records td.cell-title::before,table.records td.rec-lead::before,table.records td.rec-act::before{content:none}
  table.records td.rec-lead{flex:0 0 auto;display:flex;align-items:center}
  table.records td.rec-lead ~ td.cell-title{flex:1 1 0;min-width:40%}
  table.records td.rec-act{order:99;flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);min-height:var(--size-control-height-compact)}
  table.records td.rec-act + td.rec-act{flex:1 1 0}
  table.records tr:has(> td.rec-act)::before{content:"";flex:1 1 100%;order:98;height:0;margin-top:calc(var(--space-4) * -1)}
  table.records td[colspan]{flex:1 1 100%}
  table.records tr.crit-row{background:var(--level-critical-tint)}
  table.records tr.sel{background:var(--interactive-selected)}
  table.records tr.crit-row td,table.records tr.sel td,table.records tr.click:hover td{background:none}
  table.records tr.grp{background:var(--surface-group);padding:var(--space-4) var(--space-16)}
  table.records tr.grp td{background:none}
  table.records td:first-child,table.records td:last-child{padding-left:0;padding-right:0}
  .demo-grid{grid-template-columns:1fr}
  .collage,.collage.n2,.collage.n3,.collage.n4{height:auto;grid-template-columns:repeat(var(--thumbs),1fr);grid-template-rows:var(--layout-collage-phone) var(--layout-collage-thumb-phone)}
  .collage.n1{grid-template-rows:var(--layout-collage-phone)}
  .collage .shot:first-child,.collage.n3 .shot:first-child,.collage.n4 .shot:first-child{grid-column:1 / -1;grid-row:1}
  .collage.n4 .shot:nth-child(2){grid-column:auto}
  .live-top{display:block}
  .sumstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  .sumstrip .sv{white-space:normal}
  .sumstrip .sv .sub2{display:block;margin-left:0}
  .live-tools{margin:var(--space-8) 0 0;justify-content:flex-start}
}

/* ---------- Operator pass: attention panel, camera status beside status, map selection ---------- */
.attn-list > * + *{margin-top:var(--space-8)}
.attn-list .al-row{border:var(--size-border-width-thick) solid var(--level-critical-fill);border-radius:var(--radius-control);padding:var(--space-8) var(--space-12)}
.attn-list .al-row + .al-row{border-top:var(--size-border-width-thick) solid var(--level-critical-fill)}
.other-crit{margin-top:var(--space-12);border-top:var(--line);padding-top:var(--space-8)}
.other-toggle{display:flex;align-items:center;gap:var(--space-6);border:0;background:none;padding:var(--space-4) 0;cursor:pointer;font:var(--font-emphasis);color:var(--text-secondary);width:100%;text-align:left}
.other-toggle svg{transition:transform var(--dur-routine) var(--ease-standard)}
.other-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.other-toggle:hover{color:var(--text-primary)}
.other-body[hidden]{display:none}
.other-row{flex-wrap:wrap;align-items:flex-start;padding:var(--space-6) 0}
.pop-h{display:flex;align-items:baseline;gap:var(--space-8);padding:var(--space-8) var(--space-12) 0}
.map .range{stroke:var(--action-primary);stroke-linecap:round}
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--space-48) * 5.5);gap:var(--space-16);align-items:start}
.map-side{display:flex;flex-direction:column;gap:var(--space-16);min-width:0}
.sel-panel{display:flex;flex-direction:column;gap:var(--space-8);border:var(--line-strong);border-radius:var(--radius-card);padding:var(--space-12);background:var(--surface-raised)}
.sel-h{display:flex;align-items:center;gap:var(--space-6);font:var(--font-emphasis);flex-wrap:wrap}
.sel-range{font:var(--font-body);color:var(--text-secondary)}
@media (max-width:64em){.map-wrap{grid-template-columns:minmax(0,1fr)}}
.attn-list .al-row{gap:var(--space-2)}
@media (min-width:88em){.rail.attn-rail{flex-basis:calc(var(--layout-page-rail-basis) * 1.2);max-width:calc(var(--layout-page-rail-max) * 1.2)}}
.sel-panel .loc-row{grid-template-columns:1fr;gap:var(--space-2)}
.map-wrap{grid-template-columns:minmax(0,1fr) calc(var(--space-48) * 6.5)}
@media (max-width:64em){.map-wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- boot: never a blank shell ---------- */
.boot-skel{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-24)}
.boot-skel .sk{height:var(--space-24);border-radius:var(--radius-control);background:var(--surface-sunken,var(--surface-raised));opacity:.7}
.boot-skel .sk-h{height:var(--space-32);width:40%}.boot-skel .sk-s{width:60%}
.boot-retry{margin-top:var(--space-12)}

/* ---------- settings groups in the sidebar ---------- */
.sb-glob{padding:var(--space-4) var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-2)}
.sb-fly .note{padding:var(--space-4) var(--space-8) 0}
.sb-fly .note:not(:first-child){margin-top:var(--space-8);border-top:var(--line);padding-top:var(--space-8)}

.app.sb-collapsed .sidebar .sb-item .chev{display:none}
@media (max-width:45em){.app.sb-collapsed .sidebar .sb-item .chev{display:inline-flex}}
.map-wrap.solo{grid-template-columns:minmax(0,1fr)}

/* ---------- Live panel cards: the whole card is one link ---------- */
.attn-list .att{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8) var(--space-12);border:var(--size-border-width-thick) solid var(--level-critical-fill);border-radius:var(--radius-control)}
.att .ac-l1{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-8);font:var(--font-emphasis);color:var(--text-primary)}
.att .ac-t{min-width:0}
.att .ac-t svg,.other-row .ar-main svg{display:inline-block;vertical-align:-2px;margin-right:var(--space-6)}
.att .ac-what{overflow-wrap:anywhere}
.ac-id{flex:none;font:var(--font-data);color:var(--text-secondary)}
.att .ac-id::after,.other-row .ac-id::after{content:"";position:absolute;inset:0}
.att .ac-id:focus-visible,.other-row .ac-id:focus-visible{outline:none}
.att .ac-id:focus-visible::after,.other-row .ac-id:focus-visible::after{outline:var(--size-focus-ring-width) solid var(--focus-ring);outline-offset:calc(var(--size-focus-ring-width) * -1);border-radius:var(--radius-control)}
.att .ac-l2{font:var(--font-body);color:var(--text-primary)}
.att .ac-l3{font:var(--font-metadata);color:var(--text-tertiary)}
.att .nw{white-space:nowrap}
.att .ac-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin-top:var(--space-4)}
.att .ac-acts > *,.other-row .ac-acts > *{position:relative;z-index:1}
.other-row{position:relative;align-items:flex-start}
.other-row .ar-main{flex:1 1 0}
.other-row .ac-acts{display:inline-flex;gap:var(--space-6)}

/* ---------- Record header kit: breadcrumb, fact row (30 Oct) ---------- */
.bc{display:flex;align-items:center;min-height:var(--size-icon-lg);font:var(--font-body);color:var(--text-tertiary);min-width:0}
.bc-trail{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-6)}
.bc-trail a{color:var(--text-tertiary)} .bc-trail a:hover{color:var(--text-primary)}
.bc-trail .sep{color:var(--text-placeholder)}
.bc-trail .here{color:var(--text-primary);font-weight:var(--fw-emphasis)}
.bc-back{display:none;align-items:center;gap:var(--space-4);min-height:var(--size-icon-lg);color:var(--text-secondary)}
.bc-back:hover{color:var(--text-primary)}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-32);margin:0}
.fact{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.fact dt{font:var(--font-label);color:var(--text-tertiary)}
.fact dd{margin:0;font:var(--font-body);color:var(--text-primary);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
@media (max-width:30em){
  .bc-trail{display:none}
  .bc-back{display:inline-flex}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-16)}
}
.p-item.dis{color:var(--text-tertiary);cursor:default}

/* ---------- Live direction (30 Oct, plan item 14): health index with its path, and the 24 h counts ---------- */
.hl{display:inline-flex;align-items:center;gap:var(--space-4);color:var(--text-secondary);white-space:nowrap}
.hl.down{color:var(--level-major-text)} .hl.up{color:var(--status-success-text)}
.hl-n{font:var(--font-data);font-weight:var(--fw-emphasis);color:var(--text-primary)}
.hl-arrow{font:var(--font-label)}
.hspark{display:block;width:calc(var(--space-16) * 3.5);height:var(--space-16);overflow:visible}
.hspark .ln,.hpath .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.hspark .end{fill:currentColor}
.hpath{display:block;width:100%;max-width:calc(var(--space-48) * 14);height:auto;overflow:visible}
.hpath text{font:var(--font-chart-axis);fill:var(--text-tertiary)}
.hpath .gr{stroke:var(--data-gridline)} .hpath .tk{stroke:var(--data-baseline)}
.hpath .ln{stroke:var(--text-secondary)}
.hpath .pt{fill:var(--surface-raised);stroke:var(--text-secondary);stroke-width:2}
.hpath .pt.down{stroke:var(--level-major-text);fill:var(--level-major-tint)} .hpath .pt.up{stroke:var(--status-success-text);fill:var(--status-success-bg)}
.fl{color:var(--text-primary);white-space:nowrap} .fl b{font:var(--font-data);font-weight:var(--fw-emphasis)}
.fl.zero,.fl.zero b{color:var(--text-tertiary)}
.fl + .fl::before{content:"·";margin:0 var(--space-6);color:var(--text-placeholder)}
a.fl:hover{text-decoration:underline}
.sumstrip .sg.dir{flex-direction:row;align-items:center;gap:var(--space-24);flex:1 1 auto}
.sumstrip .dg{display:flex;flex-direction:column;gap:0;min-width:0}
.sumstrip .dg .sv{white-space:normal}
.sumstrip .dg + .dg{padding-left:var(--space-24);border-left:var(--size-border-width-thin) solid var(--border-subtle)}
.sumstrip .dg .hl-n{font:var(--font-data)}
.sumstrip .dg .why{margin-left:var(--space-6);color:var(--text-tertiary)}
.tile-flow{padding:0 var(--space-16) var(--space-8);font:var(--font-body);color:var(--text-tertiary)}
.tile-flow .fl{color:var(--text-secondary)}
.dir-region .dir-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-24);align-items:start}
.dir-region .dir-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-6);font:var(--font-body)}
.dir-region .dir-list li{display:flex;gap:var(--space-8);align-items:baseline}
.dir-region .dir-list .t{font:var(--font-data);color:var(--text-tertiary);flex:none}
.dir-region .dir-flow{display:flex;flex-wrap:wrap;gap:var(--space-4) 0;margin:0 0 var(--space-12)}
.dir-region .dir-sub{margin:0 0 var(--space-4);font:var(--font-label);color:var(--text-tertiary)}
@media (max-width:45em){
  .sumstrip .sg.dir{grid-column:1 / -1;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
  .sumstrip .dg + .dg{padding-left:0;border-left:0}
  .dir-region .dir-cols{grid-template-columns:minmax(0,1fr)}
}
.dir-region .dir-line{display:flex;align-items:center;gap:var(--space-8);margin:0 0 var(--space-8);font:var(--font-body)}
.dir-region .dir-none{margin:0;font:var(--font-body)}
.dir-region .hpath{margin-bottom:var(--space-12)}
.linklike{appearance:none;background:none;border:0;padding:0;min-height:var(--size-icon-lg);font:inherit;font-weight:var(--fw-emphasis);color:var(--text-link);cursor:pointer}
.linklike:hover{text-decoration:underline}
.map .rpt circle{stroke:var(--text-secondary)}
.legend .rpt-key{display:inline-flex;align-items:center;gap:var(--space-4)}
.legend .rpt-key circle{stroke:var(--text-secondary)}

/* Live ground position (30 Oct, Plan B5): state label, restart note, map banner */
.gl.stopped{color:var(--text-primary);font-weight:600}
.gl.unknown{color:var(--text-tertiary)}
.gl-restart{display:block}
.loc-guide:has(.gnd:empty){display:none}
.gbanner{margin:0 0 var(--space-8);font:var(--font-body);color:var(--text-secondary)}
.belt-state .mono{font-variant-numeric:tabular-nums}