/* Design language (Phase 3, restyled with the UI/UX Pro Max skill; bold pass 'flight recorder' appended at the end of this file — "Minimalism & Swiss Style" for data dashboards):
   grid-based, high contrast, Fira Sans / Fira Code (self-hosted, OFL), slate ink on cool white, blue primary, amber highlight.
   Colour carries one job: status and data series. No decoration. Light and dark follow the OS (prefers-color-scheme). */
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fira-code-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fira-code-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fira-code-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
/* Cyrillic and Hebrew subsets (same families, selected per glyph by unicode-range) */
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/fira-sans-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Code"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fira-code-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Code"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fira-code-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Code"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fira-code-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/oswald-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Heebo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/heebo-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/heebo-hebrew-500-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/heebo-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/heebo-hebrew-800-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/heebo-hebrew-900-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
:root {
  color-scheme: dark;
  --orange: #ff5b14; --on-orange: #0a0a0a;
  --paper: #07080a; --panel: #0e1014; --ink: #f4f4f0; --ink2: #a9afba; --rule: #2c313b; --rule2: #1a1d24; --accent: #ff5b14; --focus: #ffd60a; --link: #5cc8ff; --warn-bg: #1f1406; --grid-line: rgba(255,255,255,.035);
  --st-OBSERVED: #5cc8ff; --st-DERIVED: #b6f23a; --st-MISSING: #9aa1ad; --st-UNSUPPORTED: #ff9f43; --st-UNKNOWN: #ff6b9a; --st-LIMITED: #ffd60a; --st-VALIDATED: #4ade80;
  --c-dark: 1; --c-plot: #05070a; --c-ink: #f4f4f0; --c-ink2: #a9afba; --c-grid: #1c2028; --c-warn: #ffd60a; --c-mark: #ff5b14; --c-focus: #5cc8ff; --c-strip: #0a0c10; --c-dot: #05070a;
  --c-series: #ff5b14, #5cc8ff, #b6f23a, #f0abfc, #ffd60a, #38bdf8, #ff6b9a, #e5e5e5;
  --display: "Big Shoulders Display", "Oswald", "Heebo", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --serif: "Fira Sans", "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Fira Sans", "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", "Heebo", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t: 0ms;
}
@media (prefers-color-scheme: light) { :root {
  color-scheme: light;
  --on-orange: #0a0a0a;
  --paper: #f6f3ea; --panel: #ffffff; --ink: #0a0a0a; --ink2: #43464d; --rule: #0a0a0a; --rule2: #d9d5c7; --accent: #ff5b14; --focus: #0038ff; --link: #0038ff; --warn-bg: #fff3c4; --grid-line: rgba(0,0,0,.05);
  --st-OBSERVED: #0b4fd6; --st-DERIVED: #3f6b00; --st-MISSING: #5b616c; --st-UNSUPPORTED: #9a3d00; --st-UNKNOWN: #b0124a; --st-LIMITED: #8a5a00; --st-VALIDATED: #0f7a3a;
  --c-dark: 0; --c-plot: #ffffff; --c-ink: #0a0a0a; --c-ink2: #43464d; --c-grid: #e4e0d2; --c-warn: #8a5a00; --c-mark: #e04500; --c-focus: #0b4fd6; --c-strip: #efeadb; --c-dot: #ffffff;
  --c-series: #e04500, #0b4fd6, #3f6b00, #a21caf, #8a5a00, #0369a1, #b0124a, #0a0a0a;
} }
* { box-sizing: border-box; }
html { background: var(--paper); } body { margin: 0; color: var(--ink); font: 14.5px/1.55 var(--sans); background: var(--paper); font-variant-numeric: tabular-nums; }
.mono, .kv td, .grid td.mono, .tc-readout, .sp-read { font-family: var(--mono); font-size: 12.5px; font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
code, pre, .raw, .st, .eyebrow, .sec-n, .chain, .five dt, .eng, .int { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
.note { color: var(--ink2); font-size: 12.5px; } .sr-only, .sr-only-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--focus); text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .skip { position: absolute; inset-inline-start: 8px; top: -120px; }   /* off-screen vertically: a negative horizontal offset creates scrollable overflow in RTL */ .skip:focus { top: 8px; background: var(--panel); padding: 6px 10px; z-index: 9; }
h1, h2, h3 { font-family: var(--sans); font-weight: 600; margin: 0; letter-spacing: -0.01em; } h1 { font-size: 34px; line-height: 1.15; font-weight: 700; } h2 { font-size: 17px; } h3 { font-size: 14px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; }

/* frame */
.top { display: flex; align-items: center; gap: 24px; padding: 10px 24px; border-bottom: 2px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; } .brand-m { background: var(--ink); color: var(--paper); padding: 1px 6px; font-weight: 700; letter-spacing: .08em; } .brand-t { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.eng { font: 12px var(--mono); color: var(--ink2); border-inline-start: 1px solid var(--rule); padding-inline-start: 16px; } .eng-bad { color: var(--st-UNKNOWN); }
.header-auth { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.header-auth-btn { background: transparent; border: 2px solid var(--ink2); color: var(--ink2); font: 700 12px var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; cursor: not-allowed; opacity: .55; display: flex; align-items: center; }
.body { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 50px); } .route-overview .body, .route-sessions .body, .route-session .body, .route-signals .body, .route-spectrum .body, .route-evidence .body, .route-qc .body, .route-ai .body { grid-template-columns: 250px 1fr; }
main { padding: 22px 28px 60px; min-width: 0; max-width: 1500px; } main:focus { outline: none; }
.rail { border-inline-end: 1px solid var(--rule); padding: 18px 16px; background: var(--panel); position: sticky; top: 50px; align-self: start; height: calc(100vh - 50px); overflow: auto; }
.rail-id { border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 12px; } .rail-n { font-family: var(--serif); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; } .rail-fw { margin-top: 6px; } .rail-s { display: block; margin-top: 10px; font-size: 12.5px; } .rail-s select { width: 100%; margin-top: 3px; }
.rail-nav { list-style: none; margin: 0; padding: 0; } .rail-nav a { display: block; padding: 6px 8px; color: var(--ink); text-decoration: none; border-inline-start: 3px solid transparent; } .rail-nav a:hover { background: var(--rule2); } .rail-nav a.cur { border-inline-start-color: var(--accent); background: var(--rule2); font-weight: 600; } .rail-nav .mono { color: var(--ink2); font-size: 11px; } .rail-foot { margin-top: 24px; }

/* sections: numbered, ruled */
.sec { margin: 0 0 26px; border-top: 2px solid var(--ink); } .sec-h { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 8px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; } .sec-n { font: 12px var(--mono); color: var(--ink2); } .sec-h .note { margin-inline-start: auto; } .sec-b > :first-child { margin-top: 0; }
.sec-error { border-top-color: var(--st-UNKNOWN); } .err-m { font-size: 16px; font-family: var(--serif); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.plain { margin: 0; padding-inline-start: 18px; } .plain li { margin: 3px 0; } .links li { margin: 6px 0; }

/* tables */
table { border-collapse: collapse; width: 100%; } th { text-align: start; font-weight: 600; } .grid th, .grid td { border-bottom: 1px solid var(--rule2); padding-block: 5px; padding-inline: 0 10px; vertical-align: top; } .grid thead th { border-bottom: 1px solid var(--ink); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.kv th { width: 230px; font-weight: 500; color: var(--ink2); padding-block: 4px; padding-inline: 0 10px; vertical-align: top; } .kv td { padding-block: 4px; padding-inline: 0 12px; overflow-wrap: anywhere; } .kv tr { border-bottom: 1px solid var(--rule2); } .kv-st { width: 130px; white-space: nowrap; }
tr.sel { background: var(--rule2); }

/* status pills: glyph + word + colour */
.st { display: inline-flex; align-items: center; gap: 4px; font: 700 10.5px var(--mono); letter-spacing: .05em; padding: 1px 6px; border: 1.5px solid currentColor; white-space: nowrap; vertical-align: middle; background: var(--panel); }
.st-g { font-size: 11px; } .st-OBSERVED { color: var(--st-OBSERVED); } .st-DERIVED { color: var(--st-DERIVED); } .st-MISSING { color: var(--st-MISSING); border-style: dashed; } .st-UNSUPPORTED { color: var(--st-UNSUPPORTED); } .st-UNKNOWN { color: var(--st-UNKNOWN); border-style: dotted; } .st-LIMITED { color: var(--st-LIMITED); } .st-VALIDATED { color: var(--panel); background: var(--st-VALIDATED); border-color: var(--st-VALIDATED); }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; } .leg { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; } .leg-t { font-size: 12.5px; color: var(--ink2); } .leg-c { color: var(--ink2); }
.notice { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--rule2); } .n-c { color: var(--ink2); font-size: 11px; }
.support { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--st-OBSERVED); background: var(--panel); margin-bottom: 18px; } .support-LIMITED { border-color: var(--st-LIMITED); } .support-UNSUPPORTED { border-color: var(--st-UNSUPPORTED); } .support-UNKNOWN { border-color: var(--st-UNKNOWN); }
.alias-banner { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; border: 1.5px solid var(--st-LIMITED); background: var(--warn-bg); margin-bottom: 18px; }
.int { font: 700 12px var(--mono); letter-spacing: .05em; } .int-INTACT { color: var(--st-VALIDATED); } .int-DAMAGE_OBSERVED, .int-EMPTY { color: var(--st-UNKNOWN); } .int-TRUNCATED, .int-UNKNOWN { color: var(--st-LIMITED); } .big { font-size: 20px; }
details.more { margin: 8px 0; } details summary { cursor: pointer; color: var(--focus); } .more-b { padding: 6px 0 6px 14px; border-inline-start: 2px solid var(--rule); margin-top: 6px; }
.raw { max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--rule); padding: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; }
.empty { border: 1px dashed var(--rule); padding: 16px; background: var(--panel); } .empty p { margin: 4px 0 0; color: var(--ink2); }
.btn { font: 500 13px var(--sans); min-height: 32px; padding: 5px 12px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; } .btn:hover { background: var(--ink); color: var(--paper); } .btn-primary { background: var(--ink); color: var(--paper); }
select, input[type=number] { font: 13px var(--sans); padding: 3px 6px; border: 1.5px solid var(--ink); background: var(--panel); } .controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .row { display: flex; gap: 10px; margin-top: 10px; } .keep { display: block; margin-top: 10px; font-size: 13px; }

/* landing */
.landing { max-width: 1180px; margin: 0 auto; } .hero { padding: 34px 0 26px; border-bottom: 2px solid var(--ink); margin-bottom: 22px; } .eyebrow { font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin: 0 0 10px; } .lede { max-width: 760px; font-size: 16px; margin: 14px 0 22px; color: var(--ink2); }
.dz { display: block; border: 2px dashed var(--ink); background: var(--panel); padding: 34px 28px; cursor: pointer; max-width: 760px; } .dz-a { display: block; font: 600 26px var(--serif); } .dz-b { display: block; margin-top: 4px; font-size: 15px; } .dz-h { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ink2); } .dz:hover, .dz-over, .dz-focus { border-style: solid; background: var(--paper); } .dz-focus { outline: 2px solid var(--focus); outline-offset: 3px; } .dz-c { padding: 18px; }
.sr-only-input { opacity: 0; }

/* analysis pipeline */
.pipe { list-style: none; padding: 0; margin: 0; counter-reset: s; } .pipe li { display: grid; grid-template-columns: 26px 210px 54px 1fr 90px; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule2); } .pg { font-family: var(--mono); } .pl { font-weight: 600; letter-spacing: .03em; } .pm { text-align: right; }
.pipe-done .pg { color: var(--st-VALIDATED); } .pipe-running .pg { color: var(--accent); } .pipe-failed .pg, .pipe-failed .pl { color: var(--st-UNKNOWN); } .pipe-pending { color: var(--ink2); }

/* overview / evidence */
.chain { display: flex; gap: 6px; flex-wrap: wrap; font: 600 12px var(--mono); letter-spacing: .06em; margin-bottom: 14px; } .chain-i { display: inline-flex; gap: 6px; align-items: baseline; } .chain-n { border: 1.5px solid var(--ink); padding: 0 5px; } .chain-a { color: var(--ink2); }
.layer { margin: 14px 0; } .layer h3 { margin-bottom: 6px; } .layer-list { list-style: none; padding: 0; margin: 0; } .layer-list li { padding: 4px 0; border-bottom: 1px solid var(--rule2); }
.obs { padding: 12px 0; border-bottom: 1px solid var(--rule); } .obs > header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; } .obs-k { font-weight: 700; } .five { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; margin: 0; } .five dt { font: 700 11px var(--mono); letter-spacing: .06em; color: var(--ink2); padding-top: 2px; } .five dd { margin: 0; } .obs-t { font-family: var(--serif); font-size: 15px; }

/* charts */
.sig-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; } .sig-side { border-inline-end: 1px solid var(--rule); padding-inline-end: 14px; max-height: 76vh; overflow: auto; } .pk-ch { padding: 8px 0; border-bottom: 1px solid var(--rule2); } .pk-h { display: flex; justify-content: space-between; gap: 6px; align-items: center; } .pk-h strong { font-size: 12.5px; } .pk-ax { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; } .pk-a { font-size: 12.5px; }
.tc-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .tc-range { margin-inline-start: auto; color: var(--ink2); font-size: 12px; } .tc:focus-visible { outline: 2px solid var(--focus); }
.tc-track { border-top: 1px solid var(--ink); padding-top: 4px; } .tc-t { display: flex; gap: 12px; align-items: baseline; } .tc-u { color: var(--ink2); font-size: 12px; } .tc-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 4px; } .tc-sw { font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; } .sw { display: inline-block; width: 14px; height: 4px; }
.tc-cv { position: relative; } .tc-c { display: block; } .tc-ov2 { position: absolute; left: 0; top: 0; cursor: crosshair; } .tc-axis, .tc-ov { display: block; margin-top: 2px; } .tc-ov { margin-top: 10px; cursor: pointer; }
.tc-readout { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 6px; min-height: 96px; } .tc-rh { color: var(--ink2); margin-bottom: 4px; }
.sp-host { width: 100%; } .sp-c { display: block; } .sp-read { min-height: 20px; color: var(--ink2); margin: 4px 0 10px; }
@media (max-width: 1100px) { .route-overview .body, .route-sessions .body, .route-session .body, .route-signals .body, .route-spectrum .body, .route-evidence .body, .route-qc .body, .route-ai .body { grid-template-columns: 1fr; } .rail { position: static; height: auto; } .grid2, .cols3, .sig-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .dz { transition: background .12s; } }
/* interaction polish (skill checklist: visible focus, pointer cursor, 150 ms transitions, adequate targets, reduced motion) */
a, button, select, summary, label[for], .tc-sw, .pk-a, .rail-nav a { cursor: pointer; }
select, input[type=number] { min-height: 32px; } input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--focus); }
.btn, .rail-nav a, .dz, a, summary { transition: background-color var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media (pointer: coarse) { .btn, select, input[type=number] { min-height: 44px; } .rail-nav a { padding: 12px 8px; } .tc-sw, .pk-a { padding: 8px 0; } input[type=checkbox] { width: 22px; height: 22px; } }
/* narrower screens: single column, wrapped top bar, scrollable tables (the app is designed for desktop; this keeps it usable down to phone width) */
@media (max-width: 900px) { main { padding: 16px 14px 48px; } .top { flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; } .eng { border-inline-start: 0; padding-inline-start: 0; } .header-auth { margin-inline-start: 0; }
  .body { min-height: 0; } .rail { padding: 12px 14px; } .rail-nav { display: flex; flex-wrap: wrap; gap: 2px 6px; } .rail-nav a { border-inline-start: 0; border-bottom: 3px solid transparent; } .rail-nav a.cur { border-bottom-color: var(--accent); }
  .kv th { width: 42%; } .legend, .grid2, .cols3 { grid-template-columns: 1fr; } .pipe li { grid-template-columns: 22px 1fr 60px; } .pipe .pe, .pipe .pn { display: none; }
  .five { grid-template-columns: minmax(0, 1fr); } .five dd, .obs-t { overflow-wrap: anywhere; } .leg, .notice { grid-template-columns: 110px 1fr; } .sig-side { border-inline-end: 0; max-height: none; padding-inline-end: 0; } h1 { font-size: 27px; } .dz { padding: 22px 16px; } .dz-a { font-size: 21px; } .hero { padding: 20px 0 18px; } }
@media (max-width: 720px) { .five dd { min-width: 0; } table.grid { display: block; overflow-x: auto; } .sec-h { flex-wrap: wrap; } .tc-range { margin-inline-start: 0; } }

/* =====================================================================================================================
   BOLD PASS — "flight recorder". Near-black chassis, international-orange, hazard tape, giant condensed type, instrument tiles,
   phosphor data colours. Light scheme = hi-vis paper (same layout, black/white/orange). Static: no animation implies computation
   that is not happening (the only moving element is the caret on the stage that is actually running).
   ===================================================================================================================== */
body { background-color: var(--paper); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 36px 36px; background-attachment: fixed; }
html { background: var(--paper); }
a, details summary { color: var(--link); }
::selection { background: var(--orange); color: var(--on-orange); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* top bar + hazard tape */
.top { background: #000; color: #f4f4f0; border-bottom: 0; padding: 0 0 0 0; gap: 0; align-items: stretch; position: sticky; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, #000 14px 28px); }
html[data-x] .top::after { display: none; }
.brand { color: #f4f4f0; gap: 14px; align-items: stretch; }
.brand-m { background: var(--orange); color: var(--on-orange); font: 900 30px/1 var(--display); letter-spacing: .04em; padding: 10px 16px; display: flex; align-items: center; }
.brand-t { font: 800 22px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; align-self: center; }
.eng { color: #d8dbe0; border-inline-start-color: #444; align-self: center; margin-inline-end: 22px; }
.header-auth-btn { border-color: #d8dbe0; color: #d8dbe0; }
.body { margin-top: 10px; }

/* rail = instrument selector */
.rail { background: rgba(0,0,0,.55); border-inline-end: 3px solid var(--orange); top: 60px; height: calc(100vh - 60px); }
.rail-n { font: 800 20px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.rail-nav a { font: 800 17px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 11px 10px; border-inline-start: 6px solid transparent; }
.rail-nav a:hover { background: var(--ink); color: var(--paper); }
.rail-nav a.cur { background: var(--orange); color: var(--on-orange); border-inline-start-color: var(--ink); font-weight: 900; } .rail-nav a.cur .mono { color: var(--on-orange); }
.rail-nav .mono { font-size: 11px; margin-inline-end: 6px; }

/* sections: giant outlined numerals, heavy titles */
.sec { border-top: 0; position: relative; padding-top: 10px; margin-bottom: 34px; }
.sec::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 64px; height: 8px; background: var(--orange); }
.sec-h { border-bottom: 3px solid var(--ink); padding: 8px 0 6px; align-items: flex-end; }
.sec-n { font: 900 40px/0.85 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--orange); letter-spacing: .02em; }
.sec-h h2 { font: 900 32px/0.95 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.sec-h .note { font-family: var(--mono); }
.sec-error { border-top-color: var(--st-UNKNOWN); } .sec-error::before { background: var(--st-UNKNOWN); } .err-m { font: 800 26px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
h3 { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; }

/* landing */
.hero { border-bottom: 0; padding: 26px 0 34px; position: relative; }
.hero::after { content: attr(data-tag); position: absolute; right: 0; top: 34px; font: 700 12px var(--mono);   /* physical on purpose: vertical writing-mode swaps the logical axes */ letter-spacing: .2em; color: var(--ink2); writing-mode: vertical-rl; }
.eyebrow { display: inline-block; background: var(--ink); color: var(--paper); padding: 4px 10px; font-weight: 700; letter-spacing: .2em; }
h1 { font: 900 clamp(52px, 8.6vw, 120px)/1.02 var(--display); text-transform: uppercase; letter-spacing: 0; margin: 22px 0 26px; max-width: 13ch; }
h1 .hl { background: var(--orange); color: var(--on-orange); padding: .01em .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lede { font-size: 17px; max-width: 720px; border-inline-start: 6px solid var(--orange); padding-inline-start: 16px; color: var(--ink); }
.dz { position: relative; border: 3px solid var(--orange); background: #000; color: #f4f4f0; padding: 44px 36px; max-width: 900px; box-shadow: 10px 10px 0 var(--orange); }
.dz::before, .dz::after { content: ""; position: absolute; width: 28px; height: 28px; border: 0 solid #f4f4f0; }
.dz::before { inset-inline-start: 8px; top: 8px; border-top-width: 4px; border-inline-start-width: 4px; } .dz::after { inset-inline-end: 8px; bottom: 8px; border-bottom-width: 4px; border-inline-end-width: 4px; }
.dz-a { font: 900 clamp(40px, 6vw, 76px)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--orange); }
.dz-b { font: 700 19px var(--mono); margin-top: 10px; } .dz-h { color: #b4b9c3; }
.dz:hover, .dz-over, .dz-focus { background: var(--orange); border-style: solid; box-shadow: 4px 4px 0 #000; transform: translate(6px, 6px); } .dz:hover .dz-a, .dz-over .dz-a, .dz-focus .dz-a { color: #0a0a0a; } .dz:hover .dz-b, .dz-over .dz-b, .dz-focus .dz-b, .dz:hover .dz-h, .dz-over .dz-h, .dz-focus .dz-h { color: #0a0a0a; }
.dz-focus { outline: 4px solid var(--focus); outline-offset: 6px; }
.cols3 .sec { background: rgba(0,0,0,.35); padding: 12px 16px 16px; border: 1px solid var(--rule); }

/* instrument tiles */
.instr { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0 0 30px; border: 3px solid var(--ink); background: #000; color: #f4f4f0; }
.tile { padding: 14px 16px 12px; border-inline-end: 3px solid var(--ink); display: grid; align-content: start; gap: 2px; position: relative; } .tile:last-child { border-inline-end: 0; }
.tile::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--st-OBSERVED); } .tile-DERIVED::before { background: var(--st-DERIVED); } .tile-LIMITED::before { background: var(--st-LIMITED); } .tile-MISSING::before, .tile-UNKNOWN::before, .tile-UNSUPPORTED::before { background: var(--st-UNKNOWN); }
.instr { --st-OBSERVED: #5cc8ff; --st-DERIVED: #b6f23a; --st-MISSING: #9aa1ad; --st-UNSUPPORTED: #ff9f43; --st-UNKNOWN: #ff6b9a; --st-LIMITED: #ffd60a; --st-VALIDATED: #4ade80; }   /* the instrument strip is always dark, in both schemes */
.tile-l { font: 700 11.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #b4b9c3; margin-top: 6px; }
.tile-v { font: 900 clamp(30px, 3.3vw, 48px)/1 var(--display); white-space: nowrap; letter-spacing: .01em; color: #f4f4f0; overflow-wrap: anywhere; text-shadow: 0 0 22px rgba(255,91,20,.35); }
.tile-sub { font: 400 11.5px var(--mono); color: #b4b9c3; min-height: 1.4em; }
.tile-s { margin-top: 6px; } .tile .st { background: #000; }

/* status pills + banners */
.st { font-weight: 700; font-size: 11px; padding: 2px 7px; border-width: 2px; background: color-mix(in srgb, currentColor 12%, var(--panel)); }
.st-VALIDATED { background: var(--st-VALIDATED); color: var(--panel); border-color: var(--st-VALIDATED); }
.support, .alias-banner { border-width: 3px; border-inline-start-width: 16px; background: var(--warn-bg); } .support { background: var(--panel); }
.alias-banner strong { font: 800 19px/1.1 var(--display); letter-spacing: .04em; }
.kv th, .grid thead th { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; } .kv td { font-size: 13.5px; }
.grid thead th { border-bottom: 3px solid var(--ink); color: var(--ink); }
tr.sel { background: color-mix(in srgb, var(--orange) 22%, transparent); }
.btn { border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; }
.btn:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); } .btn-primary { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
select, input[type=number] { border: 2px solid var(--ink); background: var(--panel); color: var(--ink); font-family: var(--mono); }
.chain-n { background: var(--orange); border-color: var(--orange); color: var(--on-orange); font-weight: 800; }
.obs { border-bottom: 3px solid var(--ink); } .obs-k { font: 800 18px var(--display); letter-spacing: .06em; } .obs-t { font-family: var(--sans); font-size: 15px; }
.five dt { color: var(--orange); }
.empty { border: 2px dashed var(--ink2); background: rgba(0,0,0,.3); }

/* pipeline: a real tape of real stages */
.pipe li { grid-template-columns: 44px 290px 64px 1fr 100px; padding: 10px 0 10px 14px; border-inline-start: 8px solid var(--rule); border-bottom: 1px solid var(--rule2); background: rgba(0,0,0,.25); margin-bottom: 4px; }
.pipe .pl { font: 900 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; } .pg { font-size: 22px; } .pm { font: 700 15px var(--mono); }
.pipe-done { border-inline-start-color: var(--orange) !important; } .pipe-done .pg { color: var(--orange); } .pipe-running { border-inline-start-color: var(--focus) !important; background: color-mix(in srgb, var(--focus) 10%, transparent) !important; } .pipe-failed { border-inline-start-color: var(--st-UNKNOWN) !important; }
@media (prefers-reduced-motion: no-preference) { .pipe-running .pm::after { content: "\2588"; margin-inline-start: 4px; color: var(--focus); animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } }

/* charts */
.tc-track { border-top: 3px solid var(--ink); } .tc-t strong { font: 900 22px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; } .tc-u { font-family: var(--mono); }
.tc-readout { border-top: 3px solid var(--orange); } .tc-readout .tc-rh { color: var(--orange); font-weight: 700; }
.sig-side { border-inline-end: 3px solid var(--ink); }

@media (max-width: 900px) { .hero::after { display: none; } .rail { border-inline-end: 0; border-bottom: 3px solid var(--orange); top: 0; } .brand-m { font-size: 24px; padding: 8px 12px; } .brand-t { font-size: 17px; } .instr { grid-template-columns: repeat(2, 1fr); } .tile { border-bottom: 3px solid var(--ink); } .pipe li { grid-template-columns: 28px 1fr 70px; } .dz { box-shadow: 6px 6px 0 var(--orange); padding: 28px 20px; } .top { flex-wrap: nowrap; flex-direction: column; } .top::after { bottom: -8px; height: 8px; } .brand { width: 100%; } .eng, .header-auth { padding: 4px 14px; margin: 0; } }
@media (max-width: 900px) { table.grid { display: block; overflow-x: auto; } }
.obs > header { flex-wrap: wrap; } .obs-id { overflow-wrap: anywhere; min-width: 0; }

/* ===== i18n: language switcher, RTL (Hebrew), per-language typography ===== */
.lang { display: inline-flex; align-self: center; margin-inline: 12px; border: 2px solid #f4f4f0; } .lang button { font: 800 14px/1 var(--display); letter-spacing: .08em; padding: 7px 10px; background: transparent; color: #f4f4f0; border: 0; border-inline-end: 2px solid #f4f4f0; cursor: pointer; min-height: 32px; } .lang button:last-child { border-inline-end: 0; }
.lang button:hover { background: #f4f4f0; color: #000; } .lang button[aria-pressed="true"] { background: var(--orange); color: var(--on-orange); }
.lang button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.mono, .kv td, .tile-v, .grid td { unicode-bidi: plaintext; }
.tc-cv, .sp-host { direction: ltr; }
html[dir="rtl"] { --shadow-x: -1; }
html[dir="rtl"] .dz { box-shadow: -10px 10px 0 var(--orange); } html[dir="rtl"] .dz:hover, html[dir="rtl"] .dz-over, html[dir="rtl"] .dz-focus { box-shadow: -4px 4px 0 #000; transform: translate(-6px, 6px); }
html[dir="rtl"] .hero::after { writing-mode: vertical-lr; right: auto; left: 0; } html[dir="rtl"] .rail-nav a.cur { border-left-color: transparent; }
html[dir="rtl"] h1, html[dir="rtl"] .dz-a, html[dir="rtl"] .sec-h h2, html[dir="rtl"] .tile-v, html[dir="rtl"] .rail-nav a, html[dir="rtl"] .brand-t, html[dir="rtl"] .pipe .pl { letter-spacing: 0; }
html[lang="he"] h1 { font-weight: 900; line-height: 1.12; text-transform: none; } html[lang="he"] .dz-a, html[lang="he"] .sec-h h2, html[lang="he"] .tile-v, html[lang="he"] .btn { text-transform: none; }
html[lang="ru"] h1 { font-weight: 700; font-size: clamp(44px, 7.2vw, 100px); } html[lang="ru"] .dz-a { font-weight: 700; } html[lang="ru"] .sec-h h2, html[lang="ru"] .pipe .pl, html[lang="ru"] .tile-v { font-weight: 700; }
html[lang="he"] .eyebrow, html[lang="he"] .tile-l, html[lang="he"] .kv th, html[lang="he"] .grid thead th, html[lang="he"] h3, html[lang="he"] .five dt { letter-spacing: 0; text-transform: none; }
.lang { direction: ltr; }
@media (min-width: 1150px) { .instr { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tile-v { font-size: clamp(26px, 2.7vw, 44px); white-space: normal; overflow-wrap: anywhere; } }
h1, .dz-a, .sec-h h2, .tile-v, .rail-nav a, .btn { overflow-wrap: anywhere; }
html[lang="ru"] h1 { font-size: clamp(38px, 6.4vw, 92px); } html[lang="ru"] .dz-a { font-size: clamp(28px, 4.6vw, 58px); }
@media (max-width: 900px) { html[lang="ru"] h1 { font-size: clamp(30px, 9vw, 52px); } html[lang="ru"] .dz-a { font-size: clamp(24px, 6.4vw, 34px); } html[lang="he"] h1 { font-size: clamp(34px, 11vw, 60px); } }
/* file names and other data are never re-cased: only fixed UI words are upper-cased by the display style */
.rail-n { font: 700 17px/1.2 var(--sans); text-transform: none; letter-spacing: 0; unicode-bidi: plaintext; }
.err-m { font: 700 21px/1.3 var(--sans); text-transform: none; letter-spacing: 0; }

/* ===== entry notice (modal) ===== */
dialog.entry-notice { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: min(720px, calc(100vw - 24px)); width: 100%; margin: auto; }
dialog.entry-notice::backdrop { background: rgba(0, 0, 0, .82); }
.notice-card { background: var(--panel); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--orange); max-height: calc(100vh - 32px); overflow: auto; }
.notice-tape { height: 12px; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, #000 14px 28px); }
.notice-body { padding: 22px 28px 26px; }
.notice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .notice-top .eyebrow { margin: 0; }
.notice-lang { margin: 0; }
.entry-notice h2 { font: 900 clamp(34px, 6vw, 54px)/1 var(--display); text-transform: uppercase; margin: 10px 0 14px; }
html[lang="he"] .entry-notice h2 { text-transform: none; } html[lang="ru"] .entry-notice h2 { font-weight: 700; }
.notice-list { margin: 0 0 14px; padding-inline-start: 22px; font-size: 15.5px; line-height: 1.55; } .notice-list li { margin: 0 0 10px; } .notice-list li::marker { color: var(--orange); font-weight: 700; }
.entry-notice .btn-primary { font-size: 18px; padding: 10px 22px; min-height: 44px; }
.notice-link { margin-inline-start: auto; align-self: center; background: transparent; border: 2px solid var(--orange); color: var(--orange); font: 800 13px var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; }
.notice-link:hover { background: var(--orange); color: var(--on-orange); } .notice-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 900px) { .notice-link { margin-inline-start: 14px; } .notice-body { padding: 16px 16px 20px; } .notice-card { box-shadow: 6px 6px 0 var(--orange); } }
.noscript { padding: 1rem; }
.fatal { position: sticky; top: 0; z-index: 50; background: var(--st-UNKNOWN); color: #000; padding: 12px 20px; font-weight: 600; border-bottom: 4px solid #000; }
/* ===== terms + gate ===== */
.terms { max-width: 860px; } .terms-sec { margin: 0 0 18px; } .terms-sec h3, .terms-sec h4 { font: 800 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; } .terms-sec h4 { font-size: 17px; }
html[lang="he"] .terms-sec h3, html[lang="he"] .terms-sec h4 { text-transform: none; letter-spacing: 0; } .terms-sec p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.notice-terms { margin: 4px 0 12px; } .terms-panel { margin-top: 10px; max-height: 32vh; overflow: auto; border: 2px solid var(--rule); background: var(--paper); padding: 12px 16px; } .terms-panel:focus-visible { outline: 3px solid var(--focus); }
.notice-accept { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin: 8px 0 4px; cursor: pointer; } .notice-accept input { margin-top: 3px; flex: none; }
.notice-hint { min-height: 1.4em; margin: 0 0 8px; color: var(--st-LIMITED); }
.notice-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.notice-actions .btn[disabled] { opacity: .45; cursor: not-allowed; } .notice-soon { font-size: 14px; } .soon-tag { margin-inline-start: 8px; font: 700 10px var(--mono); letter-spacing: .08em; border: 1px solid currentColor; padding: 1px 5px; text-transform: uppercase; }
.notice-body { max-height: calc(100vh - 44px); overflow: auto; }
/* email registration (owner decision, 2026-09-26, see CLAUDE.md "Email registration") — the inline register/verify-code mini-form inside the entry notice */
.register-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; padding: 12px 14px; border: 2px solid var(--rule); background: var(--paper); max-width: 360px; width: 100%; }
.register-field { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; }
.register-field input { font: 14px var(--sans); padding: 6px 8px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); min-height: 32px; }
.register-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.register-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== experimental AI assistant (separate page) ===== */
.ai-main { max-width: 900px; margin: 0 auto; padding: 22px 20px 60px; }
.ai-warn { border: 3px solid var(--st-LIMITED); border-inline-start-width: 16px; background: var(--warn-bg); padding: 12px 16px; margin: 0 0 18px; line-height: 1.5; }
.ai-after { margin-top: 18px; } .ai-line { margin: 6px 0; line-height: 1.55; } .ai-dim { opacity: .55; } .ai-cite { color: var(--st-OBSERVED); } .ai-flag { color: var(--st-UNKNOWN); }
.ai-answer h3 { margin: 16px 0 4px; } progress { width: min(420px, 60%); height: 14px; vertical-align: middle; accent-color: var(--orange); }