/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console (carried over from the cell concept, deal 1/3, seed industrial-calm-operator-hmi-a281·e2dec518·2026-11-06·r0)
 * nav: top bar with breadcrumb and four views, overlays around a full-screen 3D plant, 24 h timeline above the foot · signature: the live 3D plant whose machines carry their own status, scrubbed through the last 24 hours · states: live, replay, drill site/hall/line/machine, nothing needs attention, no 3D available, answer loading · console: graphite (dark default) and paper (light)
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, overlays could become a ring of equal cards; the 3D plant carries the screen and one figure (site OEE) is set large */
/* waive 46a-sample: every figure is sample data inside the built product, labelled simulated in the foot and on the camera wall */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("fonts/atkinson-hyperlegible-mono.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root { --top: 72px; --foot: 64px; --tl: 150px; --edge: 16px; --left-w: 340px; --right-w: 420px; --touch-s: 44px; }
html { font-size: 16px; }
@media (min-width: 100rem) { html { font-size: 17px; } }
body { font-synthesis: none; }
.measured { font-family: var(--font-outlier); font-variant-numeric: tabular-nums slashed-zero; }
.of { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- desktop shell: 3D underneath, overlays on top ---------- */
.js body { position: relative; height: 100dvh; overflow: hidden; max-width: 1920px; margin-inline: auto; }
.stage { position: absolute; inset: 0; background: var(--scene-sky); }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.no3d { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-xl); color: var(--color-muted); text-align: center; }

.bar { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-lg); min-height: var(--top); padding-inline: var(--edge); background: color-mix(in oklab, var(--color-paper-3) 90%, transparent); border-bottom: var(--rule-hair) solid var(--color-rule); }
.brand { display: grid; gap: var(--space-3xs); flex-shrink: 0; }
.wordmark { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1; }
.byline { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.2; }
.crumbs { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; overflow-x: auto; }
.crumbs button { min-height: var(--touch-s); padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.crumbs button[aria-current="location"] { color: var(--color-ink); background: var(--color-paper-2); }
.crumbs svg { width: 16px; height: 16px; color: var(--color-muted); flex-shrink: 0; }
@media (hover: hover) { .crumbs button:hover { background: var(--color-paper-2); color: var(--color-ink); } }
.views { margin-inline-start: auto; }

.panel { background: color-mix(in oklab, var(--color-paper-2) 98%, transparent); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.panel h2 { font-size: var(--text-lg); color: var(--color-ink); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }

.kpis { position: absolute; z-index: var(--z-raised); left: var(--edge); top: calc(var(--top) + var(--edge)); width: var(--left-w); max-height: calc(100% - var(--top) - var(--foot) - var(--tl) - var(--edge) * 3); overflow: auto; gap: var(--space-lg); }
.context { position: absolute; z-index: var(--z-raised); right: var(--edge); top: calc(var(--top) + var(--edge)); width: var(--right-w); bottom: calc(var(--foot) + var(--tl) + var(--edge) * 2); overflow: auto; }
.cams { position: absolute; z-index: var(--z-raised); left: calc(var(--left-w) + var(--edge) * 2); right: calc(var(--right-w) + var(--edge) * 2); top: calc(var(--top) + var(--edge)); bottom: calc(var(--foot) + var(--tl) + var(--edge) * 2); overflow: auto; }
.timeline { position: absolute; z-index: var(--z-raised); left: var(--edge); right: var(--edge); bottom: calc(var(--foot) + var(--edge) / 2); height: var(--tl); gap: var(--space-xs); padding-block: var(--space-sm); }
.foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-sm); min-height: var(--foot); padding: var(--space-2xs) var(--edge); background: color-mix(in oklab, var(--color-paper-3) 92%, transparent); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-note { color: var(--color-muted); font-size: var(--text-sm); margin-inline-end: auto; min-width: 0; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--touch-s); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1.15 var(--font-body); text-align: center; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .seg-btn:focus-visible, .crumbs button:focus-visible, .row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-pressed="true"] { background: var(--color-cool-soft); border-color: var(--color-cool); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) { .btn--quiet:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); } .btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); } }
.seg { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg-btn, .seg label { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-s); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); margin-inline-start: -1px; background: var(--color-paper); color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg-btn:first-child, .seg label:first-of-type { border-radius: var(--radius-pill) 0 0 var(--radius-pill); margin-inline-start: 0; }
.seg-btn:last-child, .seg label:last-of-type { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.seg-btn[aria-pressed="true"], .seg input:checked + label { position: relative; background: var(--color-cool-soft); border-color: var(--color-cool); color: var(--color-ink); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; position: relative; }
@media (hover: hover) { .seg-btn:hover, .seg label:hover { background: var(--color-paper-3); } }
.chip { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 28px; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.chip--accent { background: var(--color-accent-soft); border-color: var(--color-accent); }

/* status: shape + word + colour, never colour alone */
.st { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.st svg { width: 18px; height: 18px; flex-shrink: 0; }
[data-st="run"] svg { color: var(--color-ok); } [data-st="slow"] svg, [data-st="warn"] svg { color: var(--color-accent); }
[data-st="stop"] svg { color: var(--color-bad); } [data-st="maint"] svg { color: var(--color-cool); } [data-st="off"] svg { color: var(--color-muted); }

/* ---------- KPIs ---------- */
.k-label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.reading { font-family: var(--font-outlier); font-size: 4rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums slashed-zero; }
.k-sub { color: var(--color-ink-2); font-size: var(--text-sm); }
.k-sub .measured { color: var(--color-cool); }
.kpi-lead { display: grid; gap: var(--space-xs); }
.kpi-block { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.outs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.outs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); align-items: baseline; }
.outs .num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums slashed-zero; color: var(--color-ink); }
.meter { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--color-paper-3); overflow: hidden; }
.meter > span { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(var(--p, 0)); background: var(--color-cool); transition: transform var(--dur-short) var(--ease-out); }
.meter[data-st="slow"] > span { background: var(--color-accent); } .meter[data-st="stop"] > span { background: var(--color-bad); }
.pair { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.pair dt { color: var(--color-muted); font-size: var(--text-sm); }
.pair dd { margin: 0; }
.big { font-size: var(--text-2xl); color: var(--color-ink); line-height: 1.1; }

.costbar { display: flex; gap: var(--space-3xs); height: 10px; border-radius: 5px; overflow: hidden; background: var(--color-paper-3); }
.costbar span { flex: 1 1 0; min-width: 2px; }
.cb-e { background: var(--color-cool); } .cb-s { background: var(--color-accent); } .cb-d { background: var(--color-bad); }
.costs { margin: 0; display: grid; gap: var(--space-2xs); }
.costs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); font-size: var(--text-sm); }
.costs dt { display: inline-flex; align-items: baseline; gap: var(--space-xs); color: var(--color-ink-2); }
.costs dd { margin: 0; color: var(--color-ink); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; align-self: center; }
.causes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.causes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); align-items: baseline; font-size: var(--text-sm); }
.causes .measured { color: var(--color-ink); }
.meter[data-st="maint"] > span { background: var(--color-cool); }

/* ---------- context panel ---------- */
#ctx { display: grid; gap: var(--space-md); align-content: start; }
.ctx-title { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-display); }
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; width: 100%; min-height: 52px; padding: var(--space-xs) var(--space-2xs); border: 0; border-top: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink); font: 400 var(--text-sm)/1.35 var(--font-body); text-align: start; cursor: pointer; border-radius: 0; }
.list li:first-child .row { border-top: 0; }
.row .when { font-family: var(--font-outlier); color: var(--color-cool); font-size: var(--text-sm); }
.row .name { font-weight: 500; font-size: var(--text-md); }
.row .txt { color: var(--color-ink-2); }
@media (hover: hover) { .row:hover { background: var(--color-paper-3); } }
.row[data-st="stop"] { box-shadow: inset 3px 0 0 var(--color-bad); }
.facts { margin: 0; display: grid; }
.facts > div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.facts dd { margin: 0; font-family: var(--font-outlier); color: var(--color-cool); font-size: var(--text-lg); font-variant-numeric: tabular-nums slashed-zero; }
.loss { display: grid; gap: var(--space-xs); }
.loss-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 3.5rem; gap: var(--space-sm); align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.loss-row .meter { grid-column: auto; }
.loss-row .measured { text-align: end; color: var(--color-ink); }
.big-out { font-family: var(--font-outlier); font-size: var(--text-3xl); line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums slashed-zero; }
.empty { display: grid; gap: var(--space-2xs); padding: var(--space-md); border: var(--rule-hair) dashed var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-sm); }
.empty-title { font-weight: 500; color: var(--color-ink); font-size: var(--text-md); }
.ask { display: flex; flex-direction: column; gap: var(--space-md); }
body.is-asking #ctx { display: none; }
.convo { display: grid; gap: var(--space-sm); align-content: start; }
.msg { max-width: 92%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); font-size: var(--text-sm); line-height: 1.45; }
.msg--q { justify-self: end; background: var(--color-accent-soft); }
.msg--a { justify-self: start; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); }
.msg--a .src { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-cool); }
.msg--a[aria-busy="true"] { color: var(--color-muted); }
.suggest { display: grid; gap: var(--space-xs); }
.suggest .btn { justify-content: flex-start; text-align: start; min-height: 36px; padding-block: var(--space-2xs); }
.suggest { gap: var(--space-2xs); }
.ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.ask-form input { min-height: var(--touch-s); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-md); }
.ask-form input::placeholder { color: var(--color-muted); }
.ask-form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ---------- camera wall ---------- */
.cam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.cam { position: relative; margin: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-paper-3); aspect-ratio: 16 / 9; }
.cam canvas { width: 100%; height: 100%; display: block; filter: grayscale(1) contrast(1.15) brightness(0.95); }
.cam figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); background: color-mix(in oklab, var(--color-paper-3) 80%, transparent); font-size: var(--text-xs); color: var(--color-ink); }
.cam .sim { position: absolute; top: var(--space-2xs); left: var(--space-2xs); }
.cam .measured { color: var(--color-ink-2); }

/* ---------- timeline ---------- */
.tl-head { display: flex; align-items: center; gap: var(--space-md); min-height: 36px; }
.tl-head h2 { font-size: var(--text-md); }
.tl-now { color: var(--color-cool); }
.timeline[data-replay="true"] .tl-now { color: var(--color-accent); }
.tl-head .btn { min-height: 36px; margin-inline-start: auto; }
.tl-body { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); flex: 1; min-height: 0; }
.tl-names { display: grid; grid-template-rows: repeat(4, 1fr); font-size: var(--text-xs); color: var(--color-ink-2); align-items: center; padding-bottom: var(--space-md); }
.tl-track { position: relative; min-height: 0; }
.tl-gantt { position: absolute; left: 0; right: 0; top: 0; bottom: 18px; width: 100%; height: calc(100% - 18px); border-radius: 4px; background: var(--color-paper-3); }
.tl-gantt .run { fill: var(--color-ok-soft); } .tl-gantt .slow { fill: var(--color-accent); } .tl-gantt .stop { fill: var(--color-bad); }
.tl-gantt .maint { fill: var(--color-cool); } .tl-gantt .off { fill: var(--color-paper-3); }
.tl-cursor { position: absolute; top: -4px; bottom: 14px; width: 3px; margin-left: -1px; background: var(--color-ink); border-radius: 2px; pointer-events: none; transform: translateX(var(--x, 0)); }
#tl-range { position: absolute; inset: 0 0 18px 0; width: 100%; height: calc(100% - 18px); margin: 0; opacity: 0; cursor: ew-resize; touch-action: none; }
#tl-range:focus-visible + .tl-ticks { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tl-track:has(#tl-range:focus-visible) .tl-gantt { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tl-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }
.tl-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* ---------- labels pinned in the 3D view ---------- */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 4px; background: color-mix(in oklab, var(--color-paper-2) 90%, transparent); color: var(--color-ink); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; transform: translate(-50%, -100%); }
.lbl svg { width: 14px; height: 14px; flex-shrink: 0; }
.lbl--hall { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-sm); }
.lbl--node { border-color: var(--color-cool); color: var(--color-ink); background: color-mix(in oklab, var(--color-cool-soft) 92%, transparent); }
.lbl--alert { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-sm); }
.lbl--alert[data-st="stop"] { border-color: var(--color-bad); background: var(--color-bad-soft); }
.lbl--alert[data-st="slow"], .lbl--alert[data-st="warn"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.lbl--alert[data-st="maint"] { border-color: var(--color-cool); background: var(--color-cool-soft); }
.lbl--alert::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--space-md); background: var(--color-rule-2); }
.lbl--alert { margin-top: calc(var(--space-md) * -1); }

/* ---------- phone and narrow screens: everything stacks ---------- */
@media (max-width: 60rem) {
  .js body { height: auto; overflow: visible; display: flex; flex-direction: column; }
  .bar, .stage, .kpis, .context, .cams, .timeline, .foot { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-height: none; }
  .bar { flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xs); }
  .crumbs { order: 3; width: 100%; }
  .views { margin-inline-start: 0; order: 4; }
  .stage { height: 52vh; min-height: 300px; }
  .kpis, .context, .cams, .timeline { margin: var(--space-sm) var(--space-sm) 0; }
  .context { min-height: 0; }
  .timeline { height: 170px; }
  .cam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { flex-wrap: wrap; margin-top: var(--space-sm); }
  .foot-note { width: 100%; }
  .reading { font-size: 3.2rem; }
  .lbl--hall { display: none; }
  .lbl, .lbl--alert { font-size: var(--text-xs); }
}

/* ---------- close-ups (closeups.js): one detailed scene, flown into from the site ---------- */
body.is-closeup .kpis, body.is-closeup .context, body.is-closeup .timeline, body.is-closeup .cams, body.is-closeup #labels, body.is-closeup .views { display: none; }
.cu { position: absolute; inset: var(--top) 0 var(--foot) 0; z-index: var(--z-raised); pointer-events: none; }
.cu > .panel, .cu-pip { pointer-events: auto; }
.cu-fade { position: absolute; inset: calc(var(--top) * -1) 0 calc(var(--foot) * -1) 0; background: var(--scene-sky); opacity: 0; pointer-events: none; }
.cu-tags { position: absolute; inset: calc(var(--top) * -1) 0 0 0; overflow: hidden; }
.cu-head { position: absolute; left: var(--edge); right: var(--edge); top: var(--edge); flex-direction: row; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); }
.cu-head-text { min-width: 0; margin-inline-end: auto; }
.cu-head .ctx-title { font-size: var(--text-xl); max-width: none; }
.cu-nav { display: flex; gap: var(--space-xs); }
.cu-data { position: absolute; left: var(--edge); top: calc(var(--edge) * 2 + 76px); width: var(--left-w); max-height: calc(100% - var(--edge) * 3 - 76px); overflow: auto; }
.cu-rows dd { font-size: var(--text-sm); text-align: end; }
.cu-rows dt { white-space: nowrap; }
.cu-rows dd[data-st="run"] { color: var(--color-ok); }
.cu-rows dd[data-st="warn"] { color: var(--color-accent); }
.cu-rows dd[data-st="stop"] { color: var(--color-bad); }
.cu-rows dd[data-st="mono"] { font-size: var(--text-xs); color: var(--color-ink-2); white-space: pre; }
.cu-card { position: absolute; right: var(--edge); top: calc(var(--edge) * 2 + 76px); width: var(--right-w); max-height: calc(100% - var(--edge) * 3 - 76px); overflow: auto; border-width: 2px; }
.cu-card[data-st="warn"] { border-color: var(--color-accent); }
.cu-card[data-st="stop"] { border-color: var(--color-bad); }
.cu-card[data-st="run"] { border-color: var(--color-ok); }
.cu-sees { display: grid; gap: var(--space-xs); color: var(--color-ink); }
.cu-todo { margin: 0; padding-inline-start: 1.3em; display: grid; gap: var(--space-xs); color: var(--color-ink); }
.cu-todo li::marker { font-family: var(--font-outlier); color: var(--color-accent); }
.cu-pip { position: absolute; margin: 0; left: calc(var(--left-w) + var(--edge) * 2); bottom: var(--edge); width: min(420px, calc(100% - var(--left-w) - var(--right-w) - var(--edge) * 4)); aspect-ratio: 16 / 10; border: 2px solid var(--color-rule-2); border-radius: var(--radius-card); overflow: hidden; }
.cu-pip figcaption { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); background: color-mix(in oklab, var(--color-paper-3) 82%, transparent); font-size: var(--text-xs); }
.cu-box { position: absolute; border: 2px solid var(--color-ok); border-radius: 2px; }
.cu-box span { position: absolute; left: -2px; bottom: 100%; padding: 1px 5px; background: var(--color-ok); color: var(--color-paper-3); font: 600 var(--text-xs)/1.3 var(--font-outlier); white-space: nowrap; }
.cu-box[data-st="stop"] { border-color: var(--color-bad); }
.cu-box[data-st="stop"] span { background: var(--color-bad); }
.cu-menu { position: absolute; z-index: var(--z-dropdown); right: var(--edge); bottom: calc(var(--foot) + var(--edge) / 2); width: min(460px, calc(100% - var(--edge) * 2)); }
@media (max-width: 60rem) {
  .cu { position: relative; inset: auto; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm); pointer-events: auto; order: 2; }
  .cu-head, .cu-data, .cu-card, .cu-pip { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-height: none; }
  .cu-head { flex-wrap: wrap; }
  .cu-tags, .cu-fade { display: none; }
  .cu-menu { position: fixed; }
}
.cu-note { margin: 0; padding: var(--space-xs) var(--space-sm); border-left: 4px solid var(--color-bad); background: var(--color-bad-soft); color: var(--color-ink); font-weight: 500; }
/* close-up highlights (Misa, 7 Nov): colour by meaning + an icon or word, never colour alone. Text colours keep 4.5:1 in both themes. */
.cu { --hl-cause: var(--color-accent); --hl-loss: var(--color-bad); --hl-fix: var(--color-ok); --hl-name: var(--color-cool); }
[data-mode="light"] .cu { --hl-cause: oklch(47% 0.12 70); --hl-loss: oklch(46% 0.17 25); --hl-fix: oklch(42% 0.12 150); --hl-name: oklch(45% 0.14 250); }
.hl { font-weight: 700; }
.hl--c { color: var(--hl-cause); } .hl--c::before { content: "▲ "; font-size: 0.8em; }
.hl--l { color: var(--hl-loss); } .hl--l::before { content: "▼ "; font-size: 0.8em; }
.hl--f { color: var(--hl-fix); } .hl--f::before { content: "✓ "; }
.hl--m { color: var(--hl-name); }
.cu-card h2 { font-size: var(--text-md); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.cu-todo li::marker { font-weight: 700; color: var(--color-ink); }
.role { display: inline-flex; align-items: center; min-height: 22px; padding: 0 6px; margin-inline-end: 4px; border: 1px solid; border-radius: 4px; font: 700 var(--text-xs)/1 var(--font-outlier); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); vertical-align: 1px; }
.role[data-role="operator"] { border-color: var(--color-cool); background: var(--color-cool-soft); }
.role[data-role="maintenance"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.role[data-role="electrician"] { border-color: var(--color-bad); background: var(--color-bad-soft); }
.role[data-role="manager"] { border-color: var(--color-ok); background: var(--color-ok-soft); }
.cu-rows dd[data-st="run"], .cu-rows dd[data-st="warn"], .cu-rows dd[data-st="stop"], .cu-rows dd[data-st="info"] { padding: 2px 8px; border: 1px solid; border-radius: 4px; color: var(--color-ink); font-weight: 700; }
.cu-rows dd[data-st="run"] { border-color: var(--color-ok); background: var(--color-ok-soft); }
.cu-rows dd[data-st="warn"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.cu-rows dd[data-st="stop"] { border-color: var(--color-bad); background: var(--color-bad-soft); }
.cu-rows dd[data-st="info"] { border-color: var(--color-cool); background: var(--color-cool-soft); }
.cu-rows dd[data-st="run"]::before { content: "✓ "; color: var(--hl-fix); }
.cu-rows dd[data-st="warn"]::before { content: "▲ "; color: var(--hl-cause); }
.cu-rows dd[data-st="stop"]::before { content: "✕ "; color: var(--hl-loss); }
.cu-rows dd[data-st="info"]::before { content: "◆ "; color: var(--hl-name); }
.cu-data .panel-head .chip { border-color: var(--color-cool); background: var(--color-cool-soft); }
/* 3D labels: coloured leader line down to the part, with a dot on the spot */
.cu-tags .lbl { margin-top: -30px; --lead: var(--color-rule-2); border-width: 2px; border-color: var(--lead); font-weight: 600; }
.cu-tags .lbl::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 30px; margin-left: -1px; background: var(--lead); }
.cu-tags .lbl .lead { position: absolute; left: 50%; top: calc(100% + 30px); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--lead); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lead) 35%, transparent); }
.cu-tags .lbl[data-st="stop"] { --lead: var(--color-bad); background: var(--color-bad-soft); }
.cu-tags .lbl[data-st="warn"] { --lead: var(--color-accent); background: var(--color-accent-soft); }
.cu-tags .lbl[data-st="run"] { --lead: var(--color-ok); }
.cu-tags .lbl--node { --lead: var(--color-cool); }
.cu-tags .lbl--alert { margin-top: -30px; }
.cu-tags .lbl[data-st="stop"] .lead { animation: cu-ping 1s var(--ease-out) infinite; }
@keyframes cu-ping { 50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--lead) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cu-tags .lbl .lead { animation: none; } }
.cu-rows dd[data-st="run"], .cu-rows dd[data-st="warn"], .cu-rows dd[data-st="stop"], .cu-rows dd[data-st="info"] { white-space: nowrap; font-size: var(--text-xs); }
.cu-rows > div { align-items: center; }
/* close-up 3: thermal split and the trend chart */
.cu-split { position: absolute; top: calc(var(--edge) * 2 + 76px); bottom: 0; width: 0; border-left: 2px dashed var(--color-ink); pointer-events: none; }
.cu-split span { position: absolute; top: var(--space-xs); padding: 2px 8px; border-radius: 4px; background: var(--color-paper-3); color: var(--color-ink); font: 700 var(--text-xs)/1.4 var(--font-outlier); white-space: nowrap; }
.cu-split span:first-child { right: var(--space-xs); } .cu-split span:last-child { left: var(--space-xs); }
.cu-chart { position: absolute; left: calc(var(--left-w) + var(--edge) * 2); bottom: var(--edge); width: min(560px, calc(100% - var(--left-w) - var(--right-w) - var(--edge) * 4)); margin: 0; gap: var(--space-xs); padding: var(--space-sm); }
.cu-chart h2 { font-size: var(--text-md); }
.cu-legend { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--text-xs)/1 var(--font-outlier); color: var(--color-ink-2); }
.cu-legend i { width: 120px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #080019, #520085, #d1144d, #ff7a05, #ffe033, #fffff0); }
.cu-chart svg { display: block; width: 100%; height: auto; }
.cu-chart .g { stroke: var(--color-rule); stroke-width: 1; }
.cu-chart .ax { fill: var(--color-muted); font: 500 11px var(--font-outlier); }
.cu-chart .th-warn { stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cu-chart .th-alarm { stroke: var(--color-bad); stroke-width: 1.5; stroke-dasharray: 2 3; }
.cu-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.cu-chart .l-de { stroke: var(--hl-loss); } .cu-chart .l-nde { stroke: var(--hl-name); } .cu-chart .l-amb { stroke: var(--color-muted); stroke-dasharray: 4 3; stroke-width: 1.5; }
.cu-chart .dot-de { fill: var(--hl-loss); stroke: var(--color-paper-2); stroke-width: 2; }
.cu-chart .lab { font: 700 12px var(--font-outlier); } .cu-chart .lab.de { fill: var(--hl-loss); } .cu-chart .lab.nde { fill: var(--hl-name); } .cu-chart .lab.amb { fill: var(--color-muted); }
.cu-chart .lab.warn { fill: var(--hl-cause); } .cu-chart .lab.alarm { fill: var(--hl-loss); }
@media (max-width: 60rem) { .cu-chart { position: relative; left: auto; bottom: auto; width: auto; } .cu-split { display: none; } }
.cu-rows dt { white-space: normal; min-width: 0; }
.cu-rows dd { flex-shrink: 0; max-width: 62%; }
/* close-up 4: night vision camera wall and detection boxes */
.cu-wall { position: absolute; left: calc(var(--left-w) + var(--edge) * 2); bottom: var(--edge); width: min(640px, calc(100% - var(--left-w) - var(--right-w) - var(--edge) * 4)); margin: 0; gap: var(--space-xs); padding: var(--space-sm); }
.cu-wall h2 { font-size: var(--text-md); }
.cu-wall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.cu-feed { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--color-rule-2); border-radius: 4px; overflow: hidden; }
.cu-feed[data-st="stop"] { border-color: var(--color-bad); animation: cu-alarm 1s steps(2) infinite; }
@keyframes cu-alarm { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .cu-feed[data-st="stop"] { animation: none; } }
.cu-feed-cap { position: absolute; left: 4px; top: 4px; z-index: 1; padding: 1px 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.7); color: #d6ffd9; font: 600 11px/1.4 var(--font-outlier); }
.cu-det { position: absolute; border: 2px solid var(--color-bad); border-radius: 2px; pointer-events: none; }
.cu-det span { position: absolute; left: -2px; bottom: 100%; padding: 1px 5px; background: var(--color-bad); color: #fff; font: 700 11px/1.3 var(--font-outlier); white-space: nowrap; }
.cu-det span::before { content: "✕ "; }
.cu-det--main { margin-top: calc(var(--top) * -1); }
.role[data-role="security"] { border-color: var(--color-bad); background: var(--color-bad-soft); }
@media (max-width: 60rem) { .cu-wall { position: relative; left: auto; bottom: auto; width: auto; } }
/* the feeds are drawn on the canvas underneath: the wall body must stay transparent */
.cu-wall { background: transparent; border: 0; padding: 0; width: min(560px, calc(100% - var(--left-w) - var(--right-w) - var(--edge) * 4)); }
.cu-wall figcaption { background: color-mix(in oklab, var(--color-paper-2) 96%, transparent); border: var(--rule-hair) solid var(--color-rule); border-radius: 6px; padding: var(--space-2xs) var(--space-sm); }
/* close-up 2 (Misa, FQ-04): today a red light vs with the Neural Net what/where/why/fix */
.cu-contrast { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-xs); }
.cu-contrast > div { padding: var(--space-xs) var(--space-sm); border-radius: 6px; border: 2px solid; }
.cu-today { border-color: var(--color-bad); background: var(--color-bad-soft); }
.cu-us { border-color: var(--color-ok); background: var(--color-ok-soft); }
.cu-ct-h { margin: 0 0 4px; font: 700 var(--text-xs)/1.3 var(--font-outlier); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink); }
.cu-contrast p { margin: 0; font-size: var(--text-sm); color: var(--color-ink); }
.cu-us dl { margin: 0; display: grid; gap: 2px; font-size: var(--text-sm); }
.cu-us dl > div { display: grid; grid-template-columns: 3.6em 1fr; gap: 4px; }
.cu-us dt { font-weight: 700; color: var(--color-ink-2); }
.cu-us dd { margin: 0; color: var(--color-ink); }
/* longer languages: pills wrap inside the panel instead of overflowing */
.cu-rows dd[data-st="run"], .cu-rows dd[data-st="warn"], .cu-rows dd[data-st="stop"], .cu-rows dd[data-st="info"] { white-space: normal; text-align: start; overflow-wrap: anywhere; }
.cu-rows dd { max-width: 58%; }