/* Archon's design tokens and layout: a SaaS shell with a sidebar, in one
 * hand-written sheet.
 *
 * Same origin, no build step, no external font, no framework. The obvious
 * modern stack here (Tailwind, Radix, a charting library) writes inline style
 * attributes at runtime, and this page ships behind `style-src 'self'`, which
 * refuses an inline style as firmly as a <style> block. That policy has
 * caught three real regressions; the stack bends to it, not the reverse.
 * Every chart is an SVG sized by presentation attributes, and a browser test
 * asserts the page never produces a style attribute.
 */
  :root {
    --bg: #0b0f1e; --bg-sunken: #080b16; --card: #131a2e; --card-hi: #182043;
    --fill: #1b2440; --border: #222a45; --border-strong: #2f3862;
    --text: #e8ebf5; --text-2: #aab2c8; --text-3: #8b93a7;
    --primary: #6366f1; --primary-hi: #7c7ff5; --violet: #8b5cf6;
    --positive: #22c55e; --cyan: #2dd4bf; --warning: #f59e0b;
    --error: #f43f5e; --info: #38bdf8;
    --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-pill: 999px;
    --side-w: 236px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
  h1 { font-size: clamp(22px, 3.2vw, 32px); }
  h2 { font-size: 19px; margin-bottom: 14px; }
  p { margin: 0; }
  .muted { color: var(--text-2); }
  .dim { color: var(--text-3); }
  .num { font-variant-numeric: tabular-nums; }
  .hidden { display: none; }

/* ── the shell: sidebar plus working column ───────────────────────────────── */

  .shell { display: flex; min-height: 100vh; }
  .side {
    width: var(--side-w); flex: none; display: flex; flex-direction: column;
    background: var(--bg-sunken); border-right: 1px solid var(--border);
    padding: 18px 12px 14px; gap: 6px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .shell.side-collapsed .side { display: none; }
  .main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
              padding: 0 22px 60px; }
  main { flex: 1 1 auto; }

  .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; }
  .mark {
    width: 32px; height: 32px; border-radius: 9px; flex: none;
    background: linear-gradient(140deg, var(--primary), var(--violet));
  }
  .brand-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .brand-t b { font-size: 15px; letter-spacing: 0.03em; }
  .brand-s { font-size: 10.5px; color: var(--text-3); letter-spacing: 0.04em; }

  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-h {
    font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--text-3); padding: 12px 10px 4px;
  }
  .tab {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: transparent; border: 1px solid transparent; color: var(--text-2);
    font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 10px;
    border-radius: var(--r-sm); cursor: pointer;
  }
  .tab:hover:not(.on) { color: var(--text); background: var(--fill); filter: none; }
  .tab.on { color: var(--text); background: var(--card-hi); border-color: var(--border-strong); }
  .nav-i { width: 16px; text-align: center; flex: none; color: var(--text-3); font-size: 12px; }
  .tab.on .nav-i { color: var(--primary-hi); }

  .side-foot {
    margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 3px;
  }
  .side-link { color: var(--text-3); font-size: 12px; margin-top: 8px; }

/* ── the top bar ──────────────────────────────────────────────────────────── */

  .topbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 0 12px; border-bottom: 1px solid var(--border);
  }
  .top-spacer { flex: 1 1 auto; }
  .icon-btn {
    background: var(--fill); border: 1px solid var(--border-strong); color: var(--text-2);
    font: inherit; font-size: 14px; border-radius: var(--r-sm); padding: 8px 11px;
    cursor: pointer;
  }
  .icon-btn:hover { color: var(--text); filter: none; }
  .field {
    display: flex; flex-direction: column; gap: 2px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    padding: 5px 12px; background: var(--card);
  }
  .field.slim { padding: 4px 12px; }
  .field-k {
    font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
  }
  .field-v { font-size: 13.5px; font-weight: 600; }
  select {
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
    background: transparent; border: 0; padding: 0; cursor: pointer;
  }
  select option { background: var(--card); color: var(--text); }

  .live-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-strong); background: var(--card);
    border-radius: var(--r-pill); padding: 7px 14px; font-size: 12.5px;
    font-weight: 600; color: var(--text-2); white-space: nowrap;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); }
  .dot.ok { background: var(--positive); }
  .dot.err { background: var(--error); }
  .dot.working { background: var(--warning); animation: pulse 1.1s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }

  button {
    font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--r-md);
    border: 1px solid transparent; padding: 11px 20px; color: #fff;
    background: linear-gradient(140deg, var(--primary), var(--violet));
  }
  button:hover:not(:disabled) { filter: brightness(1.1); }
  button:disabled { opacity: 0.55; cursor: progress; }
  /* The label is here because a file input cannot be styled and `style-src
     'self'` refuses the inline attribute a framework would write. It is a
     CONTROL, so it has to look like the controls beside it: scoped to
     `button`, this rule left "Your own month" as bare text between two
     buttons, which reads as a heading nobody can press. */
  button.ghost,
  label.ghost { background: var(--fill); border-color: var(--border-strong); color: var(--text); }
  label.btn-like {
    font-weight: 600; border-radius: var(--r-md);
    border: 1px solid var(--border-strong); padding: 11px 20px;
  }

  .statusbar { padding: 10px 0 0; font-size: 13px; }

/* ── panels, panes, cards ─────────────────────────────────────────────────── */

  .panel { margin: 22px 0 0; }
  .panel > h2 { font-size: 21px; }
  .panel > .sub, .pane > .sub {
    color: var(--text-2); font-size: 14px; margin: -6px 0 18px; max-width: 76ch;
  }
  .pane {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 18px 20px; margin-top: 20px;
  }
  .pane > h2 { font-size: 15px; margin-bottom: 6px; }
  .pane > .sub { margin: 0 0 16px; font-size: 13px; }
  .spaced { margin-top: 22px; }
  .sub.tight { margin-top: 10px; margin-bottom: 0; }

  .grid { display: grid; gap: 14px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 22px; }
  .slim-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 18px; }
  .two { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); margin-top: 20px; }
  .two > .pane { margin-top: 0; }

  .card {
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    background: var(--card); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--r-lg); padding: 16px 18px; font-weight: 400;
    position: relative;
  }
  .card:hover:not(.flat) {
    border-color: var(--border-strong); background: var(--card-hi); filter: none;
  }
  .card:hover:not(.flat) .go { color: var(--primary-hi); }
  .card.flat { cursor: default; }
  .card .k {
    font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3);
  }
  /* A grid item's default `min-width: auto` refuses to shrink below its
     min-content width, and a run id is one unbreakable token. Rendered at
     26px it is wider than the 150px column, so the card overflowed the
     grid, the grid overflowed the panel and the page scrolled sideways.
     How far past the edge it landed depended on the font the machine
     happened to have, which is why it passed here and failed in CI. */
  .card { min-width: 0; }
  .card .v { font-size: 26px; font-weight: 680; margin-top: 7px; letter-spacing: -0.02em;
             overflow-wrap: anywhere; }
  /* An identifier is not a measurement and should not be typeset as one. */
  .card .v.id { font-size: 14px; font-weight: 600; letter-spacing: 0; margin-top: 9px; }
  .card .s { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
  .card .go { font-size: 11.5px; color: var(--text-3); margin-top: 10px; font-weight: 600; }
  /* The badge used to be `position: absolute; top: 13px; right: 14px`, which
     takes it out of flow and lets it sit ON TOP of a long label instead of
     beside it. On this machine "LEAKING AWAY" cleared "5 letters ready" by
     6.5px at 1920; on the Linux runner that films the demo it did not, and
     the badge landed across the last letters of the word. Same font-metric
     fragility as the run-id overflow, one layer up.
     In flow, with the label free to shrink, they cannot collide at any width
     or in any font. */
  .card-h {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; width: 100%;
  }
  .card-h .k { min-width: 0; }
  .card .badge {
    flex: none; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
    padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid currentColor;
  }
  .badge.warn { color: var(--warning); }
  .badge.err { color: var(--error); }
  .badge.ok { color: var(--positive); }
  .badge.info { color: var(--info); }

  .hero {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    gap: 22px; align-items: stretch;
  }
  .hero-copy {
    display: flex; flex-direction: column; align-items: flex-start;
    border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    background: var(--card); padding: clamp(24px, 4vw, 48px);
  }
  .eyebrow {
    color: var(--cyan); font-size: 11px; line-height: 1.4; font-weight: 750;
    letter-spacing: .11em; text-transform: uppercase;
  }
  .hero h1 { max-width: 820px; margin-top: 14px; font-size: clamp(30px, 4.4vw, 56px); }
  .hero-dek {
    max-width: 68ch; margin-top: 18px; color: var(--text-2);
    font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55;
  }
  .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
  #hero-run { padding: 14px 22px; font-size: 15px; }
  .hero-context { max-width: 240px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
  .hero-line {
    margin-top: 22px; padding-top: 18px; width: 100%; border-top: 1px solid var(--border);
    font-size: 15px; font-weight: 650; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }
  .hero-result {
    display: flex; flex-direction: column; background: var(--card-hi);
    border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 26px;
  }
  .result-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 0; }
  .result-list li { display: flex; flex-direction: column; gap: 4px; padding: 17px 0; border-top: 1px solid var(--border-strong); }
  .result-list li:first-child { border-top: 0; padding-top: 0; }
  .result-list b { font-size: 16px; }
  .result-list span { color: var(--text-2); font-size: 13px; }

  .how-strip {
    display: flex; align-items: stretch; gap: 12px; margin-top: 18px;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-sunken); padding: 16px;
  }
  .how-step { flex: 1 1 0; display: flex; align-items: flex-start; gap: 11px; padding: 8px; }
  .step-no {
    display: grid; place-items: center; width: 24px; height: 24px; flex: none;
    border: 1px solid var(--primary-hi); border-radius: 50%; color: var(--primary-hi);
    font-size: 11px; font-weight: 750;
  }
  .how-step b, .how-step small { display: block; }
  .how-step b { font-size: 13px; }
  .how-step small { margin-top: 3px; color: var(--text-3); font-size: 11.5px; line-height: 1.45; }
  .how-arrow { align-self: center; color: var(--text-3); }
  .approval-note {
    display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text-2); font-size: 13px;
  }
  .approval-note b { color: var(--text); }
  .approval-mark { color: var(--positive); font-weight: 800; }
  .text-action { margin-left: auto; flex: none; padding: 7px 0; border: 0; background: transparent; color: var(--cyan); }
  .text-action:hover:not(:disabled) { filter: none; color: var(--text); }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 34px; }
  .section-heading h2 { margin: 5px 0 0; font-size: 22px; }
  .section-heading > p { max-width: 300px; color: var(--text-3); font-size: 12.5px; text-align: right; }
  .proof-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--text-3); font-size: 11.5px;
  }
  .proof-strip b { color: var(--text-2); margin-right: 4px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
           margin-top: 12px; }
  .chip {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-2); background: var(--fill); border: 1px solid var(--border-strong);
    padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
  }
  .chip-sep { color: var(--text-3); font-size: 11px; }

/* ── charts: SVG sized by attribute, never by an inline style ─────────────── */

  .bars { display: flex; flex-direction: column; gap: 9px; }
  .bar-row {
    display: grid; grid-template-columns: minmax(78px, 130px) 1fr minmax(58px, auto);
    align-items: center; gap: 12px; font-size: 12.5px;
  }
  .bar-k { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-v { color: var(--text); text-align: right; white-space: nowrap; }
  .bar { width: 100%; height: 11px; display: block; }
  .bar.tall { height: 24px; }
  .f-primary { fill: var(--primary); }
  .f-ok { fill: var(--positive); }
  .f-err { fill: var(--error); }
  .f-warn { fill: var(--warning); }
  .f-info { fill: var(--info); }
  .f-muted { fill: var(--border-strong); }
  .f-cyan { fill: var(--cyan); }

  .legend {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 14px; font-size: 12px; color: var(--text-3);
  }
  .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .legend .sw:not(:first-child) { margin-left: 10px; }
  .sw.f-muted { background: var(--border-strong); }
  .sw.f-primary { background: var(--primary); }

  .donut-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  .donut { width: 146px; height: 146px; flex: none; transform: rotate(-90deg); }
  .donut .track { stroke: var(--bg-sunken); }
  .legend-col { display: flex; flex-direction: column; gap: 7px; flex: 1 1 190px; min-width: 0; }
  .leg-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
  .leg-k { color: var(--text-2); flex: 1 1 auto; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leg-v { color: var(--text); white-space: nowrap; }
  .leg-p { color: var(--text-3); width: 34px; text-align: right; }
  .s0 { stroke: var(--primary); background: var(--primary); }
  .s1 { stroke: var(--cyan); background: var(--cyan); }
  .s2 { stroke: var(--violet); background: var(--violet); }
  .s3 { stroke: var(--info); background: var(--info); }
  .s4 { stroke: var(--warning); background: var(--warning); }
  .s5 { stroke: var(--positive); background: var(--positive); }

/* ── the five phases and the run trail ────────────────────────────────────── */

  .phases {
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    margin-top: 4px;
  }
  .phase {
    flex: 1 1 150px; min-width: 140px; display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 11px 13px;
  }
  .phase-dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--border-strong); border: 2px solid var(--bg-sunken);
  }
  .phase.done .phase-dot { background: var(--positive); }
  .phase.bad .phase-dot { background: var(--error); }
  .phases.running .phase-dot { background: var(--warning); animation: pulse 1.1s ease-in-out infinite; }
  .phase-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .phase-k { font-size: 12.5px; font-weight: 650; }
  .phase-s { font-size: 11px; color: var(--text-3); }

  .trail { border-left: 2px solid var(--border-strong); padding-left: 18px; margin-left: 7px; }
  .step { position: relative; padding: 11px 0; opacity: 0; transform: translateY(5px);
          animation: in .34s ease forwards; }
  @keyframes in { to { opacity: 1; transform: none; } }
  /* The stagger, as classes. Set as an inline style it is blocked by the
     content security policy, which is why it lives here. */
  .step.d0 { animation-delay: 0ms; }
  .step.d1 { animation-delay: 190ms; }
  .step.d2 { animation-delay: 380ms; }
  .step.d3 { animation-delay: 570ms; }
  .step.d4 { animation-delay: 760ms; }
  .step.d5 { animation-delay: 950ms; }
  .step.d6 { animation-delay: 1140ms; }
  .step.d7 { animation-delay: 1330ms; }
  .step.d8 { animation-delay: 1520ms; }
  .step.d9 { animation-delay: 1710ms; }
  .step.d10 { animation-delay: 1900ms; }
  .step.d11 { animation-delay: 2090ms; }
  .step.d12 { animation-delay: 2280ms; }
  .step.d13 { animation-delay: 2470ms; }
  .step.d14 { animation-delay: 2660ms; }
  .step.d15 { animation-delay: 2850ms; }
  @media (prefers-reduced-motion: reduce) {
    .step { animation: none; opacity: 1; transform: none; }
    .dot.working, .phases.running .phase-dot { animation: none; }
  }
  .step::before {
    content: ""; position: absolute; left: -25px; top: 17px; width: 11px; height: 11px;
    border-radius: 50%; background: var(--positive); border: 2px solid var(--card);
  }
  .step.blocked::before { background: var(--warning); }
  .step.failed::before  { background: var(--error); }
  .step .t { font-weight: 600; }
  .step .d { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
  .step .ms { color: var(--text-3); font-size: 12px; margin-left: 8px; font-weight: 400; }

/* ── tables ───────────────────────────────────────────────────────────────── */

  .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .tbl th {
    text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-3); font-weight: 600; padding: 9px 12px;
    border-bottom: 1px solid var(--border-strong); white-space: nowrap;
  }
  .tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
  .tbl tr:last-child td { border-bottom: 0; }
  .tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg);
            background: var(--card); }
  .alloc-head { background: var(--card-hi); }
  .mono { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); }

  .kv { display: flex; flex-direction: column; gap: 8px; }
  .kv-row { display: flex; gap: 14px; font-size: 13px; align-items: baseline; }
  .kv-k {
    color: var(--text-3); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
    width: 116px; flex: none;
  }
  .kv-v { color: var(--text-2); word-break: break-word; min-width: 0; }

/* ── pills, letters, chrome ───────────────────────────────────────────────── */

  .pill {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
    padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
    border: 1px solid currentColor;
  }
  .pill.err { color: var(--error); }
  .pill.warn { color: var(--warning); }
  .pill.ok { color: var(--positive); }
  .pill.info { color: var(--info); }

  .dispute-pair { display: grid; grid-template-columns: minmax(240px, 2fr) 3fr;
                  gap: 14px; margin-top: 14px; }
  .dispute {
    background: var(--card); border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--r-md); padding: 14px 16px;
  }
  .dispute h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
                letter-spacing: 0.06em; color: var(--text-3); }
  .dispute .d-amount { font-size: 21px; font-weight: 680; margin: 2px 0 6px; }
  .dispute .d-msg { color: var(--text-2); font-size: 12.5px; }

  .draft { background: var(--card); border: 1px solid var(--border);
           border-radius: var(--r-lg); padding: 16px 18px; }
  .draft h3 { font-size: 14.5px; }
  .draft .to { color: var(--text-2); font-size: 13px; margin: 3px 0 10px; }
  .draft pre {
    margin: 0; white-space: pre-wrap; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-2); background: var(--bg-sunken); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 12px 14px; max-height: 190px; overflow: auto;
  }
  .gate-note {
    border: 1px solid var(--border-strong); border-left: 3px solid var(--cyan);
    background: var(--card); border-radius: var(--r-md); padding: 14px 16px;
    font-size: 13.5px; color: var(--text-2); margin-bottom: 6px;
  }
  .gate-note b { color: var(--text); }

  footer { margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--border);
           color: var(--text-3); font-size: 12.5px; }
  footer a { color: var(--text-2); }
  .err-box { border: 1px solid var(--error); color: var(--error); border-radius: var(--r-md);
             padding: 14px 16px; font-size: 14px; margin-top: 14px; }

/* ── small screens: the sidebar becomes a top rail ────────────────────────── */

  @media (max-width: 899px) {
    /* The nav STAYS on a phone, and that is a decision, not an oversight.
       Hiding it behind the toggle put the hero 190px higher and made all ten
       sections invisible until somebody found a control they had no reason to
       look for -- undoing an earlier fix recorded three comments below, where
       the strip was made to wrap precisely because a judge on a phone could
       previously see two of ten. The browser journey caught it, at the mobile
       viewport, clicking a tab that was no longer there. */
    .shell { flex-direction: column; }
    .side {
      position: static; width: auto; height: auto; overflow: visible;
      border-right: 0; border-bottom: 1px solid var(--border);
      padding: 12px 14px 10px;
    }
    .shell.side-collapsed .side { display: flex; }
    .side-foot { display: none; }
    /* WRAPS. It used to be one nowrap row with `overflow-x: auto` and a hidden
       scrollbar: at 375px that is a 1,406px strip inside a 347px window, so
       eight of the ten sections were off-screen with nothing on the page to
       suggest they existed. A judge on a phone saw two. Wrapping costs a few
       rows of height and hides nothing. */
    .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; padding-bottom: 2px; }
    .nav-h { display: none; }
    .tab { width: auto; flex: none; padding: 7px 12px; }
    .nav-i { display: none; }
    .brand { padding-bottom: 10px; }
    .main-col { padding: 0 14px 60px; }
    .icon-btn { display: none; }
    .topbar { gap: 8px; }
    #run { flex: 1 1 auto; }
    .kv-row { flex-direction: column; gap: 2px; }
    .kv-k { width: auto; }
    .dispute-pair { grid-template-columns: 1fr; }
    .hero { grid-template-columns: 1fr; }
    .hero-copy { padding: 26px 20px; }
    .hero h1 { font-size: clamp(30px, 9vw, 44px); }
    .how-strip { flex-direction: column; }
    .how-arrow { display: none; }
    .approval-note { align-items: flex-start; flex-wrap: wrap; }
    .text-action { margin-left: 36px; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .section-heading > p { text-align: left; }
    .proof-strip { align-items: flex-start; flex-direction: column; }
  }

  @media (max-width: 520px) {
    .topbar .live-badge { order: 3; }
    .top-spacer { display: none; }
    /* Every control survives every width. Hiding them on a phone hid the
       things the page is for, and the journey is tested at 375. The topbar
       wraps, so each takes its own row rather than competing for one. */
    #run, #replay { width: 100%; }
    #raw { width: 100%; font-size: 12px; }
    .hero-actions { align-items: stretch; flex-direction: column; width: 100%; }
    #hero-run { width: 100%; }
    .hero-context { max-width: none; }
    .hero-result { padding: 22px 20px; }
    .two { grid-template-columns: 1fr; }
  }

  /* The first focusable thing on the page, and invisible until it is focused.
     Without it a keyboard visitor tabs through ten navigation buttons before
     reaching the close they came to read, on every panel change. */
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 10;
    background: var(--card-hi); color: var(--text); border: 1px solid var(--primary-hi);
    border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; font-weight: 650;
  }
  .skip-link:focus { left: 12px; top: 12px; }
  .panel:focus { outline: none; }
  .panel:focus-visible { outline: 2px solid var(--primary-hi); outline-offset: 6px; }

  /* The one human gate, operable. Buttons sit under the letter they act on, so
     a judge who scrolls to a draft has the decision in the same eyeline. */
  .draft-actions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  }
  .draft-actions button { font-size: 12.5px; padding: 7px 12px; }
  .draft-actions .approve { border-color: var(--positive); color: var(--positive); }
  .draft-audit {
    flex: 1 1 100%; color: var(--text-3); font-size: 11.5px; line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }

/* ── the guided tour ──────────────────────────────────────────────────────
 * A judge opens this URL with nobody sitting next to them. Ten panels and no
 * idea which one carries the point. The tour is the missing narrator.
 *
 * Every position here is CSS because it has to be: the page ships behind
 * `style-src 'self'`, which refuses an inline style attribute, and a browser
 * test asserts none is ever produced. So the card is fixed, and "highlight
 * this element" is a class rather than a computed rectangle.
 */
.tour {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: min(360px, calc(100vw - 44px));
  background: var(--card-hi); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 16px 18px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.tour[hidden] { display: none; }
.tour-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tour-count {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.tour-x {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: var(--r-sm);
}
.tour-x:hover { color: var(--text); background: var(--fill); }
.tour-title { font-size: 16px; margin-bottom: 6px; }
.tour-body { color: var(--text-2); font-size: 14px; }
.tour-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.tour-foot button { font-size: 13px; padding: 7px 14px; }

/* The focus ring. Animated so the eye lands on it, and `prefers-reduced-motion`
 * turns the movement off rather than the highlight, because the highlight is
 * the information. */
.tour-focus {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--r-md);
  animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { outline-color: var(--primary); }
  50% { outline-color: var(--violet); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-focus { animation: none; }
}
@media (max-width: 720px) {
  .tour { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* The "your own month" control is a label wrapping a hidden input, so it has
 * to be told to look and behave like the buttons beside it. */
.btn-like {
  display: inline-flex; align-items: center; cursor: pointer;
  font: inherit; line-height: 1;
}

/* The sample block inside the format panel. */
.tour-sample {
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; margin: 10px 0;
  font-size: 12px; line-height: 1.5; overflow-x: auto;
  color: var(--text-2);
}
.tour-sample code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }