@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=JetBrains+Mono:wght@500;600&family=Manrope:wght@400;500;600;700;800&family=Mulish:wght@400;600;700&family=Public+Sans:wght@400;500;600&family=Spectral:wght@500;600&display=swap');

/* Theme tokens (ADR 0020 / bci-ui). TWO orthogonal axes, both chosen client-side (theme.js) and applied
   pre-paint on `<html>`:

     • MODE  — `data-theme` = System (default; follows OS) | Light | Dark.
     • STYLE — `data-style` = ledger (DEFAULT) | instrument | warm. A visual identity: palette + fonts.
               Set globally by an admin; a user may pick their own only when the admin allows it.

   This file is linked at the END of <head> (after each page's inline :root), so the core palette tokens
   here WIN the cascade — the app adopts the active style app-wide without editing every page. Ledger is
   the base `:root`; the other styles override under `[data-style="…"]`. Dark is layered on top per style.
   See docs/design-system.md and docs/artifacts/design-directions-concept.html. */

/* ============================ LEDGER — the default (LIGHT is the base) ============================ */
:root {
  --bg: #F6F4EF; --panel: #FFFFFF; --ink: #22201B; --muted: #6C685E; --line: #E5E1D6;
  --accent: #0C6157; --biz: #9A6B1F; --tech: #0C6157; --user: #EAF1EF; --assist: #F0EDE6;
  --app-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-title-font: "Spectral", Georgia, "Times New Roman", serif;
  --app-mono: "Hanken Grotesk", ui-monospace, Menlo, Consolas, monospace;
  --radius: 10px;

  /* shared surfaces/pills the pages read via var() — authored light; dark flips them below. */
  --chip-bg: #e3efec;      --chip-soon-bg: #efece4;
  --btn-soft: #efece4;     --btn-soft-fg: #22201B;
  --card-tile-bg: #f0ede6;          --card-tile-emph-bg: #e3efec;
  --card-tile-emph-border: #cfe3df; --table-head-bg: #faf8f3; --row-highlight: #f5efdd;
  --pill-ok-bg: #dcefe9; --pill-ok-fg: #0f6e56;
  --pill-warn-bg: #f4ead2; --pill-warn-fg: #854f0b;
  --scope-chip-bg: #eceee9; --scope-chip-fg: #3b4a3f; --scope-chip-border: #dcded7;
  --danger-fg: #b3261e;

  /* ---- TYPE SCALE (global, ADR 0028) — role-based, not one size. Set here so EVERY style inherits
     it; a style may override. Sizes are the fix for "text too small": 16px is the app floor, prose
     gets 17, dense UI (table cells, form labels) stays at 14.5 where density is the point. ---- */
  --fs-d1: 44px;     /* page / hero display */
  --fs-d2: 30px;     /* section display */
  --fs-h:  21px;     /* card + panel heading */
  --fs-prose: 17px;  /* marketing, help, long-form reading */
  --fs-body: 16px;   /* app default — the floor, never go under */
  --fs-ui: 14.5px;   /* dense UI: table cells, labels, nav */
  --fs-micro: 12.5px;/* captions, provenance, footnotes */
  --lh-body: 1.55;  --lh-display: 1.06;
  --tr-display: -.025em;  /* display tracking; big type needs negative, small type does not */
  --tr-label: .14em;      /* uppercase labels need the opposite */

  /* ---- SEMANTIC STATE — deliberately NOT the accent (ADR 0028). When the brand colour is also the
     "good" colour, status stops reading at a glance. These stay stable across styles. ---- */
  --pos: #1E7A4E; --pos-bg: #E4F2EA;
  --warn:#A66A05; --warn-bg:#F7EDDA;
  --neg: #B33A2B; --neg-bg: #F8E7E4;
  /* `acq` is a fourth state and NOT an opinion: it marks a fact that has been settled, e.g. a domain
     bought, an invoice paid, a period closed. Deliberately blue, so it cannot be mistaken for good
     (--pos), bad (--neg) or attention (--warn), and deliberately not near any style's accent: teal
     for ledger and dblrule, electric indigo for instrument, brass for warm. */
  --acq: #1B5E9C; --acq-bg: #E4EDF7;

  /* ---- RULE WEIGHTS — the ledger device: one rule closes a subtotal, two close a total ---- */
  --rule-hair: 1px;  --rule-strong: 1px;
}

/* ======================= DOUBLE RULE (light) — ADR 0028 =======================
   Drawn from accounting's own typography rather than fintech convention: cool blue-green ledger
   paper (NOT cream), hairline rules that separate real groups of data, tabular figures, and the
   single-rule-subtotal / double-rule-total device. Archivo carries display, Public Sans carries
   reading, IBM Plex Mono is confined to provenance where the content really is machine output. */
:root[data-style="dblrule"] {
  --bg: #F2F5F6; --panel: #FFFFFF; --ink: #0E1619; --muted: #55666C; --line: #D6DFE2;
  --accent: #0B6E78; --biz: #0B6E78; --tech: #B4530A; --user: #E2F0F1; --assist: #E9EEF0;
  --app-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-title-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 5px;                       /* squarer than the others — a ledger is ruled, not rounded */
  --hair: #E7EDEF;                     /* faint intra-group rule */
  --chip-bg: #E2F0F1;      --chip-soon-bg: #E9EEF0;
  --btn-soft: #E9EEF0;     --btn-soft-fg: #0E1619;
  --card-tile-bg: #E9EEF0;          --card-tile-emph-bg: #E2F0F1;
  --card-tile-emph-border: #BEDCDF; --table-head-bg: #F7FAFA; --row-highlight: #EDF5F5;
  --pill-ok-bg: #E4F2EA; --pill-ok-fg: #1E7A4E;
  --pill-warn-bg: #F7EDDA; --pill-warn-fg: #A66A05;
  --scope-chip-bg: #E9EEF0; --scope-chip-fg: #3A4A4F; --scope-chip-border: #D6DFE2;
  --danger-fg: #B33A2B;
}

/* ============================ INSTRUMENT (light) ============================ */
:root[data-style="instrument"] {
  --bg: #F3F5F8; --panel: #FFFFFF; --ink: #0F1419; --muted: #5B6673; --line: #E3E8EF;
  --accent: #4B4EE7; --biz: #4B4EE7; --tech: #12B886; --user: #ECEDFD; --assist: #EEF1F6;
  --app-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-title-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 11px;
  --chip-bg: #ececfd; --chip-soon-bg: #eef1f6; --btn-soft: #eef1f6; --btn-soft-fg: #0F1419;
  --card-tile-bg: #eef1f6; --card-tile-emph-bg: #ececfd; --card-tile-emph-border: #d6d7f8;
  --table-head-bg: #f7f9fb; --row-highlight: #eef1f6;
  --scope-chip-bg: #eef1f6; --scope-chip-fg: #33415c; --scope-chip-border: #dbe3f0;
}

/* ============================ WARM ADVISOR (light) ============================ */
:root[data-style="warm"] {
  --bg: #FBF6EC; --panel: #FFFDF8; --ink: #2A2015; --muted: #7C6F5B; --line: #EADFC9;
  --accent: #A6701B; --biz: #A6701B; --tech: #3E7C74; --user: #F5E9D0; --assist: #F4EAD5;
  --app-font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-title-font: "Fraunces", Georgia, "Times New Roman", serif;
  --app-mono: "Mulish", ui-monospace, Menlo, Consolas, monospace;
  --radius: 14px;
  --chip-bg: #f3e7cf; --chip-soon-bg: #f0e9da; --btn-soft: #f2ead7; --btn-soft-fg: #2A2015;
  --card-tile-bg: #f4ead5; --card-tile-emph-bg: #f3e7cf; --card-tile-emph-border: #e6d4b0;
  --table-head-bg: #fbf4e6; --row-highlight: #f5ecd6;
  --scope-chip-bg: #f2ead7; --scope-chip-fg: #5a4a30; --scope-chip-border: #e6dcc4;
}

/* apply the style's typeface app-wide (pages set a shorthand `font:` in their inline :root; this
   later, more-specific longhand overrides the family so the type changes with the style). */
body { font-family: var(--app-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }

/* =================================================================================================
   DARK — layered per style. Applies when the user picks Dark, OR is on System and the OS prefers dark
   (never when they explicitly picked Light). Each block sets the same core tokens for its style.
   ================================================================================================= */

/* ---- LEDGER dark (the base dark) ---- */
:root[data-theme="dark"],
:root[data-style="ledger"][data-theme="dark"] {
  --bg: #1A1813; --panel: #232019; --ink: #ECE6D7; --muted: #9C9484; --line: #33302A;
  --accent: #38B2A0; --biz: #D9A441; --tech: #38B2A0; --user: #22312E; --assist: #2A2820;
  --chip-bg: #16302c; --chip-soon-bg: #2a2820; --btn-soft: #2a2820; --btn-soft-fg: #ECE6D7;
  --card-tile-bg: #2a2820; --card-tile-emph-bg: #16302c; --card-tile-emph-border: #2c4a44;
  --table-head-bg: #201d16; --row-highlight: #2e2b1a;
  --pill-ok-bg: #12352c; --pill-ok-fg: #7fdcc0; --pill-warn-bg: #3a2f1a; --pill-warn-fg: #e6c98a;
  --scope-chip-bg: #262319; --scope-chip-fg: #d8d0bf; --scope-chip-border: #3a362c;
  --danger-fg: #e4796e; color-scheme: dark;
  --pos: #4BC48A; --pos-bg: #13312A; --warn:#E0A33C; --warn-bg:#33290F; --neg: #E8776A; --neg-bg:#361E1B; --acq: #6BB0E8; --acq-bg: #12283C;
  --hair: #262319;
}
/* ---- INSTRUMENT dark ---- */
:root[data-style="instrument"][data-theme="dark"] {
  --bg: #0E1116; --panel: #171B21; --ink: #E7EBF1; --muted: #8B95A2; --line: #232A33;
  --accent: #7C7DF2; --biz: #7C7DF2; --tech: #34D399; --user: #1E2146; --assist: #1B212A;
  --chip-bg: #1e2146; --chip-soon-bg: #1b212a; --btn-soft: #1b212a; --btn-soft-fg: #E7EBF1;
  --card-tile-bg: #1b212a; --card-tile-emph-bg: #1e2146; --card-tile-emph-border: #33356b;
  --table-head-bg: #131820; --row-highlight: #221f16; color-scheme: dark;
}
/* ---- WARM dark ---- */
:root[data-style="warm"][data-theme="dark"] {
  --bg: #201A12; --panel: #29231A; --ink: #F0E7D6; --muted: #A3947C; --line: #382F22;
  --accent: #E0B24E; --biz: #E0B24E; --tech: #4FB8BE; --user: #322817; --assist: #2A2318;
  --chip-bg: #322817; --chip-soon-bg: #2a2318; --btn-soft: #2a2318; --btn-soft-fg: #F0E7D6;
  --card-tile-bg: #2a2318; --card-tile-emph-bg: #322817; --card-tile-emph-border: #4a3c22;
  --table-head-bg: #241e15; --row-highlight: #322817; color-scheme: dark;
}

/* ---- DOUBLE RULE dark ---- designed, not inverted: a desaturated slate ground, surfaces sitting
   LIGHTER than the ground, and the accent brightened so it still holds contrast on a dark field. */
:root[data-style="dblrule"][data-theme="dark"] {
  --bg: #0B1113; --panel: #131C1F; --ink: #E8EFF1; --muted: #8FA3A9; --line: #233036;
  --accent: #45BCC7; --biz: #45BCC7; --tech: #D9A441; --user: #12292D; --assist: #0F171A;
  --hair: #1B262A;
  --chip-bg: #12292D; --chip-soon-bg: #0F171A; --btn-soft: #0F171A; --btn-soft-fg: #E8EFF1;
  --card-tile-bg: #0F171A; --card-tile-emph-bg: #12292D; --card-tile-emph-border: #24484D;
  --table-head-bg: #0E171A; --row-highlight: #13252A;
  --pill-ok-bg: #13312A; --pill-ok-fg: #4BC48A; --pill-warn-bg: #33290F; --pill-warn-fg: #E0A33C;
  --scope-chip-bg: #131C1F; --scope-chip-fg: #C3D2D6; --scope-chip-border: #233036;
  --danger-fg: #E8776A; color-scheme: dark;
}

/* ---- System-dark (OS prefers dark, no explicit Light) — same per-style palettes ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1813; --panel: #232019; --ink: #ECE6D7; --muted: #9C9484; --line: #33302A;
    --accent: #38B2A0; --biz: #D9A441; --tech: #38B2A0; --user: #22312E; --assist: #2A2820;
    --chip-bg: #16302c; --chip-soon-bg: #2a2820; --btn-soft: #2a2820; --btn-soft-fg: #ECE6D7;
    --card-tile-bg: #2a2820; --card-tile-emph-bg: #16302c; --card-tile-emph-border: #2c4a44;
    --table-head-bg: #201d16; --row-highlight: #2e2b1a;
    --pill-ok-bg: #12352c; --pill-ok-fg: #7fdcc0; --pill-warn-bg: #3a2f1a; --pill-warn-fg: #e6c98a;
    --scope-chip-bg: #262319; --scope-chip-fg: #d8d0bf; --scope-chip-border: #3a362c;
    --danger-fg: #e4796e; color-scheme: dark;
    --pos: #4BC48A; --pos-bg: #13312A; --warn:#E0A33C; --warn-bg:#33290F; --neg: #E8776A; --neg-bg:#361E1B; --acq: #6BB0E8; --acq-bg: #12283C;
    --hair: #262319;
  }
  :root[data-style="instrument"]:not([data-theme="light"]) {
    --bg: #0E1116; --panel: #171B21; --ink: #E7EBF1; --muted: #8B95A2; --line: #232A33;
    --accent: #7C7DF2; --biz: #7C7DF2; --tech: #34D399; --user: #1E2146; --assist: #1B212A;
    --chip-bg: #1e2146; --chip-soon-bg: #1b212a; --btn-soft: #1b212a; --btn-soft-fg: #E7EBF1;
    --card-tile-bg: #1b212a; --card-tile-emph-bg: #1e2146; --card-tile-emph-border: #33356b;
    --table-head-bg: #131820; --row-highlight: #221f16;
  }
  :root[data-style="warm"]:not([data-theme="light"]) {
    --bg: #201A12; --panel: #29231A; --ink: #F0E7D6; --muted: #A3947C; --line: #382F22;
    --accent: #E0B24E; --biz: #E0B24E; --tech: #4FB8BE; --user: #322817; --assist: #2A2318;
    --chip-bg: #322817; --chip-soon-bg: #2a2318; --btn-soft: #2a2318; --btn-soft-fg: #F0E7D6;
    --card-tile-bg: #2a2318; --card-tile-emph-bg: #322817; --card-tile-emph-border: #4a3c22;
    --table-head-bg: #241e15; --row-highlight: #322817;
  }  :root[data-style="dblrule"]:not([data-theme="light"]) {
    --bg: #0B1113; --panel: #131C1F; --ink: #E8EFF1; --muted: #8FA3A9; --line: #233036;
    --accent: #45BCC7; --biz: #45BCC7; --tech: #D9A441; --user: #12292D; --assist: #0F171A;
    --hair: #1B262A;
    --chip-bg: #12292D; --chip-soon-bg: #0F171A; --btn-soft: #0F171A; --btn-soft-fg: #E8EFF1;
    --card-tile-bg: #0F171A; --card-tile-emph-bg: #12292D; --card-tile-emph-border: #24484D;
    --table-head-bg: #0E171A; --row-highlight: #13252A;
    --pill-ok-bg: #13312A; --pill-ok-fg: #4BC48A; --pill-warn-bg: #33290F; --pill-warn-fg: #E0A33C;
    --scope-chip-bg: #131C1F; --scope-chip-fg: #C3D2D6; --scope-chip-border: #233036;
    --danger-fg: #E8776A;
  }
}

/* --- two-pane pages on a phone (B-007) -------------------------------------------------------
   The chat (`index.html`) and the archived replay (`session_replay.html`) are the same shape: a
   transcript beside a results pane. Below 768px that shape does not fit, so both collapse to ONE
   column and the card renders inline under its question — question, answer, question, answer, in
   reading order.

   Kept HERE rather than inline in each page because it had already drifted once: the chat page had
   these rules and the replay page did not, so an archived session kept its desktop two columns on a
   phone and wrapped the transcript to one-to-three words per line. Both pages mark their `<main>`
   with `.two-pane`; the rules are scoped to that class because `main` is a generic element used by
   every other page.

   Loaded AFTER each page's inline <style> (both link this stylesheet last), so these win — which is
   the point: one place to change, and neither page can silently fall behind. */
.two-pane .turn-card { display: none; }

@media (max-width: 768px) {
  .two-pane { grid-template-columns: 1fr !important; }
  .two-pane .chat-col { border-right: 0; }
  .two-pane .results-col { display: none; }        /* single column — no separate results pane */
  .two-pane .turn .bubble.assistant { display: none; }  /* the inline card carries the narrative */
  /* ...except on a turn that has no card: one still running, or one that ended without an answer.
     Hidden, a phone showed the question and a Stop button with nothing saying what was happening,
     and a failed question with no reason at all. Found driving the page in Chromium at 390px with
     every test green. */
  .two-pane .turn.pending .bubble.assistant { display: flex; }
  .two-pane .turn.failed .bubble.assistant { display: block; }
  /* Two classes, not one: replay-ui.js injects its .turn-pin rule into <head> AFTER this stylesheet,
     so an equally specific rule loses the cascade and the control stays visible on phones. */
  .two-pane .turn .turn-pin { display: none; }     /* the card is inline here; nothing to bring back */
  .two-pane .turn-card { display: block; margin-top: 8px; background: var(--panel);
                         border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
                         overflow: hidden; }
  .two-pane .turn-card table { font-size: 12px; }
  .two-pane .turn-card canvas.result-chart { max-width: 100%; }
  /* A long unbroken word ("Subcontractors") ran past the edge of its bubble at 390px. `anywhere`
     rather than `break-all`: ordinary prose still breaks between words, and only a word with
     nowhere else to go is split. */
  .two-pane .bubble { overflow-wrap: anywhere; }
}

/* =================================================================================================
   COMPONENT LAYER (ADR 0028) — the ledger devices.

   Lives at the END of theme.css on purpose: theme.css is already the last stylesheet in all 26
   templates' <head>, so components arrive app-wide without editing every page (there is no shared
   head partial). Every class is `lgr-` prefixed, so nothing here can collide with a page's existing
   inline CSS — these are ADDITIVE and no existing markup changes appearance.

   Type: the scale tokens above are defined for EVERY style but only APPLIED under `dblrule`. That
   keeps adopting the new look a single reversible switch instead of a font-size change landing on
   26 pages at the same time as a new palette.
   ================================================================================================= */

:root[data-style="dblrule"] body { font-size: var(--fs-body); line-height: var(--lh-body); }
:root[data-style="dblrule"] h1, :root[data-style="dblrule"] h2, :root[data-style="dblrule"] h3 {
  font-family: var(--app-title-font); letter-spacing: var(--tr-display); text-wrap: balance; }
:root[data-style="dblrule"] table { font-size: var(--fs-ui); }

/* --- figures ------------------------------------------------------------------------------------
   Money always lines up. Anywhere digits stack in a column, they must be tabular or the eye cannot
   compare them — this is the single highest-value rule in the whole file. */
.lgr-num, .lgr-card .v, .lgr-table td.r, .lgr-table th.r { font-variant-numeric: tabular-nums; }

/* --- ledger card: label, figure, hairline, footing ---------------------------------------------- */
.lgr-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 15px 12px; display: flex; flex-direction: column; gap: 2px; }
.lgr-card .k { font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--muted); font-weight: 600; font-family: var(--app-title-font); }
.lgr-card .v { font-family: var(--app-title-font); font-weight: 700; font-size: 31px;
  letter-spacing: var(--tr-display); line-height: 1.12; margin-top: 5px; color: var(--ink); }
.lgr-card .r { border-top: var(--rule-hair) solid var(--hair, var(--line)); margin-top: 9px;
  padding-top: 8px; font-size: var(--fs-micro); color: var(--muted);
  display: flex; justify-content: space-between; gap: 8px; }
/* the one card that needs a person: an accent rail, never a colour-wash */
.lgr-card.flag { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.lgr-card.flag .v { color: var(--accent); }

/* --- ledger table: one rule closes a subtotal, two close the total ------------------------------ */
.lgr-table { width: 100%; border-collapse: collapse; }
.lgr-table th { text-align: left; font-size: 10.5px; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  font-family: var(--app-title-font); padding: 0 0 7px;
  border-bottom: var(--rule-strong) solid var(--ink); }
.lgr-table td { padding: 9px 0; border-bottom: var(--rule-hair) solid var(--hair, var(--line));
  color: var(--ink); }
.lgr-table td.r, .lgr-table th.r { text-align: right; }
.lgr-table tr.subtotal td { border-top: var(--rule-strong) solid var(--ink); font-weight: 600; }
.lgr-table tr.total td { border-top: var(--rule-strong) solid var(--ink);
  border-bottom: 3px double var(--ink); font-weight: 700; font-family: var(--app-title-font); }
.lgr-scroll { overflow-x: auto; }          /* wide tables scroll themselves, never the page */

/* --- provenance panel: the product's actual argument, made visible ------------------------------ */
.lgr-trace { background: var(--assist); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.lgr-trace .th { padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 10.5px;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); font-weight: 600;
  font-family: var(--app-title-font); display: flex; justify-content: space-between; gap: 10px; }
.lgr-trace .tb { padding: 12px 13px; font-family: var(--app-mono); font-size: var(--fs-micro);
  color: var(--muted); line-height: 1.75; }
.lgr-trace .tb b { color: var(--ink); font-weight: 500; }
.lgr-trace .tb .kw { color: var(--accent); }

/* --- state chips: semantic, never the accent ---------------------------------------------------- */
.lgr-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1.5px 8px;
  border-radius: 999px; font-family: var(--app-title-font); white-space: nowrap; }
.lgr-chip.pos  { background: var(--pos-bg);  color: var(--pos); }
.lgr-chip.warn { background: var(--warn-bg); color: var(--warn); }
.lgr-chip.neg  { background: var(--neg-bg);  color: var(--neg); }
.lgr-chip.acc  { background: var(--chip-bg); color: var(--accent); }

/* --- section device: the double rule ------------------------------------------------------------ */
.lgr-rule { height: 3px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.lgr-eyebrow { font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--muted); font-weight: 600; font-family: var(--app-title-font); }

@media (prefers-reduced-motion: reduce) { .lgr-card, .lgr-trace { transition: none !important; } }

/* --- the evidence table's "show all" — one table that GROWS, not a second one -------------------
   The first cut put the remaining rows in a second table inside a <details>, so opening it added a
   whole new section, with its own header, repeating rows already on screen. Every row is in the one
   table now; the ones past the top N are hidden until the toggle is checked, and the header and
   footed total stay put through the expansion because they are what the extra rows are read against.

   Written so that the DEFAULT is everything visible and the rule only ever HIDES. Where `:has()` is
   unsupported the selector never matches, so the table shows all its rows and the toggle is inert —
   the old un-truncated behaviour, which is usable. The other way round, an unsupported `:has()`
   would leave rows permanently unreachable. */
.lgr-evidence:has(.lgr-rowmore-toggle:not(:checked)) .lgr-row-extra { display: none; }

.lgr-rowmore { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
           font-size: 13px; color: var(--accent); cursor: pointer; user-select: none; }
.lgr-rowmore::before { content: "\25B8"; font-size: 11px; line-height: 1; }
.lgr-evidence:has(.lgr-rowmore-toggle:checked) .lgr-rowmore::before { content: "\25BE"; }
.lgr-rowmore:hover { text-decoration: underline; }
/* The checkbox is the state, never the affordance — the label is what a person clicks. */
.lgr-rowmore-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.lgr-rowmore-out { display: none; }
.lgr-evidence:has(.lgr-rowmore-toggle:checked) .lgr-rowmore-in { display: none; }
.lgr-evidence:has(.lgr-rowmore-toggle:checked) .lgr-rowmore-out { display: inline; }

/* --- one column too many for a phone (B-002) ---------------------------------------------------
   Business Cost Overview's table is 375px in a 322px scroller at 390px, so `% of revenue` — the
   column an owner reads first — scrolled out of view. Dropping `Share %` fits it in 322px exactly,
   at full type size.

   WHICH column goes is the builder's call (`DisplayTable.drop_when_narrow`), never this file's: the
   table is generic across many builders, so `nth-child(3)` means something different on each. The
   template stamps `data-drop="N"` on the header cell, every body cell and the total cell — hiding a
   header without its cells shifts every row one column left, a table that looks right and is not.

   Shrinking the type instead would take 10px, ~70% of `--fs-ui`, on the numbers an owner reads, and
   below ~11px the name column's floor binds rather than the text. Measurements in BACKLOG B-002.

   Part of the evidence table, so it lives IN this layer and carries the `lgr-` prefix — the drop is
   a behaviour of `.lgr-evidence`, not a page's own styling.

   Same principle as the row toggle above: the rule only ever HIDES, and only inside a `:has()`. Where
   `:has()` is unsupported the selector never matches, so the column stays visible and the table
   scrolls — today's behaviour, which is usable. Hiding it by default instead would leave a column
   unreachable on exactly the browsers that cannot reveal it. */
.lgr-drop-note { display: none; margin: 6px 2px 0; font-size: 11.5px; color: var(--muted); }
/* The toggle names the column only where the column is actually hidden — above the drop width it is
   on screen, and "Show all 11 rows and Share %" would offer something already visible. */
.lgr-drop-also { display: none; }

/* 470, not 430: the largest phone in common use is 430px (iPhone 15 Pro Max), and measuring at
   431px showed the full four-column table scrolling 21px again — the very complaint B-002 is about,
   one pixel above the breakpoint. Above ~470px the scroller has room for every column, so nothing
   is dropped that did not need to be. */
@media (max-width: 470px) {
  .lgr-evidence:has(.lgr-rowmore-toggle:not(:checked)) [data-drop="1"] { display: none; }
  .lgr-drop-note { display: block; }
  .lgr-drop-also { display: inline; }
}

/* The editable period chip on an Ask card (_result_card.html). Its summary IS the chip, so the
   browser's disclosure triangle is hidden; the chip carries its own ▾. */
.lgr-period-edit > summary::-webkit-details-marker { display: none; }

/* Read by a screen reader, not shown. Used for the Ask page's "answer ready" announcement. */
.lgr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
               clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================================================================================
   ASK CARD (`lgr-ac-*`): the result card on the Ask page and the session replay
   (_result_card.html). These declarations used to be style attributes on the markup; they are the
   same values, moved, so the card looks exactly as it did (checked by pixel comparison at 1280px and
   390px when they moved). Edit them here, not in the template.

   One deliberate specificity choice: the table's font size. As a style attribute it beat every
   stylesheet rule, including the Double Rule style's `table` size and the phone layout's
   `.two-pane .turn-card table`, both of which therefore never applied to this table. The rule below
   matches their specificity and comes after them, so the card keeps the 13px it has always had.
   Making the card follow the type scale instead is a design change, to make on purpose.
   ================================================================================================ */
.lgr-ac-h { font-size: 16px; margin: 0 0 8px; }
.lgr-ac-h-danger { color: var(--danger-fg); }
.lgr-ac-h-lead { margin: 0 0 6px; color: var(--ink); }
.lgr-ac-fresh { display: inline-block; background: var(--pill-ok-bg); color: var(--pill-ok-fg);
                border-radius: 20px; padding: 3px 12px; font-size: 12px; margin: 0 0 10px; }
.lgr-ac-scope { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.lgr-ac-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.lgr-ac-chip { display: inline-block; background: var(--scope-chip-bg); color: var(--scope-chip-fg);
               border: 1px solid var(--scope-chip-border); border-radius: 20px; padding: 2px 10px;
               font-size: 12px; }
.lgr-period-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lgr-period-edit > summary.lgr-ac-chip { cursor: pointer; list-style: none; }
.lgr-ac-period-opt { background: var(--panel); color: var(--ink);
                     border: 1px dashed var(--scope-chip-border, var(--line)); border-radius: 20px;
                     padding: 2px 10px; font-size: 12px; font-weight: 500; cursor: pointer; }
.lgr-ac-hero { margin: 2px 0 8px; }
.lgr-ac-hero-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lgr-ac-hero-value { font-size: 38px; line-height: 1.1; font-weight: 700; color: var(--ink);
                     font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lgr-ac-narrative { font-size: 15px; line-height: 1.5; margin: 0 0 6px; color: var(--ink); }
.lgr-ac-gap { border-left: 3px solid var(--accent); background: var(--card-tile-bg);
              border-radius: 0 8px 8px 0; padding: 11px 14px; margin: 2px 0 16px; }
.lgr-ac-gap-msg { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.lgr-ac-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lgr-ac-btn-strong { background: var(--ink); color: var(--bg); border: 0; border-radius: 6px;
                     padding: 7px 13px; font: 600 13px var(--app-title-font); cursor: pointer; }
.lgr-ac-btn-soft { background: var(--btn-soft); color: var(--btn-soft-fg); border: 1px solid var(--line);
                   border-radius: 6px; padding: 7px 13px; font: 600 13px var(--app-title-font);
                   text-decoration: none; }
.lgr-ac-needs { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.lgr-ac-need { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.lgr-ac-need + .lgr-ac-need { margin-top: 6px; }
.lgr-ac-need b { color: var(--ink); }
.lgr-ac-cap { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.lgr-ac-demo { display: inline-block; background: var(--pill-warn-bg); color: var(--pill-warn-fg);
               border-radius: 20px; padding: 1px 9px; font-size: 11px; margin-right: 6px; }
.lgr-ac-note { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: -6px 0 16px;
               padding: 8px 11px; background: var(--card-tile-bg); border-radius: 8px; }
.lgr-ac-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.lgr-ac-tile { background: var(--card-tile-bg); border-radius: 10px; padding: 8px 12px; min-width: 90px; }
.lgr-ac-tile-emph { background: var(--card-tile-emph-bg); border: 1px solid var(--card-tile-emph-border); }
.lgr-ac-tile-value { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lgr-ac-caption { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.lgr-ac-chart { position: relative; height: 260px; margin-bottom: 18px; }
.lgr-ac-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 340px; }
.lgr-ac-table { border-collapse: collapse; width: 100%; }
:root table.lgr-ac-table { font-size: 13px; }       /* see the note above this block */
.lgr-ac-th { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line);
             background: var(--table-head-bg); position: sticky; top: 0; white-space: nowrap; }
.lgr-ac-th.lgr-ac-r { text-align: right; }
.lgr-ac-td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.lgr-ac-td.lgr-ac-fig { text-align: right; font-variant-numeric: tabular-nums; }
.lgr-ac-hl { background: var(--row-highlight); }
.lgr-ac-foot { padding: 8px 10px; border-top: 2px solid var(--line); }
.lgr-ac-foot-label { font-weight: 600; }
.lgr-ac-foot-sum { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lgr-ac-foot-empty { border-top: 2px solid var(--line); }
.lgr-ac-upsell { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 11px 14px;
                 background: var(--assist); border: 1px solid var(--line); border-radius: 10px;
                 text-decoration: none; }
.lgr-ac-upsell-pro { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em;
                     text-transform: uppercase; color: var(--biz); background: var(--chip-soon-bg);
                     border-radius: 7px; padding: 4px 9px; }
.lgr-ac-upsell-body { flex: 1 1 auto; font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.lgr-ac-upsell-go { flex: none; color: var(--biz); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lgr-ac-rowcount { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.lgr-ac-source { color: var(--muted); font-size: 12px; margin-top: 18px; border-top: 1px solid var(--line);
                 padding-top: 10px; }
.lgr-ac-measured { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.lgr-ac-measured b { font-weight: 600; }
.lgr-ac-how { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.lgr-ac-how-sum { cursor: pointer; color: var(--ink); font-weight: 600; }
.lgr-ac-how-steps { margin: 8px 0 0; padding-left: 20px; line-height: 1.55; }
.lgr-ac-sql { margin-top: 8px; }
.lgr-ac-sql > summary { cursor: pointer; }
.lgr-ac-sql-text { white-space: pre-wrap; font-size: 11.5px; background: var(--card-tile-bg); padding: 8px;
                   border-radius: 6px; overflow: auto; }
.lgr-ac-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lgr-ac-next-label { flex-basis: 100%; }
.lgr-ac-next-btn { background: var(--btn-soft, var(--assist)); color: var(--btn-soft-fg, var(--ink));
                   border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
                   font: 600 13px var(--app-title-font, inherit); cursor: pointer; }
/* The correction line under every answer ("Not what you meant?"), ADR 0039. Was a style attribute. */
.lgr-ac-correct { color: var(--muted); font-size: 12px; margin-top: 10px; }
/* Under a clarification: the same pills, plus a link pill and an outlined "Edit my question". */
.lgr-ac-clarify { margin-top: 10px; }
.lgr-ac-clarify-link { text-decoration: none; display: inline-block; }
.lgr-ac-clarify-edit { background: transparent; }
.lgr-ac-flag { margin-top: 10px; font-size: 12.5px; }
.lgr-ac-flag > summary { cursor: pointer; color: var(--muted); }
.lgr-ac-flag-form { display: block; border: 0; padding: 8px 0 0; }
.lgr-ac-flag-reasons { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lgr-ac-flag-reasons legend { padding: 0; margin-bottom: 4px; color: var(--ink); }
.lgr-ac-flag-reason { display: flex; gap: 6px; align-items: center; }
.lgr-ac-flag-note { display: block; margin-top: 8px; color: var(--ink); }
.lgr-ac-flag-note textarea { display: block; width: 100%; margin-top: 4px; height: auto; font-size: inherit; }
.lgr-ac-flag-send { margin-top: 8px; padding: 6px 12px; font-size: 13px; }