/* vantage.css — the single shared component + print stylesheet for both the
 * Briefing and the Baseline (CB-2 §4: "one CSS file, two templates").
 *
 * References token variables from tokens.css ONLY. No hex value appears here.
 * The ornament is the beam, the threshold rule, and the type — nothing else
 * (brand system §3.7 anti-checklist): no gradients, no 3D, no shadows, no
 * imagery, no filled pills, no boxes where a rule will do.
 */

/* ============================================================ page geometry */
@page {
  size: A4;
  margin: 20mm 18mm 26mm 18mm;

  /* Compact lockup, running on every page (brand system §3.5 compact lockup). */
  @top-left {
    content: element(runHeader);
    vertical-align: bottom;
    padding-bottom: 2mm;
  }
  /* Top right: "where you are" (CB-9 §6 / Addendum C §6.6). This slot used to
   * repeat the issue title on all 14 Baseline pages — which the reader knows,
   * having read page 1. In a filed reference document the one thing the header
   * is actually for is orientation, so it now carries the current *section*.
   *
   * The mechanism is a CSS named string rather than a running element, because
   * a running element's content is fixed once for the whole document and this
   * has to change per page. `.masthead .issue-title` seeds it, so both
   * artifacts open with the issue title; `.branch > h2` reassigns it, so the
   * Baseline's pages carry "US Privacy Obligations" / "US AI-Governance
   * Obligations" / "Enforcement Postures" from the branch they are in. `first`
   * takes the value as of the top of the page, and an unassigned page inherits
   * the last value set — so a branch spanning four pages labels all four. The
   * Briefing has no `.branch`, so it keeps the issue line unchanged. */
  @top-right {
    content: string(runline, first);
    vertical-align: bottom;
    padding-bottom: 2mm;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 7.3pt;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
  }
  /* The standing disclaimer, on EVERY page (CB-2 §5). */
  @bottom-left {
    content: element(runFooter);
    vertical-align: top;
    padding-top: 3mm;
    width: 76%;
  }
  /* Page numbers, "Page N of M" (CB-2 §5). */
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    vertical-align: top;
    padding-top: 3mm;
    width: 24%;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 7.3pt;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
  }
}

/* Page 1 carries the full masthead lockup (beam + wordmark) in the document
 * body already — the running top-left/top-right lockup would duplicate it
 * within ~15mm, reading as a rendering fault (CB-4K §10.3). Suppress the
 * running header/title on page 1 only; they resume from page 2. The running
 * footer/disclaimer is unaffected — nothing on page 1's body duplicates it. */
@page :first {
  @top-left { content: none; }
  @top-right { content: none; }
}

.run-header,
.run-title,
.run-footer { position: running(_unset); }         /* default: not printed inline */
.run-header  { position: running(runHeader); }
.run-footer  { position: running(runFooter); }
/* `.run-title` keeps its running(_unset) above — the top-right slot is a named
 * string now (see @top-right), so the element is no longer pulled into a margin
 * box. The rule stays so any stray markup remains out of the body flow. */

/* Running compact lockup: uniform navy beam over the wordmark, no threshold.
 * The beam spans EXACTLY the wordmark, via the same shrink-to-fit `.lockup`
 * wrapper the masthead uses (see `.masthead .lockup` below for how it works).
 * It used to be a hardcoded `width: 46mm`, an approximation rendering ~1.8×
 * the width of the wordmark beneath it (Addendum C §4.7). CB-4K fixed the
 * masthead and did not reach the running header, so page 1 was right and every
 * other page was wrong in the same document — more conspicuous than both being
 * wrong the same way. Now both derive from the wordmark (CB-9 §6). */
.run-header { font-family: var(--font-serif); }
.run-header .lockup { display: inline-block; white-space: nowrap; }
.run-header .beam {
  height: 2.4mm; background: var(--lintel-navy); width: 100%; margin-bottom: 1.2mm;
}
.run-header .wordmark {
  font-weight: 600; font-size: 8.75pt; letter-spacing: var(--wordmark-tracking-compact);
  text-transform: uppercase; color: var(--ink);
}

.run-footer {
  font-family: var(--font-sans); font-size: 7.3pt; line-height: 1.35;
  color: var(--ink-muted); max-width: 128mm;
}

/* ================================================================ document */
/* THE TYPE RAMP (tokens.json `type.scale: 1.2`, base `text-body-print: 10.5pt`).
 * Every `font-size` in this file is one of these steps and nothing else:
 *
 *     6.075 · 7.3 · 8.75 · 10.5 (base) · 12.6 · 15.1 · 18.1
 *
 * Addendum C §3.2 measured eleven shipped sizes, seven of them inside a 3.5pt
 * band — 0.5pt apart is below the threshold at which a reader perceives a
 * distinction, so they read as a document nobody set rather than as hierarchy.
 * CB-9 §1 collapsed each one onto its nearest ramp step. The steps in use:
 *   7.3   captions, page number, badges, table heads, labels, node ids
 *   8.75  the sans register — notes, tables, source links, vocab, colophon
 *   10.5  body (base)
 *   12.6  item titles, node titles
 *   15.1  section headings, the issue title
 *   18.1  Baseline branch headings (one step above a section head)
 * The one deliberate exception is `.masthead .wordmark` at 30pt: it is the
 * page-1 lockup, drawn from the brand system's own display specification and
 * fenced off by Addendum C §2/§7 ("don't touch either page 1"). It is a mark,
 * not a step in the text ramp. Nothing else may leave the ramp — if a new
 * component seems to need 9pt, it wants 8.75. */
html { font-size: 10.5pt; }               /* print body size (brand system §3.4) */
body {
  font-family: var(--font-serif);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;      /* dates/thresholds/counts, everywhere */
  margin: 0;
}

/* Browser sample controls. They are emitted only for a model explicitly
 * marked as a specimen and never enter the printed/PDF artifact. */
.sample-toolbar {
  max-width: 172mm;
  margin: 0 auto var(--space-6) auto;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
}
.sample-toolbar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.sample-toolbar__wordmark {
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: var(--wordmark-tracking-compact);
  text-transform: uppercase;
  white-space: nowrap;
}
.sample-toolbar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 8.75pt;
  font-weight: 600;
}
.sample-toolbar__nav a {
  border-bottom: 1px solid currentColor;
}
.sample-toolbar a:focus-visible {
  outline: 2px solid var(--vantage-claret);
  outline-offset: 3px;
}
.sample-toolbar__disclosure {
  max-width: none;
  margin: var(--space-2) 0 0 0;
  color: var(--vantage-claret);
  font-size: 8.75pt;
  font-weight: 600;
}
.specimen-note--print { display: none; }

/* THE MEASURE (CB-10 §1, Addendum C §3.1/§6.1).
 *
 * `.doc`'s `max-width` is NOT the measure and never was. A4 is 210mm, the
 * @page margins take 18mm a side, so the content box is 174mm — `172mm` is the
 * full page minus 2mm, and `margin: 0 auto` centres a box already the width of
 * its container. Measured on the rendered PDFs it delivered a 166mm text
 * column at **100 characters per line, median, in both documents**, against
 * the 66–72 §3.4 locks. The comment that used to sit here asserted compliance
 * the value didn't deliver.
 *
 * The fix is not "narrow `.doc`", because the two things inside it want
 * different widths: **prose needs ~115mm, the statute table needs its full
 * 174mm** (it already wraps most of its rows and uses every millimetre). One
 * container cannot serve both, so the constraint moves off the container and
 * onto the prose itself. Tables opt out by not being prose — they are not `p`
 * or `li`, so nothing here reaches them.
 *
 * Line length is the single largest determinant of reading comfort in
 * continuous text: past ~75–80 characters the eye starts losing the line on
 * the return sweep and the reader experiences it as "heavy going" without
 * knowing why. For a product whose identity theory is "we look like the
 * record" — the Federal Register sets ~65 characters — this is the one
 * typographic value most worth getting right. */
.doc { max-width: 172mm; margin: 0 auto; }
.doc p,
.doc li { max-width: 118mm; }

p { margin: 0 0 var(--space-3) 0; }
a { color: var(--lintel-navy); text-decoration: none; }
strong { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; color: var(--lintel-navy); }

/* Numerals: tabular by default (§3.4). */
time, .num, td, th, .tabular { font-variant-numeric: tabular-nums; }

/* ============================================================ the masthead */
/* Full lockup on the cover of each document (brand system §3.2/§3.5):
 * lintel above · wordmark · claret threshold below. Drawn from tokens. */
.masthead { margin-bottom: var(--space-6); }
/* The column rule (brand system §3.5): beam and threshold span EXACTLY the
 * wordmark width, never a container width. `.lockup` is an inline-block that
 * shrinks to its widest child's intrinsic size — the wordmark text, since the
 * beam/threshold are empty and contribute nothing to that calculation — and
 * the rules are 100% of THAT shrunk wrapper, not the masthead/container
 * (CB-4K §10.4). No magic pixel width: this tracks whatever the wordmark
 * string and font actually render to. */
.masthead .lockup { display: inline-block; white-space: nowrap; }
.masthead .beam {
  height: 7mm; background: var(--lintel-navy);   /* uniform navy, never segmented */
  width: 100%;
}
.masthead .wordmark {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 30pt; letter-spacing: var(--wordmark-tracking);
  text-transform: uppercase; color: var(--ink);
  margin: 3mm 0 3mm 0; line-height: 1; white-space: nowrap;
}
.masthead .threshold {                              /* the product signature */
  height: 1.2pt; background: var(--vantage-claret); width: 100%;
}
.masthead .issue-title {
  font-family: var(--font-serif); font-size: 15.1pt; font-weight: 600;
  color: var(--lintel-navy); margin: var(--space-4) 0 0 0;
  string-set: runline content();        /* seeds the running header (see @top-right) */
}
.masthead .issue-sub {
  font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted);
  margin-top: var(--space-1); letter-spacing: 0.02em;
}
/* Specimen/fictional-company disclosure (CB-4K §7) — above the fold, visually
 * distinct from the muted issue-sub caption so a hurried reader doesn't miss
 * it; the claret token already anchors the product's own signature rule. */
.masthead .specimen-note {
  font-family: var(--font-sans); font-size: 8.75pt; font-weight: 600;
  color: var(--vantage-claret); margin-top: var(--space-2);
  letter-spacing: 0.01em;
}

/* A hairline claret threshold as a light section divider (product identity). */
.threshold-rule { height: 0.8pt; background: var(--vantage-claret); border: 0; margin: 0; }

/* ================================================================ sections */
.section { margin-top: var(--space-6); }
.section > h2 {
  font-size: 15.1pt; margin: 0 0 var(--space-1) 0;
  padding-bottom: var(--space-2);
  border-bottom: 0.75pt solid var(--rule);          /* hairline rule, not a box */
}
.section-lede {
  font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted);
  margin: var(--space-2) 0 var(--space-4) 0;
}
/* Keep a section heading with what follows it — extended to the lede too
 * (CB-4K §10.5): a heading alone at the bottom of a page with its list/table
 * flowing to the next page is an orphaned-continuation fault (reported on the
 * Briefing's "Watched — unchanged" section); break-after on h2 alone only
 * keeps the lede with the heading, not the heading+lede with what follows. */
.section > h2,
.section > .section-lede { break-after: avoid; }

/* ============================================================ status badge */
/* Coloured square + CAPS label. Never a filled pill. Legible in grayscale:
 * the CAPS label carries the meaning; the square is a categorical marker. */
.badge {
  display: inline-block;                            /* margins, not flex gap (print-safe) */
  font-family: var(--font-sans); font-weight: 700; font-size: 7.3pt;
  letter-spacing: 0.09em; text-transform: uppercase;
  white-space: nowrap; vertical-align: baseline;
}
.badge .sq {
  display: inline-block; width: 0.72em; height: 0.72em;
  margin-right: 0.45em; vertical-align: -0.02em;
  border: 0.5pt solid var(--ink);                   /* readable outline in grayscale */
  background: var(--ink-muted);                     /* overridden per class below */
}
.badge .lbl { color: var(--ink); }

.badge--new         .sq { background: var(--status-new); }
.badge--new         .lbl { color: var(--status-new); }
.badge--amended     .sq { background: var(--status-amended); }
.badge--amended     .lbl { color: var(--status-amended); }
.badge--deadline    .sq { background: var(--status-deadline); }
.badge--deadline    .lbl { color: var(--status-deadline); }
.badge--enforcement .sq { background: var(--status-enforcement); }
.badge--enforcement .lbl { color: var(--status-enforcement); }
.badge--unchanged   .sq { background: var(--status-unchanged); }
.badge--unchanged   .lbl { color: var(--status-unchanged); }

/* ====================================================== executive summary */
/* Forwardable. Assembled exec-lines grouped by display class, each group led
 * by its status badge (CB-2 §3.1). */
.exec-group { margin: var(--space-3) 0; break-inside: avoid; }
.exec-badge { margin-bottom: var(--space-1); }
.exec-lines { margin: 0; padding-left: var(--space-5); }
.exec-lines li { margin: var(--space-1) 0; font-size: 10.5pt; }
/* An `alert_worthy` line, sorted to the top of its own badge cluster and given
 * a quiet standing marker (CB-12 §4). CW-15's 23-item load test measured the
 * problem: 3 of 6 WATCHED items were flagged in the store and rendered at
 * identical weight to the 3 that weren't, inside a summary grown to 3 pages.
 *
 * A hairline rule, not a colour change, a glyph, or a word. Part 2 §2.7.4's
 * "no fear, no urgency manufacture" governs this document, so the signal has to
 * read as a distinction rather than an alarm — and a rule survives greyscale
 * print, where a colour-only marker would vanish. Same 0.75pt hairline and
 * existing --rule/--lintel-navy tokens the item separators already use; no new
 * hex, no new visual device. The list marker stays outside the content box, so
 * the rule sits flush at the text edge and flagged/unflagged lines keep
 * identical bullet alignment. */
.exec-lines li.flagged {
  border-left: 1.5pt solid var(--lintel-navy);
  padding-left: var(--space-2);
  margin-left: calc(-1 * var(--space-2));
}

/* ============================================= deadlines table cell parts */
.dl-what { display: inline; }
.dl-kind {
  display: block; font-family: var(--font-sans); font-size: 7.3pt;
  color: var(--ink-muted); margin-top: 2px; letter-spacing: 0.02em;
}
.source-line { margin-top: var(--space-2); }

/* =================================================================== items */
.item { margin: var(--space-5) 0; }
/* Never break an item across a badge/title boundary (CB-2 §5): keep the header
 * cluster together and glued to the body that follows. */
.item-head { break-inside: avoid; break-after: avoid; }
.item + .item { border-top: 0.75pt solid var(--rule); padding-top: var(--space-5); }

/* THE ITEM: prose at the measure, metadata in the margin (Option B, locked at
 * CB-11; CB-10 §6.1 / Addendum C §3.1, §4.3, §6.5).
 *
 * `.item-head` was a three-column grid at CB-9 — badge / title / date — which
 * fixed Addendum C §4.3's shape-shift by pinning the date's position. The date
 * has now left the head entirely for `.item-meta`, so the third column has
 * nothing to hold and the grid collapses to two: **badge + title**. The
 * shape-shift is now structurally impossible rather than merely constrained,
 * which is what §6.1 predicted ("fixes §4.3 almost incidentally"). What is kept
 * from CB-9 is the grid itself and its baseline alignment — a wrapping flex row
 * would still let a long title reflow the badge.
 *
 * `.item-meta` is a right float, NOT a grid column. A grid container does not
 * fragment cleanly across page breaks in WeasyPrint: measured at CB-10 Phase 1,
 * a grid implementation split 18 of 23 items across pages against plain flow's
 * 9, and cost 4 pages at load. The float paginates as ordinary block flow.
 *
 * Two WeasyPrint workarounds, both verified — do not "tidy" either:
 *   1. `margin-left` MUST stay 0. WeasyPrint applies `margin-left` on a
 *      `float: right` to the element's RIGHT side (margin-left space-5 ->
 *      right edge 184.6mm; margin-left 0 -> 191.0mm, the container edge). The
 *      channel between prose and column comes from `.item-body`'s own 118mm
 *      measure ending at 137mm, not from a margin.
 *   2. Longhand margins only. A 4-value `margin` shorthand containing `var()`
 *      mis-resolves, applying the wrong value to the wrong edge.
 *   3. `clear: right` — without it, consecutive items' floats stack side by
 *      side instead of each starting its own item. */
.item-head {
  display: grid;
  grid-template-columns: auto 1fr;       /* badge + title; the date left at CB-11 */
  align-items: baseline;
  column-gap: var(--space-3);
  max-width: 118mm;                      /* the head shares the prose measure */
}
.item-title {
  font-family: var(--font-serif); font-weight: 600; font-size: 12.6pt;
  color: var(--lintel-navy); margin: var(--space-1) 0;
}
.item-meta {
  float: right; clear: right;
  width: 47mm;
  margin-top: 0; margin-right: 0;
  margin-bottom: var(--space-3); margin-left: 0;
}
.item-meta .item-date { display: block; margin-bottom: var(--space-2); }
.item-meta .datepair { margin-top: 0; }
/* In a 47mm column the two dates stack rather than sitting side by side. The
 * block's own markup and its two explicit labels are untouched (CB-2 §1.6 —
 * never collapsed); only the axis changes. */
.item-meta .datepair .dp { display: block; margin-right: 0; margin-bottom: var(--space-2); }
.item-meta .datepair .dp:last-child { margin-bottom: 0; }
.item-meta .source-line { margin-top: var(--space-3); max-width: none; }
.item-date {
  font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.item-body { font-size: 10.5pt; max-width: 118mm; }

/* ============================================================= date pair */
/* Effective and Compliance always render distinctly, with explicit labels,
 * side by side, never collapsed (CB-2 §1.6). */
.datepair {
  margin: var(--space-3) 0;
  padding: var(--space-2) 0; border-top: 0.75pt solid var(--rule);
  font-family: var(--font-sans);
}
.datepair .dp { display: inline-block; margin-right: var(--space-7); vertical-align: top; }
.datepair .dp:last-child { margin-right: 0; }
.datepair .dp-label {
  display: block;
  font-size: 7.3pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.datepair .dp-value {
  display: block;
  font-size: 10.5pt; color: var(--ink); font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* ============================================================ note block */
/* "Why this matters" condition blocks: hairline top rule + muted sans, no box,
 * visually subordinate to the item's general-case prose (CB-2 §1.4, §3.2). */
.note {
  border-top: 0.75pt solid var(--rule);
  margin: var(--space-3) 0; padding-top: var(--space-2);
  font-family: var(--font-sans); font-size: 8.75pt; line-height: 1.5;
  color: var(--ink-muted);
}
.note-label {
  display: block; font-size: 7.3pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-1);
}
.note p { margin: 0 0 var(--space-2) 0; }
.note p:last-child { margin-bottom: 0; }

/* ============================================================ source link */
/* Bracketed inline citation register, no icons (CB-2 §1.4). */
.source { font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted); }
.source a { color: var(--lintel-navy); }
.source .brk { color: var(--ink-muted); }
/* In print, expose the domain next to the link (CB-2 §5). */

/* ================================================================= tables */
table { border-collapse: collapse; width: 100%; font-size: 8.75pt; margin: var(--space-3) 0; }
caption {
  font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted);
  text-align: left; padding-bottom: var(--space-2); letter-spacing: 0.02em;
}
thead th {
  font-family: var(--font-sans); font-weight: 700; font-size: 7.3pt;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
  text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1pt solid var(--lintel-navy);       /* hairline rules do the work */
}
tbody td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 0.75pt solid var(--rule);
  vertical-align: top; font-variant-numeric: tabular-nums;
}
tbody tr { break-inside: avoid; }
/* Zebra ONLY on dense tables (§3.8). */
table.dense tbody tr:nth-child(even) { background: var(--paper-alt); }
td.statute, td.jur { font-family: var(--font-sans); }   /* size inherits the table's 8.75pt ramp step */

/* The statute table's column shares (CB-9 §6 / Addendum C §4.1). STATUS gets
 * enough width for "Enacted, effective in future" — the longest status string
 * and correct copy — to set on one or two lines rather than three. `table-layout:
 * fixed` is what makes the percentages authoritative; without it the auto
 * algorithm re-derives widths from content and hands STATUS back its narrow
 * column. STATUTE keeps the largest share: it carries the name plus a bracketed
 * source link and is the column a reader actually reads. */
table.statutes { table-layout: fixed; }
/* `box-sizing: border-box` is load-bearing, not tidiness. Cells carry a
 * right padding (`--space-3`); under the default `content-box` a `width: 41%`
 * means 41% of the table *plus* that padding, so five percentage columns
 * summing to 100% resolve to more than the table's own width and the table
 * silently overflows its container. Measured when this was missing: the
 * statute table ran from 19mm to 206.9mm on a 210mm sheet whose right margin
 * starts at 192mm — ~15mm off the printable page, clipped in print. Any
 * percentage column width in this stylesheet needs this. */
table.statutes th,
table.statutes td { box-sizing: border-box; }
/* Each width is sized to whichever is wider — the column's data or its own
 * header label. CB-13 §1: at 11% the JURISDICTION column fit its data ("US-XX",
 * "US-FED") with room to spare, but the 12-character uppercase header
 * overflowed its cell by 4.2mm and collided with STATUTE, rendering as
 * "JURISDICTIONSTATUTE" on every statute-table page. This is the same
 * header-vs-data mismatch as V1's KIND header and Addendum C §4.1's STATUS
 * column; the label stays "JURISDICTION" because the shorter "STATE" would be
 * wrong for the US-FED rows.
 *
 * The donor is STATUS, not STATUTE. Taking the 4 points off STATUTE (the
 * obvious-looking donor, since it already wraps) was measured and rejected: it
 * wraps the statute names one line further down and pushes the A7 Baseline from
 * 12 pages to 13, re-opening Addendum C's #37. STATUS had genuine slack — it
 * was widened to 20% for "Enacted, effective in future" and holds that string
 * on two lines at 18%, verified by the test below this file. */
table.statutes th:nth-child(1) { width: 15%; }   /* JURISDICTION — header-bound */
table.statutes th:nth-child(2) { width: 39%; }   /* STATUTE + source link     */
table.statutes th:nth-child(3) { width: 18%; }   /* STATUS                    */
table.statutes th:nth-child(4) { width: 14%; }   /* EFFECTIVE — ISO date      */
table.statutes th:nth-child(5) { width: 14%; }   /* COMPLIANCE DATE           */

/* ===================================================== watched — unchanged */
/* Compact, deliberate — this section demonstrates work in quiet weeks (§3.4). */
.watched-list {
  columns: 2; column-gap: var(--space-6); list-style: none; padding: 0; margin: var(--space-3) 0;
  font-family: var(--font-sans); font-size: 8.75pt;
}
.watched-list li {
  break-inside: avoid; padding: 2px 0 2px var(--space-3); position: relative;
  color: var(--ink);
}
.watched-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5em; height: 0.5em;
  border: 0.5pt solid var(--status-unchanged); background: var(--status-unchanged);
}

/* ====================================================== baseline structure */
.branch { margin-top: var(--space-7); }
.branch > h2 {
  font-size: 18.1pt; color: var(--lintel-navy);
  border-bottom: 1pt solid var(--lintel-navy); padding-bottom: var(--space-2);
  string-set: runline content();        /* "where you are" (see @top-right) */
}
/* `break-inside: avoid-page` used to sit here, and it was the second cause of
 * Addendum C §4.6's near-blank pages — the one that survives the §6.3 fix. A
 * node carrying a 23-row statute table is taller than an A4 text block, so
 * "never break this" cannot be honoured; WeasyPrint pushes the whole node to a
 * fresh page and gives up, leaving the branch heading alone on the page before
 * (measured: Baseline p.2, 4.0% ink, holding a heading and one sentence).
 * What the rule was actually protecting is a heading orphaned from its table —
 * and `.node-head { break-after: avoid }` below already does exactly that,
 * precisely, without forfeiting a page. Long tables now flow across the break
 * with `tbody tr { break-inside: avoid }` keeping rows intact (CB-9 §2). */
.node { margin: var(--space-5) 0; }
.node-head { break-after: avoid; }
.node-title { font-size: 12.6pt; font-weight: 600; color: var(--lintel-navy); margin: 0 0 var(--space-1) 0; }
.node-def { font-size: 10.5pt; margin-bottom: var(--space-2); }
.node-id { font-family: var(--font-sans); font-size: 7.3pt; color: var(--ink-muted); letter-spacing: 0.03em; }
.vocab {
  border-top: 0.75pt solid var(--rule); margin-top: var(--space-2); padding-top: var(--space-2);
  font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted);
}
.vocab-label { text-transform: uppercase; font-size: 7.3pt; letter-spacing: 0.08em; }
/* Glossary nodes, demoted (CB-9 §2 / Addendum C §6.3). Real reference content
 * that is not a map entry: it keeps every word and stops competing with the
 * statute tables for the reader's eye. One grouped heading per branch, then
 * run-in entries — the term sets in the navy serif of a node title but at the
 * body step, and its definition continues on the same line. No box, no id, no
 * per-entry section: the demotion is subtraction, exactly as §7 requires. */
.glossary { margin-top: var(--space-6); }
.glossary-head {
  font-size: 12.6pt; margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2); border-bottom: 0.75pt solid var(--rule);
}
.gloss-item { margin: 0 0 var(--space-3) 0; break-inside: avoid; font-size: 10.5pt; }
.gloss-term {
  font-family: var(--font-serif); font-weight: 600; color: var(--lintel-navy);
}
.gloss-term::after { content: " · "; color: var(--ink-muted); font-weight: 400; }
/* The run-in: the definition's first paragraph continues the term's line
 * rather than starting a block. Later paragraphs (rare) set normally. */
.gloss-item > p:first-of-type { display: inline; margin: 0; }
.gloss-item > p:first-of-type + p { margin-top: var(--space-2); }

/* Instability annotation: a WATCHED-badged note, visually distinct from an
 * obligation (CB-2 §4). Rendered as a note block carrying the WATCHED badge. */
.instability { border-top-color: var(--status-unchanged); }

/* ================================================================= footer */
.colophon {
  margin-top: var(--space-7); padding-top: var(--space-3);
  border-top: 0.8pt solid var(--vantage-claret);     /* closing threshold rule */
  font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted);
}
.standing-note { margin: var(--space-2) 0; }
.standing-note .lbl {
  display: block; text-transform: uppercase; font-size: 7.3pt; letter-spacing: 0.08em;
  color: var(--ink-muted); margin-bottom: 2px;
}
.disclaimer { font-style: italic; }
.boilerplate { margin-top: var(--space-3); }

/* Empty-state line (kept deliberate, not apologetic). */
.empty { font-family: var(--font-sans); font-size: 8.75pt; color: var(--ink-muted); font-style: italic; }

/* ================================================= screen preview niceties */
/* The artefact is A4; when viewed as HTML give it paper + margin so the
 * on-screen preview reads like the page. Print ignores this block's padding. */
@media screen {
  body { padding: 24px; }
  .doc { background: var(--paper); }
  /* Running elements are page-margin content in print; they duplicate the
     masthead/footer, so keep them out of the on-screen flow. */
  .run-header, .run-title, .run-footer { display: none; }
}

@media screen and (max-width: 700px) {
  body { padding: 16px; }
  .sample-toolbar__top { align-items: flex-start; flex-direction: column; }
  .sample-toolbar__nav { gap: var(--space-3); }
  .masthead .wordmark {
    font-size: clamp(14pt, 9.5vw, 30pt);
    letter-spacing: var(--wordmark-tracking-compact);
  }
  .doc p,
  .doc li,
  .item-head { max-width: none; }
  .item-meta {
    float: none;
    width: auto;
    margin: var(--space-2) 0 var(--space-3) 0;
  }
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media print {
  .sample-toolbar { display: none; }
  .specimen-note--print { display: block; }
}