/* The free lane's stylesheet, shared by the bill page (index.html) and the fee page (fees.html).
   Same-origin, so style-src 'self' covers it; no webfonts, ever. */
  /* ── tier 1 · primitives ───────────────────────────────────────────────────────────────────
     Lifted from the shipped TP-003 workbench so the free lane and the product read as one thing.
     Scale is a 4px base; type steps are fixed px because this is a data surface and a rem scale
     that a browser zoom can shift makes columns disagree with their headers. */
  :root {
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    --fs-micro: 9.5px; --fs-label: 10.5px; --fs-small: 12px; --fs-body: 13.5px;
    --fs-lede: 15.5px; --fs-h3: 17px; --fs-h2: 24px; --fs-h1: 38px; --fs-display: 52px;

    --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.5;
    --tr-tight: -.02em; --tr-label: .15em; --tr-eyebrow: .22em;

    --r-0: 0; --r-1: 2px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-full: 999px;
    --hair: 1px; --rule: 2px;
    --measure: 1180px; --prose: 74ch;

    --t-fast: 180ms cubic-bezier(.4,0,.2,1);
    --t-mid:  300ms cubic-bezier(.4,0,.2,1);

    --sh-1: 0 1px 2px rgba(20,22,26,.05);
    --sh-2: 0 6px 18px rgba(20,22,26,.10);
    --sh-3: 0 18px 44px rgba(20,22,26,.18);

    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  }

  /* ── tier 2 · brand · light ────────────────────────────────────────────────────────────────
     Brand-neutral slate, not champagne. Levelr's repo is brand-neutral from commit one
     (repo-boundary.md, #2222) because the product is meant to be sellable, and a product surface
     wearing the studio's marketing palette is a surface that has to be repainted before it ships.
     ONE non-neutral colour with authority, and it is the accent. */
  :root {
    --base: #F2F1EE; --surface: #FFFFFF; --raised: #FFFFFF; --sunken: #ECEAE4;
    --ink: #16191C; --ink-soft: #4C525A; --ink-faint: #7A8087;
    --line: #DCDAD3; --line-soft: #EBE9E3;
    --accent: #2C3E4F; --accent-ink: #22323F; --accent-tint: #E9EDF1; --accent-on: #FFFFFF;

    --ok: #3F6B45;   --ok-bg: #E9F0EA;
    --info: #3D6A8A; --info-bg: #DCEBF4;
    --warn: #886013; --warn-bg: #F7F0E2;
    --risk: #B3402F; --risk-bg: #F6EAE7;
    --none: #5F6368; --none-bg: #EDEDEE;

    /* The masthead and hero are dark in BOTH themes — they are a band, not a surface. */
    --band: #101214; --band-ink: #F2F1EE; --band-soft: #A8AEB5; --band-faint: #767C83;
    --band-line: #2B2F34; --band-accent: #C79A5B;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --base: #101214; --surface: #191C1F; --raised: #212528; --sunken: #16191C;
      --ink: #F2F1EE; --ink-soft: #ADB3BA; --ink-faint: #7A8087;
      --line: #2B2F34; --line-soft: #22262A;
      --accent: #8FB0CB; --accent-ink: #A9C4D9; --accent-tint: #1E262D; --accent-on: #101214;
      --ok: #7FB089;   --ok-bg: #1B2620;
      --info: #86B4D4; --info-bg: #172530;
      --warn: #D3A85E; --warn-bg: #2A2317;
      --risk: #E08878; --risk-bg: #2C1C19;
      --none: #9AA0A6; --none-bg: #1E2124;
      --band: #0B0D0E; --band-line: #23272B;
      --sh-1: 0 1px 2px rgba(0,0,0,.4);
      --sh-2: 0 6px 18px rgba(0,0,0,.45);
      --sh-3: 0 18px 44px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"] {
    --base: #101214; --surface: #191C1F; --raised: #212528; --sunken: #16191C;
    --ink: #F2F1EE; --ink-soft: #ADB3BA; --ink-faint: #7A8087;
    --line: #2B2F34; --line-soft: #22262A;
    --accent: #8FB0CB; --accent-ink: #A9C4D9; --accent-tint: #1E262D; --accent-on: #101214;
    --ok: #7FB089;   --ok-bg: #1B2620;
    --info: #86B4D4; --info-bg: #172530;
    --warn: #D3A85E; --warn-bg: #2A2317;
    --risk: #E08878; --risk-bg: #2C1C19;
    --none: #9AA0A6; --none-bg: #1E2124;
    --band: #0B0D0E; --band-line: #23272B;
  }

  /* ── reset + page ───────────────────────────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--base); color: var(--ink);
    font: var(--fs-body)/var(--lh-body) var(--sans);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--sp-6); }
  .hidden { display: none !important; }
  b, strong { font-weight: 600; }
  a { color: var(--accent-ink); }

  /* Figures are tabular everywhere. A money column whose digits do not line up reads as a
     spreadsheet screenshot, not as a schedule. */
  .num, .v, .stake, td.num, .tile .v, .measured .v, .code, .count, .bar .n { font-variant-numeric: tabular-nums lining-nums; }

  /* ── eyebrow: 28x2 rule, then tracked caps. The one repeating device on the page. ────────── */
  .eyebrow {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--sp-4);
  }
  .eyebrow::before { content: ""; width: 28px; height: var(--rule); background: var(--accent); flex: none; }
  .band .eyebrow { color: var(--band-faint); }
  .band .eyebrow::before { background: var(--band-accent); }

  /* ── masthead ───────────────────────────────────────────────────────────────────────────── */
  .masthead { background: var(--band); color: var(--band-ink); border-bottom: var(--hair) solid var(--band-line); }
  .masthead .wrap { display: flex; align-items: center; gap: var(--sp-4); height: 56px; }
  .wordmark { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tr-tight); }
  .masthead .tag {
    font-size: var(--fs-micro); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
    color: var(--band-faint); border-left: var(--hair) solid var(--band-line); padding-left: var(--sp-4);
  }
  .masthead .right { margin-left: auto; font-size: var(--fs-small); color: var(--band-soft); }
  @media (max-width: 720px) { .masthead .right { display: none; } }

  /* ── hero ───────────────────────────────────────────────────────────────────────────────── */
  .hero { position: relative; background: var(--band); color: var(--band-ink); overflow: hidden; }
  .hero-img {
    position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%;
    object-fit: cover; object-position: center right; opacity: .95;
  }
  /* The headline sits on the image's own negative space at the left. The gradient is insurance
     for narrow viewports where the render slides under the text. */
  .hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, var(--band) 0%, var(--band) 40%, rgba(16,18,20,.88) 52%, rgba(16,18,20,.2) 70%, rgba(16,18,20,0) 84%);
    pointer-events: none;
  }
  .hero .wrap { position: relative; z-index: 2; padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  /* Absolute, not `ch`: ch resolves against this element's own 13.5px font, so 44ch was 374px —
     and a 52px serif headline inside a 374px column wraps every two words. */
  .hero-copy { width: min(56%, 620px); }
  .hero h1 {
    font-family: var(--serif); font-weight: 600; letter-spacing: var(--tr-tight);
    font-size: clamp(32px, 5.2vw, var(--fs-display)); line-height: var(--lh-tight);
    margin: 0 0 var(--sp-5);
  }
  .hero .lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--band-soft); margin: 0 0 var(--sp-6); }
  @media (max-width: 900px) {
    .hero-img { width: 100%; opacity: .28; }
    .hero::after { background: linear-gradient(180deg, rgba(16,18,20,.75), var(--band) 78%); }
    .hero-copy { width: 100%; }
  }

  /* The promise. Above the inputs by position, which qa/check_free_lane.py asserts as a position
     and not as a sentiment — a lane that reveals the wall after the work is a hostage-taker. */
  .promise {
    border-left: var(--rule) solid var(--band-accent);
    background: rgba(199,154,91,.07);
    padding: var(--sp-4) var(--sp-5);
    margin: 0;
  }
  /* The commitment reads at body size; the mechanism behind it is set smaller. Same words, same
     place, same order — the promise still sits above every input, which is what the check asserts.
     Levelling them made the hero 783px tall and buried the headline. */
  .promise .commit { font-size: var(--fs-body); color: var(--band-ink); font-weight: 600; margin: 0 0 var(--sp-2); }
  .promise .how { font-size: var(--fs-small); line-height: 1.55; color: var(--band-soft); margin: 0; }
  .promise .how i { color: var(--band-ink); font-style: italic; }

  /* ── sections ───────────────────────────────────────────────────────────────────────────── */
  main { padding: var(--sp-16) 0 var(--sp-12); }
  section { margin: 0 0 var(--sp-16); }
  section > h2 {
    font-family: var(--serif); font-size: var(--fs-h2); font-weight: 600;
    letter-spacing: var(--tr-tight); line-height: var(--lh-snug);
    margin: 0 0 var(--sp-5); padding-bottom: var(--sp-3);
    border-bottom: var(--hair) solid var(--line);
  }
  section > h2 .n {
    font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
    color: var(--accent); letter-spacing: var(--tr-label); margin-right: var(--sp-3);
    vertical-align: .28em;
  }
  .sub { color: var(--ink-soft); max-width: var(--prose); }

  /* "Reading this" — one plain-English note under every section heading, saying what the reader is
     looking at and what it is for. Added after the page was reviewed cold and three sections could
     not be understood from their own headings: a surface that needs someone standing next to it is
     not finished. Same device as the shipped workbench. */
  .reading {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
    margin: 0 0 var(--sp-5); max-width: var(--prose);
    font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft);
  }
  .reading b {
    color: var(--ink-faint); font-weight: 600; letter-spacing: var(--tr-label);
    text-transform: uppercase; font-size: var(--fs-label); white-space: nowrap; padding-top: 2px;
  }
  .note { color: var(--ink-faint); font-size: var(--fs-small); }

  /* ── panels ─────────────────────────────────────────────────────────────────────────────── */
  .drops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  @media (max-width: 860px) { .drops { grid-template-columns: 1fr; } }
  .drop {
    background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-2);
    padding: var(--sp-5); transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .drop.filled { border-color: var(--accent); box-shadow: var(--sh-1); }
  .drop h3 {
    margin: 0 0 var(--sp-2); font-size: var(--fs-label); font-weight: 600;
    letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-faint);
  }
  .drop .hint { color: var(--ink-soft); font-size: var(--fs-small); margin: 0 0 var(--sp-4); }
  .drop textarea {
    width: 100%; min-height: 168px; resize: vertical;
    background: var(--sunken); color: var(--ink);
    border: var(--hair) solid var(--line-soft); border-radius: var(--r-1);
    padding: var(--sp-3); font: 12px/1.55 var(--mono);
  }
  .drop textarea:focus-visible { outline: var(--rule) solid var(--accent); outline-offset: 1px; }
  .drop textarea::placeholder { color: var(--ink-faint); }
  .drop .pick { font-size: var(--fs-small); margin: var(--sp-3) 0 0; color: var(--ink-faint); }
  .drop .pick input { font-size: var(--fs-small); font-family: inherit; }
  .drop .status { font-size: var(--fs-small); margin-top: var(--sp-3); color: var(--ink-soft); min-height: 1.2em; }
  .drop .status.work { font-style: italic; }
  .drop .status.err { color: var(--risk); }
  .programme {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
    margin-top: var(--sp-4); padding: var(--sp-4); background: var(--sunken);
    border: var(--hair) solid var(--line-soft); border-radius: var(--r-1);
  }
  .programme label { color: var(--ink-soft); font-size: var(--fs-small); }
  .programme input {
    display: block; width: 100%; margin-top: var(--sp-2); padding: 9px var(--sp-3);
    border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface);
    color: var(--ink); font: 600 var(--fs-small)/1 var(--sans); font-variant-numeric: tabular-nums;
  }
  @media (max-width: 640px) { .programme { grid-template-columns: 1fr; } }

  .actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
  button {
    font: 600 var(--fs-small)/1 var(--sans); letter-spacing: .01em;
    padding: 11px var(--sp-5); border-radius: var(--r-1); cursor: pointer;
    border: var(--hair) solid var(--line); background: var(--surface); color: var(--ink);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  }
  button:hover:not(:disabled) { border-color: var(--ink-faint); }
  button:focus-visible { outline: var(--rule) solid var(--accent); outline-offset: 2px; }
  button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
  button.primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
  button:disabled { opacity: .42; cursor: not-allowed; }

  .err-box {
    border-left: var(--rule) solid var(--risk); background: var(--risk-bg);
    color: var(--risk); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); border-radius: var(--r-1);
  }

  /* ── stat tiles ─────────────────────────────────────────────────────────────────────────── */
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  @media (max-width: 940px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
  .tile {
    background: var(--surface); border: var(--hair) solid var(--line);
    border-top: var(--rule) solid var(--accent);
    border-radius: var(--r-1); padding: var(--sp-4) var(--sp-5) var(--sp-5);
  }
  .tile .k {
    font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-3);
  }
  .tile .v {
    font-family: var(--serif); font-size: var(--fs-h1); line-height: 1;
    letter-spacing: var(--tr-tight); font-weight: 600;
  }
  .tile .n { font-size: var(--fs-small); color: var(--ink-faint); margin-top: var(--sp-2); }

  /* ── tabs ───────────────────────────────────────────────────────────────────────────────── */
  .tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: var(--hair) solid var(--line); margin-bottom: var(--sp-1); }
  /* Selector targets `.tabs button`, not a `.tab` class: renderTabs() builds these with no class
     of their own, and adding one would mean editing the inline module — which the CSP pins by hash.
     Styling by position is the cheaper half of that trade. */
  .tabs button {
    background: none; border: 0; border-bottom: var(--rule) solid transparent;
    padding: var(--sp-3) var(--sp-4); border-radius: 0;
    font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft);
  }
  .tabs button:hover { color: var(--ink); border-color: transparent; border-bottom-color: var(--line); }
  .tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
  .tabs button .count {
    margin-left: var(--sp-2); font-size: var(--fs-micro); font-weight: 600;
    background: var(--sunken); color: var(--ink-faint);
    padding: 2px 6px; border-radius: var(--r-full);
  }
  .tabs button[aria-selected="true"] .count { background: var(--accent-tint); color: var(--accent-ink); }

  /* ── data table ─────────────────────────────────────────────────────────────────────────── */
  .scroll { overflow-x: auto; border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface); }
  table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }

  /* ── the ledger ──────────────────────────────────────────────────────────────────────────
     Party bands over tinted column groups, the way the shipped workbench does it. The tint is
     what lets a reader stop tracking which column belongs to whom. */
  .ledger { --a-tint: #FAF7F0; --b-tint: #F7F9FA; --a-edge: #E8DFC9; --b-edge: #DDE5EA; }
  :root[data-theme="dark"] .ledger,
  :root:not([data-theme="light"]) .ledger { --a-tint: #1E1C17; --b-tint: #171B1E; --a-edge: #33301F; --b-edge: #232C33; }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ledger { --a-tint: #FAF7F0; --b-tint: #F7F9FA; --a-edge: #E8DFC9; --b-edge: #DDE5EA; } }

  .ledger th, .ledger td { background: var(--surface); }
  .ledger .a-col { background: var(--a-tint); }
  .ledger .b-col { background: var(--b-tint); }
  .ledger .a-col:first-of-type, .ledger td.a-col:nth-of-type(5) { border-left: var(--hair) solid var(--a-edge); }
  .ledger td.b-col:nth-of-type(8) { border-left: var(--hair) solid var(--b-edge); }

  /* Party band: who, and their total, over their own columns. */
  .ledger thead tr.party th {
    position: sticky; top: 0; z-index: 3;
    padding: var(--sp-3) var(--sp-4); border-bottom: var(--hair) solid var(--line);
    text-align: right; white-space: nowrap;
  }
  .ledger thead tr.party th.band { text-align: right; }
  .ledger thead tr.party .who {
    float: left; font-size: var(--fs-label); font-weight: 600;
    letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-faint);
    padding-top: 5px;
  }
  .ledger thead tr.party .tot {
    font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600;
    letter-spacing: var(--tr-tight); color: var(--ink);
  }
  .ledger thead tr.party th.spacer { background: var(--surface); border-bottom-color: var(--line); }

  .ledger thead tr.cols th {
    position: sticky; top: 43px; z-index: 2;
    text-align: left; font-size: var(--fs-label); font-weight: 600;
    letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-faint);
    padding: var(--sp-2) var(--sp-4); border-bottom: var(--hair) solid var(--line);
    white-space: nowrap;
  }
  .ledger thead th.num { text-align: right; }
  .ledger th.gutter, .ledger td.gutter {
    width: 34px; min-width: 34px; text-align: right; padding-left: var(--sp-3); padding-right: var(--sp-2);
    color: var(--ink-faint); font-family: var(--mono); font-size: var(--fs-micro);
  }

  tbody td { padding: 10px var(--sp-4); border-bottom: var(--hair) solid var(--line-soft); vertical-align: top; }
  tbody tr:last-child td { border-bottom: 0; }
  .ledger tbody tr:hover td { filter: brightness(.985); }
  :root[data-theme="dark"] .ledger tbody tr:hover td,
  :root:not([data-theme="light"]) .ledger tbody tr:hover td { filter: brightness(1.25); }
  td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  td.money { font-weight: 600; color: var(--ink); }
  /* Eleven columns at the 1180px measure came to 1167 against 1130 of room — 37px over, which put
     the State pill under the scroll edge on first view. Trimmed here rather than by dropping a
     column: the amounts are the point of the ledger. It still scrolls on a narrow window. */
  td.desc, .ledger th.desc { min-width: 250px; max-width: 430px; color: var(--ink); }
  td.unit, .ledger th:nth-child(4) { color: var(--ink-soft); width: 48px; }
  .ledger td.num, .ledger th.num { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .code { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-faint); }

  /* Trade band. A bill is organised by trade and the ledger should look like the bill. */
  .ledger tr.trade td {
    background: var(--ink); color: var(--base);
    font-size: var(--fs-label); font-weight: 600;
    letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
    padding: 7px var(--sp-4); border-bottom: 0;
  }
  .ledger tr.trade td:first-child { background: var(--ink); }

  /* "This bidder has no such line" — hatched across their three columns, stated once. Three grey
     pills in a row read as three separate verdicts where the fact is one. */
  .ledger td.absent {
    background-image: repeating-linear-gradient(45deg,
      transparent 0 5px, rgba(120,124,130,.13) 5px 10px);
  }
  .ledger td.absent.a-col { background-color: var(--a-tint); }
  .ledger td.absent.b-col { background-color: var(--b-tint); }
  .absent-label {
    font-size: var(--fs-micro); font-style: italic; color: var(--ink-faint);
    letter-spacing: .02em; white-space: nowrap;
  }

  /* ── pills ──────────────────────────────────────────────────────────────────────────────── */
  .pill {
    display: inline-block; font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap;
    background: var(--ok-bg); color: var(--ok);
  }
  .pill.matched { background: var(--ok-bg); color: var(--ok); }
  .pill.low { background: var(--warn-bg); color: var(--warn); }
  .pill.none { background: var(--none-bg); color: var(--none); }

  /* ── confidence, folded under the line table ────────────────────────────────────────────── */
  .confidence-block {
    margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: var(--hair) solid var(--line);
  }
  .bars { display: grid; gap: var(--sp-3); max-width: 640px; }
  .bar { display: grid; grid-template-columns: 132px 1fr 48px; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); }
  .bar .track { height: 8px; background: var(--sunken); border-radius: var(--r-full); overflow: hidden; }
  .bar .fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width var(--t-mid); }
  .bar .fill.low { background: var(--warn); }
  .bar .fill.none { background: var(--none); }
  .bar .n { text-align: right; color: var(--ink-faint); }

  /* ── findings ───────────────────────────────────────────────────────────────────────────── */
  .findings { display: grid; gap: var(--sp-3); }
  .finding {
    background: var(--surface); border: var(--hair) solid var(--line);
    border-left: var(--rule) solid var(--none);
    border-radius: var(--r-1); padding: var(--sp-4) var(--sp-5);
  }
  .finding.high { border-left-color: var(--risk); }
  .finding.mid { border-left-color: var(--warn); }
  .finding .top { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
  .finding .what { font-weight: 600; font-size: var(--fs-body); }
  .finding .stake {
    margin-left: auto; font-family: var(--serif); font-size: var(--fs-h3);
    font-weight: 600; letter-spacing: var(--tr-tight); white-space: nowrap;
  }
  .finding.high .stake { color: var(--risk); }
  .finding.mid .stake { color: var(--warn); }
  .finding .why { color: var(--ink-soft); font-size: var(--fs-small); }
  .finding .where { color: var(--ink-faint); font-size: var(--fs-small); margin-top: var(--sp-2); font-family: var(--mono); }

  /* ── the measured figure ────────────────────────────────────────────────────────────────── */
  .measured {
    background: var(--surface); border: var(--hair) solid var(--line);
    border-top: var(--rule) solid var(--accent); border-radius: var(--r-1);
    padding: var(--sp-8) var(--sp-8) var(--sp-6);
  }
  .measured .v {
    font-family: var(--serif); font-size: clamp(26px, 3.6vw, var(--fs-h1));
    font-weight: 600; letter-spacing: var(--tr-tight); line-height: var(--lh-tight);
    margin-bottom: var(--sp-4);
  }
  .measured .v.pending { color: var(--ink-faint); }
  .measured p { color: var(--ink-soft); max-width: var(--prose); margin: 0 0 var(--sp-4); font-size: var(--fs-small); }
  .measured p:last-child { margin-bottom: 0; }
  .measured #precisionNote { color: var(--ink); font-size: var(--fs-body); }

  /* ── limits ─────────────────────────────────────────────────────────────────────────────── */
  .limits { background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-1); padding: var(--sp-6) var(--sp-8); }
  .limits h3 {
    margin: 0 0 var(--sp-5); font-size: var(--fs-label); font-weight: 600;
    letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-faint);
  }
  .limits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); }
  .limits li { padding-left: var(--sp-5); position: relative; color: var(--ink-soft); max-width: var(--prose); }
  .limits li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: var(--hair); background: var(--ink-faint); }
  .limits li b { color: var(--ink); }
  .limits .why {
    margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: var(--hair) solid var(--line-soft);
    color: var(--ink-soft); font-size: var(--fs-small); max-width: var(--prose);
  }

  /* ── footer ─────────────────────────────────────────────────────────────────────────────── */
  footer {
    border-top: var(--hair) solid var(--line); padding: var(--sp-6) 0 var(--sp-12);
    font-size: var(--fs-small); color: var(--ink-faint);
  }
  footer #engine { color: var(--ink-soft); font-weight: 600; }

  /* ── the report · #3875 ──────────────────────────────────────────────────────────────────────
     The four artefacts, rendered on the visitor's own two bills. SHOWING IS NOT GIVING: these are
     documents on a screen, read-only and watermarked, with no download control anywhere in the DOM
     — qa/check_free_lane.py asserts that rather than anyone eyeballing it. The wall stays exactly
     where #2217 put it: persistence, participation, and paper you can actually send. */
  .stage { margin-top: var(--sp-6); }
  .doc {
    position: relative; overflow: hidden; margin: 0;
    background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-2);
    box-shadow: var(--sh-1); padding: var(--sp-8);
  }
  @media (max-width: 720px) { .doc { padding: var(--sp-5); } }

  /* The watermark is a STATEMENT, not a lock. There is nothing here to lock — no export control
     exists — and a page that pretended otherwise would be claiming a control it does not have.
     A visitor can still print the tab, and this prints with it, which is the honest outcome. */
  .doc .wm {
    position: absolute; inset: -30%; z-index: 1; pointer-events: none; user-select: none;
    display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-12);
    transform: rotate(-24deg); align-content: center; justify-content: center;
  }
  .doc .wm span {
    font-size: 15px; font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase;
    color: var(--ink); opacity: .055; white-space: nowrap;
  }
  :root[data-theme="dark"] .doc .wm span,
  :root:not([data-theme="light"]) .doc .wm span { opacity: .075; }
  .doc-head, .doc-body { position: relative; z-index: 2; }
  .doc-head { border-bottom: var(--rule) solid var(--ink); padding-bottom: var(--sp-4); margin-bottom: var(--sp-6); }
  .doc-title {
    font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600;
    letter-spacing: var(--tr-tight); margin: 0;
  }
  .doc-meta { margin: var(--sp-2) 0 0; color: var(--ink-soft); font-size: var(--fs-small); max-width: var(--prose); }
  .docfoot { margin: var(--sp-4) 0 0; font-size: var(--fs-small); color: var(--ink-faint); max-width: var(--prose); }

  /* Three bands, three different facts, and they must not look alike: who may read this document,
     what it deliberately cannot do, and that it carries both bids. */
  .confband, .internalband, .limitband {
    font-size: var(--fs-small); line-height: var(--lh-body);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); margin-bottom: var(--sp-5);
    border-left: var(--rule) solid;
  }
  .confband { background: var(--info-bg); color: var(--ink); border-left-color: var(--info); }
  .internalband { background: var(--sunken); color: var(--ink-soft); border-left-color: var(--line); }
  .limitband { background: var(--warn-bg); color: var(--ink); border-left-color: var(--warn); }
  .confband b, .limitband b, .internalband b { margin-right: var(--sp-1); }

  .sched thead th {
    background: var(--sunken); color: var(--ink-soft); text-align: left; vertical-align: bottom;
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tr-label);
    text-transform: uppercase; padding: var(--sp-3) var(--sp-3);
    border-bottom: var(--hair) solid var(--line); white-space: nowrap;
  }
  .sched thead th.num { text-align: right; }
  .sched td {
    padding: var(--sp-3); border-bottom: var(--hair) solid var(--line-soft); vertical-align: top;
    background: var(--surface);
  }
  .sched td.num { text-align: right; white-space: nowrap; }
  .sched td.money { font-weight: 600; }
  .sched td.desc { min-width: 220px; max-width: 380px; }
  .sched td.unit { color: var(--ink-soft); white-space: nowrap; }
  .sched .where { display: block; margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--ink-faint); }
  .sched .stakeline { display: block; margin-top: var(--sp-1); color: var(--warn); font-weight: 600; }
  .sched .srctext { display: block; margin-top: var(--sp-1); color: var(--ink-soft); }
  .sched tr.total td {
    background: var(--sunken); font-weight: 600; border-top: var(--rule) solid var(--ink);
    border-bottom: 0; color: var(--ink);
  }
  /* An unsourced row is hatched the same way the ledger hatches "this bidder has no such line" —
     one visual convention for "there is no value here", used twice, rather than two. */
  .sched tr.unsourced td.absent {
    background-image: repeating-linear-gradient(45deg,
      transparent 0 5px, rgba(120,124,130,.13) 5px 10px);
    text-align: right;
  }
  /* The four response columns a contractor fills in. Left visibly empty and ruled, because the
     emptiness is the product: this is the document they answer. */
  .sched th.reply { background: var(--accent-tint); color: var(--accent-ink); }
  .sched td.reply { background: var(--accent-tint); min-width: 96px; height: 34px; }

  .qcards { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .qcard {
    background: var(--sunken); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-5);
    display: flex; flex-direction: column; gap: 2px; min-width: 128px;
  }
  .qcard b { font-size: var(--fs-h3); font-variant-numeric: tabular-nums lining-nums; }
  .qcard span { font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-faint); }

  .rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  @media (max-width: 860px) { .rec-grid { grid-template-columns: 1fr; } }
  .rec-note { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 var(--sp-4); max-width: var(--prose); }
  /* The technical half, empty ON PURPOSE and hatched so it reads as a deliberate blank rather than
     a section that failed to load. This is the single clearest statement on the page of what an
     account is for, so it is drawn rather than described. */
  .rec-empty {
    border: var(--hair) dashed var(--line); border-radius: var(--r-2); padding: var(--sp-6);
    min-height: 160px; display: flex; flex-direction: column; gap: var(--sp-2);
    color: var(--ink-soft); font-size: var(--fs-small);
    background-image: repeating-linear-gradient(45deg,
      transparent 0 7px, rgba(120,124,130,.09) 7px 14px);
  }
  .rec-empty b { color: var(--ink); }
  .rec-combined {
    display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
    margin: var(--sp-8) 0 var(--sp-5); padding-top: var(--sp-5);
    border-top: var(--rule) solid var(--ink);
  }
  .rec-combined .k { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-faint); }
  .rec-combined .v { font-family: var(--serif); font-size: var(--fs-h1); line-height: 1; }
  .rec-combined .n { font-size: var(--fs-small); color: var(--ink-soft); }
  .conds { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
  .conds li {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-1) var(--sp-3);
    font-size: var(--fs-small); align-items: start;
  }
  .conds li b { grid-column: 2; }
  .conds li span { grid-column: 2; color: var(--ink-soft); max-width: var(--prose); }
  .conds li::before {
    grid-row: 1 / span 2; grid-column: 1; content: "\2717"; font-weight: 700;
    color: var(--risk); line-height: 1.3;
  }
  .conds li.met::before { content: "\2713"; color: var(--ok); }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }