/* Auto-merge, with consequences — the page.
   Look: Helm's product system (notes/understand/brand-copy.md §3). One primary and it is ink; hues for status only
   (red = a consequence landed, amber = held for a person, neutral = merged). Inter with tabular figures at 500 for
   every number; mono only for hashes, routes and JSON. Light + dark (prefers-color-scheme, overridden by data-theme). */

@font-face {
  font-family: "Inter Helm";
  src: url("fonts/InterVariable-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens: light ---------- */
:root {
  --k-bg-base:#ffffff; --k-bg-primary:#ffffff; --k-bg-secondary:#fafafa; --k-bg-tertiary:#f5f5f5; --k-bg-quaternary:#e8e8e8;
  --k-bg-header:rgba(255,255,255,.7); --k-bg-tooltip:rgba(24,24,26,.9); --k-text-tooltip:#ffffff;
  --k-fill-primary:#18181a; --k-fill-primary-hover:#2c2c2e; --k-fill-secondary:#969696; --k-fill-tertiary:#d4d4d8;
  --k-fill-quaternary:#e8e8e8; --k-fill-quinary:#f0f0f0; --k-fill-inverse:#ffffff;
  --k-control-bg:#ffffff; --k-control-hover:#fafafa; --k-control-selected:#f1f1f1;
  --k-text-primary:#18181a; --k-text-secondary:#5f5f5f; --k-text-tertiary:#707070; --k-text-quaternary:#969696; --k-text-inverse:#ffffff;
  --k-red-base:#fb2c36;  --k-red-border:#ffe6e6;  --k-red-muted:#fef2f2;  --k-red-emphasis:#9f0712;
  --k-blue-base:#3080ff; --k-blue-border:#e0edff; --k-blue-muted:#eff6ff; --k-blue-emphasis:#1b3ea7;
  --k-green-base:#00a442;--k-green-border:#c7f4d7;--k-green-muted:#e6fbec;--k-green-emphasis:#0d542b;
  --k-amber-base:#f99c00;--k-amber-border:#f5ecc4;--k-amber-muted:#fffbeb;--k-amber-emphasis:#953d00;
  --k-shadow-1:rgba(0,0,0,.02); --k-shadow-2:rgba(0,0,0,.05); --k-shadow-3:#ebebeb; --k-shadow-outline:var(--k-shadow-2); --k-shadow-focus:#f2f2f2;
  --k-scrim:rgba(0,0,0,.2); --k-focus:#006bff;

  --shadow-flat:0 1px 2px var(--k-shadow-2),0 2px 4px var(--k-shadow-1),0 0 0 1px var(--k-shadow-3);
  --shadow-low:0 2px 4px var(--k-shadow-1);
  --shadow-medium:0 4px 4px var(--k-shadow-1),0 4px 80px 8px var(--k-shadow-1),0 0 0 1px var(--k-shadow-outline);
  --shadow-high:0 0 5px var(--k-shadow-1),0 16px 32px var(--k-shadow-2);

  --r-2:2px; --r-4:4px; --r-6:6px; --r-8:8px; --r-12:12px; --r-16:16px; --r-full:999px;
  --ease-out:cubic-bezier(0,0,.2,1); --ease-smooth:cubic-bezier(.4,0,.2,1); --ease-quint:cubic-bezier(.23,1,.32,1);
  --dur-fast:100ms; --dur-mid:200ms; --dur-panel:250ms; --dur-slow:300ms;

  --sans:"Inter Helm", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* page roles */
  --page-bg: var(--k-bg-secondary);
  --card-bg: var(--k-bg-primary);
  --hair: var(--k-fill-quaternary);
  --hair-soft: var(--k-fill-quinary);
  --gutter: 16px;
  --line-a: var(--k-red-base);
  --line-b: var(--k-fill-primary);
  color-scheme: light;
}

/* ---------- tokens: dark (system preference unless the page is forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-bg-base:#0e0e10; --k-bg-primary:#141416; --k-bg-secondary:#1a1a1c; --k-bg-tertiary:#242426; --k-bg-quaternary:#2e2e32;
    --k-bg-header:rgba(14,14,16,.7); --k-bg-tooltip:rgba(43,43,45,.9); --k-text-tooltip:#fafafa;
    --k-fill-primary:#ffffff; --k-fill-primary-hover:#f5f5f5; --k-fill-secondary:#6c6c75; --k-fill-tertiary:#535359;
    --k-fill-quaternary:#202022; --k-fill-quinary:#28282c; --k-fill-inverse:#0e0e10;
    --k-control-bg:#222225; --k-control-hover:#2e2e33; --k-control-selected:#333338;
    --k-text-primary:#fafafa; --k-text-secondary:#a8a8ad; --k-text-tertiary:#86868b; --k-text-quaternary:#636366; --k-text-inverse:#0a0a0b;
    --k-red-base:#ff6568;  --k-red-border:rgba(130,24,26,.2);  --k-red-muted:rgba(70,8,9,.7);
    --k-blue-base:#54a2ff; --k-blue-border:#043785;            --k-blue-muted:rgba(22,36,86,.7);
    --k-green-base:#05df72;--k-green-border:rgba(13,84,43,.4); --k-green-muted:rgba(3,46,21,.7);
    --k-amber-base:#fcbb00;--k-amber-border:rgba(123,51,6,.2); --k-amber-muted:rgba(70,25,1,.7);
    --k-red-emphasis:color-mix(in oklch, var(--k-red-base) 90%, white);
    --k-blue-emphasis:color-mix(in oklch, var(--k-blue-base) 90%, white);
    --k-green-emphasis:color-mix(in oklch, var(--k-green-base) 90%, white);
    --k-amber-emphasis:color-mix(in oklch, var(--k-amber-base) 90%, white);
    --k-shadow-1:transparent; --k-shadow-2:transparent; --k-shadow-3:#2b2b2f; --k-shadow-outline:var(--k-shadow-3); --k-shadow-focus:#2b2b2f;
    --k-scrim:rgba(0,0,0,.8);
    --page-bg: var(--k-bg-base);
    --hair: #242427;
    --hair-soft: #1d1d20;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --k-bg-base:#0e0e10; --k-bg-primary:#141416; --k-bg-secondary:#1a1a1c; --k-bg-tertiary:#242426; --k-bg-quaternary:#2e2e32;
  --k-bg-header:rgba(14,14,16,.7); --k-bg-tooltip:rgba(43,43,45,.9); --k-text-tooltip:#fafafa;
  --k-fill-primary:#ffffff; --k-fill-primary-hover:#f5f5f5; --k-fill-secondary:#6c6c75; --k-fill-tertiary:#535359;
  --k-fill-quaternary:#202022; --k-fill-quinary:#28282c; --k-fill-inverse:#0e0e10;
  --k-control-bg:#222225; --k-control-hover:#2e2e33; --k-control-selected:#333338;
  --k-text-primary:#fafafa; --k-text-secondary:#a8a8ad; --k-text-tertiary:#86868b; --k-text-quaternary:#636366; --k-text-inverse:#0a0a0b;
  --k-red-base:#ff6568;  --k-red-border:rgba(130,24,26,.2);  --k-red-muted:rgba(70,8,9,.7);
  --k-blue-base:#54a2ff; --k-blue-border:#043785;            --k-blue-muted:rgba(22,36,86,.7);
  --k-green-base:#05df72;--k-green-border:rgba(13,84,43,.4); --k-green-muted:rgba(3,46,21,.7);
  --k-amber-base:#fcbb00;--k-amber-border:rgba(123,51,6,.2); --k-amber-muted:rgba(70,25,1,.7);
  --k-red-emphasis:color-mix(in oklch, var(--k-red-base) 90%, white);
  --k-blue-emphasis:color-mix(in oklch, var(--k-blue-base) 90%, white);
  --k-green-emphasis:color-mix(in oklch, var(--k-green-base) 90%, white);
  --k-amber-emphasis:color-mix(in oklch, var(--k-amber-base) 90%, white);
  --k-shadow-1:transparent; --k-shadow-2:transparent; --k-shadow-3:#2b2b2f; --k-shadow-outline:var(--k-shadow-3); --k-shadow-focus:#2b2b2f;
  --k-scrim:rgba(0,0,0,.8);
  --page-bg: var(--k-bg-base);
  --hair: #242427;
  --hair-soft: #1d1d20;
  color-scheme: dark;
}

@media (min-width: 1400px) { :root { --gutter: 24px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--k-text-primary);
  font: 400 13px/18px var(--sans);
  font-feature-settings: "cv01", "ss02", "ss03", "cv05";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  transition: background-color var(--dur-panel) var(--ease-smooth);
}
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 3px; }
.num, .fig { font-variant-numeric: tabular-nums; font-weight: 500; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.card {
  background: var(--card-bg);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-medium);
  min-width: 0;
}

/* ---------- the app frame: one screen at 1440x900 ---------- */
.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 var(--gutter) 12px;
  min-width: 0;
}
body.has-mock .app { height: calc(100dvh - 40px); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 52px; min-width: 0;
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 20px; height: 20px; flex: none; color: var(--k-text-primary); }
.brand-word { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.25px; }
.brand-sep { width: 1px; height: 18px; background: var(--k-fill-tertiary); }
.brand-title { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.25px; white-space: nowrap; }
.honesty { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
.synth-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border: 1px solid currentColor; border-radius: var(--r-full);
  color: var(--k-amber-emphasis); font-size: 12px; line-height: 16px; font-weight: 600;
  white-space: nowrap; flex: none; cursor: help;
}
.honesty-note { color: var(--k-text-secondary); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px 0 9px;
  border-radius: var(--r-full); background: var(--k-bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 12px; line-height: 16px; color: var(--k-text-primary); white-space: nowrap; flex: none;
}
.live-chip .live-word { font-weight: 600; font-size: 11px; color: var(--k-text-secondary); }
.live-chip .live-ms { color: var(--k-text-tertiary); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--k-fill-secondary); flex: none; transition: background-color var(--dur-mid); }
.live-chip.on .live-dot { background: var(--k-green-base); }
.live-chip.on .live-word { color: var(--k-green-emphasis); }
.live-chip.on .live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--k-green-base); opacity: 0;
  animation: ripple 1.1s var(--ease-out) infinite;
}
.live-chip.down { background: var(--k-red-muted); box-shadow: inset 0 0 0 1px var(--k-red-border); color: var(--k-red-emphasis); }
.live-chip.down .live-dot { background: var(--k-red-base); }
.live-chip.down .live-word { color: var(--k-red-emphasis); }
@keyframes ripple { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

.top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-6);
  background: var(--k-control-bg); color: var(--k-text-primary);
  box-shadow: var(--shadow-flat);
  font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--k-control-hover); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--k-fill-primary); color: var(--k-text-inverse); box-shadow: var(--shadow-flat); }
.btn.primary:hover { background: var(--k-fill-primary-hover); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--k-text-secondary); }
.btn.ghost:hover { background: var(--k-bg-tertiary); color: var(--k-text-primary); }
.btn.icon { width: 28px; padding: 0; }
.btn svg { width: 14px; height: 14px; flex: none; }
.kbd { font-size: 11px; color: var(--k-text-tertiary); font-weight: 500; }
.btn.primary .kbd { color: color-mix(in srgb, var(--k-text-inverse) 60%, transparent); }

/* ---------- clock row ---------- */
.clockrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-width: 0; padding-top: 2px; }
.clock { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.clock-date { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; }
.clock-day { color: var(--k-text-secondary); font-size: 13px; }
.clock-day .num { color: var(--k-text-primary); }
.phase-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  background: var(--k-bg-tertiary); color: var(--k-text-secondary); box-shadow: inset 0 0 0 1px var(--hair);
  align-self: center;
}
.phase-chip.retraining { background: var(--k-fill-primary); color: var(--k-text-inverse); box-shadow: none; }
.phase-chip.retraining::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.subtitle { color: var(--k-text-secondary); font-size: 13px; line-height: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.subtitle b { color: var(--k-text-primary); font-weight: 500; }
.controls { display: flex; align-items: center; gap: 8px; }
.seg {
  display: inline-flex; height: 28px; padding: 2px; gap: 2px; border-radius: var(--r-8);
  background: var(--k-bg-tertiary); box-shadow: inset 0 0 0 1px var(--hair);
}
.seg button {
  border: 0; background: transparent; height: 24px; min-width: 38px; padding: 0 8px; border-radius: var(--r-6);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--k-text-secondary); cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.seg button:hover { color: var(--k-text-primary); }
.seg button[aria-pressed="true"] { background: var(--k-control-bg); color: var(--k-text-primary); box-shadow: var(--shadow-flat); }

.timeline { position: relative; height: 20px; margin-top: 4px; }
.timeline-track { position: absolute; left: 0; right: 0; top: 3px; height: 2px; border-radius: 2px; background: var(--hair); }
.timeline-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--k-fill-primary); transition: width 400ms linear; }
.timeline-fill::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--k-fill-primary); box-shadow: 0 0 0 3px var(--page-bg); }
.tk { position: absolute; top: 0; width: 1px; height: 8px; background: var(--k-fill-tertiary); }
.tk.tk-retrain { background: var(--k-text-tertiary); }
.tk.tk-world { background: var(--k-amber-base); width: 2px; }
.tk > span {
  position: absolute; top: 8px; left: 4px; font-size: 10px; line-height: 12px; color: var(--k-text-tertiary);
  white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500;
}
.tk.tk-world > span { color: var(--k-amber-emphasis); }
.tk.end > span { left: auto; right: 4px; }
.tk.past > span { color: var(--k-text-quaternary); }

/* ---------- KPI strip ---------- */
.kpis { display: grid; grid-template-columns: 1.25fr 0.9fr 1fr 1.25fr 1fr; min-width: 0; }
.kpi { position: relative; padding: 12px 16px 12px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kpi + .kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--hair); }
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 16px; color: var(--k-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-label .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--k-fill-tertiary); }
.dot.red { background: var(--k-red-base) !important; }
.dot.amber { background: var(--k-amber-base) !important; }
.dot.ink { background: var(--k-fill-primary) !important; }
.kpi-row { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.kpi-side { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kpi-big { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; }
.kpi-big.dim { color: var(--k-text-secondary); }
.kpi-unit { font-size: 13px; color: var(--k-text-tertiary); }
.kpi-sub { font-size: 12px; line-height: 16px; color: var(--k-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub .num { color: var(--k-text-secondary); }
.lane-tag {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; flex: none;
  font-size: 10px; line-height: 1; font-weight: 600; transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); color: var(--k-text-secondary);
}
.lane-tag.b { background: var(--k-fill-primary); color: var(--k-text-inverse); box-shadow: none; }
.kpi-bars { display: grid; gap: 3px; margin-top: 2px; }
.kpi-bars i { display: block; height: 3px; border-radius: 2px; width: 0; transition: width 600ms var(--ease-quint); background: var(--k-fill-tertiary); }
.kpi-bars i.red { background: var(--k-red-base); }
.kpi-bars i.ink { background: var(--k-fill-primary); }
.kpi-bars i.soft { background: var(--k-fill-tertiary); }
.illus {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-full);
  font-size: 10px; line-height: 14px; font-weight: 500; color: var(--k-text-tertiary);
  box-shadow: inset 0 0 0 1px var(--hair); white-space: nowrap;
}
.kpi .illus { margin-left: auto; align-self: center; }

/* ---------- stage ---------- */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 344px; gap: 12px; min-height: 0; min-width: 0; }
.lane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lane-head { padding: 11px 16px 10px; border-bottom: 1px solid var(--hair); min-width: 0; }
.lane-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.lane-title { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; min-width: 0; }
.lane-title .lane-tag { transform: none; width: 18px; height: 18px; font-size: 11px; }
.lane-sub { font-size: 12px; line-height: 16px; color: var(--k-text-secondary); margin-top: 3px; padding-left: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-stats { display: flex; gap: 12px; flex: none; font-size: 12px; line-height: 16px; color: var(--k-text-tertiary); white-space: nowrap; }
.lane-stat .num { font-size: 13px; color: var(--k-text-primary); }
.lane-stat.red .num { color: var(--k-red-emphasis); }
.lane-stat.amber .num { color: var(--k-amber-emphasis); }
.gate-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-full);
  font-size: 11px; line-height: 14px; font-weight: 500; white-space: nowrap;
  background: var(--k-bg-tertiary); color: var(--k-text-secondary); box-shadow: inset 0 0 0 1px var(--hair);
}
.chip.ink { background: var(--k-fill-primary); color: var(--k-text-inverse); box-shadow: none; }
.chip .num { color: inherit; }

/* feed: a tape that slides new rows in from the top */
.feed { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.feed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--card-bg)); }
.tape { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.feed-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--k-text-tertiary); font-size: 12px; text-align: center; padding: 16px; }
.frozen-pill {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 3;
  height: 24px; padding: 0 10px; border-radius: var(--r-full); display: inline-flex; align-items: center; gap: 6px;
  background: var(--k-fill-primary); color: var(--k-text-inverse); font-size: 12px; font-weight: 500; box-shadow: var(--shadow-high);
  animation: drop-in 200ms var(--ease-quint);
}
@keyframes drop-in { from { transform: translate(-50%, -6px); opacity: 0; } }

.pr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px; border-bottom: 1px solid var(--hair-soft);
  cursor: pointer; position: relative;
  transition: background-color var(--dur-fast);
}
.pr:hover { background: var(--k-bg-secondary); }
.pr-main { min-width: 0; display: grid; gap: 3px; }
.pr-l1 { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 18px; }
.pr-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--k-text-tertiary); white-space: nowrap; }
.agent { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--k-text-secondary); font-size: 12px; }
.agent i {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  background: var(--k-bg-tertiary); box-shadow: inset 0 0 0 1px var(--hair); color: var(--k-text-primary); font-size: 11px; font-weight: 500;
}
.repo { color: var(--k-text-secondary); flex: none; font-size: 12px; }
.prnum { color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; flex: none; font-size: 12px; }
.pr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text-primary); }
.diffsz { flex: none; margin-left: auto; color: var(--k-text-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 500; padding-left: 4px; }
.pbar { position: relative; width: 72px; height: 4px; border-radius: 2px; background: var(--k-fill-quaternary); flex: none; overflow: visible; }
.pbar > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--k-fill-secondary); width: var(--w, 0%); transform-origin: left; animation: grow 320ms var(--ease-quint) both; }
.pbar.hot > b { background: var(--k-amber-base); }
.pbar > s { position: absolute; top: -3px; width: 1px; height: 10px; background: var(--k-text-secondary); text-decoration: none; }
@keyframes grow { from { transform: scaleX(0); } }
.pval { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--k-text-secondary); min-width: 30px; }
.pval.hot { color: var(--k-amber-emphasis); }
.ms { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--k-text-tertiary); }
.ver { color: var(--k-text-tertiary); }
.pr-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* stamps (title case: tiers by size and colour, never uppercase) */
.stamp {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-6);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; flex: none;
  background: var(--k-bg-tertiary); color: var(--k-text-secondary); box-shadow: inset 0 0 0 1px var(--hair);
}
.stamp svg { width: 12px; height: 12px; }
.stamp.merged { background: transparent; }
.stamp.held { background: var(--k-amber-muted); color: var(--k-amber-emphasis); box-shadow: inset 0 0 0 1px var(--k-amber-border); }
.stamp.held.unavail { box-shadow: inset 0 0 0 1px var(--k-amber-base); background: transparent; }
.stamp.red { background: var(--k-red-muted); color: var(--k-red-emphasis); box-shadow: inset 0 0 0 1px var(--k-red-border); }
.stamp.red.solid { background: var(--k-red-base); color: #fff; box-shadow: none; }
.stamp.avoided { background: transparent; color: var(--k-text-primary); box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); }
.stamp.caught { background: var(--k-amber-muted); color: var(--k-amber-emphasis); box-shadow: inset 0 0 0 1px var(--k-amber-border); }
.stamp.land { animation: stamp-land 340ms var(--ease-quint) both; }
@keyframes stamp-land { 0% { transform: scale(1.45); opacity: 0; } 55% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
.pr.lane-b .stamp { animation: stamp-land 240ms var(--ease-quint) 60ms both; }
.pr.flash-red { animation: flash-red 900ms var(--ease-out); }
.pr.dim, .cq.dim { opacity: .5; }
@keyframes flash-red { 0% { background: var(--k-red-muted); } 100% { background: transparent; } }
.pr .consq-stamp { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* consequence tray */
.tray { flex: none; height: 184px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; background: var(--k-bg-secondary); border-radius: 0 0 var(--r-12) var(--r-12); }
:root[data-theme="dark"] .tray { background: #121214; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tray { background: #121214; } }
.tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 16px 7px; font-size: 12px; line-height: 16px; color: var(--k-text-secondary); }
.tray-head b { color: var(--k-text-primary); font-weight: 600; }
.tray-head .num { color: var(--k-text-primary); }
.tray .feed::after { background: linear-gradient(to bottom, transparent, var(--k-bg-secondary)); }
:root[data-theme="dark"] .tray .feed::after { background: linear-gradient(to bottom, transparent, #121214); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tray .feed::after { background: linear-gradient(to bottom, transparent, #121214); } }
.cq {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px; cursor: pointer; border-top: 1px solid var(--hair-soft);
}
.cq:hover { background: var(--k-bg-tertiary); }
.cq .stamp { justify-self: start; }
.cq-main { min-width: 0; display: grid; gap: 2px; }
.cq-l1 { display: flex; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; }
.cq-l1 .pr-title { color: var(--k-text-primary); }
.cq-l2 { font-size: 12px; line-height: 16px; color: var(--k-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-l2 s { text-decoration-color: var(--k-text-tertiary); color: var(--k-text-tertiary); }
.cq-day { font-size: 11px; color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.cq.flash { animation: flash-red 1000ms var(--ease-out); }
.cq.flash-soft { animation: flash-soft 1000ms var(--ease-out); }
@keyframes flash-soft { 0% { background: var(--k-bg-quaternary); } 100% { background: transparent; } }

/* ---------- right rail ---------- */
.rail { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 6px; }
.panel-title { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 16px; font-size: 11px; line-height: 14px; color: var(--k-text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.legend i.a { background: var(--line-a); }
.legend i.b { background: var(--line-b); }
.legend i.h { height: 8px; width: 8px; border-radius: 2px; background: color-mix(in srgb, var(--k-amber-base) 30%, transparent); }
.chart { position: relative; height: 156px; padding: 4px 8px 8px 4px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart text { font-family: var(--sans); font-size: 10px; fill: var(--k-text-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; }
.chart .grid { stroke: var(--hair); stroke-width: 1; }
.chart .held { fill: var(--k-amber-base); fill-opacity: .18; }
.chart .la { fill: none; stroke: var(--line-a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .lb { fill: none; stroke: var(--line-b); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area-a { fill: var(--k-red-base); opacity: .07; }
.chart .pa { fill: var(--card-bg); stroke: var(--line-a); stroke-width: 1.5; }
.chart .pb { fill: var(--card-bg); stroke: var(--line-b); stroke-width: 1.5; }
.chart .now-a { fill: var(--line-a); }
.chart .now-b { fill: var(--line-b); }
.chart .pulse { animation: pulse 1.4s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.chart .vline { stroke: var(--k-text-primary); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .wline { stroke: var(--k-amber-base); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .vtag rect { fill: var(--k-fill-primary); }
.chart .vtag text { fill: var(--k-text-inverse); font-size: 10px; font-weight: 600; }
.chart .wtag text { fill: var(--k-amber-emphasis); font-weight: 500; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--k-text-tertiary); }

.versions { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.policy { margin: 0 16px 8px; padding-left: 10px; border-left: 2px solid var(--k-fill-tertiary); font-size: 11px; line-height: 15px; color: var(--k-text-secondary); }
.outcomes-note { font-size: 11px; line-height: 14px; color: var(--k-text-tertiary); white-space: nowrap; }
.outcomes-note .num { color: var(--k-text-primary); }
.vcard.compact { padding: 7px 12px; }
.vlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%); }
.vlist::-webkit-scrollbar { display: none; }
.vcard { border-radius: var(--r-8); padding: 10px 12px; background: var(--k-bg-secondary); box-shadow: inset 0 0 0 1px var(--hair); animation: rise 300ms var(--ease-quint) both; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }
.vcard.current { background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); }
.vcard.upcoming { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); border: 0; color: var(--k-text-tertiary); padding: 7px 12px; outline: 1px dashed var(--k-fill-tertiary); outline-offset: -1px; box-shadow: none; }
.vrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vname { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: var(--r-6); background: var(--k-fill-primary); color: var(--k-text-inverse); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.vname.ghost { background: transparent; color: var(--k-text-secondary); box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); }
.vtitle { font-size: 13px; line-height: 18px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vmeta { font-size: 12px; line-height: 16px; color: var(--k-text-secondary); margin-top: 4px; }
.vmeta .num { color: var(--k-text-primary); }
.vside { margin-left: auto; font-size: 11px; color: var(--k-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.sentence { margin-top: 6px; font-size: 12px; line-height: 17px; color: var(--k-text-secondary); }
.sentence q { quotes: "\201C" "\201D"; color: var(--k-text-primary); }
.decision { font-weight: 600; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 17px; font-size: 12px; line-height: 16px; color: var(--k-text-quaternary); }
.step::before { content: ""; position: absolute; left: 6px; top: -5px; height: 10px; width: 1px; background: var(--hair); }
.step:first-child::before { display: none; }
.step i { width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); background: transparent; }
.step.done { color: var(--k-text-secondary); }
.step.done i { background: var(--k-fill-primary); box-shadow: none; }
.step.done::before, .step.cur::before { background: var(--k-fill-primary); }
.step.cur { color: var(--k-text-primary); font-weight: 500; }
.step.cur i { background: var(--k-fill-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-fill-primary) 18%, transparent); animation: cur 1s var(--ease-smooth) infinite alternate; }
@keyframes cur { to { box-shadow: 0 0 0 5px color-mix(in srgb, var(--k-fill-primary) 6%, transparent); } }
.step .t { font-size: 11px; color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; }
.step.fail { color: var(--k-red-emphasis); }
.step.fail i { background: var(--k-red-base); box-shadow: none; }
.vcard .more { margin-top: 6px; font-size: 11px; color: var(--k-text-tertiary); }
.rehearsed { margin-top: 6px; font-size: 12px; color: var(--k-text-secondary); }

/* ---------- calls strip ---------- */
.calls {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  height: 36px; padding: 0 6px 0 12px; border-radius: var(--r-8);
  background: var(--card-bg); box-shadow: var(--shadow-medium); cursor: pointer; min-width: 0;
}
.calls:hover { background: var(--k-bg-secondary); }
.calls-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.calls-label .live-dot { width: 6px; height: 6px; }
.calls.on .calls-label .live-dot { background: var(--k-green-base); }
.calls-spark { width: 140px; height: 20px; display: block; }
.calls-last { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--k-text-secondary); }
.calls-last .mono { font-size: 11.5px; color: var(--k-text-primary); }
.calls-last .ok { color: var(--k-text-secondary); }
.calls-last .bad { color: var(--k-red-emphasis); }
.calls-last.fresh { animation: fresh 260ms var(--ease-out); }
@keyframes fresh { from { opacity: .35; } }
.calls-stats { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--k-text-tertiary); white-space: nowrap; }
.calls-stats .num { color: var(--k-text-primary); }
.calls-stats .mono { font-size: 11px; color: var(--k-text-secondary); }
.calls-open { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--r-6); color: var(--k-text-secondary); font-size: 12px; font-weight: 500; }
.calls:hover .calls-open { color: var(--k-text-primary); background: var(--k-bg-tertiary); }

/* ---------- world-event banner ---------- */
.world {
  position: absolute; z-index: 20; left: 50%; top: 10px; width: min(720px, calc(100% - 24px));
  transform: translateX(-50%);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px 14px 18px; border-radius: var(--r-12);
  background: var(--k-fill-primary); color: var(--k-text-inverse); box-shadow: var(--shadow-high), 0 12px 40px rgba(0,0,0,.18);
  animation: world-in 420ms var(--ease-quint) both;
}
.world.out { animation: world-out 320ms var(--ease-smooth) both; }
@keyframes world-in { from { transform: translate(-50%, -16px) scale(.98); opacity: 0; } }
@keyframes world-out { to { transform: translate(-50%, -12px); opacity: 0; } }
.world-day { font-size: 12px; line-height: 16px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-6); background: var(--k-amber-base); color: #1a1100; font-variant-numeric: tabular-nums; white-space: nowrap; }
.world-title { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.1px; }
.world-body { font-size: 13px; line-height: 18px; opacity: .72; margin-top: 2px; }
.world-x { opacity: .6; cursor: pointer; background: transparent; border: 0; color: inherit; padding: 4px; }

/* ---------- overlays: pre-roll, summary ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--page-bg) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  animation: fade-in 260ms var(--ease-smooth) both; overflow-y: auto;
}
body.has-mock .overlay { top: 40px; }
.overlay.leaving { animation: fade-out 420ms var(--ease-smooth) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.pre { width: min(1120px, 100%); display: grid; gap: 22px; }
.pre-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--k-text-secondary); display: flex; align-items: center; gap: 8px; }
.pre h1 { margin: 0; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.8px; animation: rise 500ms var(--ease-quint) both; }
.pre .lede { margin: 10px 0 0; font-size: 18px; line-height: 26px; color: var(--k-text-secondary); max-width: 760px; animation: rise 500ms var(--ease-quint) 80ms both; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; animation: rise 500ms var(--ease-quint) 160ms both; }
.fact { padding: 12px 14px; border-radius: var(--r-12); box-shadow: inset 0 0 0 1px var(--hair); background: color-mix(in srgb, var(--card-bg) 70%, transparent); }
.fact-n { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; }
.fact-t { font-size: 12px; line-height: 17px; color: var(--k-text-secondary); margin-top: 2px; }
.fact-c { font-size: 11px; line-height: 14px; color: var(--k-text-tertiary); margin-top: 6px; }
.facts-note { font-size: 11px; color: var(--k-text-tertiary); margin-top: -14px; }
.pre-steps { display: grid; grid-template-columns: 1.15fr 1.15fr 0.8fr; gap: 12px; align-items: stretch; animation: rise 500ms var(--ease-quint) 240ms both; }
.pre-step { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pre-step-h { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.stepno { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); color: var(--k-text-secondary); flex: none; }
.stepno.ok { background: var(--k-fill-primary); color: var(--k-text-inverse); box-shadow: none; }
.stepno.run { box-shadow: inset 0 0 0 1.5px var(--k-fill-primary); color: var(--k-text-primary); }
.pre-step-sub { font-size: 12px; line-height: 16px; color: var(--k-text-secondary); }
.gate-figs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 26px; margin: 4px 0 6px; }
.gate-fig .v { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.gate-fig .l { font-size: 11px; line-height: 14px; color: var(--k-text-tertiary); margin-top: 1px; }
.gate-q { font-size: 12px; line-height: 17px; color: var(--k-text-primary); }
#gateCard { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
#gateCard .gate-figs { margin: 2px 0 0; }
.pre-step .foot { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.score-line { font-size: 12px; line-height: 17px; color: var(--k-text-secondary); }
.score-line .num { color: var(--k-text-primary); }
.caveat { font-size: 12px; line-height: 17px; color: var(--k-text-secondary); padding-left: 10px; border-left: 2px solid var(--k-amber-base); }
.link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--k-text-primary); text-decoration: underline; text-decoration-color: var(--k-fill-tertiary); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
.link svg { width: 12px; height: 12px; }
.muted { color: var(--k-text-tertiary); }
.building { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--k-text-secondary); }
.spinner { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--k-fill-tertiary); border-top-color: var(--k-fill-primary); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.rgrid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin-top: 2px; }
.rgrid i { aspect-ratio: 1; border-radius: 2px; background: var(--k-fill-quinary); box-shadow: inset 0 0 0 1px var(--hair); position: relative; }
.rgrid i.m { background: var(--k-fill-tertiary); box-shadow: none; animation: pop 240ms var(--ease-quint) both; }
.rgrid i.h { background: var(--k-amber-base); box-shadow: none; animation: pop 240ms var(--ease-quint) both; }
.rgrid i.miss { background: var(--k-red-base); box-shadow: none; animation: pop 240ms var(--ease-quint) both; }
.rgrid i.h.c::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--k-red-emphasis); }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.rlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--k-text-secondary); }
.rlegend span { display: inline-flex; align-items: center; gap: 5px; }
.rlegend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; position: relative; }
.rlegend i.m { background: var(--k-fill-tertiary); }
.rlegend i.h { background: var(--k-amber-base); }
.rlegend i.hc { background: var(--k-amber-base); }
.rlegend i.hc::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--k-red-emphasis); }
.rlegend i.miss { background: var(--k-red-base); }
.rtally { font-size: 12px; color: var(--k-text-secondary); }
.rtally .num { color: var(--k-text-primary); }
.next-build { font-size: 11px; color: var(--k-text-tertiary); }
.golive .btn.primary { margin-top: auto; }
.golive .btn.primary { height: 38px; font-size: 14px; padding: 0 16px; width: 100%; }
.golive p { margin: 0; font-size: 12px; line-height: 17px; color: var(--k-text-secondary); }

.sum { width: min(860px, 100%); padding: 24px 26px 22px; display: grid; gap: 18px; animation: rise 420ms var(--ease-quint) both; }
.sum h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.4px; }
.sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sum-lane { padding: 14px 16px; border-radius: var(--r-12); box-shadow: inset 0 0 0 1px var(--hair); display: grid; gap: 10px; }
.sum-lane h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sum-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.sum-fig .v { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; }
.sum-fig .v.red { color: var(--k-red-emphasis); }
.sum-fig .v.sm { font-size: 20px; white-space: nowrap; }
.sum-lane h3 { min-height: 18px; }
.sum-fig .l { font-size: 12px; color: var(--k-text-secondary); }
.sum-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.closer { width: min(860px, 100%); padding: 26px 28px 24px; display: grid; gap: 16px; animation: rise 420ms var(--ease-quint) both; }
.closer h2 { margin: 0; font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.5px; }
.closer .lede { margin: 0; font-size: 15px; line-height: 22px; color: var(--k-text-secondary); max-width: 680px; }
.ledger-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ledger-figs > div { padding: 12px 14px; border-radius: var(--r-12); box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.ledger-figs .v { font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-figs .v.mono { font-size: 13px; line-height: 28px; font-weight: 400; }
.ledger-figs .l { font-size: 12px; color: var(--k-text-secondary); }
.ledger-today { display: grid; gap: 0; border-radius: var(--r-12); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.ledger-today > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 14px; font-size: 12px; border-top: 1px solid var(--hair-soft); }
.ledger-today > div:first-child { border-top: 0; }
.ledger-pending { padding: 14px 16px; border-radius: var(--r-12); box-shadow: inset 0 0 0 1px var(--hair); display: grid; gap: 6px; font-size: 13px; color: var(--k-text-secondary); }
.ledger-pending b { color: var(--k-text-primary); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--k-scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-panel) var(--ease-smooth); }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--card-bg); box-shadow: var(--shadow-high), 0 0 0 1px var(--k-shadow-3);
  transform: translateX(104%); transition: transform var(--dur-panel) var(--ease-smooth);
  display: flex; flex-direction: column; min-width: 0;
}
.drawer.show { transform: none; visibility: visible; transition: transform var(--dur-panel) var(--ease-smooth), visibility 0s; }
.drawer:not(.show) { visibility: hidden; transition: transform var(--dur-panel) var(--ease-smooth), visibility 0s linear var(--dur-panel); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--hair); }
.drawer-head h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.25px; overflow-wrap: anywhere; }
.drawer-head .sub { font-size: 12px; color: var(--k-text-secondary); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 18px 24px; min-width: 0; }
.dsec { padding: 14px 0 6px; border-top: 1px solid var(--hair-soft); }
.dsec:first-child { border-top: 0; }
.dsec h3 { margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dsec h3 .muted { font-weight: 400; font-size: 12px; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 16px; font-size: 12px; line-height: 17px; }
.kv dt { color: var(--k-text-secondary); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dd.num { font-weight: 500; }
.answer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.answer .big { font-size: 28px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.25px; }
.answer .pbar { width: 160px; height: 6px; }
.answer .pbar > s { top: -4px; height: 14px; }
.reasons { display: grid; gap: 5px; margin-top: 10px; }
.reason { display: grid; grid-template-columns: minmax(0, 1fr) 140px 46px; align-items: center; gap: 10px; font-size: 12px; }
.reason .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text-secondary); }
.rbar { position: relative; height: 6px; background: var(--k-fill-quinary); border-radius: 3px; }
.rbar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--k-fill-tertiary); }
.rbar b { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--k-fill-primary); }
.rbar b.neg { background: var(--k-fill-secondary); }
.reason .rv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--k-text-secondary); }
pre.code {
  margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-8); background: var(--k-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--mono); font-size: 11.5px; line-height: 16px;
  white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow: auto; color: var(--k-text-primary);
}
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 56px 14px minmax(0, 1fr); gap: 8px; padding: 5px 0; font-size: 12px; line-height: 17px; }
.tl li .d { color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.tl li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 4.5px; margin-left: 3px; background: var(--k-fill-tertiary); }
.tl li.red i { background: var(--k-red-base); }
.tl li.amber i { background: var(--k-amber-base); }
.tl li.ink i { background: var(--k-fill-primary); }
.tl li.green i { background: var(--k-green-base); }
.callrow { border-top: 1px solid var(--hair-soft); padding: 10px 0; }
.callrow summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 12px; }
.callrow summary::-webkit-details-marker { display: none; }
.callrow .route { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callrow .st { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--k-text-secondary); }
.callrow .st.bad { color: var(--k-red-emphasis); }
.callrow .when { font-size: 11px; color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; }
.callrow .sum-t { grid-column: 2 / -1; color: var(--k-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callrow h4 { margin: 10px 0 0; font-size: 11px; font-weight: 500; color: var(--k-text-secondary); display: flex; justify-content: space-between; align-items: center; }
.copy { border: 0; background: transparent; color: var(--k-text-secondary); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: var(--r-4); }
.copy:hover { background: var(--k-bg-tertiary); color: var(--k-text-primary); }
.method { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-4); background: var(--k-bg-tertiary); color: var(--k-text-secondary); box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- about popover ---------- */
.popover {
  position: fixed; z-index: 70; top: 56px; right: var(--gutter); width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--card-bg); border-radius: var(--r-12); box-shadow: var(--shadow-high), 0 0 0 1px var(--k-shadow-3);
  padding: 16px 18px; animation: pop-in 200ms var(--ease-quint) both;
}
body.has-mock .popover { top: 96px; }
@keyframes pop-in { from { transform: translateY(-4px); opacity: 0; } }
.popover h2 { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; }
.popover p.lead { margin: 0 0 10px; font-size: 12px; line-height: 17px; color: var(--k-text-secondary); }
.popover ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.popover li { font-size: 12px; line-height: 17px; color: var(--k-text-secondary); padding-left: 12px; position: relative; }
.popover li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--k-fill-secondary); }
.popover li b { color: var(--k-text-primary); font-weight: 600; }
.popover .synthline { margin-top: 12px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 80; left: 50%; bottom: 60px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: min(560px, calc(100vw - 32px)); padding: 9px 14px; border-radius: var(--r-8); background: var(--k-bg-tooltip); color: var(--k-text-tooltip); font-size: 12px; line-height: 17px; box-shadow: var(--shadow-high); animation: rise 240ms var(--ease-quint) both; }
.toast.bad { background: var(--k-red-emphasis); color: #fff; }

/* ---------- MOCK banner (dev only; must never pass as real) ---------- */
.mockband {
  position: relative; z-index: 100; height: 40px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #111 14px 28px);
  color: #111; font: 700 15px/20px var(--sans); letter-spacing: 0.02em;
}
.mockband span { background: #ffd400; padding: 3px 12px; border-radius: 4px; box-shadow: 0 0 0 2px #111; white-space: nowrap; }
.mockband small { background: #111; color: #ffd400; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- disconnected ---------- */
.conn {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 500; background: var(--k-amber-muted); color: var(--k-amber-emphasis); box-shadow: inset 0 0 0 1px var(--k-amber-border); white-space: nowrap;
}

/* ---------- responsive ---------- */
@media (max-height: 820px) and (min-width: 1201px) {
  .policy { display: none; }
  .tray { height: 160px; }
  .chart { height: 150px; }
  .kpi { padding: 10px 16px; }
  .kpi-big { font-size: 24px; line-height: 28px; }
}
@media (max-width: 1360px) and (min-width: 1201px) {
  .honesty-note { display: none; }
}
@media (max-width: 1200px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  body.has-mock .app { height: auto; }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lane { height: 600px; }
  .rail { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .versions { max-height: 420px; }
  .honesty-note { display: none; }
  .subtitle { display: none; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(4)::before { display: none; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 760px) {
  :root { --gutter: 12px; }
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 0; gap: 8px 10px; }
  .brand-title { font-size: 14px; }
  .honesty { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; }
  .top-actions { margin-left: auto; }
  .top-actions .about-word { display: none; }
  .clockrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .controls { flex-wrap: wrap; }
  .clock { flex-wrap: wrap; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi::before { display: none !important; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .kpi:nth-child(odd):not(:first-child)::after, .kpi:nth-child(even)::after { content: none; }
  .kpi:first-child { grid-column: 1 / -1; }
  .kpi-big { font-size: 24px; line-height: 28px; }
  .kpi-row { flex-wrap: wrap; row-gap: 2px; } /* 4-digit hours: B wraps under A instead of overprinting it */
  .stage { grid-template-columns: minmax(0, 1fr); }
  .lane { height: 560px; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .lane-stats { gap: 10px; }
  .lane-top { flex-wrap: wrap; row-gap: 2px; }
  .lane-sub { white-space: normal; }
  #gateChipSmall { display: none; }
  .tk > span { display: none; }
  .tk.tk-world > span { display: block; }
  .kpi-label { white-space: normal; }
  .kpi-sub { white-space: normal; }
  .pr { padding: 0 12px; }
  .repo { display: none; }
  .cq { grid-template-columns: 82px minmax(0, 1fr); padding: 0 12px; }
  .cq-day { display: none; }
  .calls { grid-template-columns: auto minmax(0, 1fr) auto; height: auto; padding: 8px 6px 8px 12px; }
  .calls-spark { display: none; }
  .calls-stats { grid-column: 1 / -1; order: 5; flex-wrap: wrap; white-space: normal; gap: 4px 12px; }
  .pre h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.5px; }
  .pre .lede { font-size: 15px; line-height: 22px; }
  .facts, .pre-steps, .sum-grid, .ledger-figs { grid-template-columns: minmax(0, 1fr); }
  .overlay { place-items: start center; }
  .world { grid-template-columns: minmax(0, 1fr) auto; }
  .world-day { grid-column: 1 / -1; justify-self: start; }
  .mockband { height: auto; min-height: 40px; flex-wrap: wrap; padding: 6px; gap: 6px; font-size: 13px; }
  body.has-mock .overlay { top: 0; }
  .reason { grid-template-columns: minmax(0, 1fr) 90px 40px; }
}
@media (max-width: 420px) {
  .lane-stats .lane-stat:first-child { display: none; }
  .gate-figs { grid-template-columns: repeat(2, auto); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* pre-roll: the two lanes, previewed */
.lanes-preview { display: grid; gap: 10px; }
.lanes-preview > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12px; line-height: 17px; color: var(--k-text-secondary); }
.lanes-preview b { color: var(--k-text-primary); font-weight: 600; font-size: 13px; }
.lanes-preview .lane-tag { transform: none; width: 18px; height: 18px; margin-top: 1px; }
body.has-mock .drawer { top: 40px; }
@media (max-width: 760px) { body.has-mock .drawer { top: 0; z-index: 110; } .scrim { z-index: 109; } }
body.locked { overflow: hidden; }

/* the loop, counted live (bottom of the versions card) */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 14px 10px; border-top: 1px solid var(--hair); min-width: 0; }
.lp { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; column-gap: 3px; min-width: 0; font-size: 10px; line-height: 13px; color: var(--k-text-tertiary); }
.lp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--k-fill-tertiary); transition: background-color var(--dur-mid), box-shadow var(--dur-mid); }
.lp b { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--k-text-secondary); transition: color var(--dur-mid); }
.lp span { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp.lit b { color: var(--k-text-primary); }
.lp.lit::before { background: var(--k-green-base); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-green-base) 18%, transparent); }

.rgrid i.err { background: transparent; box-shadow: inset 0 0 0 1px var(--k-amber-base); animation: pop 240ms var(--ease-quint) both; }
.ledger-days { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.ledger-days i { flex: 1; min-width: 3px; max-width: 14px; border-radius: 2px 2px 0 0; background: var(--k-fill-tertiary); }
.ledger-days i:last-child { background: var(--k-fill-primary); }
.tl.verify li { grid-template-columns: 20px minmax(0, 1fr); }
.tl.verify li i { display: none; }
.tl.verify li .d { text-align: center; }

/* ---------- production mode (CONTRACT.md §E): the pre-roll's call to action, watchers, recorded retrains ---------- */
.pre-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: end; }
.pre-hero-text { min-width: 0; }
.pre-cta { display: grid; gap: 8px; align-content: end; animation: rise 500ms var(--ease-quint) 120ms both; }
.btn.big { height: 52px; padding: 0 24px; border-radius: var(--r-8); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.1px; }
.btn.big:disabled { opacity: .35; }
.pre-len { font-size: 12px; line-height: 16px; color: var(--k-text-secondary); text-align: center; }
.pre-status { display: grid; gap: 8px; justify-items: start; }
.pre-status:empty { display: none; }
.pre-status .building { line-height: 17px; }
.pre-note { font-size: 12px; line-height: 17px; color: var(--k-text-secondary); padding-left: 10px; border-left: 2px solid var(--k-fill-tertiary); }
.pre-step-note { font-weight: 400; font-size: 12px; }
.golive p.muted { color: var(--k-text-tertiary); }
.drawer-title-wrap { min-width: 0; }

.watch-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; flex: none; cursor: help;
  background: var(--k-bg-tertiary); color: var(--k-text-primary); box-shadow: inset 0 0 0 1px var(--k-fill-tertiary);
}
body.watching #speedSeg, body.watching #playBtn, body.watching #skipBtn, body.watching #resetBtn, body.watching #skipIntro { display: none; }

.live-chip.mock { background: transparent; box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); color: var(--k-text-secondary); }

.rec-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: auto; border-radius: var(--r-4);
  font-size: 10.5px; line-height: 14px; font-weight: 600; color: var(--k-text-secondary);
  box-shadow: inset 0 0 0 1px var(--k-fill-tertiary); flex: none; cursor: help;
}
.rec-badge + .vside { margin-left: 8px; }
.rec-note { margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--k-text-tertiary); }
.policy-rec { display: block; margin-top: 4px; color: var(--k-text-tertiary); }

@media (max-width: 760px) {
  .pre-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .btn.big { height: 50px; }
}
.lp { align-items: start; }
.lp::before { margin-top: 5px; }
.lp span { white-space: normal; overflow: visible; }
@media (max-width: 760px) { body.has-mock .overlay { padding-top: 96px; } }


/* ---------- the Helm rail (same rail as the platform's WorkspaceChrome: 224px, 32px rows, 13/18/500, --r-8) ---------- */
:root { --hrail-w: 224px; }
.hrail {
  position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: var(--hrail-w);
  display: flex; flex-direction: column; padding: 16px 8px 12px; overflow-y: auto;
  background: var(--k-bg-secondary); border-right: 1px solid var(--k-fill-quaternary);
}
body.has-mock .hrail { top: 40px; }
.hrail-word { display: flex; align-items: center; gap: 8px; height: var(--h-item); margin: 0 8px 20px; text-decoration: none; color: var(--k-text-primary); }
.hrail-word svg { flex-shrink: 0; }
.hrail-word span { font-size: var(--t-regular); line-height: var(--t-regular-lh); font-weight: 400; color: var(--k-text-secondary); white-space: nowrap; }
.hrail-word b { font-weight: 500; letter-spacing: var(--t-title-tracking); color: var(--k-text-primary); }
.hrail-item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--h-item); box-sizing: border-box;
  padding: 0 8px; margin: 1px 0; border-radius: var(--r-8);
  font-size: var(--t-small); line-height: var(--t-small-lh); font-weight: 500; color: var(--k-text-secondary);
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.hrail-item:hover { background: var(--k-bg-tertiary); color: var(--k-text-primary); }
.hrail-item[aria-current="page"] { background: var(--k-control-selected); color: var(--k-text-primary); }
.hrail-item > svg { flex-shrink: 0; color: var(--k-text-tertiary); }
.hrail-item:hover > svg, .hrail-item[aria-current="page"] > svg { color: inherit; }
.hrail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrail-title { font-size: var(--t-mini); line-height: var(--t-mini-lh); font-weight: 500; color: var(--k-text-secondary); margin: 20px 8px 4px; }
.hrail-runs { margin: 2px 0 0 16px; padding-left: 8px; border-left: 1px solid var(--k-fill-quaternary); }
.hrail-run { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--r-8); font-size: var(--t-mini); line-height: var(--t-mini-lh); font-weight: 500; color: var(--k-text-secondary); }
.hrail-run .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--k-text-tertiary); flex-shrink: 0; }
.hrail-run[data-on="true"] .dot { background: var(--k-fill-primary); }
.hrail-run .num { margin-left: auto; color: var(--k-text-tertiary); }
.hrail-empty { margin: 2px 8px 0; font-size: var(--t-mini); line-height: var(--t-mini-lh); color: var(--k-text-tertiary); }
.hrail-foot { margin-top: auto; padding: 8px 8px 0; border-top: 1px solid var(--k-fill-quaternary); font-size: var(--t-mini); line-height: var(--t-mini-lh); color: var(--k-text-tertiary); }
.hrail-open { display: none; }
.hrail-scrim { position: fixed; inset: 0; z-index: 39; background: var(--k-scrim); }
@media (min-width: 1600px) {
  .app { margin-left: var(--hrail-w); }
  .overlay { left: var(--hrail-w); }
  .hrail-scrim { display: none !important; }
}
@media (max-width: 1599px) {
  .hrail { transform: translateX(-100%); transition: transform var(--dur-panel) var(--ease-smooth); z-index: 120; }
  .hrail[data-open="true"] { transform: none; box-shadow: var(--shadow-high); }
  .hrail-scrim { z-index: 119; }
  .hrail-open { display: inline-flex; }
}
.hrail-wrap { height: auto; min-height: var(--h-item); align-items: flex-start; padding-top: 7px; padding-bottom: 7px; }
.hrail-wrap > svg { margin-top: 1px; }
.hrail-wrap > .hrail-label { white-space: normal; overflow: visible; text-overflow: clip; }
:root[data-embed="1"] { --hrail-w: 0px; }
:root[data-embed="1"] .hrail, :root[data-embed="1"] .hrail-open, :root[data-embed="1"] .hrail-scrim, :root[data-embed="1"] .brand-word, :root[data-embed="1"] .brand-sep { display: none !important; }
:root[data-embed="1"] .app { margin-left: 0; }
:root[data-embed="1"] .overlay { left: 0; }