/* ============================================================
   The Report — a document, not a dashboard.

   The rest of the app is card-shaped because it is task-shaped:
   discrete objects you act on. The report is read top to bottom,
   so it is set as a printed document — prose on the paper ground,
   sections divided by rules and space rather than boxes. Cards are
   kept for the two things here that genuinely are objects: the
   figures, and the method note.

   Tokens come from fib.css (--ink / --cream / --gold / --gold-text
   / --chart-mid), which re-skins the product pages after style.css.
   ============================================================ */


/* ---------- type scale ----------
   The page had thirteen sizes between 10px and 19px, several of them half a
   pixel apart — the muddy-hierarchy failure. Seven steps now, each far enough
   from its neighbour to read as a decision, in rem so browser text settings
   still work. Anton at 54px (fib.css .page-head h2) is the display step above
   these; nothing here competes with it.

   label 11 · caption 13 · secondary 15 · body 17 · heading 20 · lede 24-34   */
.report-page {
  --rt-label:     0.6875rem;   /* 11px  mono instrument labels, legends */
  --rt-caption:   0.8125rem;   /* 13px  captions, figure sublines */
  --rt-secondary: 0.9375rem;   /* 15px  figure titles, myth lines, aside prose */
  --rt-body:      1.0625rem;   /* 17px  the reading size */
  --rt-heading:   1.25rem;     /* 20px  section headings */
  --rt-lede:      clamp(1.5rem, 2.6vw, 2.125rem);

  /* The page's own inks and state chips. These were literals repeated across
     the sheet; named once so a change lands everywhere. */
  --rt-ink:         #23231A;   /* reading ink, 15.7:1 on paper */
  --rt-ink-soft:    #3A3A2E;   /* secondary prose */
  --rt-ink-draft:   #4A4A3C;   /* the machine draft beside yours */
  --rt-danger:      #A03325;
  --rt-danger-line: #E4C9C3;
  --chip-green-bg: #DDE3D2; --chip-green-ink: #33421F;
  --chip-brown-bg: #E9D9BD; --chip-brown-ink: #6B4A12;
  --chip-red-bg:   #F1D9D4; --chip-red-ink:   #8C2C1F;

  /* Numerals in this page are data: align them. */
  font-variant-numeric: tabular-nums;
}

/* Shared app classes land off the scale on this page: .subtitle clamps to
   14px, .btn-sm and .caption sit at 12px. Pulled onto the ramp here only —
   other pages keep their own sizing. */
.report-page .subtitle { font-size: var(--rt-secondary); line-height: 1.65; }
.report-page .caption { font-size: var(--rt-caption); line-height: 1.6; }
.report-page .btn-sm { font-size: var(--rt-caption); }

/* ---------- notice ---------- */
/* Full border and a marker square, echoing the page-head label rule.
   No side stripe.

   The [hidden] guard is load-bearing: an explicit `display` beats the UA's
   `[hidden] { display: none }` on specificity, so without it the banner
   showed as an empty bar whenever the report was current. triangle.css:61
   solved the same problem for .tri-status — this follows it. */
.report-status[hidden], .report-method[hidden] { display: none; }
.report-status {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: var(--s-6, 32px);
  border: 1px solid var(--creamLine);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--rt-caption);
  line-height: 1.6;
}
.report-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: translateY(-1px);
}
.report-status.is-error::before { background: var(--rt-danger); }

/* ---------- standfirst: the thesis, set as a lede ---------- */
.report-standfirst {
  padding-bottom: var(--s-6, 32px);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-7, 48px);
}
.report-headline {
  font-size: var(--rt-lede);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
  margin: 0;
}
/* Long thesis sentences need room; the balance cap above keeps short
   ones from stranding a single word on line two. */
@supports not (text-wrap: balance) { .report-headline { max-width: 30ch; } }

/* Instrument strip — the house's Fragment Mono annotation register, carrying
   real platform values (DESIGN.md). Separators are drawn between items rather
   than typed into the string, so any item can be absent. */
.report-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: var(--s-4, 16px);
  font-family: var(--font-mono);
  font-size: var(--rt-label);
  letter-spacing: 0.4px;
  color: var(--chart-mid);
}
/* Plain inline, not inline-flex: a flex container drops the whitespace
   between its text nodes, which ran "471" into "approved signals". */
.report-meta span { display: inline; }
.report-meta span + span::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px; height: 11px;
  margin: 0 12px;
  background: var(--creamLine);
}
.report-meta b { font-weight: 400; color: var(--ink); }

.report-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: var(--s-4, 16px);
}
.report-state { color: var(--chart-mid); font-size: var(--rt-caption); }

/* ---------- sections ---------- */
/* Heading in a left rail, prose in the measure. A 66ch column inside a
   1240px page otherwise strands half the width; this gives that space a
   job and matches the two-column idiom already used by /reference and
   /simulation. Figures span both columns — they are objects, not prose,
   and they earn the full width. */
.report-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 8px 48px;
  align-items: start;
}
/* Rhythm: generous between sections, tight within them. Uniform 32px
   everywhere read as a list of blocks rather than a document. */
.report-section + .report-section {
  border-top: 1px solid var(--creamLine);
  margin-top: var(--s-7, 48px);
  padding-top: var(--s-7, 48px);
}
.report-section h3 {
  grid-column: 1;
  font-size: var(--rt-heading);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.report-section .report-prose { grid-column: 2; }
/* Everything that is not the heading or a full-bleed figure belongs in the
   text column. Grid auto-placement otherwise drops the next unplaced child
   into the 210px rail — the odds block and the watch-list both did. */
.report-section .part-block,
.report-section .watchlist,
.report-section .aud-split,
.report-section > .part-tools { grid-column: 2; }
.report-section .report-figure { grid-column: 1 / -1; }

/* Body copy is the point of this page: ink, not muted gray, and set
   at a reading size. style.css caps `p` at clamp(13px, 1vw, 15px),
   which beats inheritance from the wrapper — so the size is declared
   on the paragraph itself. */
.report-prose { max-width: 66ch; }
.report-prose p {
  font-size: var(--rt-body);
  line-height: 1.7;
  color: var(--rt-ink);
  text-wrap: pretty;
  margin: 0;
}
.report-prose p + p { margin-top: 0.95em; }

/* ---------- citations ---------- */
/* A real button: reachable by keyboard, announced as a control, and
   at least 24px tall (WCAG 2.5.8 inline-target minimum — a 44px pill
   inside running prose would wreck the line rhythm). Colours are
   fib's own text-safe pairs: 5.79:1 and 6.85:1. */
.cite-pill {
  display: inline-block;
  font: inherit;
  font-size: var(--rt-caption);
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  min-height: 24px;
  margin: 0 1px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--chip-brown-bg);
  color: var(--chip-brown-ink);
  cursor: pointer;
  vertical-align: baseline;
  white-space: nowrap;
  transition: background 180ms var(--ease-epoch), border-color 180ms var(--ease-epoch);
}
.cite-pill:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.cite-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cite-pill[data-scenario] { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.cite-pill[data-scenario]:hover { background: var(--deepGreen); border-color: var(--deepGreen); color: var(--paperWhite); }

/* ---------- figures ---------- */
/* Panels for the ones that are data surfaces; the triangle is a drawing and
   sits on the paper inside a hairline instead, so five figures do not read as
   five identical boxes. */
.report-figure {
  min-width: 0;
  margin-top: var(--s-5, 24px);
  padding: var(--s-5, 24px);
  background: var(--cream);
  border-radius: 18px;
}
.fig-triangle {
  background: none;
  border: 1px solid var(--creamLine);
  border-radius: 18px;
}
/* Figure heading: the figure states its own claim, so a reader who scans
   only the pictures still gets the argument. */
.fig-head { margin-bottom: var(--s-4, 16px); }
.fig-head h4 {
  font-size: var(--rt-secondary); font-weight: 700; letter-spacing: 0;
  color: var(--ink); margin: 0;
}
.fig-sub {
  font-family: var(--font-mono);
  font-size: var(--rt-label); letter-spacing: 0.3px; line-height: 1.5;
  color: var(--chart-mid); margin: 6px 0 0;
}
.fig-label {
  font-size: var(--rt-caption); font-weight: 700; letter-spacing: 0;
  color: var(--chart-mid); margin: 0 0 10px; text-transform: none;
}

/* --- library composition --- */
.fig-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.fig-strips { display: flex; flex-direction: column; gap: var(--s-5, 24px); }
.fig-strips .caption { margin-top: 8px; }
.fig-evidence .hbar-label { color: var(--ink); font-size: var(--rt-caption); }
.fig-evidence .hbar-value { color: var(--chart-mid); }
.fig-evidence .hbar-track { height: 12px; background: rgba(19,19,9,0.05); border-radius: 0 4px 4px 0; }

/* --- segmented proportion bar --- */
.segbar-track {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden;
  background: rgba(19,19,9,0.05);
}
.segbar-part { display: grid; place-items: center; min-width: 3px; transition: filter 180ms var(--ease-epoch); }
.segbar-part:hover { filter: brightness(1.12); }
.segbar-inline { font-family: var(--font-mono); font-size: var(--rt-label); color: inherit; letter-spacing: 0.2px; }
.segbar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.segbar-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rt-caption); color: var(--chart-mid); }
.segbar-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.segbar-key b { font-family: var(--font-mono); font-weight: 400; color: var(--ink); }

/* --- triangle --- */
/* Both columns share the panel proportionally — a fixed 460px diagram beside
   a 44ch column left a quarter of the width empty. */
.fig-triangle-body {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
/* The diagram is capped at its natural viewBox width so it never scales UP —
   scaling up magnifies the labels, which is how chart text ended up larger
   than the page's headings. Scaling down on narrow screens is fine. */
.fig-triangle svg { width: 100%; height: auto; max-width: 460px; margin-inline: auto; }
.tri-fig-n { font-family: var(--font-mono); font-size: var(--rt-body); }
.tri-fig-name { font-size: var(--rt-label); }
/* SVG text scales with the viewBox: at phone width the diagram is ~0.6x and
   the corner names would land near 7px. Set them in user units to compensate. */
@media (max-width: 480px) {
  .tri-fig-n { font-size: 24px; }
  .tri-fig-name { font-size: 18px; }
}
.fig-read { font-size: var(--rt-secondary); line-height: 1.62; color: var(--rt-ink); max-width: 52ch; margin: 0; }
.fig-read strong { font-weight: 700; }

/* --- the bridge: which force each scenario rests on --- */
.fig-bridge { background: none; border: 1px solid var(--creamLine); margin-top: var(--s-4, 16px); }
.bridge-list { list-style: none; margin: 0; padding: 0; }
.bridge-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr);
  gap: 6px 28px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--creamLine);
}
.bridge-row:first-child { border-top: 0; }
.bridge-id h5 { font-size: var(--rt-secondary); font-weight: 700; color: var(--ink); margin: 2px 0 0; }
.bridge-arch {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--rt-label);
  letter-spacing: 0.6px; color: var(--chart-mid);
}
.bridge-arch::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--sc); }
.bridge-read { grid-column: 2; font-size: var(--rt-caption); color: var(--chart-mid); margin: 2px 0 0; }
.bridge-bar .segbar-legend { margin-top: 7px; }

/* --- scenarios: a rail, because four full CLA sets stacked ran to 5,900px ---
   The four are alternatives to each other, so side by side is the honest
   arrangement: you compare them by moving between them, not by scrolling past
   them. Uses the house drag-scroll strip; snap points do the positioning. */
.sc-rail-wrap { position: relative; min-width: 0; }
.sc-rail {
  display: flex;
  gap: 20px;
  /* Panels keep their own height; the rail is sized to the current one from
     JS (markRailPosition), so a short scenario is not stretched to its
     tallest sibling and the others are clipped rather than scrolled. */
  align-items: flex-start;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  padding-bottom: 6px;
  /* No scroll-behavior: smooth. Lenis owns page scrolling and cancels native
     smooth scrolls on nested elements — with it set, even a direct scrollLeft
     assignment animates and then gets killed, so the rail never moved. The
     glide below is hand-rolled instead. */
}
.sc-rail:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }

.sc-block {
  /* One at a time. The four are alternatives, so showing two-and-a-half of
     them invited reading across rather than choosing between. */
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: var(--s-4, 16px);
  background: var(--paperWhite);
  border-radius: 14px;
  /* the drag strip disables pointer events on children mid-drag, so text
     selection inside a panel still works when you are not dragging */
  user-select: text;
}

/* The panels run their full height — a scenario's four layers are the
   substance, not an appendix behind a nested scroll — so the controls keep
   within reach by sticking to the bottom of the viewport while the rail is
   in view. */
.sc-rail-nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: var(--s-4, 16px);
  position: sticky; bottom: 0;
  padding: 10px 0;
  background: var(--cream);
}
.sc-rail-nav .sec-btn { min-width: 34px; display: grid; place-items: center; }
.sc-rail-nav .sec-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; display: block; }
.sc-rail-nav .sec-btn:disabled { opacity: 0.35; cursor: default; }
.sc-rail-dots { display: flex; gap: 6px; align-items: center; }
.sc-dot {
  border: 0; background: none; padding: 12px 3px; cursor: pointer; line-height: 0;
}
/* Every dot keeps a boundary a reader can see (a ring in the secondary ink);
   only the current one fills with its archetype colour. Growth is a transform,
   not a width tween, so it never reflows the row. */
.sc-dot i {
  display: block; width: 34px; height: 6px; border-radius: 3px; box-sizing: border-box;
  border: 1.5px solid var(--chart-mid);
  background: color-mix(in srgb, var(--dot) 35%, var(--cream));
  transform: scaleX(0.65); transform-origin: left center;
  transition: transform 180ms var(--ease-epoch), background-color 180ms var(--ease-epoch);
}
.sc-dot.here i { transform: none; background: var(--dot); border-color: var(--ink); }
.sc-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.sc-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 240px);
  gap: 8px 24px;
  align-items: center;
}
.sc-summary {
  font-size: var(--rt-secondary); line-height: 1.62; color: var(--rt-ink);
  margin: var(--s-3, 12px) 0 0;
}
/* Open by default — the layers are the method, not an appendix — but the
   scenario set is the longest thing on the page, so each one folds. */
.cla-wrap { margin-top: var(--s-4, 16px); }
.cla-wrap > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--rt-label);
  letter-spacing: 0.4px; color: var(--chart-mid);
  padding-bottom: 6px; border-bottom: 1px solid var(--creamLine);
}
.cla-wrap > summary::-webkit-details-marker { display: none; }
/* A drawn plus/minus, not a typed one: the vertical stroke hides when open. */
/* Selector carries enough weight to beat `.report-figure svg { width: 100% }`,
   which otherwise inflates this 12px mark to the panel's full width. */
.report-figure .cla-wrap > summary svg.cla-mark { width: 12px; height: 12px; flex: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.cla-wrap[open] > summary .cla-mark .v { display: none; }
.cla-wrap > summary:hover { color: var(--ink); }
.cla-wrap > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cla {
  margin: var(--s-4, 16px) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px 0;
}
.cla dt { margin-top: 10px; }
.cla dt:first-child { margin-top: 0; }
/* A full-width panel has room for the label column again. */
@media (min-width: 900px) {
  .cla { grid-template-columns: 132px minmax(0, 1fr); gap: 10px 20px; align-items: baseline; }
  .cla dt { margin-top: 0; }
}
.cla dt { display: flex; flex-direction: column; gap: 1px; }
.cla-label { font-size: var(--rt-caption); font-weight: 700; color: var(--ink); }
.cla-gloss { font-family: var(--font-mono); font-size: var(--rt-label); letter-spacing: 0.4px; color: var(--chart-mid); line-height: 1.4; }
.cla dd { margin: 0; font-size: var(--rt-secondary); line-height: 1.62; color: var(--rt-ink-soft); max-width: 72ch; }

.sc-residual-note {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 20px;
  margin-top: var(--s-5, 24px); padding-top: var(--s-4, 16px);
  border-top: 1px solid var(--ink);
}
.sc-residual-note p { font-size: var(--rt-secondary); line-height: 1.62; color: var(--chart-mid); margin: 0; max-width: 72ch; }
/* Fragment Mono ships at 400 only; a bold here would be synthesised. Emphasis
   in the mono register is ink, not weight. */
.sc-residual-note strong, .fig-sub strong { color: var(--ink); font-family: var(--font-mono); font-weight: 400; }

/* The odds prose sits inside the scenario section now, so it is set slightly
   back from the section's own opening argument. */
.sub-prose { margin-top: var(--s-5, 24px); }
/* Archetype colour rides a marker square on the label — the same device the
   page-head label uses — and the probability bar. Not a side stripe. */
.sc-arch {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--rt-label);
  letter-spacing: 0.6px; color: var(--chart-mid); margin-bottom: 4px;
}
.sc-arch::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--sc); }
.sc-id h5 { font-size: var(--rt-secondary); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.sc-prob { display: flex; align-items: center; gap: 10px; }
.sc-bar { flex: 1; height: 8px; background: rgba(19,19,9,0.06); border-radius: 0 4px 4px 0; position: relative; }
.sc-bar span { position: absolute; inset: 0 auto 0 0; background: var(--sc); border-radius: 0 4px 4px 0; min-width: 2px; }
.sc-pct { font-family: var(--font-mono); font-size: var(--rt-caption); color: var(--ink); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.sc-none { color: var(--chart-mid); }

.report-figure svg { display: block; width: 100%; height: auto; }

/* ---------- authoring: toolbar, editor, critique ---------- */
/* The controls sit in the heading rail and stay quiet until the section is
   hovered or something in it has focus — the page is a document first. */
/* Not sticky. The rule was on the h3 inside this one-child wrapper, where it
   could never take effect; made to work, the heading slid under the
   full-bleed figures. The page never had a sticking heading, so it keeps not
   having one. */
.sec-head { grid-column: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.report-section h3 { grid-column: auto; }

.sec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; opacity: 0; transition: opacity 160ms var(--ease-epoch); }
.report-standfirst:hover .sec-tools,
.report-standfirst:focus-within .sec-tools { opacity: 1; }
@media (hover: none) { .sec-tools { opacity: 1; } }
/* Controls sit on the block they act on. Kept on one line so a section never
   grows a ragged stack of pills, and revealed by the whole section so a
   cluster inside a figure is not something you have to hunt for. */
.part-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 6px; opacity: 0; transition: opacity 160ms var(--ease-epoch);
}
.report-section:hover .part-tools,
.report-section:focus-within .part-tools { opacity: 1; }
/* The section's own cluster leads the column, so it needs to clear the prose
   that follows without pushing the heading out of alignment. */
.report-section > .part-tools { margin-bottom: 4px; min-height: 29px; }
@media (hover: none) { .part-tools { opacity: 1; } }
.standfirst-tools { margin-top: 10px; }

/* The odds prose, given a head of its own so its controls have something to
   hang from and the block reads as a distinct movement. */
.part-block { margin-top: 2.25rem; }
.part-block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.part-block-head h5 { margin: 0; min-width: 0; font-size: var(--rt-secondary); font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }

.aud .part-tools { margin: 8px 0 12px; }
.sc-block .part-tools { margin: -2px 0 10px; }
/* A cluster sharing a row with a heading must not be the thing that shrinks:
   flex-wrap let it collapse to one button per line inside a tight header. */
.part-block-head .part-tools, .sc-block .part-tools { flex: none; flex-wrap: nowrap; }
/* On a phone there is not room for a heading and a cluster on one line, and
   nowrap would push the row past the viewport. Stack instead. */
@media (max-width: 640px) {
  .part-block-head { flex-direction: column; align-items: stretch; }
  .part-block-head .part-tools, .sc-block .part-tools { flex-wrap: wrap; justify-content: flex-start; }
}

.sc-editor input[type="text"] { width: 100%; }
.crit-subject { font-family: var(--font-mono); font-size: var(--rt-label); color: var(--chart-mid); }

.sec-btn {
  font: inherit; font-size: var(--rt-caption); font-weight: 500; letter-spacing: 0;
  padding: 5px 12px; min-height: 28px;
  border: 1px solid var(--creamLine); border-radius: 999px;
  background: var(--paperWhite); color: var(--chart-mid); cursor: pointer;
  transition: border-color 160ms var(--ease-epoch), color 160ms var(--ease-epoch);
}
.sec-btn:hover { border-color: var(--ink); color: var(--ink); }
.sec-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sec-btn.danger { color: var(--rt-danger); border-color: var(--rt-danger-line); }

.sec-badge {
  font-family: var(--font-mono); font-size: var(--rt-label);
  padding: 3px 9px; border-radius: 999px;
  background: var(--chip-green-bg); color: var(--chip-green-ink); white-space: nowrap;
}
.sec-badge.moved { background: var(--gold); color: var(--ink); }
.sec-badge.open { background: var(--chip-brown-bg); color: var(--chip-brown-ink); }
.sec-badge.fail { background: var(--chip-red-bg); color: var(--chip-red-ink); }

.sec-menu { position: relative; }
/* Same trap as .report-status: an explicit display beats the UA's
   [hidden] { display: none }, so the menu rendered permanently open. */
.sec-modes[hidden] { display: none; }
.sec-modes {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; min-width: 190px;
  background: var(--paperWhite); border: 1px solid var(--creamLine);
  border-radius: 12px; padding: 5px; box-shadow: 0 8px 28px rgba(19,19,9,0.10);
}
/* Clusters are right-aligned, so a menu opening rightward from its trigger
   runs off the page. Hang it from the trigger's right edge there. */
.part-tools .sec-modes { left: auto; right: 0; }
.sec-mode {
  font: inherit; font-size: var(--rt-caption); text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.sec-mode:hover { background: var(--cream); }
.sec-mode:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---- editor ---- */
.sec-editor { grid-column: 2; display: flex; flex-direction: column; gap: 10px; }
.sec-editor textarea, .sec-editor input[type="text"], .sec-editor select {
  width: 100%; font-size: var(--rt-secondary); line-height: 1.6;
  /* the shared creamLine edge is 1.4:1 on paper — too faint to find a field by */
  border-color: var(--chart-mid);
}
.sec-editor .field-label { margin-top: 4px; }
/* Shared app classes land off the page's scale; brought onto it here only. */
.report-page label.field-label {
  font-family: var(--font-mono); font-size: var(--rt-label); font-weight: 400;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--chart-mid);
}
.report-page .error-note { font-size: var(--rt-caption); }
.sec-editor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-msg { font-size: var(--rt-caption); color: var(--chart-mid); }

.fal-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--creamLine);
  align-items: start;
}
.fal-row textarea { grid-column: 1 / -1; }

/* ---- compare: yours beside the draft ---- */
.cmp {
  grid-column: 1 / -1;
  margin-top: var(--s-4, 16px);
  padding: var(--s-5, 24px);
  background: var(--cream);
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.cmp-col { min-width: 0; }
.cmp-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; margin-bottom: var(--s-3, 12px); border-bottom: 1px solid var(--ink); }
.cmp-col.draft .cmp-head { border-bottom-color: var(--creamLine); }
.cmp-label { font-size: var(--rt-secondary); font-weight: 700; color: var(--ink); }
.cmp-col.draft .cmp-label { color: var(--chart-mid); }
.cmp-note { font-family: var(--font-mono); font-size: var(--rt-label); color: var(--chart-mid); }
.cmp .report-prose { max-width: none; }
.cmp .report-prose p { font-size: var(--rt-secondary); line-height: 1.6; }
.cmp-col.draft .report-prose p { color: var(--rt-ink-draft); }
.cmp-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: var(--s-3, 12px); border-top: 1px solid var(--creamLine); }

@media (max-width: 900px) { .cmp { grid-template-columns: 1fr; } }

/* ---- critique ---- */
/* Deliberately not styled as part of the report: it is apparatus, sitting on
   the paper beside the argument rather than inside it. */
.crit {
  grid-column: 1 / -1;
  margin-top: var(--s-4, 16px);
  padding: var(--s-4, 16px) var(--s-5, 24px);
  border: 1px dashed var(--creamLine);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream) 45%, transparent);
}
/* Addressed critiques step back without dimming their text below contrast:
   the dashed edge becomes a plain rule and the ground goes clear. */
.crit.done { border-style: solid; background: none; }
.crit.done .crit-point, .crit.done .crit-verdict { color: var(--rt-ink-soft); font-weight: 500; }
.crit.done .crit-detail { color: var(--chart-mid); }
.crit.pending .crit-when { font-style: italic; }
.crit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crit-head .spacer { flex: 1 1 auto; }
.crit-label { font-size: var(--rt-caption); font-weight: 700; color: var(--ink); }
.crit-when { font-family: var(--font-mono); font-size: var(--rt-label); color: var(--chart-mid); }
.crit-verdict {
  font-size: var(--rt-secondary); line-height: 1.55; color: var(--ink);
  margin: 10px 0 0; max-width: 70ch; font-weight: 600;
}
.crit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crit-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.crit-point { font-size: var(--rt-secondary); font-weight: 600; color: var(--ink); max-width: 74ch; text-wrap: pretty; }
.crit-detail { font-size: var(--rt-secondary); line-height: 1.6; color: var(--rt-ink-soft); flex: 1 1 100%; max-width: 74ch; }
.crit-stance {
  font-family: var(--font-mono); font-size: var(--rt-label);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.crit-stance[data-stance="supports"]    { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.crit-stance[data-stance="complicates"] { background: var(--chip-brown-bg); color: var(--chip-brown-ink); }
.crit-stance[data-stance="contradicts"] { background: var(--chip-red-bg); color: var(--chip-red-ink); }

@media (max-width: 900px) {
  .sec-editor, .crit { grid-column: 1; }
  .report-section .part-block, .report-section .watchlist, .report-section .aud-split,
  .report-section > .part-tools { grid-column: 1; }
  .fal-row { grid-template-columns: 1fr; }
}

/* ---------- falsifier watch-list ---------- */
/* The direction chip carries the colour; no side stripes. Rows, because a
   falsifier is a thing you watch for, not a paragraph you read past. */
.watchlist { list-style: none; margin: 0; padding: 0; }
.watch {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--creamLine);
}
.watch:last-child { border-bottom: 1px solid var(--creamLine); }
.watch-dir {
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--rt-label);
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.watch[data-dir="strengthens"] .watch-dir { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.watch[data-dir="weakens"]     .watch-dir { background: var(--chip-red-bg); color: var(--chip-red-ink); }
/* Both lines share one measure so the row reads as a block rather than a
   wide headline over a narrow note. */
.watch-obs {
  font-size: var(--rt-body);
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
  text-wrap: balance;
}
.watch-mean {
  font-size: var(--rt-secondary);
  line-height: 1.6;
  color: var(--rt-ink-soft);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---------- audience split ---------- */
.aud-split {
  display: grid;
  /* Collapses wherever two 300px columns stop fitting, rather than at a
     breakpoint that fired below the section's own. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3.5vw, 56px);
}
.aud-label {
  font-size: var(--rt-secondary);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.aud-who {
  font-family: var(--font-mono);
  font-size: var(--rt-label);
  line-height: 1.5;
  color: var(--chart-mid);
  margin: 10px 0 14px;
}
.aud .report-prose { max-width: none; }

@media (max-width: 860px) {
  .watch { grid-template-columns: 1fr; gap: 8px; }
  .watch-dir { grid-row: auto; }
}

/* ---------- method note: an aside, deliberately quieter ---------- */
.report-method {
  margin-top: var(--s-8, 64px);
  padding: var(--s-5, 24px);
  background: var(--cream);
  border-radius: 18px;
}
.report-method h3 {
  font-family: var(--font-mono);
  font-size: var(--rt-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--chart-mid);
  margin: 0 0 var(--s-3, 12px);
}
.report-method p {
  font-size: var(--rt-secondary);
  line-height: 1.68;
  color: var(--rt-ink-soft);
  max-width: 72ch;
  margin: 0;
}
.report-method a { color: var(--deepGreen); text-decoration: underline; text-underline-offset: 2px; }

/* Below the two-column threshold the rail stops being a rail: heading sits
   above its prose, un-stuck, and everything runs full width. */
@media (max-width: 1000px) {
  .fig-split, .fig-triangle-body { grid-template-columns: 1fr; }
  .fig-read { max-width: none; }
}

/* The ledger's three tracks get cramped well before the section itself
   collapses — at 768 the myth column falls to ~33ch. Stack earlier. */
@media (max-width: 860px) {
  .sc-top { grid-template-columns: 1fr; }
  .sc-prob { max-width: 240px; }
  .sc-residual-note { grid-template-columns: 1fr; gap: 3px 0; }
  .bridge-row { grid-template-columns: 1fr; }
  .bridge-read { grid-column: 1; }
}

@media (max-width: 900px) {
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), so a child that
     scrolls horizontally widens the page instead of scrolling itself. */
  .report-section { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sec-head { margin-bottom: var(--s-4, 16px); }
  .report-section .report-prose,
  .report-section .report-figure { grid-column: 1; }
}

/* The strip wraps to four lines on a phone, which strands the drawn
   separators at line starts. Stack it instead and drop them. */
@media (max-width: 780px) {
  .report-meta { display: grid; gap: 3px; }
  .report-meta span + span::before { display: none; }
}

@media (max-width: 720px) {
  .report-page { --rt-body: 1rem; }
  .report-figure, .report-method { padding: var(--s-4, 16px); }
  .report-headline { max-width: none; }
}

/* A label every field has, even where showing it would only repeat the
   heading above the editor. */
.report-page .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; }

/* ---------- quotation verdicts, under an editor ---------- */
.quote-verdicts:empty { display: none; }
.quote-verdicts { margin-top: 4px; }
.qv { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qv li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: var(--rt-secondary); line-height: 1.5; }
.qv-mark { font-family: var(--font-mono); font-size: var(--rt-label); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.qv li.ok .qv-mark { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.qv li.fail .qv-mark { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.qv-quote { color: var(--rt-ink); max-width: 70ch; }
.qv-why { flex: 1 1 100%; font-family: var(--font-mono); font-size: var(--rt-label); color: var(--chart-mid); }

/* ---------- the citation drawer, as it appears on this page ---------- */
.drawer .drawer-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; top: 8px; right: 8px; padding: 0; }
.drawer .citation .source { color: var(--chip-brown-ink); }
.drawer .note-label { color: var(--gold-text, #7E6721); }

/* Touch: taller controls, and fields at 16px so iOS does not zoom into them. */
@media (pointer: coarse) {
  .sec-btn, .sec-mode { min-height: 36px; }
  .sec-editor textarea, .sec-editor input[type="text"], .sec-editor select { font-size: 1rem; }
}