/*
Purpose: the shared shell of every Mullusi route ("The Ledger", the October 2026 website overhaul spec), linked first under one ?v= key (audit CODE-10).
Governance scope: font faces, theme and type tokens, base rules, header, toggles, mobile menu, footer, buttons, folio, ledger-grid cells, state line, hero frame and fact table, with their breakpoint, motion, contrast, forced-colour and print rules.
Dependencies: assets/fonts/*.woff2 (OFL, URLs relative to this file); the style contract and site validators read this file before each route sheet.
Invariants: a declaration moved here only when every route sheet that can match its selector carried it identically, and the move was checked for cascade order and pixel equality, so it changes no computed style; route sheets load after this file; --bg and --ink-dim are literal hex in both themes at 4.5:1 or more; no viewport units in type, no negative tracking.
Macro order: 0 fonts, 1 tokens, 2 base, 3 shell, 4 components, 5 hero and fact table, 7 breakpoints, 8 motion and environment (numbers match assets/styles.css).
*/

/* ==========================================================================
   0. Fonts: four Mullusi faces, the 7-glyph Ethiopic brand mark face, the
      homepage's Amharic sample face, and the validator-required symbol face. All
      self-hosted under assets/fonts with relative URLs from this file. A face
      downloads only on a page that uses it. Display and Mono (the -2 files) and
      Ethiopic (the -3 file) are cut to the code points the site renders by the font
      subset script; the sample face is cut to exactly the Ethiopic code points of
      index.html's .bilingual [lang="am"] panel by the sample subset script (audit
      R1-017). The font coverage validator guards them all, and a changed face
      ships under a new file name.
   ========================================================================== */
@font-face {
  font-family: "Mullusi Display";
  src: url("fonts/mullusi-display-2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mullusi Text";
  src: url("fonts/mullusi-text.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mullusi Mono";
  src: url("fonts/mullusi-mono-2.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mullusi Ethiopic";
  src: url("fonts/mullusi-ethiopic-3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1200-137F, U+1380-1399, U+2D80-2DDF, U+AB00-AB2F;
}
@font-face {
  font-family: "Mullusi Ethiopic Mark";
  src: url("fonts/mullusi-ethiopic-mark.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1209, U+1219, U+121B, U+122D, U+1232, U+129B, U+12A0;
}
@font-face {
  font-family: "Mullusi Ethiopic Sample";
  src: url("fonts/mullusi-ethiopic-sample.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1201, U+1208-1209, U+120D, U+1218-1219, U+121B, U+121D-121E, U+1228-1229,
    U+122C-122E, U+1230, U+1233, U+1235-1236, U+123D, U+1240, U+1242, U+1244-1245, U+1260, U+1263,
    U+1265, U+1268, U+1270, U+1273, U+1275, U+1278, U+127D, U+1290, U+1293-1295, U+129B, U+12A0,
    U+12A5, U+12A8, U+12AB, U+12AD, U+12CC-12CE, U+12DB, U+12DD, U+12E8, U+12EB, U+12ED, U+12F0,
    U+12F3, U+12F5, U+1303, U+1308, U+130B, U+130D-130E, U+1323, U+1325, U+132B, U+1338, U+133B,
    U+133D, U+1348, U+134A, U+134D, U+1362;
}
@font-face {
  font-family: "Mullusi Symbols";
  src: url("fonts/noto-sans-symbols-2-math.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ==========================================================================
   1. Tokens. :root is the dark theme (slate ink). Light (paper) applies through
      prefers-color-scheme and through :root[data-theme="light"]. --bg and
      --ink-dim are literal 6-digit hex in both blocks; ratios are on --bg.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #14181d;
  --bg-raise: #1b2127;
  --bg-panel: #10141a;
  --line: #2b323a;
  --line-bright: #68727c;
  --ink: #edebe5;
  --ink-soft: #c3c1ba;
  --ink-dim: #9c9a92;
  --accent: #62cbc2;
  --accent-ink: #0e1418;
  --accent-tint: #18302f;
  --accent-warm: #e3a94c;
  --accent-warm-tint: #30271a;
  --accent-deep: #2f8f88;
  --danger: #e08787;
  --surface: var(--bg-raise);
  --muted: var(--ink-dim);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.8);

  --maxw: 76rem;
  --gutter: 2rem;
  --radius: 2px;
  --radius-lg: 4px;

  --serif: "Mullusi Display", "Mullusi Ethiopic", Georgia, "Times New Roman", serif, "Noto Sans Ethiopic";
  --sans: "Mullusi Text", "Mullusi Ethiopic", system-ui, "Segoe UI", Arial, sans-serif, "Noto Sans Ethiopic";
  --mono: "Mullusi Mono", "Mullusi Ethiopic", ui-monospace, "Cascadia Mono", Consolas, monospace, "Noto Sans Ethiopic";
  --ethiopic: "Mullusi Ethiopic", "Noto Sans Ethiopic", "Abyssinica SIL", sans-serif;
  --ethiopic-mark: "Mullusi Ethiopic Mark", "Mullusi Text", system-ui, "Segoe UI", Arial, sans-serif;

  /* Type scale: rem steps. This block is the widest step (above 1440px); each
     breakpoint steps it down. Never viewport units, never negative tracking. */
  --t-h1: 4rem;
  --t-h2: 2.5rem;
  --t-h3: 1.25rem;
  --t-lead: 1.1875rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-meta: 0.8125rem;
  --t-floor: 0.75rem;
  --lh-display: 1.05;
  --lh-text: 1.55;

  /* Spacing, 8px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f7f4ee;
    --bg-raise: #fffdf8;
    --bg-panel: #efebe2;
    --line: #d8d2c6;
    --line-bright: #7d766a;
    --ink: #1c1b18;
    --ink-soft: #46443f;
    --ink-dim: #6a675f;
    --accent: #0e6b67;
    --accent-ink: #ffffff;
    --accent-tint: #e2efed;
    --accent-warm: #8a5600;
    --accent-warm-tint: #f4e8d2;
    --accent-deep: #0e6b67;
    --danger: #9a2a2a;
    --shadow: 0 1px 0 rgba(28, 27, 24, 0.06), 0 8px 24px -16px rgba(28, 27, 24, 0.35);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ee;
  --bg-raise: #fffdf8;
  --bg-panel: #efebe2;
  --line: #d8d2c6;
  --line-bright: #7d766a;
  --ink: #1c1b18;
  --ink-soft: #46443f;
  --ink-dim: #6a675f;
  --accent: #0e6b67;
  --accent-ink: #ffffff;
  --accent-tint: #e2efed;
  --accent-warm: #8a5600;
  --accent-warm-tint: #f4e8d2;
  --accent-deep: #0e6b67;
  --danger: #9a2a2a;
  --shadow: 0 1px 0 rgba(28, 27, 24, 0.06), 0 8px 24px -16px rgba(28, 27, 24, 0.35);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

main:focus {
  outline: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  font-feature-settings: "tnum" 1, "kern" 1;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.25; font-family: var(--sans); font-weight: 600; }
h4 { font-size: var(--t-body); font-family: var(--sans); font-weight: 600; line-height: 1.3; }
/* Display-face cell titles and the trust-flow labels balance like headings, so no title ends on one orphan word. */
.cell-name,
.trust-flow > span,
.trust-flow > strong { text-wrap: balance; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a {
  color: inherit;
  text-decoration-color: var(--line-bright);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
dl, dd { margin: 0; }
table { border-collapse: collapse; }

::selection { background: var(--accent-tint); color: var(--ink); }

/* Amharic: its own face through the unicode-range, its own leading, never a
   fallback. Only tracking, leading, weight and the heading variation axis change
   here. Tracking is zeroed for every Ethiopic run, and !important keeps the later
   uppercase-label rules (0.04-0.08em) in this file and the route sheets from
   spacing out the syllables; elements marked lang="en" keep their tracking. */
:lang(am) { letter-spacing: 0 !important; line-height: 1.65; }
:lang(am) h1,
:lang(am) h2,
:lang(am) h3,
h1:lang(am),
h2:lang(am),
h3:lang(am) {
  font-weight: 500;
  font-variation-settings: normal;
  line-height: 1.25;
}
/* Inline runs inside a heading take the heading's leading, not the Amharic body leading. */
:where(h1, h2, h3, h4) :lang(am) { line-height: inherit; }
:lang(am) .sec-head h2 { line-height: 1.25; }

.visually-hidden,
.lang-toggle [data-lang-label] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Shell: wrap, skip link, header, mobile menu, footer
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible,
.skip-link:active {
  transform: translateY(0);
}

/* Header: a ruled bar, never sticky, never blurred. nav.site-nav is the bar on
   every route; .nav-in is the inner grid (brand | links | actions). */
.site-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  view-transition-name: site-header;
}
.nav-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.25rem;
}

/* The language owner supplies one fallback notice; empty notices occupy no space. */
.language-feedback {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}
.language-feedback:not(:empty) {
  padding: var(--s-3) max(var(--s-4), calc((100% - 1240px) / 2));
  border-bottom: 1px solid var(--line);
}

/* Bilingual lockup: monogram, wordmark, hairline, Ethiopic name. Routes that
   still carry the raster wordmark keep .brand-logo until they are restyled. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 1.75rem; height: 1.75rem; color: var(--ink); flex: none; }
.brand-node { fill: var(--accent); }
.brand-name {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variation-settings: "opsz" 24;
}
.brand-am {
  font-family: var(--ethiopic-mark);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-dim);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line-bright);
}
/* The lockup above, the language name in the toggle and the footer use the 7-glyph Mullusi Ethiopic Mark face,
   so a page whose only Ethiopic text is these never fetches the full Ethiopic face (audit CODE-05). */
[data-lang-label],
.lang-toggle [data-lang-label],
.foot-base [lang="am"] {
  font-family: var(--ethiopic-mark);
}

.nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  border-radius: var(--radius);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}
.nav-cta .btn { font-size: var(--t-small); padding: 0 1rem; }
/* English-only routes render no language toggle; while the links show, an empty 44px slot stands in for it so the
   centred links sit where they sit on every localized route. Without script the toggle is hidden everywhere. */
@media (min-width: 981px) {
  html:not(.no-js)[data-language-state="english-only"] .nav-cta::before {
    content: "";
    flex: none;
    width: 44px;
  }
}

/* Theme and language toggles: 44px squares in the mono face. Each keeps one name
   (Light; AM with the Ethiopic language name) and shows its state with aria-pressed. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line); }
.theme-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--line-bright); background: var(--bg-panel); }
.theme-toggle[aria-pressed="true"]:hover { border-color: var(--ink); }
.lang-toggle { width: 44px; padding: 0; position: relative; }
.lang-toggle .lang-code {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* No script: the theme, language and menu buttons and the record controls do nothing,
   so they are not shown; theme-bootstrap.js removes .no-js before first paint. */
.no-js [data-theme-toggle],
.no-js [data-lang-toggle],
.no-js [data-menu-toggle],
.no-js [data-record-replay],
.no-js [data-record-pause] { display: none; }

/* Mobile menu: the pinned production markup (button + panel), one script flips
   aria-expanded and [hidden]. The panel sits in flow below the header. */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 1px; }
.menu-toggle[aria-expanded="true"] { background: var(--bg-panel); }
.mobile-menu {
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
  box-shadow: var(--shadow);
  padding: var(--s-3) var(--gutter) var(--s-4);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-label {
  padding: var(--s-3) 0 var(--s-1);
  font-family: var(--mono);
  font-size: var(--t-floor);
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-2);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.mobile-menu a:hover { background: var(--bg-panel); }
.mobile-menu a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
.mobile-menu .mobile-actions { display: grid; gap: var(--s-2); padding-top: var(--s-3); }
.mobile-menu .mobile-actions .btn { width: 100%; justify-content: center; padding: 0 1.25rem; }
/* The generic menu-link colour and hover (0,1,1 / 0,2,1) must not repaint the solid button. */
.mobile-menu .mobile-actions .btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mobile-menu .mobile-actions .btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Footer: lockup, one line, status pill; three columns; bottom rule. */
.site-footer {
  padding-block: var(--s-7) var(--s-6);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-7);
}
.foot-brand p {
  margin-top: var(--s-3);
  color: var(--ink-dim);
  font-size: var(--t-small);
  max-width: 26rem;
}
.foot-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-2);
}
.foot-trust a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot-trust a:hover { color: var(--accent); }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.foot-cols .col h3 {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}
.foot-cols .col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
}
.foot-cols .col a:hover { color: var(--accent); }
.status-pill {
  display: inline-flex;
  border-radius: var(--radius);
  font-family: var(--mono);
  color: var(--ink-soft);
}
.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-dim);
}
/* column-gap: 1ch restores the spaces around the dot that the flex container drops ("English · አማርኛ"). */
.foot-base > span { display: inline-flex; align-items: center; column-gap: 1ch; min-height: 44px; }
.foot-base ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.foot-base a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   4. Components every route shares: buttons, action rows, folio, section
      heads, ledger-grid cells, column counts, the state line and the chip dot
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--bg-raise);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-panel); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.actions,
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.actions-note { width: 100%; color: var(--ink-dim); font-size: var(--t-small); margin-top: var(--s-1); }

/* Section rhythm. Every section opens with the folio: a 1px ink rule, a hairline
   3px beneath it, a teal two-digit number left and a mono running head right. */
.band { padding-block: var(--s-9); }
.band + .band,
.hero + .band { padding-top: 0; }
.folio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  border-top: 1px solid var(--ink);
  padding-top: 3px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.folio::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  margin-bottom: var(--s-3);
}
.folio-num { color: var(--accent); }
.folio-run { text-align: right; }
.folio-rule { height: 0; }

.sec-head { max-width: 40rem; margin-bottom: var(--s-7); }
.sec-head h2 {
  line-height: 1.18;
}
.sec-head p { margin-top: var(--s-4); color: var(--ink-soft); font-size: var(--t-lead); }

.lead { font-size: var(--t-lead); color: var(--ink-soft); }
.plain { color: var(--ink-soft); }

/* Ledger-grid cells with decimal-leading-zero counters (each route sheet draws its own grid frame). overflow-wrap
   and the min-width on .cell-meta items let a long unbroken token wrap inside a narrow cell instead of overflowing. */
.ledger-grid > * { background: var(--bg); padding: var(--s-5); min-width: 0; overflow-wrap: break-word; }
.cell-meta {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
}
.cell-meta > * { min-width: 0; }
.ledger-grid .cell-num { display: block; font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; color: var(--accent); }
.ledger-grid .cell-num::before { counter-increment: cell; content: counter(cell, decimal-leading-zero); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* The state line: one amber dot, said once, full contrast */
.state-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--ink);
  font-size: var(--t-body);
}
.state-line::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-warm);
  transform: translateY(-0.0625rem);
}
.state-line strong { color: var(--accent-warm); font-weight: 600; }

/* State chip dot: the chip itself is styled per route */
.chip::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }

.hero-figure { min-width: 0; }

/* ==========================================================================
   5. Hero frame and the fact table (route sheets set the hero columns)
   ========================================================================== */
.hero { padding-block: var(--s-6) var(--s-9); }
.hero-inner {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
.hero-copy { min-width: 0; }
.hero-copy .state-line { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: 34rem; }
.hero-copy .hero-actions { margin-top: var(--s-6); }

/* The fact table: each row a fact, the line that explains it and a plain link */
.proof-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raise);
}
.proof-table th,
.proof-table td { text-align: left; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-small); vertical-align: top; }
.proof-table thead th {
  border-top: 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-panel);
}
.proof-table tbody th { font-weight: 500; color: var(--ink); }
.proof-table .why { display: block; margin-top: var(--s-1); font-weight: 400; color: var(--ink-dim); font-size: var(--t-meta); }
.proof-table td.val { font-family: var(--mono); color: var(--ink); }
.proof-table td.val strong { color: var(--accent); font-weight: 600; }
.proof-table td.chk { padding-block: var(--s-1); vertical-align: middle; }
.proof-table td.chk a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.proof-note { margin-top: var(--s-4); color: var(--ink-dim); font-size: var(--t-small); }

/* ==========================================================================
   7. Breakpoints, descending: 1440, 980, 760, 680, 620, 319. These are the shared
      shell breakpoints; a route sheet may add component-local ones of its own.
   ========================================================================== */
@media (max-width: 1440px) {
  :root { --t-h1: 3.5rem; --t-h2: 2.25rem; --gutter: 1.5rem; }
  /* The five links keep one 69px row down to 981px in both languages; below that the menu takes over. */
  .nav-in { gap: var(--s-4); }
  .nav-links a { padding: 0 var(--s-2); }
}

@media (max-width: 980px) {
  :root { --t-h1: 3rem; --t-h2: 2rem; --s-9: 4.5rem; }
  .nav-links,
  .nav-cta .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  /* With the links gone the actions take the middle and last tracks, and every control stays 44px. */
  .nav-cta { grid-column: 2 / -1; }
  .nav-cta > * { flex: none; }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  :root { --t-h1: 2.5rem; --t-h2: 1.75rem; --t-lead: 1.0625rem; --s-9: 4rem; --gutter: 1rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --t-h1: 2.25rem; }
  .cols-5 { grid-template-columns: 1fr 1fr; }
  .foot-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }
  .foot-cols .col {
    padding: 16px 12px;
    border-top: 1px solid var(--line);
  }
  .foot-cols .col a,
  .foot-cols .col span {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 620px) {
  :root { --t-h1: 2.125rem; --t-h2: 1.625rem; --s-9: 3.5rem; }
  .brand-am { display: none; }
  .theme-toggle [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-toggle { width: 44px; padding: 0; }
  .nav-in { gap: var(--s-3); }
  .ledger-grid > * { padding: var(--s-4); }
  .actions .btn,
  .hero-actions .btn { width: 100%; }
  .proof-table thead { display: none; }
  .proof-table tr { display: grid; grid-template-columns: 1fr; }
  .proof-table th,
  .proof-table td { padding: var(--s-3) var(--s-4); }
  .proof-table tbody th { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-bottom: 0; }
  .proof-table td { border-top: 0; }
  .proof-table td.chk { padding-block: 0; }
  .foot-base { justify-content: flex-start; }
}

/* Narrowest phones (280-319px): a smaller lockup and tighter gaps so the brand and the three 44px controls never overlap. */
@media (max-width: 319px) {
  .nav-in { gap: var(--s-2); }
  .brand { gap: var(--s-2); }
  .brand-mark { width: 1.5rem; height: 1.5rem; }
  .brand-name { font-size: 1.125rem; }
  .nav-cta { gap: var(--s-1); }
}

/* ==========================================================================
   8. Motion and environment: reduced motion, view transitions, contrast,
      forced colors, print.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media (prefers-contrast: more) {
  :root { --line: var(--line-bright); }
}

@media (forced-colors: active) {
  .state-line::before, .chip::before, .menu-toggle span { background: CanvasText; }
  .brand-node { fill: CanvasText; }
  .skip-link { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  /* Shell controls: theme tokens never leak into system colours (higher specificity than the state rules). */
  html .theme-toggle,
  html .theme-toggle[aria-pressed],
  html .theme-toggle:hover,
  html .icon-btn,
  html .icon-btn[aria-pressed],
  html .icon-btn:hover { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  html .theme-toggle[aria-pressed="true"],
  html .theme-toggle[aria-pressed="true"]:hover,
  html .icon-btn[aria-pressed="true"] { color: HighlightText; background: Highlight; border-color: Highlight; }
  html .icon-btn:disabled { color: GrayText; border-color: GrayText; }
  html .mobile-menu .mobile-actions .btn { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  html .mobile-menu .mobile-actions .btn-solid { color: HighlightText; background: Highlight; border-color: Highlight; }
  html .status-pill .not-yet,
  html .status-pill .sep,
  html .status-pill:hover { color: ButtonText; }
  html .brand-mark { color: CanvasText; }
  /* The current page is marked by an inset accent shadow, which forced colours drop. */
  html [aria-current="page"] { text-decoration: underline 2px; text-underline-offset: 0.3em; }
}

@media print {
  .site-nav, .skip-link, .hero-actions, .mobile-menu, .site-footer .foot-cols { display: none !important; }
  /* Paper is light whatever the screen theme: the dark theme prints with the light tokens, so text is not printed
     as light ink that the browser's economy mode greys to under 3:1 on white (audit R1-070, P-04). */
  :root:not([data-theme="light"]) {
    color-scheme: light;
    --bg: #f7f4ee;
    --bg-raise: #fffdf8;
    --bg-panel: #efebe2;
    --line: #d8d2c6;
    --line-bright: #7d766a;
    --ink: #1c1b18;
    --ink-soft: #46443f;
    --ink-dim: #6a675f;
    --accent: #0e6b67;
    --accent-ink: #ffffff;
    --accent-tint: #e2efed;
    --accent-warm: #8a5600;
    --accent-warm-tint: #f4e8d2;
    --accent-deep: #0e6b67;
    --danger: #9a2a2a;
    --shadow: none;
  }
  /* Solid buttons lose their fill on paper (backgrounds are off by default), so they print as ink on paper. */
  .btn-solid,
  .button.primary { color: var(--ink) !important; background: none !important; border-color: currentColor !important; }
  /* The Surface Lab header prints its light logo in both themes, to match the light paper tokens. */
  html .logo-dark { display: none !important; }
  html .logo-light { display: block !important; }
}