/* Foxborne console - design system.

   A field instrument, not a dashboard. Neutrals are field graphite and bone; one signal orange marks
   where you are (the cursor, the selected event, the vehicle on the map) and nothing else. Evidence
   levels (observed, correlated, hypothesis, unknown) and states (ok, warning, error) keep their own
   colors and shapes. Geist for the interface, Geist Mono only for real codes: times, grid references,
   hashes, IDs and raw records.

   Geometry: 4px grid. Controls 28 / 32 / 36px. Radius 4px on controls, 6px on panels, 8px on dialogs.
   Only status dots are round. Borders are 1px hairlines; no colored edge stripes, no glow. Tables align
   their first and last cells with the panel header padding (20px) so every column edge lines up.

   Dark is the default. The light theme is the same system on paper, and the report always renders on
   paper because it is the artifact that leaves the building. The marking banner follows the Astro UXDS
   classification colors so it reads the same as every other system on a defense network. */

/* Fonts ship with the console (SIL OFL, see fonts/OFL.txt): an air-gapped install loads nothing from
   outside the enclave. */
@font-face { font-family: 'Geist'; src: url('fonts/geist-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #0b0c0a;
  --bg-side: #0d0e0c;
  --sunken: #080907;
  --surface: #111210;
  --surface-2: #151613;
  --surface-3: #1b1c19;
  --hover: rgba(236, 233, 222, 0.035);
  --press: rgba(236, 233, 222, 0.06);
  --line: rgba(236, 233, 222, 0.085);
  --line-2: rgba(236, 233, 222, 0.05);
  --line-3: rgba(236, 233, 222, 0.14);
  --text: #ecebe4;
  --text-2: #b0aea4;
  --text-3: #83827a;
  --text-4: #5b5a53;
  --invert: #0b0c0a;
  --btn: #ecebe4;
  --btn-hover: #fffdf6;

  --sig: #ff6a2b; --sig-bg: rgba(255, 106, 43, 0.12); --sig-bd: rgba(255, 106, 43, 0.45); --sig-ink: #0b0c0a;
  --logo-a: #FFFFFF; --logo-b: #BDBDBD;
  --obs: #dcdad2; --obs-bg: rgba(220, 218, 210, 0.07); --obs-bd: rgba(220, 218, 210, 0.2);
  --cor: #86a9ee; --cor-bg: rgba(134, 169, 238, 0.1); --cor-bd: rgba(134, 169, 238, 0.3);
  --hyp: #b7a2f5; --hyp-bg: rgba(183, 162, 245, 0.1); --hyp-bd: rgba(183, 162, 245, 0.3);
  --unk: #8e8d85; --unk-bg: rgba(142, 141, 133, 0.08); --unk-bd: rgba(142, 141, 133, 0.28);
  --ok: #66c08c; --ok-bg: rgba(102, 192, 140, 0.1); --ok-bd: rgba(102, 192, 140, 0.28);
  --warn: #e2ae4c; --warn-bg: rgba(226, 174, 76, 0.1); --warn-bd: rgba(226, 174, 76, 0.3);
  --err: #ee7466; --err-bg: rgba(238, 116, 102, 0.1); --err-bd: rgba(238, 116, 102, 0.3);

  --map-bg: #0d0e0b;
  --map-c: rgba(236, 233, 222, 0.07);
  --map-ci: rgba(236, 233, 222, 0.15);
  --map-grid: rgba(236, 233, 222, 0.065);
  --map-feat: rgba(236, 233, 222, 0.4);
  --map-feat-2: rgba(236, 233, 222, 0.22);
  --map-lbl: #99978d;
  --map-wash: rgba(150, 170, 190, 0.3);

  --mark-cui: #502b85; --mark-u: #007a33; --mark-ink: #ffffff;
  --hatch: rgba(236, 233, 222, 0.09);
  --plot-fill: rgba(236, 233, 222, 0.05);
  --focus: 0 0 0 1px rgba(236, 233, 222, 0.6), 0 0 0 4px rgba(236, 233, 222, 0.09);
  --shadow-pop: 0 24px 64px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(236, 233, 222, 0.05);
  --shadow-paper: 0 1px 0 rgba(236, 233, 222, 0.04), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  --scrim: rgba(3, 4, 2, 0.62);

  --r-xs: 3px; --r-sm: 4px; --r-md: 4px; --r-lg: 5px;
  --side-w: 232px;
  --top-h: 56px;
  --banner-h: 0px;
  --status-h: 28px;
  /* Everything fixed to the bottom edge: the status bar and, under it, the bottom marking banner. */
  --foot-h: calc(var(--status-h) + var(--banner-h));
  --pad: 32px;

  --font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
}
.has-banner { --banner-h: 20px; }

[data-theme='light'],
.paper {
  --bg: #f3f2ee;
  --bg-side: #f8f7f3;
  --sunken: #efeee9;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --surface-3: #efeee8;
  --hover: rgba(17, 18, 15, 0.035);
  --press: rgba(17, 18, 15, 0.06);
  --line: #e3e1d9;
  --line-2: #ecebe4;
  --line-3: #d3d1c8;
  --text: #11120f;
  --text-2: #4b4a44;
  --text-3: #6f6e67;
  --text-4: #a3a29a;
  --invert: #ffffff;
  --btn: #11120f;
  --btn-hover: #000000;

  --sig: #e0520f; --sig-bg: rgba(224, 82, 15, 0.08); --sig-bd: rgba(224, 82, 15, 0.4); --sig-ink: #ffffff;
  --logo-a: #000000; --logo-b: #474747;
  --obs: #2d2e2a; --obs-bg: rgba(45, 46, 42, 0.06); --obs-bd: rgba(45, 46, 42, 0.2);
  --cor: #2d67d8; --cor-bg: rgba(45, 103, 216, 0.07); --cor-bd: rgba(45, 103, 216, 0.28);
  --hyp: #6f4fd0; --hyp-bg: rgba(111, 79, 208, 0.07); --hyp-bd: rgba(111, 79, 208, 0.28);
  --unk: #6f6e67; --unk-bg: rgba(111, 110, 103, 0.07); --unk-bd: rgba(111, 110, 103, 0.26);
  --ok: #17895a; --ok-bg: rgba(23, 137, 90, 0.07); --ok-bd: rgba(23, 137, 90, 0.26);
  --warn: #a8660b; --warn-bg: rgba(200, 128, 18, 0.08); --warn-bd: rgba(200, 128, 18, 0.3);
  --err: #c93b30; --err-bg: rgba(201, 59, 48, 0.06); --err-bd: rgba(201, 59, 48, 0.26);

  --map-bg: #f7f5ee;
  --map-c: rgba(146, 98, 52, 0.22);
  --map-ci: rgba(146, 98, 52, 0.46);
  --map-grid: rgba(17, 18, 15, 0.09);
  --map-feat: rgba(17, 18, 15, 0.6);
  --map-feat-2: rgba(17, 18, 15, 0.32);
  --map-lbl: #5f5e57;
  --map-wash: rgba(46, 104, 160, 0.4);

  --hatch: rgba(17, 18, 15, 0.1);
  --plot-fill: rgba(17, 18, 15, 0.045);
  --focus: 0 0 0 1px rgba(17, 18, 15, 0.7), 0 0 0 4px rgba(17, 18, 15, 0.08);
  --shadow-pop: 0 24px 64px -20px rgba(17, 18, 15, 0.28), 0 0 0 1px rgba(17, 18, 15, 0.06);
  --shadow-paper: 0 1px 2px rgba(17, 18, 15, 0.06), 0 16px 40px -24px rgba(17, 18, 15, 0.25);
  --scrim: rgba(17, 18, 15, 0.32);
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: 13px; line-height: 20px; font-weight: 400;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 106, 43, 0.28); }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; }
b, strong { font-weight: 600; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 3px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-4); }
::-webkit-scrollbar-track { background: transparent; }

.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.i-sm { width: 14px; height: 14px; }
.i-xs { width: 12px; height: 12px; stroke-width: 1.75; }
.i-lg { width: 18px; height: 18px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; font-feature-settings: 'zero' 1; font-variant-numeric: tabular-nums slashed-zero; }
.num { font-variant-numeric: tabular-nums; }
.t2 { color: var(--text-2); }
.t3 { color: var(--text-3); }
.t4 { color: var(--text-4); }
.nowrap { white-space: nowrap; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-12 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spacer { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack-20 { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; cursor: pointer; }
.link:hover { text-decoration-color: var(--text-2); }
.warn-t { color: var(--warn); }
.err-t { color: var(--err); }
.ok-t { color: var(--ok); }

/* ── Shell ────────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; padding-top: var(--banner-h); padding-bottom: var(--foot-h); }
.app.bare { display: block; }
.app.bare .side, .app.bare .top { display: none; }
.app.bare .view { padding: 0; }
.side {
  position: sticky; top: var(--banner-h); height: calc(100vh - var(--banner-h) - var(--foot-h)); display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-side); border-right: 1px solid var(--line); z-index: 40;
}
.brand { height: var(--top-h); flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.fx-logo { display: block; flex: 0 0 auto; }
.fx-logo .lg-a { fill: var(--logo-a); }
.fx-logo .lg-b { fill: var(--logo-b); }
.fx-logo .lg-o { fill: #FF6A2B; }
.brand-lockup { height: 32px; width: auto; aspect-ratio: 403 / 86; }
.brand .brand-mark { display: none; }
.brand-mark { width: 32px; height: 32px; }
.nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 8px 16px; }
.nav-group { padding: 18px 12px 6px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--text-3); }
.nav-group:first-child { padding-top: 10px; }
.nav-item {
  width: 100%; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; font-weight: 450;
  transition: background-color 0.12s, color 0.12s;
}
.nav-item .i { color: var(--text-3); transition: color 0.12s; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item:hover .i { color: var(--text-2); }
.nav-item.on { background: var(--surface-3); color: var(--text); font-weight: 500; }
.nav-item.on .i { color: var(--text); }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-count.warn { color: var(--warn); }

.side-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.deploy {
  width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--r-sm);
  transition: background-color 0.12s;
}
.deploy:hover { background: var(--hover); }
.deploy-org { font-size: 13px; font-weight: 500; }
.deploy-line { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.me { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; border-radius: var(--r-sm); position: relative; }
.me-t { min-width: 0; flex: 1 1 auto; }
.me-n { font-size: 13px; font-weight: 500; line-height: 18px; }
.me-r { font-size: 12px; line-height: 16px; color: var(--text-3); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: var(--banner-h); z-index: 30; height: var(--top-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px; padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-3); transition: color 0.12s; white-space: nowrap; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-4); }
.crumbs .cur { color: var(--text); font-weight: 500; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn.menu-btn { display: none; }

.search { position: relative; width: 280px; }
.search .in { padding-left: 32px; padding-right: 44px; background: var(--surface); }
.search > .i { position: absolute; left: 10px; top: 8px; color: var(--text-3); pointer-events: none; }
.search .kbd { position: absolute; right: 8px; top: 7px; }
.search-pop {
  position: absolute; top: 38px; left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line-3);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px; max-height: 420px; overflow-y: auto;
}
.search-pop .grp { padding: 8px 10px 4px; font-size: 11px; color: var(--text-3); font-weight: 500; }
.hit { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); }
.hit:hover, .hit.on { background: var(--hover); }
.hit .mono { color: var(--text-3); }
.hit-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 14px 10px; color: var(--text-3); }

.view { flex: 1 1 auto; padding: 28px var(--pad) 72px; min-width: 0; }
.page { max-width: 1440px; margin: 0; }
.page.wide { max-width: none; }
.page.narrow { max-width: 1040px; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.ph { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 24px; min-width: 0; }
.ph-t { min-width: 0; flex: 1 1 auto; }
.ph h1 { font-size: 20px; line-height: 28px; letter-spacing: -0.018em; }
.ph h1 .mono { font-size: 14px; color: var(--text-3); font-weight: 400; margin-right: 10px; letter-spacing: 0; }
.ph p { margin-top: 4px; color: var(--text-3); max-width: 78ch; }
.ph-a { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.section-t { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-t .t3 { font-weight: 400; font-size: 13px; }

/* ── Buttons, inputs, controls ────────────────────────────────────────────── */
.btn {
  height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--line-3); border-radius: var(--r-sm); background: transparent; color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 1;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}
.btn:hover { background: var(--hover); border-color: var(--text-4); }
.btn:active { background: var(--press); }
.btn .i { color: var(--text-2); }
.btn-primary { background: var(--btn); border-color: var(--btn); color: var(--invert); }
.btn-primary .i { color: var(--invert); }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-ghost { border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); border-color: transparent; }
.btn-danger { color: var(--err); border-color: var(--err-bd); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.btn-lg { height: 36px; padding: 0 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.4; pointer-events: none; }
.icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: var(--r-sm); color: var(--text-2); transition: background-color 0.12s, color 0.12s;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.xs { width: 24px; height: 24px; }
.icon-btn.on { background: var(--surface-3); color: var(--text); }
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border: 1px solid var(--line-3); border-radius: var(--r-xs); font-family: var(--mono); font-size: 11px; color: var(--text-3); line-height: 1;
}

.in {
  width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line-3); border-radius: var(--r-sm);
  background: var(--sunken); color: var(--text); font-size: 13px; transition: border-color 0.12s, box-shadow 0.12s;
}
.in::placeholder { color: var(--text-4); }
.in:hover { border-color: var(--text-4); }
.in:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--hover); }
.in.mono { font-size: 12px; }
.in[readonly] { color: var(--text-2); }
textarea.in { height: auto; min-height: 92px; padding: 8px 10px; line-height: 20px; resize: vertical; }
.in.err { border-color: var(--err); }
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; }
.sel > .i { position: absolute; right: 9px; top: 8px; color: var(--text-3); pointer-events: none; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field + .field { margin-top: 16px; }
.label { font-size: 12px; font-weight: 500; color: var(--text-2); line-height: 18px; }
.label .opt { font-weight: 400; color: var(--text-3); }
.hint { font-size: 12px; line-height: 18px; color: var(--text-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row > .field + .field { margin-top: 0; }
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: 16px; }

.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 20px; }
.check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; border: 1px solid var(--line-3); border-radius: var(--r-xs); background: var(--sunken); display: grid; place-content: center; cursor: pointer; transition: background-color 0.12s, border-color 0.12s; }
.check input::after { content: ''; width: 9px; height: 5px; border-left: 1.75px solid var(--invert); border-bottom: 1.75px solid var(--invert); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--btn); border-color: var(--btn); }
.check input:checked::after { opacity: 1; }
.check .d { display: block; color: var(--text-3); font-size: 12px; line-height: 18px; margin-top: 2px; }

.switch { position: relative; width: 32px; height: 18px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--line-3); transition: background-color 0.15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--r-xs); background: var(--text-2); transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.15s; }
.switch.on { background: var(--btn); }
.switch.on::after { transform: translateX(14px); background: var(--invert); }
.switch[disabled] { opacity: 0.4; cursor: not-allowed; }

.seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--sunken); }
.seg button { height: 24px; padding: 0 10px; border-radius: var(--r-xs); font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: background-color 0.12s, color 0.12s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--line-3); }
[data-theme='light'] .seg button.on { background: var(--surface); }

.tabs { display: flex; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; height: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color 0.12s; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); }
.tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); }
.tab .nav-count { margin-left: 0; }

.menu { position: absolute; z-index: 70; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.menu-item { width: 100%; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); }
.menu-item:hover { background: var(--hover); color: var(--text); }
.menu-item .i { color: var(--text-3); }
.menu-sep { height: 1px; background: var(--line); margin: 6px -6px; }

/* ── Data display ─────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.panel-h { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.panel-h h2 { font-size: 13px; line-height: 20px; }
.panel-h .sub { font-size: 12px; color: var(--text-3); }
.panel-h .ph-a { margin-left: auto; }
.panel-b { padding: 20px; }
.panel-b.tight { padding: 16px 20px; }
.panel-f { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.panel.flush .panel-b { padding: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.grid-2.lr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.p-seq-wrap { overflow-x: auto; }

.kv { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; }
.kv dt { font-size: 12px; color: var(--text-3); line-height: 20px; }
.kv dd { font-size: 13px; line-height: 20px; min-width: 0; overflow-wrap: anywhere; }
.kv dd .mono { color: var(--text-2); }
.kv.tight { row-gap: 8px; grid-template-columns: 124px minmax(0, 1fr); }

.spec { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.spec > div { padding: 12px 20px; min-width: 0; position: relative; flex: 1 1 auto; }
.spec > div + div::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.spec .k { font-size: 12px; color: var(--text-3); line-height: 16px; margin-bottom: 4px; white-space: nowrap; }
.spec .v { font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.spec .v .t3 { font-weight: 400; }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th {
  height: 36px; padding: 0 12px; text-align: left; white-space: nowrap; vertical-align: middle;
  font-size: 12px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--line); background: var(--surface);
}
.tbl td { height: 44px; padding: 0 12px; vertical-align: middle; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--hover); }
.tbl tr.sel td { background: var(--sig-bg); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.mono { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.tbl td.muted { color: var(--text-3); }
.tbl .c2 { padding-top: 10px; padding-bottom: 10px; line-height: 18px; }
.tbl .c2 .t { font-size: 13px; color: var(--text); font-weight: 500; }
.tbl .c2 .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.tbl.dense td { height: 36px; }
.tbl.dense .c2 { padding-top: 7px; padding-bottom: 7px; }
.tbl .w-min { width: 1%; white-space: nowrap; }
.tbl tr.grp td { height: 32px; background: var(--sunken); font-size: 12px; color: var(--warn); }
.tbl tr.grp td .i { display: inline-block; vertical-align: -2px; margin-right: 8px; }
.bound-cell { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.bound-cell .t3 { font-family: var(--font); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle;
  color: var(--text-2); background: var(--hover); border: 1px solid var(--line-3);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip .dot.ok { background: var(--ok); }
.chip .dot.warn { background: var(--warn); }
.chip .dot.err { background: var(--err); }
.chip .dot.info { background: var(--cor); }
.chip.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.chip.err { color: var(--err); background: var(--err-bg); border-color: var(--err-bd); }
.chip.info { color: var(--cor); background: var(--cor-bg); border-color: var(--cor-bd); }
.chip.quiet { color: var(--text-3); background: transparent; border-color: var(--line); }
.chip.mono { font-family: var(--mono); font-size: 11px; font-weight: 400; }
.dot-s { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.dot-s.ok { background: var(--ok); }
.dot-s.warn { background: var(--warn); }
.dot-s.err { background: var(--err); }

/* Evidence ladder: shape carries the level, color repeats it, so it survives print and color blindness. */
.lvl { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; border: 1px solid; }
.lvl svg { width: 9px; height: 9px; flex: 0 0 auto; }
.lvl.observed { color: var(--obs); background: var(--obs-bg); border-color: var(--obs-bd); }
.lvl.correlated { color: var(--cor); background: var(--cor-bg); border-color: var(--cor-bd); }
.lvl.hypothesis { color: var(--hyp); background: var(--hyp-bg); border-color: var(--hyp-bd); }
.lvl.unknown { color: var(--unk); background: var(--unk-bg); border-color: var(--unk-bd); }

.glyph { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); }
.glyph .i { width: 14px; height: 14px; }
.glyph.off { background: transparent; border: 1px dashed var(--line-3); color: var(--text-4); }
.glyphs { display: inline-flex; gap: 4px; }
.avatar { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.avatar.sm { width: 20px; height: 20px; font-size: 11px; letter-spacing: 0; }
.avatar.lg { width: 32px; height: 32px; font-size: 12px; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.meter { width: 96px; height: 4px; border-radius: 0; background: var(--line-3); overflow: hidden; flex: 0 0 auto; }
.meter > i { display: block; height: 100%; background: var(--text-2); border-radius: 0; }
.meter.warn > i { background: var(--warn); }
.progress { height: 2px; background: var(--line-3); border-radius: 0; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--text); transition: width 0.3s ease; }

.code {
  font-family: var(--mono); font-size: 11px; line-height: 18px; color: var(--text-2); white-space: pre; overflow-x: auto;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font-feature-settings: 'zero' 1;
}
.code .hl { display: inline-block; min-width: 100%; margin: 0 -14px; padding: 0 14px; background: var(--hover); color: var(--text); }
.hash { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; line-height: 18px; }
.copy { display: inline-flex; align-items: center; gap: 6px; }

.note { display: flex; gap: 12px; padding: 12px 16px; border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--surface); }
.note > .i { margin-top: 2px; color: var(--text-2); }
.note .n-t { font-weight: 600; line-height: 20px; }
.note .n-b { color: var(--text-2); line-height: 20px; }
.note .n-a { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; align-self: center; }
.note.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.note.warn > .i, .note.warn .n-t { color: var(--warn); }
.note.err { border-color: var(--err-bd); background: var(--err-bg); }
.note.err > .i, .note.err .n-t { color: var(--err); }
.note.ok { border-color: var(--ok-bd); background: var(--ok-bg); }
.note.ok > .i, .note.ok .n-t { color: var(--ok); }
.note.info { border-color: var(--cor-bd); background: var(--cor-bg); }
.note.info > .i, .note.info .n-t { color: var(--cor); }

.empty { padding: 48px 24px; text-align: center; color: var(--text-3); }
.empty h3 { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.empty .btn { margin-top: 16px; }

.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters .search-f { position: relative; width: 260px; }
.filters .search-f .in { padding-left: 32px; }
.filters .search-f .i { position: absolute; left: 10px; top: 8px; color: var(--text-3); pointer-events: none; }
.filters .sel { width: 180px; }
.count-line { font-size: 12px; color: var(--text-3); margin-left: auto; }

.bar-row { display: flex; align-items: center; gap: 10px; }

/* ── Overlays ─────────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: calc(var(--banner-h) + 16px) 24px calc(var(--foot-h) + 16px); animation: fade 0.14s ease-out; }
.modal { width: 100%; max-width: 560px; max-height: calc(100vh - var(--banner-h) - var(--foot-h) - 32px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: rise 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal.sm { max-width: 460px; }
.modal.lg { max-width: 720px; }
.modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 0; }
.modal-h h3 { font-size: 16px; line-height: 24px; }
.modal-h p { margin-top: 2px; color: var(--text-3); line-height: 20px; }
.modal-h .icon-btn { margin: -4px -8px 0 auto; }
.modal-b { padding: 20px 24px 24px; overflow-y: auto; }
.modal-b p + p { margin-top: 10px; }
.modal-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); }
.modal-f .left { margin-right: auto; color: var(--text-3); font-size: 12px; }

.drawer { position: fixed; top: var(--banner-h); right: 0; bottom: var(--foot-h); z-index: 90; width: 520px; max-width: 100vw; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-3); box-shadow: -32px 0 64px -32px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.drawer.open { transform: none; }
.drawer-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.drawer-h h3 { font-size: 16px; line-height: 24px; }
.drawer-h p { color: var(--text-3); margin-top: 2px; }
.drawer-h .icon-btn { margin: -4px -8px 0 auto; }
.drawer-b { flex: 1 1 auto; overflow-y: auto; }
.drawer-f { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.drawer-scrim { position: fixed; inset: 0; z-index: 85; background: var(--scrim); animation: fade 0.14s ease-out; }

.toasts { position: fixed; right: 24px; bottom: calc(var(--foot-h) + 16px); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-height: 40px; max-width: 420px; padding: 10px 14px; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-3); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: 13px; animation: rise 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); transition: opacity 0.2s, transform 0.2s; }
.toast .i { color: var(--ok); }
.toast.err .i { color: var(--err); }

.tip { position: fixed; z-index: 130; pointer-events: none; max-width: 340px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--btn); color: var(--invert); font-size: 12px; line-height: 17px; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); }
.tip .mono { font-size: 11px; opacity: 0.72; display: block; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.tl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.tl-bar { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px 8px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tl-win { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.tl-win b { color: var(--text); font-weight: 500; }
.tl-zoom { display: inline-flex; align-items: center; gap: 2px; }
.tl-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.tl-labels { border-right: 1px solid var(--line); min-width: 0; }
.tl-lab { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.tl-lab:last-child { border-bottom: 0; }
.tl-lab .n { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 18px; }
.tl-lab .n .i { color: var(--text-3); width: 14px; height: 14px; }
.tl-lab .s { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--text-3); line-height: 16px; padding-left: 22px; min-width: 0; }
.tl-lab .s .b { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
.tl-lab .s .b.warn { color: var(--warn); font-family: var(--font); }
.tl-lab .s .b.man { color: var(--cor); }
.tl-lab.axis-l { justify-content: flex-end; padding-bottom: 7px; font-size: 11px; color: var(--text-3); }
.tl-lab.find-l .n { color: var(--text); }
.tl-lab.dom { justify-content: center; background: var(--sunken); }
.tl-lab.dom .n { font-size: 12px; color: var(--warn); }
.tl-lab.dom .n .i { color: var(--warn); }
.tl-lab.dom .n.man, .tl-lab.dom .n.man .i { color: var(--cor); }
.tl-lab.dom .s { font-family: var(--font); }
.tl-plot { position: relative; min-width: 0; overflow: hidden; cursor: crosshair; }
.tl-plot svg { width: 100%; }
.tl-mini-row { display: grid; grid-template-columns: 224px minmax(0, 1fr); border-top: 1px solid var(--line); }
.tl-mini-lab { padding: 0 12px 0 20px; display: flex; align-items: center; font-size: 11px; color: var(--text-3); border-right: 1px solid var(--line); }
.tl-mini { position: relative; height: 44px; cursor: grab; user-select: none; }
.tl-mini:active { cursor: grabbing; }
.tl-foot { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.tl-key { display: inline-flex; align-items: center; gap: 6px; }
.tl-key svg { width: 18px; height: 10px; }

/* Timeline SVG (classes, so a theme switch needs no re-render) */
.g-hatch { stroke: var(--hatch); stroke-width: 2; }
.g-hatch-w { stroke: var(--warn); stroke-width: 1.5; opacity: 0.42; }
.g-sep { stroke: var(--line-2); shape-rendering: crispEdges; }
.g-grid { stroke: var(--line-2); shape-rendering: crispEdges; }
.g-axis-k { stroke: var(--line-3); shape-rendering: crispEdges; }
.g-axis-t { fill: var(--text-3); font-size: 11px; font-family: var(--mono); }
.g-dom { fill: var(--sunken); }
.g-dom-t { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.g-gap-e { stroke: var(--line-3); stroke-dasharray: 3 3; }
.g-gap-lb { fill: var(--surface); stroke: var(--line-3); }
.g-gap-t { fill: var(--text-2); font-size: 11px; font-weight: 500; font-family: var(--font); }
.g-band { fill: var(--surface-3); stroke: var(--line-3); }
.g-band.alt { fill: transparent; stroke: var(--text-4); stroke-dasharray: 3 2; }
.g-band-t { fill: var(--text-2); font-size: 11px; font-weight: 500; font-family: var(--font); }
.g-area { fill: var(--plot-fill); }
.g-line { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.g-hot { stroke: var(--warn); stroke-width: 1.75; stroke-linecap: round; }
.g-pt { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.25; }
.g-pt.hot { stroke: var(--warn); }
.g-thr { stroke: var(--warn); stroke-dasharray: 4 3; opacity: 0.75; shape-rendering: crispEdges; }
.g-thr-t { fill: var(--warn); font-size: 11px; font-family: var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.g-scale-t { fill: var(--text-4); font-size: 11px; font-family: var(--mono); }
.g-rug { stroke: var(--text-4); stroke-width: 1; }
.g-ev { stroke: var(--text-3); stroke-width: 1.5; }
.g-ev.f { stroke: var(--text-2); }
.g-ev.err { stroke: var(--err); }
.g-ev.warn { stroke: var(--warn); }
.g-ev.on { stroke: var(--sig); stroke-width: 2; }
.g-head { fill: var(--text-2); }
.g-head.err { fill: var(--err); }
.g-head.warn { fill: var(--warn); }
.g-head.on { fill: var(--surface); stroke: var(--sig); stroke-width: 2; }
.g-br { stroke: var(--text-3); stroke-width: 1; }
.g-br.on { stroke: var(--sig); }
.g-br.lat { stroke-dasharray: 2 2; }
.g-selband { fill: var(--sig-bg); opacity: 0.7; }
.g-unk-e { stroke: var(--warn); stroke-dasharray: 3 2; opacity: 0.8; }
.g-unk-lb { fill: var(--surface); stroke: var(--warn-bd); }
.g-unk-t { fill: var(--warn); font-size: 11px; font-weight: 600; font-family: var(--font); }
.g-unk-g { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 1; }
.g-unk-gl { stroke: var(--warn); stroke-width: 1; fill: none; }
.g-guide { stroke: var(--line-3); stroke-dasharray: 2 3; }
.g-flag { stroke: var(--text-3); }
.g-flag-span { stroke: var(--text-3); stroke-width: 3; stroke-linecap: round; }
.g-flag-h { fill: var(--text-2); }
.g-flag-h.warn { fill: var(--warn); }
.g-lab { fill: var(--surface-3); stroke: var(--line-3); }
.g-lab.warn { stroke: var(--warn-bd); }
.g-lab.on { stroke: var(--sig); }
.g-lab-t { fill: var(--text); font-size: 11px; font-weight: 500; font-family: var(--font); }
.g-cur { stroke: var(--sig); stroke-width: 1; shape-rendering: crispEdges; }
.g-cur-p { fill: var(--sig); }
.g-cur-t { fill: var(--sig-ink); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.g-mini-ev { stroke: var(--text-4); }
.g-mini-ev.f { stroke: var(--text-2); }
.g-dim { fill: var(--sunken); opacity: 0.6; }
.g-win { fill: transparent; stroke: var(--text-3); }
.g-handle { fill: var(--text-2); }

/* ── Incident workspace ───────────────────────────────────────────────────── */
.inc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
/* The evidence inspector is a side drawer over the page: opening it never reflows the timeline, the map
   or the events table. It sits under the top bar, stays open while you pick other events, and closes
   with its button or Esc. */
.inspector {
  position: fixed; top: calc(var(--banner-h) + var(--top-h)); right: 0; bottom: var(--foot-h); z-index: 50; width: min(480px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-left: 1px solid var(--line-3); box-shadow: -32px 0 64px -32px rgba(0, 0, 0, 0.6); animation: ins-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ins-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .inspector { animation: none; } }
.ins-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ins-h h3 { font-size: 14px; line-height: 20px; }
.ins-h .sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ins-h .icon-btn { margin: -4px 0 0 auto; }
.ins-sec { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ins-sec:last-child { border-bottom: 0; }
.ins-sec > .k { font-size: 12px; font-weight: 500; color: var(--text-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ins-time { font-family: var(--mono); font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--text); }
.ins-time .pm { font-size: 13px; color: var(--text-3); margin-left: 8px; letter-spacing: 0; }
.ins-f { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.ord { display: flex; flex-direction: column; }
.ord-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.ord-row:first-child { border-top: 0; padding-top: 0; }
.ord-row:hover .ord-t { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.ord-t { font-size: 12px; line-height: 18px; color: var(--text-2); min-width: 0; }
.ord-s { font-size: 12px; color: var(--text-3); grid-column: 1 / -1; line-height: 18px; }
.ord-v { font-family: var(--mono); font-size: 11px; color: var(--text); white-space: nowrap; text-align: right; line-height: 18px; }
.ord-v.unk { color: var(--warn); }

/* Event table under the timeline */
.ev-table td:first-child { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.ev-table tr.grp td { font-family: var(--font); }
.ev-table .pm { color: var(--text-3); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.ev-title { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-src { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text-2); }
.ev-src .i { width: 14px; height: 14px; color: var(--text-3); }
.pri { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; background: var(--text-4); vertical-align: middle; }
.pri.err { background: var(--err); }
.pri.warn { background: var(--warn); }

/* ── Report (always on paper) ─────────────────────────────────────────────── */
.rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.paper-wrap { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); padding: 32px; display: flex; justify-content: center; min-width: 0; }
.paper { width: 100%; max-width: 816px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-paper); border-radius: var(--r-xs); padding: 40px 56px 48px; font-size: 13px; line-height: 20px; }
.p-mark { text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; color: var(--text); padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.p-mark.bottom { padding: 16px 0 0; margin: 12px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
.p-foot { margin-top: 36px; font-size: 11px; line-height: 16px; color: var(--text-3); text-align: center; }
.p-dsg { float: right; display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 1px; margin: 0 0 16px 24px; padding: 8px 12px; border: 1px solid var(--line-3); font-size: 11px; line-height: 15px; }
.p-dsg dt { color: var(--text-3); }
.p-dsg dd { color: var(--text); }
.exp-mark { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--sunken); font-size: 12px; }
.p-kicker { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 10px; }
.paper h1 { font-size: 20px; line-height: 30px; letter-spacing: -0.02em; margin: 6px 0 20px; }
.p-meta { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
.p-meta dt { color: var(--text-3); }
.p-meta dd .mono { font-size: 11px; color: var(--text-2); }
.p-sec { margin-top: 32px; position: relative; }
.p-sec h2 { font-size: 14px; line-height: 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.p-sec h2 .n { font-family: var(--mono); font-size: 12px; color: var(--text-3); font-weight: 400; }
.p-edit { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-3); opacity: 0; transition: opacity 0.12s, color 0.12s; }
.p-sec:hover .p-edit, .p-edit:focus-visible { opacity: 1; }
.p-edit:hover { color: var(--text); }
.p-finding { border: 1px solid var(--line-3); border-radius: var(--r-md); padding: 16px 18px; }
.p-finding p { font-size: 14px; line-height: 22px; margin-top: 10px; }
.p-by { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.p-seq { width: 100%; border-collapse: collapse; font-size: 12px; }
.p-seq th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 11px; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line-3); white-space: nowrap; }
.p-seq td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 18px; }
.p-seq td.t { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.p-seq td.t .pm { display: block; color: var(--text-3); }
.p-seq td.ref { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; text-align: right; padding-right: 0; }
.p-seq tr.unk-pair td { background: var(--warn-bg); }
.p-ev { border-top: 1px solid var(--line); padding: 12px 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.p-ev:first-of-type { border-top: 0; padding-top: 0; }
.p-ev .ref { font-family: var(--mono); font-size: 11px; color: var(--text-3); line-height: 18px; }
.p-ev .t { font-weight: 500; line-height: 18px; }
.p-ev .m { font-family: var(--mono); font-size: 11px; color: var(--text-3); line-height: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.p-ev .x { font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--text-2); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 6px 8px; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.p-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; line-height: 20px; }
.p-list li .i { margin-top: 2px; color: var(--text-3); width: 14px; height: 14px; }
.p-q { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; line-height: 20px; }
.p-q + .p-q { margin-top: 10px; }
.p-q .i { margin-top: 3px; color: var(--warn); width: 14px; height: 14px; }
.p-q .by { color: var(--text-3); font-size: 12px; }
.rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--banner-h) + var(--top-h) + 16px); }
.checks { display: flex; flex-direction: column; gap: 10px; }
.checks li { list-style: none; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.checks li .i { margin-top: 2px; width: 14px; height: 14px; }
.checks li.ok .i { color: var(--ok); }
.checks li.warn .i { color: var(--warn); }
.hist { display: flex; flex-direction: column; }
.hist-i { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 12px; line-height: 18px; }
.hist-i:first-child { border-top: 0; padding-top: 0; }
.hist-i .s { color: var(--text-3); font-size: 12px; }

/* ── Activity feed ────────────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; }
.feed-i { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); align-items: start; }
.feed-i:last-child { border-bottom: 0; }
.feed-i .sys { width: 24px; height: 24px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-3); color: var(--text-3); }
.feed-i .sys .i { width: 13px; height: 13px; }
.feed-i .t { line-height: 20px; }
.feed-i .t b { font-weight: 500; }
.feed-i .when { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; line-height: 20px; }
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.act-ps { display: flex; flex-direction: column; }
.act-p { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
.act-p:last-child { border-bottom: 0; }
.act-p .t { display: flex; gap: 8px; align-items: baseline; line-height: 20px; }
.act-p .t b { font-weight: 500; }
.act-p .t .t3 { font-size: 12px; }
.act-p .s { font-size: 12px; color: var(--text-3); line-height: 18px; }
@media (max-width: 1100px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Import ───────────────────────────────────────────────────────────────── */
.drop { border: 1px dashed var(--line-3); border-radius: var(--r-md); background: var(--sunken); padding: 36px 24px; text-align: center; transition: border-color 0.12s, background-color 0.12s; }
.drop.over { border-color: var(--text-3); background: var(--hover); }
.drop h3 { font-size: 14px; margin-top: 12px; }
.drop p { color: var(--text-3); margin-top: 4px; }
.drop .ic { width: 40px; height: 40px; margin: 0 auto; border-radius: var(--r-md); border: 1px solid var(--line-3); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.drop .row { justify-content: center; margin-top: 16px; }
.file { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.file:last-child { border-bottom: 0; }
.file .n { font-weight: 500; line-height: 18px; }
.file .m { font-size: 12px; color: var(--text-3); line-height: 18px; margin-top: 2px; }
.file .m .mono { font-size: 11px; }
.file .progress { margin-top: 8px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.fld { display: flex; align-items: center; gap: 8px; height: 32px; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px; color: var(--text-2); min-width: 0; }
.fld .i { width: 14px; height: 14px; color: var(--ok); }
.fld.no { color: var(--text-4); }
.fld.no .i { color: var(--text-4); }
.fld .x { margin-left: auto; font-family: var(--font); font-size: 11px; color: var(--text-4); }

/* ── Sources, hosting ─────────────────────────────────────────────────────── */
.src-ic { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line-3); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); flex: 0 0 auto; }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.type { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; transition: border-color 0.12s, background-color 0.12s; }
.type:hover { border-color: var(--line-3); background: var(--hover); }
.type.on { border-color: var(--text-2); background: var(--hover); }
.type .n { font-weight: 500; line-height: 18px; }
.type .d { font-size: 12px; color: var(--text-3); line-height: 17px; margin-top: 2px; }
.type-grp { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); font-weight: 500; padding: 10px 2px 2px; }
.type-grp:first-child { padding-top: 0; }

/* A fieldset, so the legend breaks the dashed line cleanly over both backgrounds. */
.boundary { margin: 0; min-width: 0; border: 1px dashed var(--line-3); border-radius: var(--r-md); padding: 10px 20px 20px; background: var(--sunken); }
.boundary-l { margin-left: -4px; padding: 0 8px; font-size: 12px; font-weight: 500; line-height: 20px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.bnodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bnode { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 12px 14px; min-width: 0; }
.bnode .n { display: flex; align-items: center; gap: 8px; font-weight: 500; line-height: 18px; }
.bnode .n .i { color: var(--text-3); width: 14px; height: 14px; }
.bnode .d { font-size: 12px; color: var(--text-3); line-height: 17px; margin-top: 4px; }
.bnode .d.mono { font-size: 11px; }
.outside { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.outside .x { width: 24px; height: 24px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-3); color: var(--text-3); flex: 0 0 auto; }

.perm td.c { text-align: center; }
.perm .yes { color: var(--text); }
.perm .no { color: var(--text-4); }
.perm td.c .i { margin: 0 auto; width: 14px; height: 14px; }
.perm th.c, .perm td.c { width: 116px; text-align: center; }
.rules-tbl .c2 .s { white-space: nowrap; }
.nowrap-cell { white-space: nowrap; }
.stores td.mono { white-space: nowrap; }

.set-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.set-row:last-child { border-bottom: 0; }
.set-row .k { font-weight: 500; line-height: 20px; }
.set-row .k .s { display: block; font-weight: 400; color: var(--text-3); font-size: 12px; line-height: 18px; margin-top: 2px; }
.set-row .v { line-height: 20px; color: var(--text-2); min-width: 0; }
.set-row .v .mono { color: var(--text-2); }
.set-row .a { align-self: start; margin-top: -4px; }
.set-row .a .switch { margin-top: 5px; }

/* ── Sign in ──────────────────────────────────────────────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
.auth-c { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.auth-brand .brand-lockup { height: 40px; }
.auth h1 { font-size: 20px; line-height: 30px; letter-spacing: -0.02em; }
.auth .sub { color: var(--text-3); margin-top: 6px; }
.auth-org { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text-4); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-foot { padding: 20px 24px; text-align: center; color: var(--text-4); font-size: 12px; }
.notice { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--surface-2); }
.notice-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.notice-h .i { color: var(--text-3); }
.notice p { font-size: 12px; line-height: 18px; color: var(--text-2); }
.notice .check { margin-top: 12px; font-size: 13px; }
.mark-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-xs); background: var(--mark-cui); color: var(--mark-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.mark-chip.u { background: var(--mark-u); }
.kv.dsg { grid-template-columns: 112px minmax(0, 1fr); row-gap: 4px; }
.kv.dsg dt, .kv.dsg dd { font-size: 12px; line-height: 18px; }


/* ── Marking banner and status bar ───────────────────────────────────────── */
.mark-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 140; height: var(--banner-h); display: flex; align-items: center; justify-content: center; background: var(--mark-cui); color: var(--mark-ink); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; }
.mark-banner.u { background: var(--mark-u); }
.statusbar { position: fixed; left: 0; right: 0; bottom: var(--banner-h); z-index: 140; height: var(--status-h); display: flex; align-items: stretch; overflow: hidden; background: var(--bg-side); border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); }
.statusbar .sb { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-right: 1px solid var(--line-2); white-space: nowrap; min-width: 0; }
.statusbar .sb.mark { background: var(--mark-cui); color: var(--mark-ink); font-weight: 700; letter-spacing: 0.08em; font-size: 11px; border: 0; }
.statusbar .sb.mark.u { background: var(--mark-u); }
.statusbar .sb .i { width: 13px; height: 13px; color: var(--text-4); }
.statusbar .sb b { color: var(--text-2); font-weight: 500; }
.statusbar .sp { flex: 1 1 auto; border-right: 1px solid var(--line-2); }
.statusbar .sb.clock { border-right: 0; border-left: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--text-2); letter-spacing: 0.01em; flex: 0 0 auto; }
@media (max-width: 1180px) { .statusbar .sb.net, .statusbar .sb.ver { display: none; } }
.statusbar .sb.clock .z { color: var(--sig); }
.statusbar .dot-s { width: 6px; height: 6px; }
.app.bare ~ .statusbar { display: none; }

/* ── Timeline channels and crosshair ─────────────────────────────────────── */
.tl-lab.ch { background: var(--surface-2); }
.tl-lab.ch .n { font-size: 12px; font-weight: 500; color: var(--text-2); padding-left: 22px; justify-content: space-between; }
.tl-lab.ch .cv { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 500; white-space: nowrap; margin-left: 8px; }
.tl-lab.ch .cv.hot { color: var(--warn); }
.tl-lab.ch .s { font-size: 11px; }
.g-line.ch { stroke-width: 1.25; stroke: var(--text-2); }
.g-area { fill: var(--plot-fill); }
.g-scale { stroke: var(--line-2); stroke-dasharray: 2 3; shape-rendering: crispEdges; }
.g-scale-t { fill: var(--text-3); font-size: 11px; font-family: var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.g-span { fill: var(--warn-bg); }
.g-span-t { fill: var(--warn); font-size: 11px; font-family: var(--mono); }
.tl-hover { position: absolute; top: 32px; width: 0; border-left: 1px dashed var(--text-3); pointer-events: none; z-index: 2; }
.tl-hover span { position: absolute; top: -26px; left: 6px; padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-3); border: 1px solid var(--line-3); color: var(--text); font-family: var(--mono); font-size: 11px; line-height: 16px; white-space: nowrap; }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.map { position: relative; height: 100%; min-height: 240px; background: var(--map-bg); overflow: hidden; user-select: none; }
.map-svg { position: absolute; left: 0; right: 0; top: 0; bottom: 32px; cursor: grab; }
.map.compact .map-svg, .map:not(:has(.map-foot)) .map-svg { bottom: 0; }
.map-svg:active { cursor: grabbing; }
.map-svg svg { display: block; }
.map-ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 2px; padding: 2px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line-3); border-radius: var(--r-sm); z-index: 3; }
.map-ctl .icon-btn { width: 26px; height: 26px; }
.map-foot { position: absolute; left: 0; right: 0; bottom: 0; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: 14px; row-gap: 2px; padding: 6px 14px; border-top: 1px solid var(--line); background: var(--surface); font-size: 12px; line-height: 18px; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.map-foot .mf-k { color: var(--text-2); font-weight: 500; }
.map-foot .mono { font-size: 11px; color: var(--text); }
.map-foot .mono.t3 { color: var(--text-3); }
.map-foot .mf-note { margin-left: auto; color: var(--warn); overflow: hidden; text-overflow: ellipsis; }
.m-bg { fill: var(--map-bg); }
.m-c { fill: none; stroke: var(--map-c); stroke-width: 0.8; }
.m-ci { fill: none; stroke: var(--map-ci); stroke-width: 1.05; }
.m-spot { stroke: var(--map-lbl); stroke-width: 1.2; }
.m-spot-t { fill: var(--map-lbl); font-size: 10px; font-family: var(--mono); }
.m-grid { stroke: var(--map-grid); stroke-width: 1; shape-rendering: crispEdges; }
.m-grid-t { fill: var(--text-3); font-size: 10px; font-family: var(--mono); }
.m-wash { fill: none; stroke: var(--map-wash); stroke-width: 1.3; stroke-dasharray: 5 3 1 3; }
.m-road { fill: none; stroke: var(--map-feat); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-road-in { fill: none; stroke: var(--map-bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.m-trackway { fill: none; stroke: var(--map-feat-2); stroke-width: 1.2; stroke-dasharray: 6 4; }
.m-berm { fill: none; stroke: var(--map-feat); stroke-width: 1.6; }
.m-berm-h { stroke: var(--map-feat-2); stroke-width: 1; }
.m-fence { fill: none; stroke: var(--map-feat-2); stroke-width: 1; }
.m-fence-x { stroke: var(--map-feat-2); stroke-width: 1; }
.m-hatch { stroke: var(--map-feat-2); stroke-width: 1; opacity: 0.7; }
.m-belt { stroke: var(--map-feat-2); stroke-width: 1; }
.m-lane { fill: none; stroke: var(--map-feat); stroke-width: 1; }
.m-lane-end { stroke: var(--map-feat); stroke-width: 1.4; }
.m-lbl { fill: var(--map-lbl); font-size: 11px; font-family: var(--font); font-weight: 500; text-anchor: middle; paint-order: stroke; stroke: var(--map-bg); stroke-width: 3px; stroke-linejoin: round; }
.m-lbl.sm { font-size: 11px; font-weight: 400; }
.m-lbl.road { font-style: italic; font-weight: 400; }
.m-pad { fill: var(--map-bg); stroke: var(--map-feat); stroke-width: 1.2; }
.m-trk { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.m-trk.run { stroke: var(--text); stroke-width: 2; }
.m-trk-c { fill: none; stroke: var(--map-bg); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.m-trk-c.w { stroke-width: 6; }
.m-trk.faint { stroke: var(--text-4); stroke-width: 1.2; stroke-dasharray: 1 3; }
.m-trk.faint.hot { stroke: var(--sig); stroke-dasharray: none; stroke-width: 1.4; }
.m-trk-w { fill: none; stroke: var(--sig); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.m-trk-gap { fill: none; stroke: var(--warn); stroke-width: 2.6; stroke-dasharray: 5 4; stroke-linecap: butt; }
.m-gap-end { fill: var(--map-bg); stroke: var(--warn); stroke-width: 1.4; }
.m-eph { fill: var(--warn-bg); stroke: var(--warn-bd); stroke-width: 1; }
.m-mk-l { stroke: var(--text-3); stroke-width: 1; }
.m-mk-p { fill: var(--text); stroke: var(--map-bg); stroke-width: 1; }
.m-mk-p.on { fill: var(--sig); }
.m-out { fill: var(--map-bg); opacity: 0.55; }
.m-bound { fill: none; stroke: var(--map-feat-2); stroke-width: 1; stroke-dasharray: 8 4 2 4; }
.m-mk { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.1; }
.m-mk.on { fill: var(--sig); stroke: var(--sig); }
.m-mk-t { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.m-mk-t.on { fill: var(--sig-ink); }
.m-link { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.m-link.lost { stroke: var(--warn); }
.m-link-lb { fill: var(--surface); stroke: var(--line-3); }
.m-link-lb.lost { stroke: var(--warn-bd); }
.m-link-t { fill: var(--text-2); font-size: 11px; font-family: var(--mono); }
.m-link-t.lost { fill: var(--warn); }
.m-los { stroke: var(--warn); stroke-width: 1.6; }
.m-edge { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-ring { fill: var(--sig-bg); stroke: var(--sig-bd); stroke-dasharray: 2 2; }
.m-start { fill: var(--map-bg); stroke: var(--text); stroke-width: 1.6; }
.m-end { fill: var(--text); stroke: var(--map-bg); stroke-width: 1.2; }
.m-veh { fill: var(--sig); stroke: var(--map-bg); stroke-width: 1.4; stroke-linejoin: round; }
.m-ghost { fill: none; stroke: var(--text); stroke-width: 1.3; stroke-linejoin: round; }
.m-ghost-lb { fill: var(--surface-3); stroke: var(--line-3); }
.m-ghost-t { fill: var(--text); font-size: 11px; font-family: var(--mono); }
.m-gcs-b { fill: var(--map-bg); stroke: var(--text); stroke-width: 1.4; }
.m-gcs-a { fill: none; stroke: var(--text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.m-gcs-r { fill: none; stroke: var(--text-2); stroke-width: 1.1; stroke-linecap: round; }
.m-gcs-d { fill: var(--text); }
.m-scale { fill: none; stroke: var(--text-2); stroke-width: 1.2; }
.m-north { fill: var(--text-2); }
.m-pin-l { stroke: var(--text-3); }
.m-pin-d { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.4; }
.m-pin-b { fill: var(--surface); stroke: var(--line-3); }
.m-pin-t { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.m-pin.review .m-pin-d { stroke: var(--cor); }
.m-pin.open .m-pin-d { fill: var(--text); stroke: var(--text); }
.m-pin.closed { opacity: 0.55; }
.m-pin.hot .m-pin-b { fill: var(--sig); stroke: var(--sig); }
.m-pin.hot .m-pin-t { fill: var(--sig-ink); }
.m-pin.hot .m-pin-d { fill: var(--sig); stroke: var(--sig); }


/* ── Incident context strip ──────────────────────────────────────────────── */
.ctx { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.ctx-c { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; min-width: 0; position: relative; }
.ctx-c + .ctx-c::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.ctx-c .k { font-size: 12px; color: var(--text-3); line-height: 16px; margin-bottom: 2px; white-space: nowrap; }
.ctx-c .v { display: block; font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ctx-c .v .chip, .ctx-c .v .who { vertical-align: middle; }
.ctx-c .v.mono { font-size: 12px; }
.ctx-c .v2 { font-size: 12px; line-height: 18px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-c .v2.mono { font-size: 11px; color: var(--text-2); }
.ctx-c.plat { flex-direction: row; align-items: center; gap: 14px; transition: background-color 0.12s; border-radius: var(--r-md) 0 0 var(--r-md); }
.ctx-c.plat:hover { background: var(--hover); }
.ctx-c.plat > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctx-thumb { width: 64px; flex: 0 0 auto; }
.ctx-thumb .v-thumb { width: 64px; height: auto; }

/* ── Situation row: map and vehicle ──────────────────────────────────────── */
.sit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.sit.one { grid-template-columns: minmax(0, 1fr); }
.sit-p { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sit-map { position: relative; height: 380px; border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; }
.diag-b { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 18px 20px 16px; min-height: 380px; }
.panel-b.diag-b { min-height: 0; padding: 20px; }
.v-diag { width: 100%; max-width: 640px; height: auto; display: block; overflow: visible; }
.v-diag .v-box { cursor: default; }
.v-diag [data-ev] { cursor: pointer; }

/* Drawings */
.v-thumb { display: block; width: 100%; height: auto; overflow: visible; }
.v-thumb .v-ground, .v-thumb .v-ph { display: none; }
.v-ln, .v-trk, .v-hull, .v-arm { fill: none; stroke: var(--text-2); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.v-hull { fill: var(--surface-2); }
.v-diag .v-hull { fill: var(--surface); }
.v-trk-i, .v-ln2 { fill: none; stroke: var(--text-4); stroke-width: 1; }
.v-hub { fill: var(--text-3); }
.v-arm { stroke-width: 3.2; stroke: var(--text-3); }
.v-prop { stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.v-ph { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 2.5; }
.v-ground { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 6 5; }
.v-wire { fill: none; stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.v-wire.down { stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 3 2.5; }
.v-rf { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 5 4; }
.v-rf.down { stroke: var(--warn); stroke-width: 1.4; }
.v-rf-t { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.v-rf-t.down { fill: var(--warn); }
.v-lead { fill: none; stroke: var(--line-3); stroke-width: 1; }
.v-lead.on { stroke: var(--sig); }
.v-dot { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.2; }
.v-dot.on { fill: var(--sig); stroke: var(--sig); }
.v-box rect { fill: var(--surface-2); stroke: var(--line-3); stroke-width: 1; }
.v-box.on rect { stroke: var(--sig); fill: var(--sig-bg); }
.v-box.nolog rect { stroke-dasharray: 4 3; fill: transparent; }
.v-box.down rect { stroke: var(--warn-bd); fill: var(--warn-bg); stroke-dasharray: 4 3; }
.v-bn { fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font); }
.v-bs { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.v-bt { fill: var(--text-2); font-size: 11px; font-weight: 500; font-family: var(--font); }
.v-bt.none { fill: var(--text-4); font-weight: 400; }
.v-bt.warn { fill: var(--warn); }
.v-badge rect { fill: var(--surface); stroke: var(--text-2); stroke-width: 1; }
.v-badge text { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.v-badge.on rect { fill: var(--sig); stroke: var(--sig); }
.v-badge.on text { fill: var(--sig-ink); }
.v-badge:hover rect { stroke: var(--sig); }

/* ── Incident list: site band ────────────────────────────────────────────── */
.site-band { margin-bottom: 16px; overflow: hidden; }
.site-map { position: relative; height: 340px; }
.legend { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.legend .lg { width: 8px; height: 8px; transform: rotate(45deg); border: 1.4px solid var(--text-2); margin-left: 8px; }
.legend .lg:first-child { margin-left: 0; }
.legend .lg.open { background: var(--text); border-color: var(--text); }
.legend .lg.review { border-color: var(--cor); }
.legend .lg.closed { opacity: 0.55; }
.plat-cell { display: flex; align-items: center; gap: 10px; }
.plat-cell > .i { color: var(--text-3); }
.tbl tr.hl td { background: var(--sig-bg); }

/* ── Vehicles ─────────────────────────────────────────────────────────────── */
.veh-grp + .veh-grp { margin-top: 28px; }
.veh-grp-h { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 14px; }
.veh-grp-h .v-thumb { width: 96px; }
.veh-grp-h h2 { font-size: 14px; line-height: 20px; }
.veh-grp-h p { color: var(--text-3); font-size: 12px; line-height: 18px; }
.veh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 12px; }
.veh-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; transition: border-color 0.12s, background-color 0.12s; }
.veh-card:hover { border-color: var(--line-3); background: var(--surface-2); }
.vc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vc-id { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.vc-kv { display: grid; grid-template-columns: 76px minmax(0, 1fr); row-gap: 6px; column-gap: 10px; font-size: 12px; line-height: 20px; }
.vc-kv dt { color: var(--text-3); }
.vc-kv dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.vc-kv dd.mono { font-size: 12px; }
.k-t { font-size: 12px; font-weight: 500; color: var(--text-3); margin-bottom: 10px; }
.chg { padding: 16px 20px; border-top: 1px solid var(--line); }
.sit-map.run { height: 420px; }

/* ── Collapsed sidebar (icon rail) ─────────────────────────────────────────── */
.rail-btn { margin-left: auto; color: var(--text-3); }
@media (min-width: 1101px) {
  .app.is-rail { grid-template-columns: 60px minmax(0, 1fr); }
  .app.is-rail .brand { padding: 0; justify-content: center; cursor: pointer; }
  .app.is-rail .brand .brand-mark { display: block; }
  .app.is-rail .brand .brand-lockup, .app.is-rail .rail-btn, .app.is-rail .nav-l, .app.is-rail .side .nav-count, .app.is-rail .deploy-org, .app.is-rail .dl-t, .app.is-rail .me-t, .app.is-rail #meBtn { display: none; }
  .app.is-rail .nav { padding: 8px 10px 16px; }
  .app.is-rail .nav-group { height: 17px; padding: 0; font-size: 0; margin: 0 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
  .app.is-rail .nav-group:first-child { height: 0; border: 0; margin: 0; }
  .app.is-rail .nav-item { justify-content: center; padding: 0; }
  .app.is-rail .deploy { align-items: center; padding: 10px 0; }
  .app.is-rail .me { justify-content: center; padding: 8px 0; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .sit { grid-template-columns: minmax(0, 1fr); }
  .ctx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ctx-c:nth-child(4)::before { display: none; }
  .ctx-c:nth-child(n+4) { border-top: 1px solid var(--line-2); }
  .rep-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: var(--banner-h); bottom: var(--foot-h); height: auto; width: var(--side-w); transform: translateX(-100%); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 32px 0 64px -32px rgba(0, 0, 0, 0.6); }
  .side.open { transform: none; }
  .icon-btn.menu-btn { display: inline-flex; margin-left: -8px; }
  .rail-btn { display: none !important; }
  .grid-3, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main, .grid-2.lr { grid-template-columns: minmax(0, 1fr); }
  .bnodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --pad: 16px; }
  .ctx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctx-c::before { display: none; }
  .ctx-c:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .ctx-c.plat .ctx-thumb { display: none; }
  .sit-map { height: 300px; }
  .site-map { height: 240px; }
  .diag-b { min-height: 0; padding: 12px; overflow-x: auto; justify-content: flex-start; }
  .v-diag { min-width: 540px; }
  .statusbar .sb:not(.mark):not(.clock) { display: none; }
  .veh-grp-h { grid-template-columns: 72px minmax(0, 1fr); }
  .veh-grp-h .count-line { display: none; }

  .view { padding-top: 20px; }
  .search { display: none; }
  .ph { flex-direction: column; align-items: flex-start; gap: 12px; }
  .grid-2, .grid-2.lr, .grid-3, .grid-5, .types, .fields, .bnodes, .field-row { grid-template-columns: minmax(0, 1fr); }
  .spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec > div + div::before { display: none; }
  .spec > div { border-top: 1px solid var(--line-2); }
  .spec > div:nth-child(-n+2) { border-top: 0; }
  .spec .v { white-space: normal; flex-wrap: wrap; }
  .note { flex-wrap: wrap; }
  .note .n-a { margin-left: 28px; }
  .filters .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .seg::-webkit-scrollbar { display: none; }
  .ph-a { flex-wrap: wrap; }
  .kv { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .set-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tl-body, .tl-mini-row { grid-template-columns: 132px minmax(0, 1fr); }
  .tl-lab .s { display: none; }
  .paper { padding: 28px 20px; }
  .paper-wrap { padding: 12px; }
  .scrim { align-items: flex-end; padding: var(--banner-h) 0 var(--foot-h); }
  .modal { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: calc(100vh - var(--banner-h) - var(--foot-h) - 24px); }
  .filters .search-f, .filters .sel { width: 100%; }
  .count-line { margin-left: 0; }
  /* Phones: nothing truncated. The breadcrumb keeps only the current page, context values wrap, the
     timeline's toolbar stacks cleanly and its lane names drop the icon so they fit whole. */
  .crumbs a, .crumbs .sep { display: none; }
  .inc-head .ph.ph { align-items: flex-start; }
  .ctx-c .v, .ctx-c .v2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .tl-bar { padding: 10px 12px; gap: 8px 10px; }
  .tl-bar .tl-win { flex: 1 0 100%; }
  .tl-bar .spacer { display: none; }
  .tl-body, .tl-mini-row { grid-template-columns: 118px minmax(0, 1fr); }
  .tl-lab { padding: 0 8px 0 12px; }
  .tl-lab .n .i { display: none; }
  .tl-lab .n .ellip { white-space: normal; overflow: visible; text-overflow: clip; line-height: 15px; }
  .tl-lab.ch .n { padding-left: 0; }
  .tl-lab .s { padding-left: 0; }
  .tl-lab.axis-l { font-size: 10.5px; line-height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media print {
  .side, .top, .rail, .tabs, .ph-a, .p-edit { display: none !important; }
  .app { display: block; }
  .view { padding: 0; }
  .paper-wrap { background: none; border: 0; padding: 0; }
  .paper { box-shadow: none; max-width: none; padding: 0; }
}


/* ── Event page ──────────────────────────────────────────────────────────
   One event and everything behind it, laid out like an issue in an error tracker: the event, the
   detail its source carries, breadcrumbs from every source, the record, tags and context, with the
   same signature across the fleet above and the report, history and discussion beside it. */
.evp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 18px; }
.evp-title { min-width: 0; flex: 1 1 auto; }
.evp-over { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.evp-title h1 { font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.evp-msg { margin-top: 10px; padding: 8px 12px; font-size: 12px; line-height: 18px; color: var(--text-2); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); overflow-wrap: anywhere; max-width: 1040px; }
.evp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.evp-chips .chip .i { width: 12px; height: 12px; }
.evp-stats { display: flex; gap: 28px; flex: 0 0 auto; padding-top: 22px; }
.evp-stats > div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.evp-stats .k { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.evp-stats .v { font-size: 20px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.evp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 0; margin-bottom: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evp-nav, .evp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evp-nav .btn { width: 28px; padding: 0; justify-content: center; }
.evp-nav .t3 { font-size: 12px; margin-left: 4px; }
.evp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.evp-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.lv { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs); border: 1px solid var(--line-3); font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.lv.err { color: var(--err); border-color: var(--err-bd); background: var(--err-bg); }
.lv.warn { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }

.evp-occ-b { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; padding: 16px 20px 18px; align-items: start; }
.evp-occ-n { display: flex; flex-direction: column; gap: 12px; }
.evp-occ-n > div { display: flex; flex-direction: column; min-width: 86px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.evp-occ-n .k { font-size: 11px; color: var(--text-3); }
.evp-occ-n .v { font-size: 20px; line-height: 26px; font-weight: 500; }
.evp-occ-c svg { display: block; width: 100%; height: 124px; }
.evp-occ-c .ob { fill: var(--text-4); }
.evp-occ-c .ob1 { fill: var(--sig); }
.evp-occ-c .ob0 { fill: var(--line-3); }
.evp-occ-x { position: relative; height: 18px; margin-top: 6px; border-top: 1px solid var(--line); }
.evp-occ-x span { position: absolute; top: 4px; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.evp-occ-t { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.otag { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.otag .k { font-size: 12px; color: var(--text-3); grid-row: span 2; }
.otag .bar { height: 6px; border-radius: 0; background: var(--line-2); overflow: hidden; }
.otag .bar i { display: block; height: 100%; background: var(--text-3); }
.otag .v { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otag .v b { font-weight: 500; color: var(--text); margin-right: 4px; }

.evp-event { overflow: visible; }
.evp-eh { position: sticky; top: calc(var(--top-h) + var(--banner-h)); z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 48px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; font-size: 12px; }
.evp-eh .mono { font-weight: 500; }
.evp-rawl { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.evp-jump { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.evp-jump .t3 { margin-right: 6px; }
.evp-jump a { padding: 4px 8px; border-radius: var(--r-xs); color: var(--text-2); }
.evp-jump a:hover { background: var(--hover); color: var(--text); }
.evp-sec { padding: 22px 20px 24px; border-bottom: 1px solid var(--line-2); scroll-margin-top: 120px; }
.evp-sec:last-child { border-bottom: 0; }
.evp-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-height: 28px; }
.evp-sh h3 { font-size: 14px; line-height: 20px; font-weight: 600; }
.evp-sh > :not(h3) { margin-left: auto; }
.evp-lede { font-size: 13px; line-height: 20px; color: var(--text-2); max-width: 780px; margin-bottom: 14px; }
.evp-note { font-size: 12px; margin: 8px 0 14px; }
.evp-hl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.evp-hl .kv dd.mono { font-size: 12px; }
.evp-vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.evp-vals > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evp-vals .k { font-size: 12px; color: var(--text-3); }
.evp-vals .v { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.evp-kv2 { grid-template-columns: 170px minmax(0, 1fr); }
.evp-sub { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 22px 0 10px; }
.evp-sub .t3 { font-weight: 400; margin-left: 6px; }
.evp-frames { list-style: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; font-family: var(--mono); font-size: 12px; }
.evp-frames li { display: flex; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line-2); }
.evp-frames li:last-child { border-bottom: 0; }
.evp-frames li:nth-child(6) { background: var(--sig-bg); }
.evp-frames li.more { display: none; }
.evp-frames.all li.more { display: flex; }
.evp-frames .fn { color: var(--text); }
.evp-frames .off { color: var(--text-4); }
.evp-more { margin-top: 8px; margin-left: -10px; }
.evp-tbl { border: 1px solid var(--line); border-radius: var(--r-sm); overflow-x: auto; }
.evp-tbl .tbl th:first-child, .evp-tbl .tbl td:first-child { padding-left: 12px; }
.evp-tbl .tbl th:last-child, .evp-tbl .tbl td:last-child { padding-right: 12px; }
.evp-tbl tr.cur-row td { background: var(--sig-bg); }
.evp-tbl td.num, .evp-tbl td.mono:not(.evp-msgc) { white-space: nowrap; }
.evp-tbl .evp-msgc { white-space: normal; overflow-wrap: anywhere; min-width: 260px; }
.evp-raw { margin-top: 16px; }
.evp-raw summary, .bc-d summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--text-2); list-style: none; }
.evp-raw summary::-webkit-details-marker, .bc-d summary::-webkit-details-marker { display: none; }
.evp-raw summary .i, .bc-d summary .i { transition: transform 0.12s; }
.evp-raw[open] summary .i, .bc-d[open] summary .i { transform: rotate(90deg); }
.evp-raw pre { margin-top: 10px; max-height: 420px; overflow: auto; }
.evp-steps { list-style: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.evp-steps li { display: grid; grid-template-columns: 104px 76px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; line-height: 18px; }
.evp-steps li:last-child { border-bottom: 0; }
.evp-steps li:nth-child(5) { background: var(--sig-bg); }
.evp-steps .ts { font-size: 12px; }
.evp-steps .dt { font-size: 12px; color: var(--text-3); }
.evp-steps .src { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.evp-chw { position: relative; padding-left: 64px; }
.evp-chl { position: absolute; left: 0; top: 0; bottom: 22px; width: 58px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--text-3); text-align: right; padding: 4px 0 12px; }
.evp-ch { display: block; width: 100%; height: 132px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); }
.evp-ch .ln { fill: none; stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.evp-ch .thr { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.evp-ch .cur { stroke: var(--sig); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.evp-ch circle { fill: var(--sunken); stroke: var(--text-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.evp-ch circle.hi { fill: var(--warn); stroke: var(--warn); }
.evp-chx { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.evp-rug { display: block; width: 100%; height: 48px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); }
.evp-rug line { stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.evp-rug .gap { fill: var(--warn-bg); stroke: var(--warn-bd); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.evp-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 6px; }
.evp-flags .flag { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-xs); font-size: 12px; }
.evp-flags .flag .k { color: var(--text-2); }
.evp-flags .flag.on .v { color: var(--ok); }
.evp-flags .flag.off .v { color: var(--err); }

.evp-bcf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bc-q { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 360px; }
.bc-q .i { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.bc-q .in { height: 30px; padding-left: 32px; width: 100%; }
.bcs { list-style: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.bc { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.bc:last-child { border-bottom: 0; }
.bc.more { display: none; }
.bcs.all .bc.more { display: grid; }
.bc[hidden] { display: none !important; }
.bc.this { background: var(--sig-bg); }
.bc-i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-3); border-radius: var(--r-sm); color: var(--text-2); background: var(--surface); }
.bc.this .bc-i { border-color: var(--sig-bd); color: var(--sig); }
.bc-b { min-width: 0; }
.bc-h { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.bc-s { font-size: 12px; font-weight: 600; }
.bc-t { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.bc-m { font-size: 13px; line-height: 18px; margin-top: 3px; }
.bc-m a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.bc-x { font-size: 12px; line-height: 18px; color: var(--text-2); margin-top: 4px; overflow-wrap: anywhere; }
.bc-d { margin-top: 6px; }
.bc-d .jt, .bc-d pre { margin-top: 8px; }

.jt { font-family: var(--mono); font-size: 12px; line-height: 20px; }
.jt .jt { padding-left: 16px; border-left: 1px solid var(--line-2); margin-left: 4px; }
.jt details > summary { cursor: pointer; list-style: none; color: var(--text-2); }
.jt details > summary::-webkit-details-marker { display: none; }
.jt details > summary::before { content: '▸'; display: inline-block; width: 12px; color: var(--text-4); transition: transform 0.12s; }
.jt details[open] > summary::before { transform: rotate(90deg); }
.jr { display: flex; gap: 16px; min-width: 0; }
.jk { color: var(--text-3); flex: 0 0 auto; min-width: 180px; }
.js { color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.jnum { color: var(--cor); }
.jb { color: var(--hyp); }
.jn { color: var(--text-4); }
.evp-sec > .jt { padding: 12px 14px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); }

.evp-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); column-gap: 24px; }
.evp-tags .tag { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; line-height: 18px; }
.evp-tags .tag[hidden] { display: none; }
.evp-tags .k { color: var(--text-3); }
.evp-tags .v { color: var(--text); overflow-wrap: anywhere; }
.evp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.evp-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 16px; min-width: 0; }
.evp-ch2 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.evp-ch2 .i { color: var(--text-3); }
.evp-card .kv.tight { grid-template-columns: 124px minmax(0, 1fr); row-gap: 6px; }
.evp-card .kv dt, .evp-card .kv dd { font-size: 12px; line-height: 18px; }
.evp-params { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.evp-params .chip { font-size: 11px; }

.evp-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--top-h) + var(--banner-h) + 16px); }
.evp-ss { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 16px; background: var(--surface); }
.evp-ss h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.evp-ss p { font-size: 12px; line-height: 18px; }
.evp-ss p + p { margin-top: 6px; }
.evp-ss .lvl { margin-left: 4px; vertical-align: -3px; }
.evp-sim { list-style: none; }
.evp-sim li { padding: 10px 0; border-top: 1px solid var(--line-2); }
.evp-sim li:first-child { border-top: 0; padding-top: 2px; }
.evp-sim .r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.evp-sim .r1 a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.evp-sim .r2 { font-size: 12px; line-height: 18px; margin-top: 4px; }
.evp-com { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.evp-com li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.evp-com .r1 { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.evp-com .r1 b { font-weight: 500; }
.evp-com .r1 .t3 { font-size: 12px; }
.evp-com p { color: var(--text-2); margin-top: 3px; }
.evp-cin { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.evp-cin textarea { width: 100%; min-height: 64px; resize: vertical; }

@media (max-width: 1280px) {
  .evp-grid { grid-template-columns: minmax(0, 1fr); }
  .evp-side { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  .evp-occ-b { grid-template-columns: auto minmax(0, 1fr); }
  .evp-occ-t { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
}
@media (max-width: 760px) {
  .evp-head { flex-direction: column; gap: 12px; }
  .evp-stats { padding-top: 0; }
  .evp-stats > div { align-items: flex-start; }
  .evp-hl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .evp-occ-b { grid-template-columns: minmax(0, 1fr); }
  .evp-occ-n { flex-direction: row; }
  .evp-steps li { grid-template-columns: 1fr; gap: 2px; }
  .evp-kv2, .evp-card .kv.tight { grid-template-columns: minmax(0, 1fr); }
  .evp-jump { margin-left: 0; }
  .evp-eh { position: static; }
}

@media (max-width: 760px) { .evp-occ .panel-h .sub { display: none; } }

/* Laptop widths: the wide tables drop their secondary columns before anything wraps badly, and paired
   panels stack. Every hidden value is still one click away on the detail page. */
@media (max-width: 1360px) {
  .inc-tbl th:nth-child(4), .inc-tbl td:nth-child(4), .inc-tbl th:nth-child(5), .inc-tbl td:nth-child(5),
  .runs-tbl th:nth-child(5), .runs-tbl td:nth-child(5), .runs-tbl th:nth-child(9), .runs-tbl td:nth-child(9),
  .rules-tbl th:nth-child(4), .rules-tbl td:nth-child(4),
  .people-tbl th:nth-child(2), .people-tbl td:nth-child(2), .people-tbl th:nth-child(5), .people-tbl td:nth-child(5),
  .audit-tbl th:nth-child(6), .audit-tbl td:nth-child(6),
  .src-tbl th:nth-child(3), .src-tbl td:nth-child(3),
  .col-tbl th:nth-child(6), .col-tbl td:nth-child(6),
  .ev-table th:nth-child(6), .ev-table td:nth-child(6),
  .int-tbl .c-dir, .int-tbl .c-auth, .ing-tbl .c-dir, .ing-tbl .c-auth, .fmt-tbl .c-auth, .exp-tbl .c-by { display: none; }
  .grid-2.lr { grid-template-columns: minmax(0, 1fr); }
  .people-tbl .c2 .t, .runs-tbl .c2 .t { white-space: nowrap; }
}
@media (max-width: 1280px) {
  .runs-tbl th:nth-child(4), .runs-tbl td:nth-child(4), .runs-tbl th:nth-child(8), .runs-tbl td:nth-child(8),
  .led-tbl .l-act, .fir-tbl .f-veh { display: none; }
}


/* ── Connect: integrations, alerts, automations, exports ─────────────────────
   Catalog tables share fixed column widths so the Notify, Ticketing and Forward logs panels line up.
   Data classes read by weight: L0 quiet, L1 solid, L2 in the warning color because it is gated. */
.cls { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); border: 1px solid var(--line-3); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-2); vertical-align: middle; flex: 0 0 auto; }
.cls.l0 { color: var(--text-3); border-color: var(--line); }
.cls.l1 { color: var(--text); background: var(--surface-3); border-color: var(--line-3); }
.cls.l2 { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.air { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.air .i { margin-top: 3px; }
.air.yes .i { color: var(--ok); }
.air.part .i { color: var(--warn); }
.air.no .i { color: var(--text-4); }
.eg { display: flex; align-items: center; gap: 8px; font-size: 12px; }

.int-grp { margin-bottom: 16px; }
.int-tbl, .ing-tbl, .fmt-tbl { table-layout: fixed; }
.int-tbl td, .ing-tbl td, .fmt-tbl td { height: auto; vertical-align: top; padding-top: 12px; padding-bottom: 12px; line-height: 18px; }
.int-tbl td.t2, .ing-tbl td.t2, .fmt-tbl td.t2 { font-size: 12px; }
.int-tbl .c2, .ing-tbl .c2, .fmt-tbl .c2 { padding-top: 12px; padding-bottom: 12px; }
.int-tbl td.c-cls, .fmt-tbl td.c-cls { padding-top: 11px; }
.int-tbl td.c-eg .eg { margin-top: -1px; }
.int-tbl .c-go, .ing-tbl .c-go, .fmt-tbl .c-go { text-align: right; }
.int-tbl .c-go .i, .ing-tbl .c-go .i, .fmt-tbl .c-go .i { display: inline-block; margin-top: 2px; }
.int-tbl .c-name { width: 22%; } .int-tbl .c-dir { width: 9%; } .int-tbl .c-auth { width: 15%; } .int-tbl .c-gov { width: 21%; }
.int-tbl .c-air { width: 11%; } .int-tbl .c-cls { width: 6%; } .int-tbl .c-eg { width: 12%; } .int-tbl .c-go { width: 4%; }
.ing-tbl .c-name { width: 24%; } .ing-tbl .c-dir { width: 7%; } .ing-tbl .c-auth { width: 17%; } .ing-tbl .c-gov { width: 16%; }
.ing-tbl .c-air { width: 14%; } .ing-tbl .c-st { width: 18%; } .ing-tbl .c-go { width: 4%; }
.fmt-tbl .c-name { width: 28%; } .fmt-tbl .c-cls { width: 7%; } .fmt-tbl .c-auth { width: 19%; } .fmt-tbl .c-gov { width: 26%; } .fmt-tbl .c-air { width: 16%; } .fmt-tbl .c-go { width: 4%; }

.cls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.cls-def { display: flex; align-items: flex-start; gap: 10px; line-height: 20px; }
.cls-rule { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; line-height: 18px; }
.checks.guard li { font-size: 13px; line-height: 20px; }
.checks.guard li .i { margin-top: 3px; }

.src-refs { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.src-refs li { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); }
.src-refs .n { font-size: 12px; line-height: 18px; }
.src-refs .u { margin-top: 2px; font-size: 11px; line-height: 16px; color: var(--text-3); overflow-wrap: anywhere; }
.src-refs .nt { margin-top: 4px; font-size: 12px; line-height: 17px; }
.ins-sec .src-refs + .t3, .ins-sec p + .src-refs { margin-top: 10px; }
.gov-short { font-weight: 500; line-height: 20px; margin-bottom: 8px; }
.gov-p { line-height: 20px; }
.gov-p + .gov-p { margin-top: 8px; }

.test-box { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.cls-guide { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.cls-guide .cg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; line-height: 18px; color: var(--text-3); }
.cls-guide .cg.on { color: var(--text); }
.cls-guide p { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 12px; line-height: 18px; color: var(--text-3); }
.seg button[disabled] { opacity: 0.4; cursor: not-allowed; }
.seg button[disabled]:hover { color: var(--text-3); }

.fmt-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fmt-pick .fp { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color 0.12s, background-color 0.12s; }
.fmt-pick .fp:hover { border-color: var(--line-3); }
.fmt-pick .fp:has(input:checked) { border-color: var(--text-3); background: var(--hover); }
.fp-t { display: block; min-width: 0; flex: 1 1 auto; }
.fp-n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; line-height: 20px; }
.dest-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dest-pick .type { padding: 10px 12px; }
.x-appr:not(:empty) { margin-top: 16px; }
.x-appr + .field { margin-top: 16px; }
.bnd { display: inline-flex; margin-top: 6px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--ok); }
.bnd.out { color: var(--warn); }
.appr { padding: 12px 14px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--surface-2); }
.appr.ok { border-color: var(--ok-bd); background: var(--ok-bg); }
.appr.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.appr-h { display: flex; align-items: center; gap: 10px; font-weight: 500; line-height: 20px; }
.appr > p { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.appr-who { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.ro-box { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); font-size: 12px; line-height: 18px; }
.ro-box p + p { margin-top: 8px; }

.att-list { list-style: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.att-list li { display: grid; grid-template-columns: 16px 96px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 10px; border-bottom: 1px solid var(--line-2); font-size: 12px; line-height: 18px; }
.att-list li:last-child { border-bottom: 0; }
.att-list li.bad { background: var(--err-bg); }
.att-list .n, .att-list .ms { font-size: 11px; color: var(--text-3); }
.att-list .mono.t2 { font-size: 11px; }
.kv.hdrs { grid-template-columns: 150px minmax(0, 1fr); row-gap: 4px; }
.kv.hdrs dt, .kv.hdrs dd { font-size: 11px; line-height: 17px; }
.kv.hdrs dd { overflow-wrap: anywhere; color: var(--text-2); }
.code.payload { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 380px; overflow: auto; }
.dl-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 12px; text-align: left; transition: background-color 0.12s, border-color 0.12s; }
.dl-row:hover { background: var(--hover); border-color: var(--line-3); }
.dl-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-row .mono { font-size: 11px; }
.ins-sec > p { line-height: 20px; }

.led-tbl .l-what, .exp-tbl .x-what, .fir-tbl .f-what { width: 100%; max-width: 0; }
.led-tbl .l-resp .t { max-width: 280px; }
.led-tbl .l-resp .chip { margin-right: 6px; }
.led-tbl tr.bad td { background: var(--err-bg); }
.led-tbl tr.bad:hover td { background: var(--err-bg); }
.fir-tbl .f-what .s { white-space: normal; line-height: 17px; margin-top: 3px; }
.fir-tbl .f-what .t .link { font-weight: 500; }
.fir-tbl .f-dl { min-width: 150px; }
.arun-tbl .a-res { width: 100%; max-width: 0; min-width: 0; line-height: 18px; padding-top: 10px; padding-bottom: 10px; font-size: 12px; }
.arun-tbl .a-auto { min-width: 210px; }
.arun-tbl .a-auto .s { line-height: 17px; }
.m-only { display: none; }
.eg-tbl td:nth-child(2) { overflow-wrap: anywhere; }
.eg-tbl .eg-dest { min-width: 132px; font-weight: 500; line-height: 18px; }

.ar-card .ar-h { gap: 12px; }
.ar-h h2 { min-width: 0; }
.ar-id { display: inline-block; margin-right: 10px; padding: 0 6px; border: 1px solid var(--line-3); border-radius: var(--r-xs); font-size: 11px; font-weight: 400; line-height: 18px; color: var(--text-2); vertical-align: 1px; }
.ar-v { margin-left: 10px; font-size: 11px; font-weight: 400; }
.ar-h .ph-a { gap: 12px; }
.ar-fired { font-size: 12px; white-space: nowrap; }
.ar-fired:hover { color: var(--text); }
.ar-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-body.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-col { min-width: 0; padding: 16px 20px 18px; border-right: 1px solid var(--line-2); }
.ar-col:last-child { border-right: 0; }
.ar-col .k { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.ar-col .v { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.ar-card code.mono, .ro-box code.mono { padding: 0 3px; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--sunken); font-size: 11px; }
.routes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.route { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px; border: 1px solid var(--line-3); border-radius: var(--r-xs); background: var(--surface-2); font-size: 12px; line-height: 16px; color: var(--text-2); }
.route .i { color: var(--text-3); }
.route.off { border-style: dashed; background: transparent; color: var(--text-3); }
.ar-foot { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--line-2); }
.ar-basis, .ar-meta { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; font-size: 12px; line-height: 18px; }
.ar-basis .k, .ar-meta .k { color: var(--text-3); font-weight: 500; }
.ar-foot .note { margin-bottom: 6px; }

@media (max-width: 1360px) {
  .int-tbl .c-name { width: 29%; } .int-tbl .c-gov { width: 30%; } .int-tbl .c-air { width: 14%; } .int-tbl .c-cls { width: 8%; } .int-tbl .c-eg { width: 14%; } .int-tbl .c-go { width: 5%; }
  .ing-tbl .c-name { width: 30%; } .ing-tbl .c-gov { width: 26%; } .ing-tbl .c-air { width: 17%; } .ing-tbl .c-st { width: 22%; } .ing-tbl .c-go { width: 5%; }
  .fmt-tbl .c-name { width: 34%; } .fmt-tbl .c-cls { width: 9%; } .fmt-tbl .c-gov { width: 33%; } .fmt-tbl .c-air { width: 19%; } .fmt-tbl .c-go { width: 5%; }
}
@media (max-width: 1280px) {
  .ar-body.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-body.four .ar-col:nth-child(2) { border-right: 0; }
  .ar-body.four .ar-col:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 1100px) {
  .ar-body { grid-template-columns: minmax(0, 1fr); }
  .ar-col { border-right: 0; }
  .ar-col + .ar-col { border-top: 1px solid var(--line-2); }
  .ar-body.four { grid-template-columns: minmax(0, 1fr); }
  .ar-body.four .ar-col:nth-child(n+2) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 760px) {
  .int-tbl .c-gov, .int-tbl .c-air, .int-tbl .c-cls, .ing-tbl .c-gov, .ing-tbl .c-air, .fmt-tbl .c-gov, .fmt-tbl .c-air,
  .led-tbl .l-cls, .led-tbl .l-sha, .led-tbl .l-resp, .fir-tbl .f-veh, .fir-tbl .f-dl, .arun-tbl .a-run, .exp-tbl .c-to, .exp-tbl .c-sha { display: none; }
  .int-tbl .c-name { width: 58%; } .int-tbl .c-eg { width: 34%; } .int-tbl .c-go { width: 8%; }
  .ing-tbl .c-name { width: 58%; } .ing-tbl .c-st { width: 34%; } .ing-tbl .c-go { width: 8%; }
  .fmt-tbl .c-name { width: 74%; } .fmt-tbl .c-cls { width: 16%; } .fmt-tbl .c-go { width: 10%; }
  .cls-grid, .fmt-pick, .dest-pick { grid-template-columns: minmax(0, 1fr); }
  .ar-h { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .ar-h .ph-a { margin-left: 0; width: 100%; justify-content: space-between; }
  .ar-basis, .ar-meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fir-tbl .f-case, .exp-tbl .x-case, .arun-tbl .a-res, .fir-tbl .w-min, .exp-tbl .w-min, .arun-tbl .w-min { display: none; }
  .m-only { display: inline; }
  .m-only.m-st { display: block; margin-top: 6px; }
  .eg-tbl .eg-dest { min-width: 0; }
  .arun-tbl .a-st { display: none; }
  .arun-tbl .a-auto { min-width: 0; width: 100%; }
  .arun-tbl .a-auto .t { white-space: normal; }
  .cx-page .panel-h { flex-wrap: wrap; row-gap: 2px; padding-top: 12px; padding-bottom: 12px; }
  .cx-page .panel-h .sub { flex-basis: 100%; }
  .ar-h .ph-a .switch { margin-left: auto; }
  .fir-tbl .f-sev { display: none; }
  .fir-tbl td:first-child, .fir-tbl td:first-child .t { white-space: normal; }
  .exp-tbl td.nowrap, .exp-tbl .c2.nowrap { white-space: normal; }
  .exp-tbl .x-what .s.row { flex-wrap: wrap; }
  .led-tbl .l-what .t.ellip { white-space: normal; }
  .modal-f { flex-wrap: wrap; }
  .modal-f .left { flex: 1 1 100%; }
  .att-list li { grid-template-columns: 16px minmax(0, 1fr); }
  .att-list li > :nth-child(3) { grid-column: 2; }
  .att-list li .ms { display: none; }
  .kv.hdrs { grid-template-columns: minmax(0, 1fr); }
}


/* ── Field instrument ───────────────────────────────────────────────────────
   Range equipment, not an admin panel: the system marking at the top and bottom as DoD systems show
   it, a date-time group in Zulu with the active range and its MGRS 100 km square, small uppercase
   section heads, tabular mono for times, IDs and values, hairline rules, and quiet corner registration
   marks on the panels that carry the picture. */
:root { --reg: var(--line-3); --track: 0.08em; }

.mark-banner.bottom { top: auto; bottom: 0; }

.dtg { display: flex; align-items: stretch; height: 32px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--surface); white-space: nowrap; flex: 0 0 auto; }
.dtg > span { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; }
.dtg > span + span { border-left: 1px solid var(--line-3); }
.dtg .k { font-size: 11px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3); }
.dtg .v { font-size: 12px; font-weight: 500; color: var(--text); }
.dtg .mono { font-size: 12px; color: var(--text); }
.dtg .z { color: var(--sig); }

.ph-o { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ph-o .mono { font-size: 11px; letter-spacing: 0; text-transform: none; }

/* Section heads and labels: small uppercase with tracking. Column heads carry their units. */
.panel-h { min-height: 44px; }
.panel-h h2, .evp-sh h3, .evp-ss h3, .veh-grp-h h2 { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); }
.tbl th { height: 34px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.spec .k, .ctx-c .k, .ins-sec > .k, .k-t, .ar-col .k, .ar-basis .k, .ar-meta .k, .evp-stats .k, .evp-occ-n .k, .otag .k, .tl-mini-lab, .tl-lab.axis-l { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; }
.nav-group { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.tab { font-size: 13px; }
.num, .tbl td.num { font-variant-numeric: tabular-nums; }

/* Registration marks: a quiet L at each corner of the panels that carry the picture. */
.spec, .ctx, .tl, .reg { position: relative; }
.spec::after, .ctx::after, .tl::after, .reg::after {
  content: ''; position: absolute; inset: -5px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--reg), var(--reg)) 0 0 / 7px 1px, linear-gradient(var(--reg), var(--reg)) 0 0 / 1px 7px,
    linear-gradient(var(--reg), var(--reg)) 100% 0 / 7px 1px, linear-gradient(var(--reg), var(--reg)) 100% 0 / 1px 7px,
    linear-gradient(var(--reg), var(--reg)) 0 100% / 7px 1px, linear-gradient(var(--reg), var(--reg)) 0 100% / 1px 7px,
    linear-gradient(var(--reg), var(--reg)) 100% 100% / 7px 1px, linear-gradient(var(--reg), var(--reg)) 100% 100% / 1px 7px;
  background-repeat: no-repeat;
}

/* ── One type scale (11, 12, 13, 14, 16, 20 px) and one 4 px spacing grid ──
   Applied to every table, drawer, modal and empty state. */
.tbl td { font-size: 13px; }
.tbl td.mono, .bound-cell, .tbl .c2 .s { font-size: 12px; }
.tbl .c2 { padding-top: 8px; padding-bottom: 8px; line-height: 18px; }
.tbl.dense td { height: 36px; }
.tbl.dense .c2 { padding-top: 8px; padding-bottom: 8px; }
.tbl .c2 .s { margin-top: 2px; line-height: 16px; }
.chip, .lvl, .lv, .cls { font-size: 11px; }
.chip.mono { font-size: 11px; }
.panel-h .sub, .count-line, .hint, .label, .kv dt, .modal-f .left, .checks li, .hist-i, .hist-i .s, .bnode .d, .type .d, .check .d, .file .m, .evp-note, .evp-ss p, .route { font-size: 12px; }
.seg button, .btn-sm { font-size: 12px; }
.kv dd, .note .n-b, .modal-h p, .drawer-h p, .empty p, .set-row .v { font-size: 13px; }
.label { line-height: 16px; }
.hint, .checks li, .kv dt, .hist-i { line-height: 18px; }
.modal-h { padding: 20px 24px 0; }
.modal-h h3, .drawer-h h3 { font-size: 16px; line-height: 24px; }
.modal-b { padding: 20px 24px 24px; }
.modal-b p + p { margin-top: 8px; }
.modal-f { padding: 12px 24px; }
.drawer-h { padding: 16px 20px; }
.drawer-f { padding: 12px 20px; }
.ins-sec { padding: 16px 20px; }
.ins-sec > .k { margin-bottom: 8px; }
.kv { row-gap: 12px; }
.kv.tight { row-gap: 8px; }
.field { gap: 8px; }
.empty { padding: 48px 24px; }
.empty h3 { font-size: 14px; line-height: 20px; margin-bottom: 4px; }
.empty p { line-height: 20px; }
.empty .btn { margin-top: 16px; }
.toast { font-size: 13px; }
@media (max-width: 760px) { .modal-h { padding: 16px 16px 0; } .modal-b { padding: 16px; } .modal-f { padding: 12px 16px; } .drawer-h { padding: 16px; } .ins-sec { padding: 16px; } .drawer-f { padding: 12px 16px; } }

/* ── Range status board ──────────────────────────────────────────────────── */
.brd-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.brd-grid + .brd-grid { margin-top: 16px; }
.brd-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.brd-strip { margin-bottom: 16px; }
.brd-strip .v .mono { font-size: 13px; }
.brd-fleet { margin-bottom: 16px; }
.fl-groups { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
.fl-grp { min-width: 0; }
.fl-grp + .fl-grp { border-left: 1px solid var(--line); }
.fl-ugv .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-uas .fleet { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fl-grp-h { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-2); background: var(--sunken); }
.fl-grp-h .mono { letter-spacing: 0; color: var(--text-2); }
.fleet { display: grid; overflow: hidden; }
.fl-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; background: var(--surface); text-align: left; min-width: 0; box-shadow: 1px 0 0 var(--line-2), 0 1px 0 var(--line-2); transition: background-color 0.12s; }
.brd-fleet .fl-grp:last-child .fleet { border-radius: 0 0 var(--r-md) var(--r-md); }
.fl-tile:hover { background: var(--surface-2); }
.fl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fl-id { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.fl-sys { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.fl-thumb { height: 60px; display: flex; align-items: center; }
.fl-thumb .vr { width: 100%; height: 60px; aspect-ratio: auto; background-color: var(--text-2); }
.fl-tile:hover .fl-thumb .vr { background-color: var(--text); }
.fl-link { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.fl-last { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-last .k { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.fl-last .mono { font-size: 12px; line-height: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-note { font-size: 12px; line-height: 16px; color: var(--warn); text-wrap: balance; }
.fl-note.q { color: var(--text-3); }
.dot-s.off { background: var(--text-4); }
.dot-s.none { background: transparent; box-shadow: inset 0 0 0 1px var(--text-4); }
.brd-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.brd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lvl-bar { display: flex; height: 8px; gap: 2px; margin: 4px 0 16px; }
.lvl-bar i { display: block; height: 100%; min-width: 2px; }
.lvl-bar i.observed { background: var(--obs); } .lvl-bar i.correlated { background: var(--cor); } .lvl-bar i.hypothesis { background: var(--hyp); } .lvl-bar i.unknown { background: var(--unk); opacity: 0.8; }
.lvl-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lvl-counts > div { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.lvl-counts .n { font-family: var(--mono); font-size: 20px; line-height: 24px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.lvl-counts .n.zero { color: var(--text-4); }
.q-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-2); color: var(--text); transition: background-color 0.12s; }
.q-row:hover { background: var(--hover); }
.q-row:last-child { border-bottom: 0; }
.q-row .t { font-weight: 500; line-height: 20px; min-width: 0; }
.q-row .t .mono { margin-right: 8px; font-weight: 500; }
.q-r { display: inline-flex; align-items: center; gap: 8px; }
.lvl-counts > div .lvl { align-self: flex-start; }
.lvl-tbl .l-t { width: 100%; max-width: 0; }
.lvl-tbl .l-t .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srt-tbl tr.day td .mono { margin-left: 8px; letter-spacing: 0; color: var(--text-2); }
.audit-tbl .a-det { width: 100%; max-width: 0; }
.q-row .s { grid-column: 1 / -1; font-size: 12px; line-height: 18px; color: var(--text-3); }
.q-row .who { font-size: 12px; }
.srt-tbl .s-run { width: 100%; max-width: 0; }
.srt-tbl .s-run .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srt-tbl tr.day td { height: 28px; background: var(--sunken); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.fir-mini td.f-what { width: 100%; max-width: 0; }
.fir-mini td.f-what .t, .fir-mini td.f-what .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Incident reconstruction: timeline, map and vehicle above the fold ───── */
.inc-head .ph { margin-bottom: 12px; align-items: center; }
.inc-head + .ctx { margin-bottom: 12px !important; }
.inc-head + .ctx .ctx-c { padding-top: 10px; padding-bottom: 10px; }
.page.wide .tabs { margin-bottom: 16px; }
/* The timeline and the map share the first screen; the map panel stretches to the timeline's height.
   The vehicle diagram sits under them beside the evidence chain, wide enough that its labels stay at
   12 px or more (the drawing is 640 units wide with 11-unit labels, so it needs at least 700 px). */
.recon { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 16px; align-items: stretch; }
.recon.no-map { grid-template-columns: minmax(0, 1fr); }
.recon-tl { min-width: 0; }
.recon-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.recon-rail > .sit-p { flex: 1 1 auto; }
.recon .sit-map { flex: 1 1 auto; height: auto; min-height: 380px; }
.vc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: stretch; }
.vc-grid > .panel { display: flex; flex-direction: column; min-height: 0; }
.vc-grid .diag-b { flex: 1 1 auto; }
.vc-grid .diag-b { min-height: 0; padding: 16px 20px; }
.vc-grid .v-diag { width: 100%; max-width: 760px; }
.fnd .tm.warn-t, .chn .tm.warn-t { color: var(--warn); }
.fnd.dis .ti { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-3); }
.fnd-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(196px, 100%), 1fr)); overflow: hidden; border-radius: 0 0 var(--r-md) var(--r-md); }
.fnd { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px 14px; text-align: left; box-shadow: 1px 0 0 var(--line-2), 0 1px 0 var(--line-2); transition: background-color 0.12s; }
.fnd:hover { background: var(--hover); }
.fnd.on { background: var(--sig-bg); }
.fnd .tm { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fnd .ti { font-size: 13px; line-height: 18px; font-weight: 500; min-width: 0; text-wrap: balance; }
.fnd .fm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.fnd .ru { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.chn { list-style: none; counter-reset: none; }
.chn li { display: grid; grid-template-columns: 32px 92px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background-color 0.12s; }
.chn li:last-child { border-bottom: 0; }
.chn li:hover { background: var(--hover); }
.chn li.on { background: var(--sig-bg); }
.chn .n { display: inline-flex; align-items: center; justify-content: center; height: 20px; border: 1px solid var(--line-3); border-radius: var(--r-xs); font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.chn li.ok .n { border-color: var(--ok-bd); color: var(--ok); }
.chn .tm { font-family: var(--mono); font-size: 12px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chn .pt { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.chn .ti { font-size: 13px; line-height: 18px; margin-top: 2px; }
.chn .lk { font-size: 12px; line-height: 18px; color: var(--text-3); margin-top: 2px; }
/* Short chains spread their rows over the height (up to a limit) instead of leaving a hole above the foot. */
.chn-p .chn { flex: 1 1 auto; display: flex; flex-direction: column; }
.chn-p .chn li { flex: 1 0 auto; max-height: 128px; align-content: start; }
.chn-p > .empty { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.chn-sum { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }
.chn-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px 20px; min-width: 0; }
.chn-sum > div + div { border-left: 1px solid var(--line-2); }
.chn-sum .k { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.chn-sum .v { font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.chn-sum .s { font-size: 12px; line-height: 16px; color: var(--text-3); }
.chn li.ok .lk { color: var(--ok); }

@media (max-width: 1320px) {
  .vc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .recon { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .brd-grid, .fl-groups { grid-template-columns: minmax(0, 1fr); }
  .fl-grp + .fl-grp { border-left: 0; border-top: 1px solid var(--line); }
  .dtg .dtg-r { display: none; }
}
@media (max-width: 760px) {
  .recon .sit-map { min-height: 300px; }
  .vc-grid .v-diag { min-width: 700px; max-width: none; }
  .fnd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lvl-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-ugv .fleet, .fl-uas .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brd-legend, .fl-sys, .srt-tbl .s-start, .fir-mini .f-t, .fir-mini .f-rule,
  .inc-tbl th:nth-child(3), .inc-tbl td:nth-child(3), .inc-tbl th:nth-child(7), .inc-tbl td:nth-child(7), .inc-tbl th:nth-child(8), .inc-tbl td:nth-child(8),
  .runs-tbl th:nth-child(2), .runs-tbl td:nth-child(2), .runs-tbl th:nth-child(3), .runs-tbl td:nth-child(3), .runs-tbl th:nth-child(7), .runs-tbl td:nth-child(7),
  .src-tbl th:nth-child(2), .src-tbl td:nth-child(2), .src-tbl th:nth-child(4), .src-tbl td:nth-child(4), .src-tbl th:nth-child(5), .src-tbl td:nth-child(5),
  .rules-tbl th:nth-child(2), .rules-tbl td:nth-child(2), .rules-tbl th:nth-child(3), .rules-tbl td:nth-child(3), .rules-tbl th:nth-child(5), .rules-tbl td:nth-child(5),
  .stores th:nth-child(3), .stores td:nth-child(3), .stores th:nth-child(4), .stores td:nth-child(4),
  .people-tbl th:nth-child(4), .people-tbl td:nth-child(4), .people-tbl th:nth-child(6), .people-tbl td:nth-child(6), .people-tbl th:nth-child(7), .people-tbl td:nth-child(7),
  .audit-tbl th:nth-child(2), .audit-tbl td:nth-child(2), .audit-tbl th:nth-child(5), .audit-tbl td:nth-child(5),
  .col-tbl th:nth-child(2), .col-tbl td:nth-child(2), .col-tbl th:nth-child(3), .col-tbl td:nth-child(3), .col-tbl th:nth-child(4), .col-tbl td:nth-child(4), .col-tbl th:nth-child(5), .col-tbl td:nth-child(5),
  .ev-table th:nth-child(2), .ev-table td:nth-child(2), .ev-table th:nth-child(3), .ev-table td:nth-child(3), .ev-table th:nth-child(5), .ev-table td:nth-child(5),
  .srcf-tbl th:nth-child(2), .srcf-tbl td:nth-child(2), .srcf-tbl th:nth-child(4), .srcf-tbl td:nth-child(4), .srcf-tbl th:nth-child(5), .srcf-tbl td:nth-child(5), .srcf-tbl th:nth-child(6), .srcf-tbl td:nth-child(6), .srcf-tbl th:nth-child(7), .srcf-tbl td:nth-child(7),
  .runinc-tbl td:nth-child(3), .runinc-tbl td:nth-child(4) { display: none; }
  .srcf-tbl td, .srcf-tbl td *, .pair-tbl td, .pair-tbl td * { white-space: normal; overflow-wrap: anywhere; }
  .ev-title { max-width: none; white-space: normal; }
  .audit-tbl td { white-space: normal; }
  .audit-tbl td:first-child { white-space: nowrap; }
  .stores td.mono { white-space: normal; overflow-wrap: anywhere; }
  .runs-tbl .c2 .t, .people-tbl .c2 .t { white-space: normal; }
  .perm th, .pair-tbl th { white-space: normal; letter-spacing: 0; line-height: 14px; }
  .perm th.c, .perm td.c { width: 36px; padding-left: 2px; padding-right: 2px; }
  .perm th.c { writing-mode: vertical-rl; transform: rotate(180deg); height: 104px; padding-top: 8px; padding-bottom: 8px; text-align: left; vertical-align: bottom; }
  .perm th:first-child, .perm td:first-child { padding-right: 8px; }
  .pair-tbl th, .pair-tbl td { padding-left: 6px; padding-right: 6px; }
  .panel-h { flex-wrap: wrap; row-gap: 4px; padding-top: 12px; padding-bottom: 12px; }
  .panel-h .sub { order: 3; flex: 1 1 100%; line-height: 18px; }
  .fl-tile { padding: 10px 10px 12px; gap: 6px; }
  .fl-thumb, .fl-thumb .vr { height: 44px; }
  .fl-note { font-size: 11px; }
  .dtg > span { padding: 0 8px; }
  .dtg .k { display: none; }
  .srt-tbl .s-src, .srt-tbl .s-dur, .fir-mini .f-veh { display: none; }
  .fnd { padding: 12px; }
  .chn li { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 16px; }
  .chn .tm { grid-column: 2; }
  .chn li > div { grid-column: 2; }
  .q-row { padding: 12px 16px; }
}

/* ── Room to breathe ──────────────────────────────────────────────────────
   One column on every page. What used to sit in a side column opens in a drawer from a button at the
   top right of the page, detail opens in a drawer or a dialog, and every list pages itself. Panels
   get more air: 24px sides, 56px headers, 52px rows, 24px between sections. */
.view { padding: 36px var(--pad) 96px; }
.flow { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.flow > .ph { margin-bottom: 8px; }
.flow > .tabs { margin-bottom: 0; }
.ph { margin-bottom: 32px; }
.ph p { margin-top: 6px; line-height: 20px; }
.tabs { margin-bottom: 24px; }
.panel-h { min-height: 56px; padding: 0 24px; }
.panel-b { padding: 24px; }
.panel-b.tight { padding: 20px 24px; }
.panel-f { padding: 14px 24px; }
.tbl th { height: 40px; }
.tbl td { height: 52px; }
.tbl th:first-child, .tbl td:first-child { padding-left: 24px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 24px; }
.tbl .c2 { padding-top: 12px; padding-bottom: 12px; }
.tbl.dense td { height: 44px; }
.tbl.dense .c2 { padding-top: 10px; padding-bottom: 10px; }
.spec > div { padding: 16px 24px; }
.drawer { width: 560px; }
.drawer-h { padding: 20px 24px; }
.drawer-f { padding: 14px 24px; }
.ins-sec { padding: 20px 24px; }
.ins-sec > .k { margin-bottom: 12px; }

/* The drawer button: what the page keeps to one side, with a count when it has one. */
.btn-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 3px; background: var(--surface-3); font-family: var(--mono); font-size: 11px; color: var(--text-2); }

/* Pagination, under every list. */
.pg { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 16px 8px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.pg.bare { border-top: 0; padding: 16px 0 0; min-height: 0; }
.pg-n b { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-sz { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.pg-sz .in { height: 28px; width: 72px; font-size: 12px; padding-top: 0; padding-bottom: 0; }
.pg-sz .sel > .i { top: 6px; }
.pg-nav { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.pg-sz + .pg-nav { margin-left: 8px; }
.pg-nav button { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-sm); font-family: var(--mono); font-size: 12px; color: var(--text-2); transition: background-color 0.12s, color 0.12s; }
.pg-nav button:hover { background: var(--hover); color: var(--text); }
.pg-nav button.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.pg-nav button[disabled] { opacity: 0.35; pointer-events: none; }
.pg-gap { min-width: 20px; text-align: center; color: var(--text-4); }
.pg-off { display: none !important; }
.tbl tbody tr.pg-last td { border-bottom: 0; }
.q-row.pg-last, .feed-i.pg-last, .act-p.pg-last, .bc.pg-last, .file.pg-last, .evp-frames li.pg-last, .evp-sim li.pg-last, .rl-row.pg-last { border-bottom: 0; }

/* Range status: a strip that opens each list, the fleet, then one list at a time. */
.brd-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.brd-k { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; min-width: 0; text-align: left; transition: background-color 0.12s; }
.brd-k + .brd-k { box-shadow: inset 1px 0 0 var(--line); }
.brd-k .k { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.brd-k .v { font-size: 22px; line-height: 28px; font-weight: 500; color: var(--text); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.brd-k .v .mono { font-size: 22px; }
.brd-k:first-child .v { font-size: 15px; line-height: 28px; }
.brd-k:first-child .v .mono { font-size: 13px; }
.brd-k .s { font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.brd-k:hover { background: var(--hover); }
button.brd-k.on { background: var(--surface-2); }
button.brd-k.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--text); }
.brd-fleet { margin: 0; }
.brd-fleet .fl-grp + .fl-grp { border-left: 0; border-top: 1px solid var(--line); }
.fl-grp-h { height: 40px; padding: 0 24px; }
.fleet { grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); }
.fl-ugv .fleet, .fl-uas .fleet { grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); }
.fl-tile { padding: 16px 20px 20px; gap: 10px; }
.brd-fleet .pg { border-top: 1px solid var(--line-2); }
.brd-tabs { display: flex; align-items: stretch; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); min-height: 56px; }
.brd-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color 0.12s; }
.brd-tab:first-child { margin-left: -12px; }
.brd-tab:hover { color: var(--text); }
.brd-tab.on { color: var(--text); }
.brd-tab.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--text); }
.brd-tab .nav-count { margin-left: 0; }
.brd-tabs-a { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; min-width: 0; }
.brd-tabs-a .t3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brd-lv { padding: 20px 24px 4px; border-bottom: 1px solid var(--line); }
.brd-lv .lvl-counts { gap: 12px; }
.brd-lv .lvl-counts > div { padding: 12px 16px; }
.brd-lv .lvl-bar { margin: 16px 0 16px; }
.brd-body .q-row { padding: 16px 24px; }
.brd-body > .empty { padding: 64px 24px; }
.lvl-tbl .l-t { width: auto; max-width: none; }

@media (max-width: 1100px) {
  .brd-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brd-k:nth-child(4) { box-shadow: inset 0 1px 0 var(--line); }
  .brd-k:nth-child(n+5) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}
@media (max-width: 640px) {
  .view { padding: 24px var(--pad) 72px; }
  .flow { gap: 16px; }
  .panel-h { padding: 12px 16px; }
  .panel-b { padding: 16px; }
  .panel-f { padding: 12px 16px; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 16px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 16px; }
  .drawer { width: 100vw; }
  .ins-sec { padding: 16px; }
  .pg { padding: 8px 8px 8px 16px; gap: 8px; }
  .pg-sz { display: none; }
  .brd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brd-k { padding: 14px 16px; }
  .brd-k, .brd-k + .brd-k { box-shadow: inset 0 -1px 0 var(--line); }
  .brd-k:nth-child(even) { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .brd-k .v, .brd-k .v .mono { font-size: 18px; line-height: 24px; }
  .brd-tabs { padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .brd-tab:first-child { margin-left: 0; }
  .brd-tabs-a { display: none; }
  .brd-lv { padding: 16px 16px 4px; }
  .brd-body .q-row { padding: 14px 16px; }
  .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-grp-h { padding: 0 16px; }
}

/* Incident reconstruction: the timeline, then the map, then the vehicle with its chain, one under the other. */
.inc-grid > .stack { gap: 24px; }
.recon, .recon.no-map { display: flex; flex-direction: column; gap: 24px; }
.recon-rail:empty { display: none; }
.recon .sit-map { flex: none; height: 460px; min-height: 0; }
.vc-p { display: flex; flex-direction: column; }
.vc-p .diag-b { display: flex; justify-content: center; padding: 28px 24px 32px; }
.vc-p .v-diag { width: 100%; max-width: 880px; }
.vc-chain { border-top: 1px solid var(--line); }
.vc-chain-h { display: flex; align-items: baseline; gap: 12px; padding: 20px 24px 4px; }
.vc-chain-h h3 { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); }
.vc-chain-h .sub { font-size: 12px; color: var(--text-3); }
.chn.h { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); padding: 12px 12px 20px; gap: 8px; }
.chn.h li { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.chn.h li:last-child { border-bottom: 1px solid var(--line-2); }
.chn.h li:hover { background: var(--hover); border-color: var(--line-3); }
.chn.h li.on { background: var(--sig-bg); border-color: var(--sig-bd); }
.chn.h .chn-top { display: flex; align-items: center; gap: 10px; }
.chn.h .n { min-width: 32px; padding: 0 6px; }
.chn.h .n.none { border-style: dashed; color: var(--text-3); }
.vc-empty .empty { padding: 32px 24px 40px; }
.vc-p .chn-sum { border-radius: 0 0 var(--r-md) var(--r-md); }
@media (max-width: 640px) {
  .recon .sit-map { height: 320px; }
  .vc-p .diag-b { overflow-x: auto; justify-content: flex-start; padding: 16px; }
  .vc-p .v-diag { min-width: 640px; }
  .chn.h { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 16px; }
  .chn.h li { display: flex; }
  .vc-chain-h { padding: 16px 16px 4px; flex-wrap: wrap; }
  .chn-sum { grid-template-columns: minmax(0, 1fr); }
  .chn-sum > div + div { border-left: 0; border-top: 1px solid var(--line-2); }
}

/* Pages in one column. */
.flow > .filters { margin-bottom: -8px; }
.rep-one .paper-wrap { padding: 48px 24px 56px; }
.drop { padding: 56px 24px; }
.evp-one { min-width: 0; }
.evp-main { gap: 24px; }
.evp-head { margin-bottom: 24px; }
.evp-bar { padding: 12px 0; margin-bottom: 28px; }
.evp-frames li:nth-child(6) { background: none; }
.evp-frames li.key { background: var(--sig-bg); }
.evp-dr .evp-ss { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 20px 24px; }
.evp-dr .evp-ss:last-child { border-bottom: 0; }
.evp-dr .evp-ss h3 { margin-bottom: 12px; }
.evp-dr .evp-sim li, .evp-dr .evp-sim li:first-child { padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--line-2); }
.evp-dr .evp-sim li.pg-last { border-bottom: 0; }
.rules-tbl .r-det { max-width: 420px; line-height: 18px; padding-top: 12px; padding-bottom: 12px; }
.rules-tbl .r-thr { min-width: 220px; }
.ar-tbl .ar-id, .au-tbl .ar-id { margin-right: 10px; vertical-align: 1px; }
.ar-tbl .ar-to { max-width: 320px; line-height: 18px; }
.au-tbl .au-trig { max-width: 420px; line-height: 18px; }
.dest-pick.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dest-pick.four .type { padding: 10px 12px; }
.in-pre { position: relative; }
.in-pre > .mono { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-3); pointer-events: none; }
.in-pre .in { width: 100%; padding-left: 84px; }
.checks.roomy { gap: 14px; }
.checks.roomy li { font-size: 13px; line-height: 20px; }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); text-align: left; transition: border-color 0.12s, background-color 0.12s; }
.pick:hover { border-color: var(--line-3); background: var(--hover); }
.pick.on { border-color: var(--text-3); background: var(--surface-3); }
.pick .mono { font-size: 12px; color: var(--text-2); }
.pick-t { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roles-tbl td.t2 { line-height: 18px; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 640px) {
  .rep-one .paper-wrap { padding: 12px; }
  .drop { padding: 36px 16px; }
  .dest-pick.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { grid-template-columns: minmax(0, 1fr) auto; }
  .pick .mono { display: none; }
  .runinc-tbl th:nth-child(3), .runinc-tbl th:nth-child(4) { display: none; }
}
.drawer-b > .pg.bare, .drawer-b > [data-pg] + .pg { padding: 12px 24px; border-top: 1px solid var(--line); min-height: 52px; }
.drawer-b > .act-ps .act-p { padding: 14px 24px; }
@media (max-width: 640px) {
  .ar-tbl th:nth-child(2), .ar-tbl td:nth-child(2), .ar-tbl th:nth-child(3), .ar-tbl td:nth-child(3), .ar-tbl th:nth-child(4), .ar-tbl td:nth-child(4),
  .au-tbl th:nth-child(2), .au-tbl td:nth-child(2), .au-tbl th:nth-child(3), .au-tbl td:nth-child(3),
  .imp-kinds th:nth-child(2), .imp-kinds td:nth-child(2), .imp-kinds th:nth-child(3), .imp-kinds td:nth-child(3),
  .imp-recent th:nth-child(2), .imp-recent td:nth-child(2) { display: none; }
  .rules-tbl th:nth-child(5), .rules-tbl td:nth-child(5) { display: table-cell; }
}

/* ── Phones and tablets ──────────────────────────────────────────────────────
   Long codes and paths break only when they cannot fit on a line of their own. Filter
   segments scroll inside themselves, and the automation result column leaves the table
   (it stays in the run drawer) before it gets too narrow to read. */
.view, .drawer, .modal { overflow-wrap: break-word; }
.switch::before { content: ''; position: absolute; inset: -8px -6px; }
@media (hover: none) { .p-edit { opacity: 1; } }
@media (max-width: 1100px) {
  .filters .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .seg::-webkit-scrollbar { display: none; }
}
@media (max-width: 960px) { .arun-tbl .a-res { display: none; } }
/* Form fields at 16px so phones do not zoom the page when a field takes focus. */
@media (max-width: 760px), (pointer: coarse) {
  .in, .in.mono, select.in, textarea.in, .pg-sz .in { font-size: 16px; }
}
@media (max-width: 760px) {
  #helpBtn { display: none; }
  .ctx-c .k, .spec .k, .brd-k .k { white-space: normal; }
  .drawer-f, .modal-f { flex-wrap: wrap; }
  .p-dsg { float: none; width: fit-content; max-width: 100%; margin: 0 0 16px; }
  .p-meta { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  .evp-sh { flex-wrap: wrap; row-gap: 8px; }
  .evp-sh .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .jk { min-width: 112px; flex-shrink: 1; }
  .jr > :last-child { min-width: 0; overflow-wrap: anywhere; }
  a.link, .evp-rawl, .p-edit { padding-block: 4px; }
  .bc-d summary, .evp-raw summary { min-height: 28px; }
}
@media (max-width: 480px) {
  .kv.tight, .kv.dsg, .evp-card .kv.tight { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .kv.tight dd, .kv.dsg dd { margin-bottom: 8px; }
  .evp-occ-n { flex-direction: column; gap: 8px; }
  .evp-occ-n > div { flex-direction: row; justify-content: space-between; align-items: baseline; min-width: 0; }
  .fmt-tbl .c-name { width: auto; } .fmt-tbl .c-cls { width: 72px; } .fmt-tbl .c-go { width: 36px; }
}

/* ── Charts (fx.charts.js) ───────────────────────────────────────────────── */
.chart { position: relative; min-width: 0; }
.chart-plot { width: 100%; min-width: 0; touch-action: pan-y; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }
.chart-legend .lg-i { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; color: var(--text-2); }
.chart-legend .lg-i .sw { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.chart-legend .lg-i.off { color: var(--text-4); text-decoration: line-through; }
.chart-legend .lg-i.off .sw { opacity: 0.25; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-base { stroke: var(--line-3); stroke-width: 1; }
.ch-ax { fill: var(--text-3); font-size: 11px; font-family: var(--mono); }
.ch-lab { fill: var(--text-2); font-size: 12px; }
.ch-lab.mono { font-family: var(--mono); font-size: 11.5px; }
.ch-val { fill: var(--text); font-size: 12px; font-family: var(--mono); }
.ch-sub { fill: var(--text-3); font-size: 11px; }
.ch-bar { transition: opacity 0.12s; }
.chart-plot:hover .ch-bar:not(.hl) { opacity: 0.55; }
.ch-track { fill: var(--surface-2); }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-line.dash { stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch-area { opacity: 0.1; }
.ch-dot { opacity: 0; transition: opacity 0.1s; }
.ch-dot.hl { opacity: 1; }
.ch-cursor { stroke: var(--line-3); stroke-width: 1; opacity: 0; }
.ch-cursor.hl { opacity: 1; }
.ch-cell { transition: stroke 0.1s; }
.ch-cell.none { fill: var(--surface-2); }
.ch-cell.hl { stroke: var(--text); stroke-width: 1.5; }
.tip .tip-r { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tip .tip-r i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.tip .tip-r em { margin-left: auto; padding-left: 16px; font-style: normal; font-family: var(--mono); font-size: 11px; }
.tip .tip-r.tot { border-top: 1px solid currentColor; border-color: rgba(127, 127, 127, 0.35); padding-top: 3px; }
.spark { display: block; }
.spark .sp-l { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; }
.spark .sp-a { fill: var(--text); opacity: 0.07; }
.ch-tbl td, .ch-tbl th { height: 36px; }

/* ── Reports ─────────────────────────────────────────────────────────────── */
.rp-page .rp-body { display: flex; flex-direction: column; gap: 24px; }
.rp-filters { margin-bottom: 24px; gap: 12px; }
.rp-filters .sel { width: 180px; }
.rp-range { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-3); font-size: 12px; }
.rp-figs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rp-fig { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 18px; min-width: 0; }
.rp-fig + .rp-fig { box-shadow: inset 1px 0 0 var(--line); }
.rp-fig .k { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.rp-fig .v { font-size: 24px; line-height: 30px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.rp-fig .d { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; line-height: 18px; min-height: 36px; align-content: flex-start; }
.rp-fig .spark { margin-top: auto; width: 100%; }
.kd { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.kd .i { width: 12px; height: 12px; }
.kd.good { color: var(--ok); }
.kd.bad { color: var(--warn); }
.rp-panel > .panel-h { align-items: flex-start; gap: 16px; }
.rp-ph { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-ph .sub { margin-left: 0; }
.rp-panel > .panel-h .ph-a { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.rp-panel > .panel-h .ph-a .btn.on { background: var(--surface-3); }
.rp-panel > .panel-b { padding: 20px 24px 24px; }
.rp-tb { margin-top: 20px; }
.rp-notes .rp-list { list-style: none; margin: 0; padding: 8px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.rp-notes .rp-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.rp-notes .rp-list li .i { margin-top: 3px; color: var(--text-3); }
.rp-notes .rp-list b { color: var(--text); font-weight: 500; }
.rp-up { color: var(--warn); }
.rp-down { color: var(--ok); }
.rp-veh .c-tr, .rp-rules .c-tr { width: 130px; }
.rp-lv { display: inline-flex; width: 96px; height: 8px; border-radius: 2px; overflow: hidden; vertical-align: middle; gap: 1px; margin-right: 8px; }
.rp-lv i { display: block; min-width: 3px; }
.num-s { font-size: 12px; font-variant-numeric: tabular-nums; }
.rp-kv { max-width: 520px; }
.rp-secs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.rp-secs li { font-size: 13px; line-height: 20px; }
.rp-secs li b { font-weight: 500; display: block; }
.rp-secs li .t3 { font-size: 12px; line-height: 18px; }
.rp-dl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-file { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rp-file .rp-fn { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.rp-sha { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.rp-sha .mono { overflow-wrap: anywhere; color: var(--text-2); }
.rp-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding-top: 4px; }
.rp-tpl { flex-wrap: wrap; }
.stack-16 { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stack-16 > .field + .field, .stack-16 > .field-row + .field, .stack-16 > .field + .field-row { margin-top: 0; }
.field-row:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ins-sec.flush-sec .tbl-wrap { margin: 0 -24px; }
.modal.xl { max-width: 1040px; }
.rp-doc { border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.rp-doc .rp-mk { background: var(--mark-cui); color: #fff; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 22px; }
.rp-doc-in { padding: 32px 36px; display: flex; flex-direction: column; gap: 24px; }
.rp-doc-h h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; margin: 6px 0 8px; }
.rp-doc-sec h3 { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); margin-bottom: 12px; }
.rp-doc-f { font-size: 12px; line-height: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 1280px) {
  .rp-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-fig:nth-child(4) { box-shadow: inset 0 1px 0 var(--line); }
  .rp-fig:nth-child(n+5) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}
@media (max-width: 760px) {
  .rp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-fig, .rp-fig + .rp-fig { box-shadow: inset 0 -1px 0 var(--line); padding: 14px 16px; }
  .rp-fig:nth-child(even) { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .rp-fig .v { font-size: 20px; line-height: 26px; }
  .rp-filters .sel { width: calc(50% - 6px); }
  .rp-range { margin-left: 0; width: 100%; }
  .rp-panel > .panel-h { flex-wrap: wrap; }
  .rp-panel > .panel-h .ph-a { margin-left: 0; }
  .rp-panel > .panel-b { padding: 16px; }
  .rp-veh .c-pl, .rp-veh .c-h, .rp-veh .c-tr, .rp-veh .c-inc, .rp-rules .c-p, .rp-rules .c-tr, .rp-rules .c-st, .rp-rules .c-inc,
  .rp-inc .c-imp, .rp-inc .c-lv, .rp-inc .c-ow, .rp-defs .c-cv, .rp-defs .c-ow, .rp-defs .c-last, .rp-docs .c-cv, .rp-docs .c-pg, .rp-grp th:nth-child(3), .rp-grp td:nth-child(3) { display: none; }
  .rp-pick, .field-row:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .rp-doc-in { padding: 20px 16px; }
  .ins-sec.flush-sec .tbl-wrap { margin: 0 -16px; }
}
.ch-ref { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.rp-fig .k { min-height: 32px; }
@media (max-width: 760px) { .rp-fig .k { min-height: 32px; } }
/* Figure cards: the value, its change as a tinted tag, and a trend chart against the period before. */
.rp-kpis { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-fig.rp-kpi { gap: 4px; padding-bottom: 14px; }
.rp-fig.rp-kpi .k { margin-bottom: 2px; }
.rp-fig .kv { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rp-fig.rp-kpi .v { font-size: 30px; line-height: 38px; letter-spacing: -0.01em; }
.rp-kpi .kd { padding: 1px 6px 1px 4px; border: 1px solid var(--line-3); border-radius: 3px; background: var(--surface-2); font-size: 12px; line-height: 18px; }
.rp-kpi .kd.same { padding-left: 6px; }
.rp-kpi .kd.good { background: var(--ok-bg); border-color: var(--ok-bd); }
.rp-kpi .kd.bad { background: var(--warn-bg); border-color: var(--warn-bd); }
.rp-fig.rp-kpi .d { min-height: 0; font-size: 12px; }
.rp-kc { margin-top: auto; padding-top: 12px; min-width: 0; }
.ch-fill { stroke: none; }
.ch-line.kc { stroke-width: 2; }
.ch-line.kp { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.kc-end { stroke: var(--surface); stroke-width: 2; }
.kp-end, .kp-dot { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.5; }
.ch-dot.kp-dot { opacity: 0; }
.ch-dot.kp-dot.hl { opacity: 1; }
.ch-band { fill: var(--text); opacity: 0; }
.ch-band.hl { opacity: 0.05; }
.tip .tip-r i.dash { height: 0; background: none; border-top: 2px dashed currentColor; border-radius: 0; opacity: 0.7; }
.spark .sp-b { stroke: var(--line-3); stroke-width: 1; }
.spark .sp-r { fill: var(--text-2); }
.rp-figs-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 0 2px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.rp-figs-lg span { display: inline-flex; align-items: center; gap: 8px; }
.rp-figs-lg .t3 { margin-left: auto; }
.rp-figs-lg .sw-l { width: 16px; height: 2px; background: var(--sig); }
.rp-figs-lg .sw-d { width: 16px; height: 0; border-top: 2px dashed var(--text-3); }
@media (max-width: 760px) { .rp-fig.rp-kpi .v { font-size: 24px; line-height: 30px; } .rp-figs-lg .t3 { margin-left: 0; } }
@media (min-width: 761px) and (max-width: 1600px) {
  .rp-kpis .rp-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-kpis .rp-fig:nth-child(4) { box-shadow: inset 0 1px 0 var(--line); }
  .rp-kpis .rp-fig:nth-child(n+5) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}