/*
 * Agent Console Enterprise · the org console in the HealthNext application frame.
 *
 * The frame is HealthNext's (apps/console/src/app/globals.css and components/shell): a full-height
 * sidebar with the spaces and their counts, a topbar, a workspace header with the space's tabs, the
 * working area, a details panel, a status footer, and a demo bar when the organization is synthetic.
 * Its tokens are HealthNext's — opaque planes, one accent for interactive state, muted status colours,
 * hierarchy by ink opacity, one overhead light for elevation — in both registers. The public Agent
 * Console's instrument (§4) renders on the same tokens; the old token names are aliased in §1.3 so
 * every space keeps rendering unforked. Nothing on screen is set below 12px. Nothing moves unless data
 * moved.
 */

/* ═══════════════════ 1. TOKENS ═══════════════════ */
/* 1.1 the dark register (the default) */
:root {
  color-scheme: dark;
  --bg: #090c12;
  --bar-bg: #0b0e15;
  --side-bg: #0b0e15;
  --pane-fill: #0e1119;
  --pane-head: #13171f;
  --surface-raised: #191e29;
  --plane-0: #0c131b; --plane-1: #10171f; --plane-2: #171e27; --plane-3: #202933;
  --ink-1: rgba(255, 255, 255, .96); --ink-2: rgba(255, 255, 255, .64); --ink-3: rgba(255, 255, 255, .50); --ink-4: rgba(255, 255, 255, .36);
  --line: rgba(255, 255, 255, .075); --line-2: #262d3a; --line-strong: rgba(255, 255, 255, .38);
  --accent-fill: #4f6bff; --accent-text: #97acff; --accent-hover: #6a82ff; --accent-soft: rgba(79, 107, 255, .16); --accent-edge: rgba(79, 107, 255, .45);
  --ok: #4ec38a; --warn-c: #d6a93b; --risk: #e08a6f; --info: #74b8f2;
  --side-ink-1: rgba(255, 255, 255, .94); --side-ink-2: rgba(255, 255, 255, .64); --side-ink-3: rgba(255, 255, 255, .46);
  --side-line: rgba(255, 255, 255, .09); --side-hover: rgba(255, 255, 255, .06); --side-active: rgba(255, 255, 255, .08);
  --lit: inset 0 1px 0 0 rgba(215, 235, 255, .05);
  --ring: 0 0 0 1px rgb(190 215 240 / .14); --ring-strong: 0 0 0 1px rgb(190 215 240 / .22);
  --elev-1: var(--lit), var(--ring), 0 1px 2px 0 rgba(3, 6, 11, .34);
  --elev-2: var(--lit), var(--ring), 0 2px 2px 0 rgba(3, 6, 11, .32), 0 8px 16px -4px rgba(3, 6, 11, .44);
  --elev-3: inset 0 1px 0 0 rgba(215, 235, 255, .06), var(--ring-strong), 0 2px 4px 0 rgba(3, 6, 11, .36), 0 16px 32px -12px rgba(3, 6, 11, .52), 0 32px 64px -24px rgba(3, 6, 11, .40);
  --pane-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  --inset: inset 0 1px 1px rgba(3, 6, 11, .55), inset 0 0 0 1px rgba(190, 215, 240, .07);
  --scrim: rgba(3, 6, 11, .55);
  --chart-muted: #3a4353; --chart-grid: rgba(255, 255, 255, .06); --hatch: rgba(255, 255, 255, .06);
  --chart-top: rgba(151, 172, 255, .42); --chart-bottom: rgba(151, 172, 255, 0);
  /* the four token classes: one hue, stepped by price per token — output brightest, cache read quietest */
  --c1: #34478f; --c2: #8fa6ff; --c3: #c7d2ff; --c4: #5470d6;
  --inst: #0a0e15;
  /* the tray the band's cards stand on, and a card: one surface lit from the top, a rim, a shadow that deepens as it lifts */
  --tray: #06090f; --tray-edge: rgba(255, 255, 255, .05);
  --card-a: #171d27; --card-b: #10161f; --card-rim: rgba(255, 255, 255, .11); --card-edge: rgba(255, 255, 255, .07);
  --card-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 3px 6px rgba(0, 0, 0, .35), 0 12px 28px -6px rgba(0, 0, 0, .6), 0 28px 56px -18px rgba(0, 0, 0, .7);
  --card-lift: 0 2px 0 rgba(0, 0, 0, .55), 0 8px 14px rgba(0, 0, 0, .4), 0 22px 44px -8px rgba(0, 0, 0, .65), 0 44px 80px -20px rgba(0, 0, 0, .7);
  --card-press: 0 1px 0 rgba(0, 0, 0, .55), 0 4px 10px -4px rgba(0, 0, 0, .5);
  --spark: #4f6bff; --spark-hot: #97acff; --spark-idle: #262b33;
  --spring: cubic-bezier(.2, 1.65, .35, 1);
}
/* 1.2 the light register: the data on white, the topbar and footer in the light register, ONE ink rail on the left */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9edf3;
  --bar-bg: #f8f9fb;
  --pane-fill: #ffffff;
  --pane-head: #f6f7fa;
  --surface-raised: #f1f3f7;
  --plane-0: #e5eaf2; --plane-1: #f7f9fc; --plane-2: #fcfdff; --plane-3: #ffffff;
  --ink-1: #0f1218; --ink-2: #3d4653; --ink-3: #5c6673; --ink-4: #8a94a3;
  --line: rgba(19, 26, 38, .10); --line-2: rgba(19, 26, 38, .17); --line-strong: rgba(19, 26, 38, .48);
  --accent-fill: #0a6cd6; --accent-text: #0a66c2; --accent-hover: #0a5cad; --accent-soft: rgba(10, 108, 214, .10); --accent-edge: rgba(10, 108, 214, .40);
  --ok: #1f7a4d; --warn-c: #8a5a00; --risk: #b3392e; --info: #0a66c2;
  --lit: inset 0 1px 0 0 rgba(255, 255, 255, .9);
  --ring: 0 0 0 1px rgb(19 26 38 / .14); --ring-strong: 0 0 0 1px rgb(19 26 38 / .22);
  --elev-1: var(--lit), var(--ring), 0 1px 2px 0 rgba(22, 24, 29, .06);
  --elev-2: var(--lit), var(--ring), 0 2px 2px 0 rgba(22, 24, 29, .05), 0 8px 16px -4px rgba(22, 24, 29, .09);
  --elev-3: var(--lit), var(--ring-strong), 0 2px 4px 0 rgba(22, 24, 29, .06), 0 16px 32px -12px rgba(22, 24, 29, .12), 0 32px 64px -24px rgba(22, 24, 29, .10);
  --pane-shadow: 0 1px 2px rgba(22, 24, 29, .05);
  --inset: inset 0 1px 2px rgba(19, 26, 38, .09), inset 0 0 0 1px rgba(19, 26, 38, .08);
  --scrim: rgba(16, 21, 29, .32);
  --chart-muted: #c9d0db; --chart-grid: rgba(19, 26, 38, .07); --hatch: rgba(19, 26, 38, .09);
  --chart-top: rgba(10, 108, 214, .26); --chart-bottom: rgba(10, 108, 214, 0);
  --c1: #c9d8f7; --c2: #4f86e8; --c3: #0a4fd6; --c4: #8fb0f0;
  --inst: #eef1f6;
  --tray: #e1e6ee; --tray-edge: rgba(19, 26, 38, .12);
  --card-a: #ffffff; --card-b: #f6f7fa; --card-rim: rgba(255, 255, 255, .95); --card-edge: rgba(19, 26, 38, .12);
  --card-shadow: 0 1px 1px rgba(28, 24, 16, .08), 0 2px 5px rgba(28, 24, 16, .08), 0 12px 28px -6px rgba(28, 24, 16, .2), 0 28px 56px -18px rgba(28, 24, 16, .22);
  --card-lift: 0 2px 3px rgba(28, 24, 16, .1), 0 6px 12px rgba(28, 24, 16, .1), 0 20px 40px -8px rgba(28, 24, 16, .26), 0 40px 72px -20px rgba(28, 24, 16, .28);
  --card-press: 0 1px 1px rgba(28, 24, 16, .1), 0 4px 10px -4px rgba(28, 24, 16, .2);
  --spark: #4f86e8; --spark-hot: #0b5cff; --spark-idle: #d6d3cd;
  /* light means light: the sidebar takes the light planes, its active row the accent wash */
  --side-bg: #f3f5f8; --side-ink-1: #0f1218; --side-ink-2: #3d4653; --side-ink-3: #6b7583;
  --side-line: rgba(19, 26, 38, .12); --side-hover: rgba(19, 26, 38, .05); --side-active: rgba(10, 108, 214, .10);
}
/* 1.3 the names every space and the public instrument were written against, on the tokens above */
:root, :root[data-theme="light"] {
  --well: var(--bg); --chrome: var(--bar-bg); --panel: var(--pane-fill); --panel-2: var(--pane-head); --raised: var(--surface-raised); --overlay: var(--plane-3);
  --ink: var(--ink-1); --quiet: var(--ink-3); --faint: var(--ink-4);
  --cobalt: var(--accent-fill); --accent: var(--accent-text); --on-cobalt: #ffffff; --accent-wash: var(--accent-soft);
  --good: var(--ok); --good-wash: color-mix(in srgb, var(--ok) 14%, transparent); --good-glow: color-mix(in srgb, var(--ok) 45%, transparent);
  --warn: var(--warn-c); --warn-wash: color-mix(in srgb, var(--warn-c) 12%, transparent);
  --stop: var(--risk); --stop-wash: color-mix(in srgb, var(--risk) 13%, transparent);
  --hi: var(--lit); --e1: var(--elev-1); --e2: var(--elev-2); --e3: var(--elev-3); --chrome-shadow: 0 1px 0 var(--line-2);
  --material: var(--bar-bg);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r-chip: 4px; --r-control: 6px; --r-pane: 8px; --r-overlay: 12px;
  --demo: 26px; --top: 52px; --wsh: 44px; --side: 208px; --side-narrow: 60px; --status: 28px; --gutter: 8px; --insp: 400px;
  --ease: cubic-bezier(.2, 0, .38, .9);
  --t-ui: 110ms; --t-move: 200ms; --t-value: 600ms;
  --split: 9.4fr;
  /* the public Agent Console's own names */
  --band: var(--inst); --band-head: var(--panel-2); --band-foot: var(--panel-2); --hair: var(--line); --hair2: var(--line);
  --tile: var(--panel); --tile2: var(--panel-2); --void: var(--well); --lit-c: var(--accent); --cobalt-wash: var(--accent-wash);
  --cobalt-edge: var(--accent-edge); --chart-line: var(--accent); --c-cacheread: var(--c1); --c-cachewrite: var(--c2);
  --c-output: var(--c3); --c-input: var(--c4); --k: 1;
}

/* ═══════════════════ 2. BASE ═══════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--well); color: var(--ink); }
body { font: 400 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.006em; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
svg { display: block; }
h1, h2, h3 { letter-spacing: -.012em; }
small { font-size: 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent-fill) 30%, transparent); }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0; }
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.quiet { color: var(--quiet); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-tone="good"] { --tone: var(--good); --tone-wash: var(--good-wash); }
[data-tone="warn"] { --tone: var(--warn); --tone-wash: var(--warn-wash); }
[data-tone="stop"] { --tone: var(--stop); --tone-wash: var(--stop-wash); }
[data-tone="accent"] { --tone: var(--accent); --tone-wash: var(--accent-wash); }
[data-tone="quiet"], [data-tone=""] { --tone: var(--quiet); --tone-wash: transparent; }
.tone { color: var(--tone, inherit); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--line-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
/* the micro register: 12px, uppercase, open tracking — captions, column heads, section labels */
.lab, .cap, .pane-h h2, .insp h3, .sidebar .lab, .pal .g, .mhead, .band .cap { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ═══════════════════ 3. THE FRAME ═══════════════════ */
.app { display: grid; grid-template-rows: auto minmax(0, 1fr) var(--status); height: 100dvh; min-height: 0; }
.body { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 0; min-width: 0; }
.app[data-side="narrow"] .body { grid-template-columns: var(--side-narrow) minmax(0, 1fr); }
.main { display: grid; grid-template-rows: var(--top) minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.work { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; min-width: 0; position: relative; }
.stage { display: grid; grid-template-rows: var(--wsh) minmax(0, 1fr); min-height: 0; min-width: 0; }

/* 3.1 the demo bar: on every screen of a synthetic organization, never on a real one */
.demo { display: none; align-items: center; justify-content: center; gap: 8px; height: var(--demo); padding: 0 16px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-edge); color: var(--accent-text); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.demo[data-on="yes"] { display: flex; }
.demo svg { width: 14px; height: 14px; flex: none; }
.demo .dim { opacity: .6; }

/* 3.2 the sidebar: glass with a little depth, the organization card and its estate-health ring, the sections, the active row's glow, the role card at the foot */
.sidebar { --side-glass: linear-gradient(180deg, rgba(255, 255, 255, .045) 0, rgba(255, 255, 255, .012) 160px, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #0d1119 0%, #0a0d14 100%);
  display: flex; flex-direction: column; min-height: 0; background: var(--side-glass); border-right: 1px solid var(--side-line); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .02), inset 0 1px 0 rgba(255, 255, 255, .05); color: var(--side-ink-1); overflow: hidden; }
:root:not([data-theme="light"]) .sidebar { color-scheme: dark; }
:root[data-theme="light"] .sidebar { --side-glass: linear-gradient(180deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .45) 200px, rgba(255, 255, 255, .25) 100%), linear-gradient(180deg, #eef1f6, #e9edf3); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .6), inset 0 1px 0 #fff; }
.lockup { display: flex; align-items: center; gap: 8px; height: var(--top); flex: none; padding: 0 12px; border-bottom: 1px solid var(--side-line); color: var(--side-ink-1); }
.lockup:hover { background: var(--side-hover); }
.lockup svg { width: 24px; height: 24px; flex: none; }
.lockup .lk { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.lockup .lk b { font-size: 12px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lockup .lk small { font-size: 12px; color: var(--side-ink-3); white-space: nowrap; }
/* the organization card: a tile, the name, DEMO when it is one, the fleet word, and a ring that is the reporting share of the approved fleet */
.orgcard { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; margin: 10px 10px 4px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--side-ink-1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--side-line); transition: box-shadow .2s var(--ease), transform .2s var(--spring); }
:root[data-theme="light"] .orgcard { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--side-line), 0 1px 2px rgba(19, 26, 38, .06); }
@media (hover: hover) { .orgcard:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--side-line), 0 6px 16px -8px rgba(0, 0, 0, .5); } }
.orgcard .tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 600 14px/1 var(--sans); color: #fff; background: linear-gradient(160deg, var(--accent-hover), var(--accent-fill)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px -2px var(--accent-edge); }
.orgcard .who { display: grid; gap: 2px; min-width: 0; }
.orgcard .who b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgcard .who .tag { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.orgcard .who .fw { font: 400 12px/1.2 var(--sans); color: var(--side-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgcard .who .fw[data-tone="warn"] { color: var(--warn); }
.orgcard .fleetline { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 6px; border-top: 1px solid var(--side-line); }
.orgcard .ring { width: 18px; height: 18px; flex: none; transform: rotate(-90deg); }
.orgcard .ring .track { fill: none; stroke: var(--side-line); stroke-width: 3; }
.orgcard .ring .arc { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--good-glow)); }
.app[data-motion="paused"] .orgcard .ring .arc { filter: none; }
/* the sections and their rows */
.sidebar .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.sidebar .grp { display: flex; flex-direction: column; gap: 2px; }
.sidebar .lab { padding: 6px 10px 2px; color: var(--side-ink-3); }
.sidebar .row { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: var(--r-control); color: var(--side-ink-2); font-size: 13px; white-space: nowrap; transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), box-shadow .25s var(--ease); }
.sidebar .row svg { width: 18px; height: 18px; flex: none; color: var(--side-ink-3); }
.sidebar .row .l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar .row .n { font-family: var(--mono); font-size: 12px; color: var(--side-ink-3); min-width: 1ch; text-align: right; }
.sidebar .row .n[data-changed] { animation: pop 600ms var(--ease); color: var(--accent-text); }
.sidebar .row:hover { background: var(--side-hover); color: var(--side-ink-1); }
.sidebar .row:hover svg { color: var(--side-ink-2); }
/* the active row: the accent bar and its glow */
.sidebar .row[aria-current="page"] { background: var(--side-active); color: var(--side-ink-1); font-weight: 500; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill) 22%, transparent), inset 12px 0 18px -14px var(--accent-edge); }
:root[data-theme="light"] .sidebar .row[aria-current="page"] { color: var(--accent-text); }
:root[data-theme="light"] .sidebar .row[aria-current="page"] svg { color: var(--accent-text); }
.sidebar .row[aria-current="page"] svg { color: var(--side-ink-1); }
.sidebar .row[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 0 2px 2px 0; background: var(--accent-fill); box-shadow: 0 0 10px 1px var(--accent-edge); }
.sidebar .row[aria-current="page"] .n { color: var(--side-ink-2); }
/* the role card: who is signed in, and the connection's state as the status bar shows it */
.sidebar .me { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; margin: 4px 10px 6px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--side-line); font-size: 12px; color: var(--side-ink-3); }
:root[data-theme="light"] .sidebar .me { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--side-line); }
.sidebar .me > svg { width: 18px; height: 18px; color: var(--side-ink-3); }
.sidebar .me .who { display: grid; gap: 3px; min-width: 0; }
.sidebar .me .who b { font-size: 12px; font-weight: 600; color: var(--side-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .me .live { display: inline-flex; align-items: center; gap: 7px; color: var(--side-ink-2); font: 400 12px var(--mono); letter-spacing: 0; white-space: nowrap; }
.sidebar .me .live > span { display: none; }
.sidebar .me .live::after { content: attr(data-state); }
.sidebar .me .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good-glow); animation: bp 1.7s var(--ease) infinite; flex: none; }
.sidebar .me .live[data-state="degraded"] i, .sidebar .me .live[data-state="paused"] i { background: var(--warn); box-shadow: none; animation: none; }
.app[data-motion="paused"] .sidebar .me .live i { animation: none; box-shadow: none; }
.sidebar .me .mid { grid-column: 1 / -1; min-width: 0; font: 400 12px/1.3 var(--sans); letter-spacing: 0; color: var(--side-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .me .mid::before { content: none; }
/* a short window: tighter rows, and the role card keeps only the role and the connection (the organization card carries the fleet) */
@media (max-height: 820px) {
  .sidebar .row { height: 26px; }
  .sidebar .lab { padding: 4px 10px 1px; }
  .sidebar .nav { gap: 4px; }
  .sidebar .me { padding: 6px 10px; }
  .sidebar .me .mid { display: none; }
}
.sidebar .foot { flex: none; padding: 4px 10px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--side-line); }
.sidebar .collapse { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--side-ink-3); font-size: 13px; white-space: nowrap; }
.sidebar .collapse:hover { background: var(--side-hover); color: var(--side-ink-2); }
.sidebar .collapse svg { width: 18px; height: 18px; flex: none; }
/* collapsed to icons: the tile, the rows' glyphs with a dot for a count, the role card's dot */
.app[data-side="narrow"] .lockup { justify-content: center; padding: 0; }
.app[data-side="narrow"] .lockup .lk, .app[data-side="narrow"] .sidebar .lab, .app[data-side="narrow"] .sidebar .row .l, .app[data-side="narrow"] .sidebar .row .n, .app[data-side="narrow"] .sidebar .collapse span, .app[data-side="narrow"] .orgcard .who, .app[data-side="narrow"] .orgcard .fleetline, .app[data-side="narrow"] .sidebar .me .who, .app[data-side="narrow"] .sidebar .me .mid { display: none; }
.app[data-side="narrow"] .orgcard { grid-template-columns: auto; justify-content: center; margin: 8px 6px 2px; padding: 6px; }
.app[data-side="narrow"] .sidebar .grp { padding-top: 6px; border-top: 1px solid var(--side-line); }
.app[data-side="narrow"] .sidebar .grp:first-child { padding-top: 0; border-top: 0; }
.app[data-side="narrow"] .sidebar .row, .app[data-side="narrow"] .sidebar .collapse { justify-content: center; padding: 0; }
.app[data-side="narrow"] .sidebar .row[data-count]::after { content: ""; position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); }
.app[data-side="narrow"] .sidebar .me { grid-template-columns: auto; justify-items: center; margin: 4px 6px; padding: 8px 0; position: relative; }
.app[data-side="narrow"] .sidebar .me::after { content: ""; position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* 3.3 the topbar: organization, search, what needs you, appearance, help, the role */
.top { display: flex; align-items: center; gap: 8px; height: var(--top); padding: 0 12px 0 10px; background: var(--bar-bg); border-bottom: 1px solid var(--line-2); min-width: 0; position: relative; z-index: 30; }
.ib { height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 7px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: 13px; flex: none; }
.ib:hover { background: var(--raised); color: var(--ink); }
.ib[aria-expanded="true"], .ib[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.ib svg { width: 17px; height: 17px; }
.ib.edge { border: 1px solid var(--line-2); background: var(--panel); }
.ib.edge:hover { background: var(--raised); }
.top .menubtn { display: none; }
.org { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; }
.org:hover, .org[aria-expanded="true"] { background: var(--raised); }
.org .av { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 12px/1 var(--sans); }
.org .tag { height: 18px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 4px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.org svg { width: 13px; height: 13px; color: var(--ink-3); }
.top .grow { flex: 1 1 auto; min-width: 8px; }
.search { display: flex; justify-content: flex-end; min-width: 0; flex: 0 1 380px; }
.search button { width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink-3); font-size: 13px; text-align: left; cursor: text; }
.search button:hover { background: var(--raised); color: var(--ink-2); }
.search button svg { width: 15px; height: 15px; flex: none; }
.search button .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbd { display: inline-flex; align-items: center; height: 20px; font: 500 12px/1 var(--mono); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; background: var(--panel-2); white-space: nowrap; letter-spacing: 0; }
.needs { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font-size: 13px; white-space: nowrap; flex: none; }
.needs:hover { background: var(--raised); }
.needs b { font: 600 12px/1 var(--mono); color: var(--on-cobalt); background: var(--accent-fill); padding: 3px 6px; border-radius: 10px; }
.needs svg { width: 15px; height: 15px; color: var(--ink-2); }
.role { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 9px 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; }
.role:hover, .role[aria-expanded="true"] { background: var(--raised); }
.role svg { width: 16px; height: 16px; color: var(--accent); }
.role svg.chev { width: 13px; height: 13px; color: var(--ink-3); }
.anchor { position: relative; display: inline-flex; flex: none; }

.present { display: none; align-items: center; gap: 14px; height: 32px; padding: 0 16px; background: var(--accent-fill); color: var(--on-cobalt); font-size: 12px; }
.present b { font-weight: 600; }
.present svg { width: 16px; height: 16px; }
.present .end { margin-left: auto; height: 22px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; background: transparent; color: var(--on-cobalt); font-size: 12px; }
.present .end:hover { background: rgba(255, 255, 255, .14); }
.app[data-present="yes"] .present { display: flex; }
.app[data-present="yes"] [data-internal] { display: none !important; }

/* 3.4 the workspace header: the space and its tabs on one line, the window and the tools on the right */
.wsh { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; background: var(--bar-bg); border-bottom: 1px solid var(--line-2); min-width: 0; }
.wsh .title { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.wsh .title svg { width: 16px; height: 16px; color: var(--ink-3); }
.wsh h1 { margin: 0; font: 600 13px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.wsh .vr { width: 1px; height: 16px; background: var(--line-2); flex: none; }
.tabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: 13px; white-space: nowrap; flex: none; transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
.tabs button:hover { background: var(--raised); color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--raised); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-2); }
.wsh .right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.win { display: inline-flex; gap: 1px; border-radius: var(--r-control); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.win button { height: 28px; padding: 0 9px; border: 0; background: transparent; color: var(--ink-3); font: 500 12px/1 var(--mono); letter-spacing: 0; }
.win button:hover { color: var(--ink); }
.win button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.asof { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font: 400 12px/1 var(--mono); letter-spacing: 0; white-space: nowrap; }
.asof i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
/* the one pulse on the screen: a dot that breathes only on real live state, still when a read failed, under Pause motion, and under prefers-reduced-motion */
@keyframes bp { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }
.asof[data-state="live"] i, .status .live[data-state="live"] i, .sidebar .facts .live[data-state="live"] i { box-shadow: 0 0 8px var(--good-glow); animation: bp 1.7s var(--ease) infinite; }
.app[data-motion="paused"] .asof i, .app[data-motion="paused"] .status .live i, .app[data-motion="paused"] .sidebar .facts .live i { animation: none; box-shadow: none; }
.asof[data-state="degraded"] i, .asof[data-state="paused"] i { background: var(--warn); }
.tb { height: 28px; min-width: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tb:hover { background: var(--raised); color: var(--ink); }
.tb[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent); }
.tb svg { width: 14px; height: 14px; }
.tb.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-cobalt); }
.tb.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-cobalt); }
.tb.danger:hover { border-color: var(--stop); color: var(--stop); }

/* 3.5 the working area: panes that fill the window and scroll inside themselves */
.canvas { position: relative; min-height: 0; min-width: 0; padding: var(--gutter); overflow: hidden; background: var(--well); }
.space { display: none; height: 100%; min-height: 0; gap: var(--gutter); }
.space[data-on="yes"] { display: grid; }
.col { display: grid; gap: var(--gutter); min-height: 0; min-width: 0; }
/* every space but the instrument: a column is a stack; a pane is as tall as what it shows and never taller, a long table shrinks and scrolls inside it, and the tray shows below a short one */
.space:not([data-space="overview"]) .col { display: flex; flex-direction: column; align-items: stretch; }
.space:not([data-space="overview"]) .col > .pane { flex: 0 1 auto; min-height: 0; }
.space:not([data-space="overview"]) .col > .pane.fill { flex: 1 1 auto; }

.pane { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-pane); box-shadow: var(--pane-shadow); overflow: hidden; }
.pane-h { flex: none; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.pane-h h2 { margin: 0; color: var(--ink-2); white-space: nowrap; }
.pane-h .sub { color: var(--quiet); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pane-h .r { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--quiet); font-size: 12px; }
.pane-h .r a, .pane-h .r button.lnk { color: var(--accent); font-weight: 500; font-size: 12px; border: 0; background: transparent; padding: 0; }
.pane-h .r a:hover, .pane-h .r button.lnk:hover { text-decoration: underline; }
.pane-h .r button.q { border: 0; background: transparent; padding: 0; color: var(--quiet); font-size: 12px; }
.pane-h .r button.q:hover { color: var(--ink); }
.pane-h .r button.q[aria-pressed="true"] { color: var(--ink); }
.pane-h .live { display: inline-flex; align-items: center; gap: 7px; }
.pane-h .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good-glow); animation: bp 2.4s var(--ease) infinite; }
.app[data-motion="paused"] .pane-h .live i { background: var(--warn); box-shadow: none; animation: none; }
.pane-b { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pane-b.pad { padding: 14px; }
.pane[data-void] .pane-b { display: grid; place-items: center; color: var(--quiet); font-size: 12px; }
.void { padding: 14px 16px; color: var(--quiet); font-size: 12px; line-height: 1.5; }
/* an empty state that is a pane's whole body sits in the middle of the pane's height, with its reason */
.pane-b > .void:only-child { box-sizing: border-box; min-height: max(100%, 96px); display: grid; place-content: center; text-align: center; padding: 24px; }
.t td.trunc > span { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space[data-space="registrations"] #queue td.two .sub { white-space: normal; }
.app[data-present="yes"] .band .tline [data-internal] + em::before { content: none; }

.split { position: relative; width: var(--gutter); cursor: col-resize; z-index: 2; }
.split::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 36px; margin: -18px 0 0 -1px; border-radius: 2px; background: var(--line-2); opacity: 0; transition: opacity var(--t-ui) var(--ease); }
.split:hover::after, .split[data-drag]::after { opacity: 1; background: var(--accent); }

/* ═══════════════════ 4. INSTRUMENTS ═══════════════════ */
/* 4.1 figures */
.fig { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fig .l { font-size: 12px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig .v { display: flex; align-items: baseline; gap: 6px; font: 300 32px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); font-feature-settings: "tnum" 1; }
.fig .v small { font: 400 13px/1 var(--sans); letter-spacing: 0; color: var(--quiet); }
.fig .s { font-size: 12px; color: var(--ink-2); }
.fig[data-size="xl"] .v { font-size: 44px; letter-spacing: -.025em; }
.fig[data-size="l"] .v { font-size: 36px; }
.fig[data-size="m"] .v { font-size: 24px; letter-spacing: -.012em; }
.fig[data-size="s"] .v { font-size: 20px; letter-spacing: -.01em; }
.fig[data-tone] .v { color: var(--tone); }
.hero { position: relative; padding: 14px 16px 12px; border-radius: 8px; }
.figs { display: grid; gap: 14px 18px; }
.figs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figs.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-src] { cursor: help; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.strip > .cell { position: relative; padding: 12px 16px 12px; border-right: 1px solid var(--line); min-width: 0; }
.strip > .cell:last-child { border-right: 0; }
.strip > .cell[data-tone="stop"]::before, .strip > .cell[data-tone="warn"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tone); }
.strip > .cell .k { font-size: 12px; color: var(--quiet); display: flex; align-items: center; gap: 8px; }
.strip > .cell .k b { font-weight: 500; color: var(--ink); }
.strip > .cell .v { margin-top: 5px; display: flex; align-items: baseline; gap: 6px; font: 300 26px/1 var(--sans); letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.strip > .cell .v small { font: 400 12px/1 var(--sans); letter-spacing: 0; color: var(--quiet); }
.strip > .cell .d { margin-top: 7px; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.strip > .cell .bar { margin-top: 8px; }

/* 4.2 the strip: the instrument's name on the substrate, what is live, the clock — dark in both registers, its own ink */
.conhead { --ink: #EEF2F8; --ink-2: #C3CCDB; --quiet: #94A0B4; --raised: rgba(255, 255, 255, .06); --accent: #7FB4FF; --accent-soft: rgba(91, 155, 255, .16); --accent-edge: rgba(110, 168, 255, .5); --good: #4FE0A8; --good-glow: rgba(79, 224, 168, .85);
  color: var(--ink); height: 62px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 18px; overflow: hidden; isolation: isolate; position: relative; z-index: 1; white-space: nowrap;
  background: #070B13 url("/app/substrate.svg") 78% 42% / cover no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .05); }
/* the words sit on the dark left; the glass and its light read from a third of the way across, and the far right dims again under the clock and the controls */
.conhead::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #070B13 0%, #070B13 24%, rgba(7, 11, 19, .78) 38%, rgba(7, 11, 19, .34) 50%, rgba(7, 11, 19, .2) 60%, rgba(7, 11, 19, .62) 68%, rgba(7, 11, 19, .82) 100%), linear-gradient(0deg, rgba(5, 8, 14, .3), transparent 60%); }
.conhead h1 { margin: 0; font: 300 20px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.conhead .stamp { display: inline-flex; align-items: center; font: 600 12px/1 var(--sans); letter-spacing: .12em; color: var(--quiet); padding: 3px 6px 3px 7px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 5px); }
.conhead .cap.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); flex: none; }
.conhead .cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); flex: none; }
.conhead .cap i.on { background: var(--good); box-shadow: 0 0 10px var(--good-glow); animation: bp 1.7s var(--ease) infinite; }
.app[data-motion="paused"] .conhead .cap i.on { animation: none; }
.conhead .count { flex: 0 1 auto; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12px var(--sans); color: var(--ink-2); padding: 3px 8px; border-radius: 6px; background: rgba(7, 11, 19, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.conhead .count::before { content: none; }
.conhead .count .fseg[hidden] { display: none; }
/* the clock, the read note and the controls sit on a plate of the strip's own dark: quiet ink over the brightest part of the artwork has no contrast to speak of */
.conhead .clock, .conhead .scan, .conhead .ctrls { background: rgba(7, 11, 19, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.conhead .clock, .conhead .scan { padding: 3px 8px; }
.conhead .clock { display: inline-flex; align-items: baseline; gap: 8px; font: 400 12px var(--sans); color: var(--quiet); flex: none; }
.conhead .clock b { font: 500 13px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.conhead .clock em { font-style: normal; font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); }
.conhead .scan { font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); flex: none; }
.conhead .ctrls { display: flex; gap: 6px; padding: 0 2px; flex: none; }
.conhead .ctl { border: 0; background: none; min-height: 28px; padding: 3px 8px; border-radius: 7px; color: var(--quiet); font: 400 12px var(--sans); display: inline-flex; align-items: center; gap: 6px; transition: color .16s var(--ease), background .16s var(--ease); }
.conhead .ctl svg { display: none; width: 16px; height: 16px; }
.conhead .ctl:hover { color: var(--ink); background: var(--raised); }
.conhead .ctl[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-edge); }

/* 4.3 the band: three cards standing on the tray, each an object with its own light and shadow */
.band { display: grid; grid-template-columns: minmax(232px, 2.4fr) minmax(0, 5fr) minmax(280px, 3.4fr); gap: 6px 8px; padding: 6px 8px; background: var(--tray); box-shadow: inset 0 0 0 1px var(--tray-edge), inset 0 2px 6px rgba(0, 0, 0, .22); }
.band > .col { padding: 8px 14px 8px; display: flex; flex-direction: column; min-width: 0; border-radius: 10px; position: relative;
  background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), var(--card-shadow);
  transition: transform .2s var(--spring), box-shadow .22s var(--ease); }
/* a card answers the hand: it lifts under the pointer and settles under a press */
@media (hover: hover) { .band > .col:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-rim) 70%, #fff), inset 0 0 0 1px var(--card-edge), var(--card-lift); } }
.band > .col:active { transform: translateY(0) scale(.997); box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), var(--card-press); }
.band .cap { display: flex; align-items: center; gap: 8px; color: var(--quiet); white-space: nowrap; min-width: 0; min-height: 18px; }
.band .cap .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.band .cap .by { font-style: normal; letter-spacing: .04em; font-weight: 400; }
.band .cap .peak { margin-left: 2px; font: 400 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--quiet); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.band .cap .peak b { font-weight: 500; color: var(--ink-2); }
.band .cap .seg { margin-left: auto; }
/* the hero figure: light, tight, its unit smaller and quieter; the way it moved beside it for a moment */
.band .big { margin-top: 2px; display: flex; align-items: baseline; gap: 8px; font: 300 44px/1 var(--sans); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.band .big.mid { font-size: 30px; letter-spacing: -.025em; margin-top: 3px; }
.band .big .u, .band .big small { font: 400 13px/1 var(--sans); letter-spacing: 0; color: var(--quiet); margin-left: .1em; }
.dl { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font: 500 12px/1 var(--sans); letter-spacing: 0; text-decoration: none; color: var(--good); background: var(--good-wash); animation: arrive .2s var(--ease); align-self: center; }
.dl[data-dir="dn"] { color: var(--quiet); background: var(--raised); }
/* the motion vocabulary every space shares: a thing arrives, a wash fades from what changed, a cell settles, a count pops, a live ring breathes */
@keyframes arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes wash { from { background-color: var(--accent-soft); } to { background-color: transparent; } }
@keyframes settle { from { box-shadow: inset 0 0 0 100vmax var(--accent-soft); } to { box-shadow: inset 0 0 0 100vmax transparent; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 16%, transparent); } }
.band .tline { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 400 13px var(--sans); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.band .tline em { font-style: normal; color: var(--quiet); }
.band .tline em::before { content: "· "; opacity: .6; }
.band .prov { margin-top: 1px; font: 400 12px/1.35 var(--sans); color: var(--quiet); white-space: normal; }
.band .prov b { font-weight: 500; color: var(--warn); }
.mix { display: flex; height: 6px; gap: 1px; border-radius: 3px; overflow: hidden; background: var(--line); margin-top: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.mix i { display: block; height: 100%; transition: flex-grow .9s var(--ease); min-width: 0; }
.sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.mix .c1, .sw.c1 { background: var(--c1); } .mix .c2, .sw.c2 { background: var(--c2); } .mix .c3, .sw.c3 { background: var(--c3); } .mix .c4, .sw.c4 { background: var(--c4); }
.chead, .classes > span { display: grid; grid-template-columns: 8px 1fr auto 46px; align-items: center; gap: 8px; white-space: nowrap; }
.chead { margin-top: 4px; padding-bottom: 2px; border-bottom: 1px solid var(--line); font: 500 12px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.chead span:nth-child(n+3) { text-align: right; }
.classes { margin-top: 2px; display: flex; flex-direction: column; }
.classes > span { font: 400 12.5px/15px var(--sans); color: var(--quiet); }
.classes b { font: 400 12.5px var(--sans); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.classes .pc { font: 500 12.5px var(--sans); font-style: normal; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
/* the week, as data: seven days drawn as one wave under the day's figure, today's part lit, the step still filling capped in hatch */
.week { margin-top: auto; padding-top: 4px; flex: 1 1 auto; min-height: 30px; display: flex; flex-direction: column; gap: 2px; }
.week .wrow { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.week .wl { font: 500 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.week .wp { font: 400 12px var(--sans); color: var(--quiet); min-width: 0; overflow: hidden; }
.week .wp b { font-weight: 500; color: var(--ink-2); }
.week .wrow > b { margin-left: auto; font: 400 12.5px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.week .wk { flex: 1 1 auto; min-height: 16px; max-height: 22px; display: flex; }
.week .wk svg { width: 100%; height: 100%; overflow: visible; }
/* a small wave: the chart's grammar in a row or a card — a soft line over the light, the newest step lit while live */
.spw .area { fill: url(#wg); }
.spw .line { fill: none; stroke: var(--spark); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spw.hot .line { stroke: var(--spark-hot); }
.spw .now { fill: none; stroke: var(--spark-hot); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--accent-edge)); }
.spw .today { fill: var(--spark-hot); opacity: .35; }
.spw .cap-step { fill: url(#hatchcap); }
.spw rect.gap { fill: url(#hatchfill); }
.spw line.median { stroke: var(--quiet); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .7; }
.spw.dim .line { stroke: var(--spark-idle); }
.spw.dim .area { opacity: .3; }
.spw .base { stroke: var(--quiet); stroke-width: 1; stroke-dasharray: 1.5 3; vector-effect: non-scaling-stroke; opacity: .75; }
.spw.flat .line { stroke: var(--spark-idle); stroke-width: 1; }
.app[data-void="hide"] .spw rect.gap { display: none; }
/* the chart: the four classes stacked as waves, the total drawn as one line over them, sunk into its card */
.flowwrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 104px; margin-top: 6px; }
.flowwrap.inst { background: var(--inst); border-radius: 7px; box-shadow: var(--inset); padding: 6px 6px 0; }
.flowwrap svg { flex: 1; width: 100%; height: 100%; min-height: 96px; display: block; cursor: crosshair; }
.flowwrap .grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flowwrap .stack path { opacity: .92; }
.flowwrap .stack .cacheRead { fill: var(--c1); } .flowwrap .stack .cacheWrite { fill: var(--c2); } .flowwrap .stack .output { fill: var(--c3); } .flowwrap .stack .fresh { fill: var(--c4); }
.flowwrap .area { fill: url(#fg); }
/* glow is spent on the line that is moving; a paused line is a still line */
.flowwrap .line { fill: none; stroke: var(--chart-line); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--chart-top)); }
.app[data-motion="paused"] .flowwrap .line, .flowwrap.void .line { filter: none; }
.flowwrap .gap { fill: url(#hatchfill); }
.flowwrap .cap-step { fill: url(#hatchcap); pointer-events: none; }
.flowwrap .hover { stroke: var(--quiet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.app[data-void="hide"] .flowwrap .gap, .app[data-void="hide"] .gaplabel { display: none; }
.gaplabel { position: absolute; top: 6px; font: 400 12px var(--sans); color: var(--quiet); pointer-events: none; white-space: nowrap; padding: 0 6px; }
.gaplabel.end { transform: translateX(-100%); text-align: right; }
.wtip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 3; padding: 5px 9px; border-radius: 6px; font: 400 12px var(--sans); color: var(--ink); background: var(--overlay); box-shadow: var(--e2); font-variant-numeric: tabular-nums; }
.wtip b { font-weight: 500; }
.wtip em { font-style: normal; color: var(--quiet); }
.wtip small { display: block; font-size: 12px; color: var(--quiet); margin-top: 2px; }
.voidstate { display: none; }
.flowwrap.void .voidstate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; padding: 0 12px; background: repeating-linear-gradient(-45deg, var(--hatch) 0 6px, transparent 6px 13px); }
.voidstate b { font: 500 12.5px var(--sans); color: var(--ink-2); }
.voidstate span { font: 400 12px var(--sans); color: var(--quiet); max-width: 44ch; white-space: normal; }
.flowwrap.void svg { opacity: .12; }
.bx { margin-top: 6px; display: flex; justify-content: space-between; gap: 12px; font: 400 12px var(--sans); color: var(--quiet); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bx .mid { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bx .peak b { font-weight: 500; color: var(--ink-2); }
.legend { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 3px 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--sans); color: var(--quiet); white-space: nowrap; }
.legend b { font: 400 12px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* burn: the rate now, its dollars beside it, its last hours as a wave, then the models */
.bigrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.brate { font: 400 13px var(--sans); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bprov { margin-top: 3px; font: 400 12px/1.35 var(--sans); color: var(--quiet); font-variant-numeric: tabular-nums; }
.bprov b { font-weight: 500; color: var(--warn); }
.bsparkwrap { position: relative; margin-top: 5px; flex: 0 0 auto; display: flex; flex-direction: column; min-height: 44px; }
.bsparkwrap.inst { background: var(--inst); border-radius: 7px; box-shadow: var(--inset); padding: 6px 6px 0; }
.bsparkwrap svg { display: block; width: 100%; height: 44px; }
.bnote { margin-top: 3px; font: 400 12px var(--sans); color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mhead { display: grid; grid-template-columns: 1fr 40px 52px; gap: 8px; margin-top: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--line); color: var(--quiet); }
.mhead span + span { text-align: right; }
.mrow { display: grid; grid-template-columns: 104px minmax(24px, 1fr) 40px 52px; align-items: center; gap: 8px; min-height: 22px; margin-top: 1px; cursor: pointer; border-radius: 4px; }
.mrow:hover, .mrow[data-focus] { background: var(--raised); box-shadow: 0 0 0 4px var(--raised); }
.mn { font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink-2); white-space: nowrap; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.mn .txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk { width: 11px; height: 11px; flex: none; color: var(--ink); opacity: .9; }
.mk.none { border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.mbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-fill), var(--accent-text)); border-radius: 3px; transition: width .8s var(--ease); }
.mv { font: 400 12.5px var(--sans); text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mc { font: 400 12.5px var(--sans); text-align: right; color: var(--quiet); font-variant-numeric: tabular-nums; }
.bar { height: 5px; border-radius: 3px; background: var(--well); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width var(--t-value) var(--ease); }
.bar[data-tone] i { background: var(--tone); }
.stack { display: flex; height: 8px; gap: 1px; border-radius: 4px; overflow: hidden; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.stack i { display: block; height: 100%; min-width: 2px; transition: flex-grow .9s var(--ease); }
/* the lanes: every row a live thing — its dot breathes while it is live, its wave is what this console observed, its figure eases */
.lanewrap { display: flex; flex-direction: column; min-height: 0; }
.t.lanes th, .t.lanes td { padding-left: 7px; padding-right: 7px; }
.t.lanes th:first-child, .t.lanes td:first-child { padding-left: 11px; }
.t.lanes#teams th.share { width: 80px; }
.t.lanes#machines th.share { width: 96px; }
.t.lanes td.sp { width: 84px; padding-top: 0; padding-bottom: 0; }
.t.lanes td.sp svg { display: block; width: 76px; height: 16px; margin: 0 auto; overflow: visible; }
.t.lanes td.fm { font: 500 12.5px var(--sans); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.t.lanes td.fm u { text-decoration: none; font-size: 12px; margin-right: 3px; color: var(--good); }
.t.lanes td.fm u.dn { color: var(--quiet); }
.t.lanes td.fm.quiet { color: var(--quiet); font-weight: 400; }
.t.lanes .who { display: flex; align-items: center; gap: 8px; }
.t.lanes .who .st.dot { gap: 0; }
.t.lanes td.lst .st { font-weight: 500; }
.t tr[data-live="now"] .st::before { animation: bp 1.7s var(--ease) infinite; box-shadow: 0 0 8px var(--good-glow); }
.app[data-motion="paused"] .t tr .st::before { animation: none; }
.t tr.silent td { color: var(--quiet); }
.t tr.silent { background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 5px, transparent 5px 11px); }
.decs .dec[data-arrived] { animation: arrive .32s cubic-bezier(.16, 1, .3, 1) both; }
.ctrl .fig .v { transition: color .3s var(--ease); }

/* 4.4 tables: rows in a list, the head sticky inside the pane's scroll; the head row is the height of a body row */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--quiet); font-size: 12px; font-weight: 500; letter-spacing: .01em; text-align: left; padding: 0 8px; height: 34px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.t th:first-child, .t td:first-child { padding-left: 11px; }
.t th:last-child, .t td:last-child { padding-right: 11px; }
.t th.r, .t td.r { text-align: right; }
.t th.c, .t td.c { text-align: center; }
.t td { padding: 0 8px; height: 34px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.t td.wrap { white-space: normal; }
.t th.wrap { white-space: normal; line-height: 1.15; padding-top: 3px; padding-bottom: 3px; }
.t tr[data-obj] { cursor: pointer; }
.t tbody tr { transition: background var(--t-ui) var(--ease); }
.t tbody tr:hover { background: var(--raised); }
.t tbody tr[data-focus] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent-fill); }
.t tbody tr[data-tone="stop"] { background: linear-gradient(90deg, color-mix(in srgb, var(--stop) 10%, transparent), transparent 42%); box-shadow: inset 2px 0 0 var(--stop); }
.t tbody tr[data-tone="warn"] { box-shadow: inset 2px 0 0 var(--warn); }
.t tbody tr[data-hatch] { background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 4px, transparent 4px 10px); }
.t td b { font-weight: 500; }
.t td .sub { color: var(--quiet); font-family: var(--mono); font-size: 12px; letter-spacing: 0; margin-left: 8px; }
.t td .sub.blk { display: block; margin: 1px 0 0; max-width: 250px; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); letter-spacing: inherit; }
.t td.two { height: 46px; }
.t td .mono { font-size: 12px; }
.t td .bar { min-width: 64px; }
.t td .cellbar { display: grid; grid-template-columns: 1fr 42px; gap: 6px; align-items: center; }
.t td .cellbar span { font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink); text-align: right; }
.st { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--tone, var(--ink-2)); white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--quiet)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone, var(--quiet)) 40%, transparent); }
.st[data-tone="quiet"]::before, .st:not([data-tone])::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-chip); background: var(--raised); color: var(--ink-2); font: 500 12px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.chip[data-tone] { background: var(--tone-wash); color: var(--tone); box-shadow: none; }
.chip.mono { font-family: var(--mono); font-weight: 400; }
.tfoot { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 7px 14px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); border-top: 1px solid var(--line); background: var(--panel-2); position: sticky; bottom: 0; }
.tfoot span + span { padding-left: 12px; margin-left: 12px; box-shadow: inset 1px 0 0 var(--line-2); }
.tfoot .end { margin-left: auto; }
.hash { font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.hash svg { width: 12px; height: 12px; color: var(--good); }
.verb { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--raised); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.verb:hover { border-color: var(--accent-edge); color: var(--accent); }
.verb.deny { color: var(--quiet); background: transparent; }
.verb.deny:hover { border-color: var(--stop); color: var(--stop); }
.verbs { display: inline-flex; gap: 6px; }

/* 4.5 the brief: one line of what needs attention, each reading a door */
.brief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
.brief b { font-weight: 600; color: var(--ink); margin-right: 2px; }
.brief .quiet { color: var(--quiet); }
.brief .door { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--raised); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .2s var(--spring), box-shadow .2s var(--ease); }
.brief .door .num { font: 500 12.5px var(--mono); letter-spacing: 0; }
.brief .door[data-tone="warn"] .num { color: var(--warn); }
.brief .door[data-tone="accent"] .num { color: var(--accent-text); }
.brief .door[data-tone="stop"] .num { color: var(--stop); }
@media (hover: hover) { .brief .door:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--accent-edge); } }

/* 4.6 decisions: verb first */
.dec { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-ui) var(--ease); }
.dec:hover { background: var(--raised); }
.dec .w { min-width: 0; }
.dec .w b { display: block; font-weight: 500; color: var(--ink); line-height: 1.35; }
.dec .w span { display: block; margin-top: 2px; font-size: 12px; color: var(--quiet); }
.dec .w span i { font-style: normal; color: var(--tone, var(--quiet)); font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.dec[data-tone="stop"] { box-shadow: inset 2px 0 0 var(--stop); }
.dec[data-tone="warn"] { box-shadow: inset 2px 0 0 var(--warn); }
.dec[data-tone="accent"] { box-shadow: inset 2px 0 0 var(--accent); }
.dec[data-focus] { background: var(--accent-soft); }
.dec .k { display: inline-block; margin-right: 6px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); }

/* 4.7 enforcement points and provisioning rows: name · state · detail */
.pt { display: grid; grid-template-columns: 150px 1fr; align-items: start; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-ui) var(--ease); }
.pt:hover { background: var(--raised); }
.pt[data-focus] { background: var(--accent-soft); }
.pt:last-child { border-bottom: 0; }
.pt .n { font-weight: 500; }
.pt .n small { display: block; font-weight: 400; color: var(--quiet); font-size: 12px; }
.pt .d { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.pt .d .st { display: flex; margin-bottom: 2px; }
.ctrl { padding: 14px 16px 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ctrl .fig .v { font-size: 26px; }
.ctrl-bar { padding: 0 16px 12px; }
.ctrl-bar .key { display: flex; gap: 14px; margin-top: 7px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); flex-wrap: wrap; }
.ctrl-bar .key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* 4.8 the policy matrix: roles down, models across, one mark per cell */
.t td .m { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto; }
.t td .m[data-m="on"] { background: var(--good); box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent); }
.t td .m[data-m="lim"] { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--warn); }
.t td .m[data-m="off"] { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.t th .mk { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.mkey { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 14px; white-space: nowrap; font-size: 12px; color: var(--quiet); border-top: 1px solid var(--line); background: var(--panel-2); position: sticky; bottom: 0; }
.mkey .m { display: inline-grid; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.mode { display: inline-flex; gap: 1px; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.mode span { height: 20px; padding: 0 6px; display: inline-flex; align-items: center; color: var(--faint); font: 500 12px/1 var(--sans); }
.mode span[data-on] { background: var(--tone-wash, var(--accent-wash)); color: var(--tone, var(--accent)); }
.mode[data-mode="observe"] { --tone: var(--warn); --tone-wash: var(--warn-wash); }
.mode[data-mode="warn"] { --tone: var(--accent); --tone-wash: var(--accent-wash); }
.mode[data-mode="enforce"] { --tone: var(--good); --tone-wash: var(--good-wash); }

/* 4.9 allowances: a meter per team, the request beneath */
.meter { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) 120px; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-ui) var(--ease); }
.meter:hover { background: var(--raised); }
.meter[data-focus] { background: var(--accent-soft); }
.meter .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter .n small { display: block; font-weight: 400; color: var(--quiet); font-size: 12px; }
.meter .u { font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink-2); text-align: right; white-space: nowrap; }
.meter .u b { font-weight: 500; color: var(--ink); }
.meter[data-tone="warn"] .u b { color: var(--warn); }

/* 4.10 rollout: rules by mode, one figure each */
.rollout { display: grid; grid-template-columns: repeat(3, 1fr); }
.rollout > div { padding: 12px 16px; border-right: 1px solid var(--line); }
.rollout > div:last-child { border-right: 0; }
.rollout .k { font-size: 12px; color: var(--quiet); }
.rollout .v { margin-top: 4px; font: 300 26px/1 var(--sans); letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.rollout .arrow { display: flex; align-items: center; gap: 8px; padding: 8px 16px 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); grid-column: 1 / -1; }
.rollout .arrow b { font-weight: 500; }

/* 4.11 the chain: one block of receipt facts */
.chain { padding: 14px 16px; display: grid; gap: 10px; }
.chain .head { display: flex; align-items: center; gap: 10px; }
.chain .head .v { font: 300 32px/1 var(--sans); letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.chain .head .l { font-size: 12px; color: var(--quiet); line-height: 1.3; }
.chain .hash { font-size: 13px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 12.5px; align-content: start; }
.kv dt { color: var(--quiet); }
.kv dd { margin: 0; color: var(--ink); }
.kv dd small { display: block; color: var(--quiet); font-size: 12px; }
.kv dd .mono { font-size: 12px; }
.counts { display: grid; gap: 0; }
.counts > span { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.counts > span:last-child { border-bottom: 0; }
.counts b { font: 400 13px var(--mono); letter-spacing: 0; color: var(--ink); }
.counts [data-tone] b { color: var(--tone); }

/* 4.12 the inspector's timeline */
.tl { display: grid; gap: 0; }
.tl > div { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 5px 0; font-size: 12.5px; position: relative; }
.tl > div::before { content: ""; position: absolute; left: 51px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.tl > div::after { content: ""; position: absolute; left: 48px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.tl > div .w { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--quiet); padding-top: 1px; }
.tl > div .x { padding-left: 14px; color: var(--ink-2); }
.tl > div[data-next] .x { color: var(--quiet); }
.tl > div[data-next]::after { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* ═══════════════════ 5. THE DETAILS PANEL ═══════════════════ */
.insp { width: 0; min-height: 0; overflow: hidden; background: var(--plane-2); border-left: 1px solid var(--line-2); transition: width var(--t-move) var(--ease); display: flex; flex-direction: column; z-index: 20; }
.insp[data-open="yes"] { width: var(--insp); }
.insp-in { width: var(--insp); min-height: 0; display: flex; flex-direction: column; height: 100%; }
.insp-h { flex: none; padding: 12px 16px 12px; border-bottom: 1px solid var(--line-2); background: var(--plane-2); }
.insp-h .row { display: flex; align-items: center; gap: 8px; }
.insp-h .row .ib { margin-left: auto; height: 28px; min-width: 28px; }
.insp-h .row .ib + .ib { margin-left: 0; }
.insp-h h2 { margin: 10px 0 0; font: 600 16px/1.3 var(--sans); letter-spacing: -.012em; }
.insp-h .state { margin-top: 6px; }
.insp-h .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.insp-b { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; padding: 4px 0 16px; }
.insp section { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.insp section:last-child { border-bottom: 0; }
.insp h3 { margin: 0 0 10px; color: var(--quiet); display: flex; align-items: center; gap: 8px; }
.insp h3 .r { margin-left: auto; font: 400 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--faint); }
.insp .src { font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--faint); word-break: break-word; }
.insp-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.insp-empty .row { display: flex; width: 100%; justify-content: flex-end; position: absolute; top: 10px; right: 12px; }
.insp-empty svg { width: 22px; height: 22px; color: var(--faint); }
.insp-empty b { font-weight: 500; color: var(--ink); }
.insp-empty span { font-size: 12px; color: var(--quiet); max-width: 260px; line-height: 1.5; }
.rel { display: grid; gap: 4px; }
.rel button { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 12.5px; text-align: left; }
.rel button:hover { border-color: var(--accent-edge); }
.rel button .k { color: var(--quiet); font-size: 12px; }
.rel button svg { width: 14px; height: 14px; color: var(--quiet); }

/* ═══════════════════ 6. OVERLAYS: palette, shortcuts, toast, tooltip, menus ═══════════════════ */
.scrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: none; }
.scrim[data-open="yes"] { display: block; }
.pal { position: fixed; z-index: 90; left: 50%; top: 12vh; width: min(640px, calc(100vw - 32px)); transform: translateX(-50%); background: var(--overlay); border-radius: var(--r-overlay); box-shadow: var(--e3); display: none; overflow: hidden; }
.pal[data-open="yes"] { display: block; }
.pal .in { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pal .in svg { width: 17px; height: 17px; color: var(--quiet); }
.pal input { flex: 1; border: 0; background: transparent; font-size: 14px; outline: none; color: var(--ink); }
.pal input::placeholder { color: var(--quiet); }
.pal .list { max-height: 50vh; overflow: auto; padding: 6px; }
.pal .g { padding: 8px 10px 4px; color: var(--quiet); }
.pal .it { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.pal .it svg { width: 16px; height: 16px; color: var(--quiet); }
.pal .it .s { color: var(--quiet); font-size: 12px; margin-left: 8px; }
.pal .it[data-sel] { background: var(--accent-soft); color: var(--ink); }
.pal .it[data-sel] svg { color: var(--accent); }
.pal .foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--panel-2); font-size: 12px; color: var(--quiet); }
.sheet { position: fixed; z-index: 90; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); background: var(--overlay); border-radius: var(--r-overlay); box-shadow: var(--e3); display: none; }
.sheet[data-open="yes"] { display: block; }
.sheet h2 { margin: 0; padding: 14px 18px; font: 600 14px/1 var(--sans); border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.sheet h2 .kbd { margin-left: auto; }
.sheet dl { margin: 0; padding: 12px 18px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.sheet dl div { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sheet dt { min-width: 56px; } .sheet dd { margin: 0; color: var(--ink-2); }
.toast { position: fixed; z-index: 95; left: 50%; bottom: calc(var(--status) + 14px); transform: translateX(-50%); padding: 9px 14px; border-radius: 8px; background: var(--overlay); box-shadow: var(--e2); font-size: 12.5px; color: var(--ink); display: none; max-width: min(640px, calc(100vw - 32px)); }
.toast[data-open="yes"] { display: block; }
.toast b { font-weight: 500; }
.tip { position: fixed; z-index: 96; padding: 6px 9px; border-radius: 6px; background: var(--overlay); box-shadow: var(--e2); font: 400 12px/1.4 var(--mono); letter-spacing: 0; color: var(--ink-2); pointer-events: none; max-width: 360px; display: none; }
.tip[data-open="yes"] { display: block; }
.tip b { color: var(--quiet); font-weight: 400; }
.menu { position: absolute; z-index: 60; top: 38px; right: 0; min-width: 260px; max-width: 320px; padding: 6px; background: var(--overlay); border-radius: var(--r-overlay); box-shadow: var(--e3); }
.menu[data-side="left"] { right: auto; left: 0; }
.menu .meta { padding: 8px 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.menu .meta b { color: var(--ink); font-weight: 500; }
.menu .lab { padding: 8px 10px 4px; color: var(--quiet); }
.menu .rule { height: 1px; margin: 4px 0; background: var(--line); }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; }
.menu button .kbd, .menu button .chk { margin-left: auto; }
.menu button .chk { width: 14px; height: 14px; color: var(--accent); }
.menu button small { display: block; font-size: 12px; color: var(--quiet); }
.menu button[aria-checked="true"] { background: var(--accent-soft); }
.menu button:hover { background: var(--raised); }
.menu button svg.i { width: 16px; height: 16px; color: var(--quiet); flex: none; }

/* ═══════════════════ 7. THE STATUS FOOTER ═══════════════════ */
.status { display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--bar-bg); border-top: 1px solid var(--line-2); font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); white-space: nowrap; overflow: hidden; }
.status .live { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.status .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.status .live[data-state="degraded"] i, .status .live[data-state="paused"] i { background: var(--warn); }
.status .mid::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: 14px; background: var(--line-2); vertical-align: -2px; }
.status .right { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.status .ok { color: var(--good); }
.status .bad { color: var(--stop); }
.status .sc { display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════════════ 8. SPACE LAYOUTS (desktop) ═══════════════════ */
.space[data-space="overview"] { grid-template-columns: minmax(0, var(--split)) var(--gutter) minmax(312px, 3.7fr); column-gap: 0; }
.space[data-space="overview"] .col.main { grid-template-rows: auto minmax(0, 1fr); }
.space[data-space="overview"] .col.side { display: flex; flex-direction: column; }
.space[data-space="overview"] .col.side > .pane[data-pane="needs"] { flex: 1 1 0; min-height: 240px; }
.space[data-space="overview"] .col.side > .pane[data-pane="control"] { flex: 0 1 auto; max-height: 52%; }
.space[data-space="overview"] .pane.band-pane { flex: none; }
.space[data-space="overview"] .pane[data-lens] { display: none; }
.space[data-space="overview"][data-lens="Teams"] .pane[data-lens="Teams"], .space[data-space="overview"][data-lens="Models"] .pane[data-lens="Models"], .space[data-space="overview"][data-lens="Devices"] .pane[data-lens="Devices"] { display: flex; }
/* the Map lens takes the whole working area: the side column steps out, and the details panel floats over the map at every width */
.space[data-space="overview"]:is([data-lens="Map"], [data-lens="Flow"]) { grid-template-columns: minmax(0, 1fr); }
.space[data-space="overview"]:is([data-lens="Map"], [data-lens="Flow"]) .col.side, .space[data-space="overview"]:is([data-lens="Map"], [data-lens="Flow"]) .split { display: none; }
.app[data-space="overview"]:is([data-lens="Map"], [data-lens="Flow"]) .insp { position: absolute; right: 0; top: var(--wsh); bottom: 0; box-shadow: var(--e3); }
.fseg[hidden] { display: none; }
.space[data-space="registrations"] { grid-template-columns: minmax(0, 8fr) minmax(300px, 3fr); }
.space[data-space="registrations"] .col.main > .pane[data-pane="queue"] { flex: 0 0 auto; max-height: calc(100% - 200px); }
.space[data-space="registrations"] .col.main > .pane[data-pane="decided"] { flex: 1 1 0; min-height: 200px; }
.space[data-space="registrations"] .col.side { grid-template-rows: auto minmax(0, 1fr); }
.space[data-space="policy"] { grid-template-columns: minmax(0, 8fr) minmax(320px, 3.6fr); }
.space[data-space="policy"] .col.main { grid-template-rows: minmax(0, 1fr) auto auto; }
.space[data-space="policy"] .col.side { grid-template-rows: auto auto minmax(0, 1fr); }
.space[data-space="audit"] { grid-template-columns: minmax(0, 8fr) minmax(300px, 3.4fr); }
.space[data-space="audit"] .col.main { grid-template-rows: minmax(0, 1fr); }
.space[data-space="audit"] .col.side > .pane[data-pane="chain"] { flex: 0 0 auto; max-height: 62%; }
.space[data-space="audit"] .col.side > .pane[data-pane="changed"] { flex: 1 1 0; min-height: 160px; }
.space[data-space="audit"] .pane[data-lens] { display: none; }
.space[data-space="audit"][data-lens="Trail"] .pane[data-lens="Trail"], .space[data-space="audit"][data-lens="Receipts"] .pane[data-lens="Receipts"], .space[data-space="audit"][data-lens="Exports"] .pane[data-lens="Exports"] { display: flex; }
.space[data-space="gateway"] { grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); }
.space[data-space="gateway"] .col.main { grid-template-rows: auto minmax(0, 1fr); }
.space[data-space="gateway"] .col.side { grid-template-rows: auto minmax(0, 1fr); }
.space[data-space="gateway"] .pane[data-lens] { display: none; }
.space[data-space="gateway"][data-lens="Health"] .pane[data-lens="Health"], .space[data-space="gateway"][data-lens="Keys"] .pane[data-lens="Keys"] { display: flex; }
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) { grid-template-columns: minmax(0, 8fr) minmax(300px, 3.4fr); }
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .col.main { grid-template-rows: minmax(0, 1fr); }
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .col.side { grid-template-rows: auto minmax(0, 1fr); }
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"]) .pane[data-lens] { display: none; }
.space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"])[data-lens="Devices"] .pane[data-lens="Devices"], .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"])[data-lens="Agents"] .pane[data-lens="Agents"], .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"])[data-lens="Join links"] .pane[data-lens="Join links"], .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"])[data-lens="People"] .pane[data-lens="People"], .space:is([data-space="machines"], [data-space="agents"], [data-space="people"], [data-space="identity"])[data-lens="Sign-in"] .pane[data-lens="Sign-in"] { display: flex; }

/* ═══════════════════ 9. RESPONSIVE ═══════════════════ */
.tabbar { display: none; }
/* Below 1600 the details panel floats over the working area rather than pushing it: a pushed panel would crush the instrument; the lanes' widest columns and the strip's date step back too. */
@media (max-width: 1599px) {
  :root { --insp: 384px; }
  .t .wide { display: none; }
  .col.side .pane-h .sub { display: none; }
  .conhead .clock > span:first-child { display: none; }
  .band .cap .by { display: none; }
  /* the strip in a narrow column: the read note goes (the footer says it), the two controls keep their names on hover and show their glyphs */
  .conhead { gap: 12px; }
  .conhead .scan { display: none; }
  .conhead .ctl span { display: none; }
  .conhead .ctl svg { display: block; }
  .conhead .ctl { padding: 3px 6px; min-width: 28px; justify-content: center; }
  .insp { position: absolute; right: 0; top: var(--wsh); bottom: 0; box-shadow: var(--e3); }
}
@media (max-width: 1279px) {
  :root { --insp: 360px; }
}
@media (max-width: 1099px) {
  .body, .app[data-side="wide"] .body { grid-template-columns: var(--side-narrow) minmax(0, 1fr); }
  .lockup { justify-content: center; padding: 0; }
  .lockup .lk, .sidebar .lab, .sidebar .row .l, .sidebar .row .n, .sidebar .collapse { display: none; }
  .sidebar .row { justify-content: center; padding: 0; }
  .sidebar .row[data-count]::after { content: ""; position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); }
  .top .search { flex-basis: 260px; }
  .space[data-space="overview"], .space[data-space="registrations"], .space[data-space="policy"], .space[data-space="audit"], .space[data-space="gateway"], .space[data-space="connect"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  html, body { height: auto; overflow: auto; }
  body { overflow-y: auto; }
  .app { grid-template-rows: auto auto; height: auto; min-height: 100dvh; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .body, .app[data-side="wide"] .body, .app[data-side="narrow"] .body { grid-template-columns: minmax(0, 1fr); }
  .main { grid-template-rows: auto auto auto; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-rows: auto auto; }
  .demo { justify-content: flex-start; padding: 0 12px; }
  .demo .long { display: none; }
  /* the sidebar becomes a drawer */
  .sidebar { position: fixed; z-index: 85; top: 0; bottom: 0; left: 0; width: min(280px, 84vw); transform: translateX(-100%); transition: transform var(--t-move) var(--ease); box-shadow: var(--e3); }
  .app[data-drawer="open"] .sidebar { transform: none; }
  /* the drawer always shows full labels: there is room */
  .lockup { justify-content: flex-start; padding: 0 12px; }
  .lockup .lk { display: grid; }
  .sidebar .lab { display: block; }
  .sidebar .row { height: 40px; justify-content: flex-start; padding: 0 10px; }
  .sidebar .row .l, .sidebar .row .n { display: inline; }
  .sidebar .row[data-count]::after { content: none; }
  .sidebar .collapse { display: none; }
  .sidebar .me .mid { display: block; }
  /* the topbar */
  .top { position: sticky; top: 0; height: 52px; padding: 0 10px; }
  .top .menubtn { display: inline-flex; }
  .top .search, .top .needs .t, .top .help, .top #themeBtn, .org .tag, .role .word, .wsh #presentBtn { display: none; }
  .org { padding: 0 6px; min-width: 0; }
  .org .name { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .role { padding: 0 8px; }
  .ib, .org, .role, .needs, .tb, .verb, .tabs button, .win button, .seg button, .pane-h .r a, .pane-h .r button, .rel button, .menu button { min-height: 32px; }
  .pane-h { height: auto; min-height: 36px; flex-wrap: wrap; padding: 2px 12px; }
  /* the workspace header wraps: the title row, then the tabs in their own scrolling row */
  .wsh { position: sticky; top: 52px; z-index: 25; height: auto; flex-wrap: wrap; padding: 6px 12px; gap: 6px 10px; }
  .wsh .vr { display: none; }
  .tabs { order: 3; flex: 1 0 100%; padding-bottom: 2px; }
  .wsh .right { margin-left: auto; }
  .wsh .asof { display: none; }
  .canvas { overflow: visible; height: auto; }
  .space[data-on="yes"] { display: grid; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
  .col { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
  .pane { max-height: none !important; }
  .pane-b { max-height: none !important; }
  .space[data-space="policy"] .col.main .pane[data-lens] .tfoot, .space[data-space="policy"] .col.main .pane[data-lens] .mkey { display: flex; }
  .pane-b:has(> table.t) { max-height: 60vh; }
  .split { display: none; }
  .band.console { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .band > .col { padding: 12px 14px; }
  .band .big { font-size: 40px; }
  .band .cap { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
  .band .cap .seg { margin-left: 0; width: 100%; } .band .cap .seg button { flex: 1; }
  .gaplabel, .gaplabel.end { position: static; transform: none; padding: 4px 0 0; white-space: normal; text-align: left; }
  .conhead { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 6px 10px; background-position: right 30%; background-size: auto 130%; }
  .conhead::before { background: linear-gradient(90deg, #070B13 0%, rgba(7, 11, 19, .96) 50%, rgba(7, 11, 19, .7) 100%); }
  .conhead .count, .conhead .scan { display: none; }
  .conhead .clock { margin-left: auto; }
  .conhead .ctl { min-height: 32px; }
  /* a lane on a phone is the thing, its five minutes, its tokens and its share; the rest is in the details panel */
  .t.lanes .sp, .t .ph { display: none; }
  .space[data-space="registrations"] #queue th, .space[data-space="registrations"] #queue td { padding-left: 6px; padding-right: 6px; }
  .space[data-space="gateway"] [data-pane="points"] .st, .space[data-space="gateway"] [data-pane="points"] td.two .sub { white-space: normal; }
  .space[data-space="gateway"] [data-pane="points"] th, .space[data-space="gateway"] [data-pane="points"] td { padding-left: 6px; padding-right: 6px; }
  .t.lanes th, .t.lanes td { padding-left: 5px; padding-right: 5px; }
  .t.lanes th:first-child, .t.lanes td:first-child { padding-left: 9px; }
  .t.lanes#teams th.share, .t.lanes#machines th.share { width: 80px; }
  .t.lanes th, .t.lanes td.two b, .t.lanes td.two .sub { white-space: normal; }
  .t.lanes td .bar { min-width: 28px; }
  .t.lanes td.lst .st .w { display: none; }
  .pane-h .sub { display: none; }
  .strip { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .strip > .cell { border-bottom: 1px solid var(--line); }
  .strip > .cell:nth-child(2n) { border-right: 0; }
  .ctrl { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .pt { grid-template-columns: minmax(0, 1fr); }
  .meter { grid-template-columns: minmax(0, 1fr) auto; }
  .meter .n { white-space: normal; }
  .meter .bar { grid-column: 1 / -1; grid-row: 2; }
  .meter .u { grid-row: 1; grid-column: 2; }
  .rollout { grid-template-columns: repeat(3, 1fr); }
  /* the details panel becomes a sheet from the bottom */
  .insp { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto !important; height: 0; border-left: 0; border-top: 1px solid var(--line-2); border-radius: 14px 14px 0 0; transition: height var(--t-move) var(--ease); z-index: 60; }
  .insp[data-open="yes"] { height: 82dvh; }
  .insp-in { width: auto; }
  .insp-empty { min-height: 200px; }
  /* the status footer folds into the drawer; the tab bar takes the bottom */
  .status { display: none; }
  .tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--bar-bg); border-top: 1px solid var(--line-2); }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 48px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 12px; letter-spacing: .01em; white-space: nowrap; position: relative; }
  .tabbar svg { width: 20px; height: 20px; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar .n { position: absolute; top: 4px; right: calc(50% - 20px); font: 600 12px/1 var(--mono); color: var(--on-cobalt); background: var(--accent-fill); padding: 2px 4px; border-radius: 8px; }
  .toast { bottom: calc(60px + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════ 10. FORMS, MENUS, THE SIGN-IN GATE ═══════════════════ */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.small { font-size: 12px; }
.ctrl.two { grid-template-columns: 1fr 1fr; }
.ctrl.one { grid-template-columns: 1fr; }
.tb:disabled, .verb:disabled { opacity: .55; cursor: default; }
.tb.danger.solid { background: var(--stop); border-color: var(--stop); color: var(--on-cobalt); }
.tb.danger.solid:hover { background: color-mix(in srgb, var(--stop) 88%, var(--ink)); color: var(--on-cobalt); }
a.verb { display: inline-flex; align-items: center; text-decoration: none; }
.mkey .end { margin-left: auto; }
.chain .head .end { margin-left: auto; }
.chain .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.chain .kv dd { word-break: break-word; }
.t td .mn.wide { font: 400 12.5px var(--sans); letter-spacing: inherit; color: var(--ink); }
.t td .roles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; white-space: normal; }
.chip .x { border: 0; background: transparent; color: var(--quiet); padding: 0 0 0 4px; font-size: 13px; line-height: 1; }
.chip .x:hover { color: var(--stop); }
.rolepick { height: 20px; padding: 0 4px; border: 1px dashed var(--line-2); border-radius: var(--r-chip); background: transparent; color: var(--quiet); font: 500 12px var(--sans); }
.subhead { padding: 14px 14px 6px; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); border-top: 1px solid var(--line); }
.kv.pad { padding: 12px 14px; margin: 0; }
.copyline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
pre.json { margin: 0; max-height: 280px; overflow: auto; padding: 10px 12px; border-radius: var(--r-control); background: var(--inst); box-shadow: var(--inset); font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.grows { display: grid; gap: 6px; }
.grow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 12.5px; }
.grow-row > span:first-child { flex: 1 1 120px; min-width: 0; }
.grow-row.add select { flex: 1 1 140px; min-width: 0; }
.pt .d .tb { margin-top: 8px; }
.pt .d > div { margin-top: 2px; }
.hash .nv { width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.mkey .m[data-m="on"] { background: var(--good); }
.mkey .m[data-m="off"] { box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* a form or a confirmation: the floating plane, like the palette */
dialog.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0; border: 0; border-radius: var(--r-overlay); background: var(--overlay); color: var(--ink); box-shadow: var(--e3); overflow: auto; }
dialog.modal::backdrop { background: var(--scrim); }
.step > header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.step > header h2 { margin: 0; flex: 1; font: 600 14px/1.3 var(--sans); }
.step .say { margin: 14px 18px 4px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.step .fine { margin: 8px 18px 0; font-size: 12px; line-height: 1.5; color: var(--quiet); }
.step > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); border-radius: 0 0 var(--r-overlay) var(--r-overlay); }
.step > .field, .step > .fieldrow, .step > .check { margin: 12px 18px 0; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; color: var(--quiet); display: flex; gap: 8px; }
.field > span em { font-style: normal; color: var(--faint); }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field input, .field select, .grow-row select { height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font: 400 13px var(--sans); min-width: 0; }
.field input:focus, .field select:focus { outline: 2px solid var(--accent-fill); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.check input { margin-top: 3px; accent-color: var(--accent-fill); }
.check b { font-weight: 500; color: var(--ink); }
.copyrow { display: flex; gap: 8px; align-items: center; min-width: 0; }
.copyrow input { flex: 1; font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.copyrow .cmd { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--r-control); background: var(--inst); box-shadow: var(--inset); font: 400 12px/1.45 var(--mono); letter-spacing: 0; color: var(--ink-2); overflow-x: auto; white-space: nowrap; }

/* the sign-in page: one floating card on the ground */
.home { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: var(--r-control); color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: -.005em; white-space: nowrap; }
.home svg { width: 20px; height: 20px; }
.sep { color: var(--faint); font-weight: 300; font-size: 16px; margin: 0 -2px; }
.crumb { color: var(--ink-2); font-size: 13px; padding: 0 4px; white-space: nowrap; }
.ws { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.ws .av { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 12px/1 var(--sans); }
.ws .env { color: var(--quiet); padding-left: 8px; border-left: 1px solid var(--line-2); font-size: 12px; }
.gate-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--well); }
.gate { width: min(460px, 100%); padding: 22px 22px 18px; background: var(--overlay); border-radius: var(--r-overlay); box-shadow: var(--e3); }
.gate .home { padding: 0; margin-bottom: 18px; }
.gate .sep { margin: 0 2px; }
.gate h1 { margin: 0 0 8px; font: 600 18px/1.3 var(--sans); letter-spacing: -.015em; }
.gate p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.gate .ws.static { margin: 0 0 6px; cursor: default; }
.gate .options { display: grid; gap: 6px; margin: 14px 0; }
.gate .options .lab { color: var(--quiet); margin-bottom: 2px; }
.gate .option { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font-size: 13px; text-align: left; text-decoration: none; }
.gate .option:hover { border-color: var(--accent-edge); background: var(--raised); }
.gate .option b { font-weight: 500; }
.gate .option span { font-size: 12px; color: var(--quiet); }
.gate .option:disabled { opacity: .6; }
.gate .warnline { padding: 8px 10px; border-radius: var(--r-control); background: var(--warn-wash); color: var(--warn); font-size: 12.5px; }
.gate .note { margin: 12px 0 0; font-size: 12px; color: var(--quiet); }
@media (max-width: 899px) {
  .fieldrow { grid-template-columns: 1fr; }
  .menu { position: fixed; top: 60px; left: 8px; right: 8px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ═══════════════════ 10. OBSERVE'S RAIL: what needs you as cards, control as an instrument ═══════════════════ */
.space[data-space="overview"] .decs { padding: 8px; display: grid; gap: 8px; align-content: start; }
.space[data-space="overview"] .decs .dec { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), var(--card-shadow); transition: transform .2s var(--spring), box-shadow .22s var(--ease); }
@media (hover: hover) { .space[data-space="overview"] .decs .dec:hover { background: linear-gradient(180deg, var(--card-a), var(--card-b)); transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-rim) 70%, #fff), inset 0 0 0 1px var(--card-edge), var(--card-lift); } }
.space[data-space="overview"] .decs .dec[data-tone="warn"] { box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), inset 3px 0 0 var(--warn), var(--card-shadow); }
.space[data-space="overview"] .decs .dec[data-tone="stop"] { box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), inset 3px 0 0 var(--stop), var(--card-shadow); }
.space[data-space="overview"] .decs .dec[data-tone="accent"] { box-shadow: inset 0 1px 0 var(--card-rim), inset 0 0 0 1px var(--card-edge), inset 3px 0 0 var(--accent-fill), var(--card-shadow); }
.dec .g { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--raised); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.dec .g svg { width: 16px; height: 16px; }
.dec .g .mk { width: 16px; height: 16px; }
.dec .age { display: block; height: 3px; margin-top: 7px; border-radius: 2px; background: var(--well); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.dec .age i { display: block; height: 100%; width: 0; background: var(--quiet); transition: width .9s var(--ease); }
.dec .age[data-age="hours"] i { background: var(--warn); }
.dec .age[data-age="day"] i { background: var(--stop); }
.space[data-space="overview"] .decs .dec .verbs { align-self: center; }
/* control: three figures with their gauges, the latest decision ticking in, the bar, the points */
.instrument .ctrl { padding: 12px 16px 8px; gap: 12px; }
.instrument .gauge { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--well); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.instrument .gauge i { display: block; height: 100%; width: 0; background: var(--tone, var(--quiet)); transition: width .9s var(--ease); }
.instrument .latest { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 16px 10px; padding: 6px 10px; border-radius: 8px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--quiet); }
.instrument .latest .k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.instrument .latest .st { font-size: 12px; }
.instrument .latest[data-arrived] { animation: arrive .32s var(--ease) both, wash 1.6s var(--ease) both; }
.app[data-present="yes"] .brief .door { pointer-events: none; }
@media (max-width: 899px) {
  .brief { padding: 8px 12px; }
}