/* === gateline documentation site — Direction B, "Gateline" ==================
   White ground, ink lettering, one signal blue, everything ruled. Lineage:
   British Rail 1965 (Rail Alphabet, Rail Blue + pearl grey), GOV.UK's
   functional colours, Stripe's three-column frame, Go's grey ramp.

   Fonts, vendored under assets/fonts/ (see assets/fonts/README.md):
     Public Sans                 400, 400 italic, 600, 700   body, headings
     Atkinson Hyperlegible Next  400, 500, 700               nav, sidebar, rail,
                                                             tables, captions,
                                                             labels, diagrams
     IBM Plex Mono               400, 500                    code (ligatures off)
     Overpass                    700                         wordmark only
   All four are OFL. Nothing on the site loads from a third-party host.
   ========================================================================== */

/* ---- fonts --------------------------------------------------------------- */

/* Paths are relative to this file. font-display: swap — text renders in the
   fallback face until the file arrives; the metrics are close enough that
   the swap does not reflow the page much. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans/PublicSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans/PublicSans-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/public-sans/PublicSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/public-sans/PublicSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
}

/* IBM Plex Mono ships split by script; Latin1 covers ASCII and Latin-1, Latin2
   the extended Latin block. The ranges are the ones IBM's own CSS declares. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Medium-Latin2.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/overpass/Overpass-Bold.woff2") format("woff2");
}

/* ---- tokens -------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Palette — every colour on the site is one of these. */
  --color-ground: #ffffff;
  --color-surface: #f2f3f4;          /* sidebar column, code panels, table heads */
  --color-ink: #0b0c0c;
  --color-muted: #4f5459;            /* 7.6:1 on ground */
  --color-line: #c8cacc;             /* hairlines, 1px */
  --color-line-strong: #0b0c0c;      /* 2px rules; 3px top band */
  --color-accent: #1d70b8;           /* signal blue, 5.2:1: links, active nav */
  --color-accent-hover: #0b3d78;
  --color-accent-underline: #9cc1e3; /* prose link underlines */
  --color-accent-on: #ffffff;
  --color-approved: #0f7a52;         /* gate state only */
  --color-declined: #c03030;         /* gate state / errors only; 5.7:1 on ground */
  --color-focus: #ffdd00;            /* focus rings; "awaiting a human" */
  --color-note-bg: #eaf2fa;
  --color-note-label: #1d70b8;
  --color-caution-bg: #fff8d6;
  --color-caution-label: #7a6400;
  --color-danger-bg: #fbeceb;
  --color-danger-label: #c03030;     /* 4.9:1 on the danger tint */
  --color-selection: #d6e6f5;

  /* Code highlight tones (four, shared with the TypeDoc theme later). No page
     in this set carries syntax markup yet, so these are declared, not used. */
  --code-tone-1: var(--color-ink);
  --code-tone-2: var(--color-accent);
  --code-tone-3: var(--color-approved);
  --code-tone-4: var(--color-muted);

  /* Legacy names the inline SVG diagrams reference directly
     (fill="var(--bg-subtle,…)", stroke="var(--fg-faint)"). Aliases, not new
     colours: they resolve to surface and muted. */
  --bg-subtle: var(--color-surface);
  --fg-faint: var(--color-muted);

  /* Type */
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Atkinson Hyperlegible Next", "Public Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-mark: "Overpass", "Public Sans", Arial, sans-serif;

  /* Frame */
  --frame-w: 1320px;   /* outer width, gutters included */
  --gutter: 24px;
  --sidebar-w: 256px;
  --rail-w: 200px;
  --col-gap: 48px;
  --measure: 720px;
  --header-h: 56px;
  --band: 3px;
}

/* ---- reset & base -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* the sidebar surface bleeds left of the frame */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.53;         /* 26px */
  color: var(--color-ink);
  background: var(--color-ground);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

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

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* Focus: the GOV.UK yellow, filled behind links so it is impossible to miss. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
  background: var(--color-focus);
  text-decoration: none;
  box-decoration-break: clone;
}

/* Ink on the yellow, whatever colour the link had (blue on yellow is 3.9:1).
   !important because every link family sets its own colour later in the file. */
a:focus-visible,
a:focus-visible code,
a:focus-visible .pager-title,
a:focus-visible .pager-label {
  color: var(--color-ink) !important;
}

/* ---- skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: calc(var(--band) + 8px);
  z-index: 30;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-accent-on);
  background: var(--color-ink);
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: var(--gutter);
  background: var(--color-ink);
  color: var(--color-accent-on);
}

/* ---- top bar ------------------------------------------------------------- */

/* The 3px ink band across the top is the one piece of signage on every page.
   Its horizontal padding lines the wordmark up with the frame below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(var(--gutter), calc((100% - var(--frame-w)) / 2 + var(--gutter)));
  background: var(--color-ground);
  border-top: var(--band) solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line);
}

/* Wordmark: "gate|line", the | in signal blue. The builder emits the word as
   two spans, <span>gate</span><span>line</span>, so the accessible name is the
   plain word and the line between the halves is a 2px accent rule rather than
   a glyph. */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mark);
  font-size: 1.25rem;        /* 20px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
}

.wordmark > span:first-child {
  padding-right: 0.28em;
  border-right: 2px solid var(--color-accent);
}

.wordmark > span:last-child {
  padding-left: 0.28em;
}

.wordmark:hover {
  color: var(--color-accent);
}

.wordmark:focus-visible {
  background: none;
  outline-offset: 4px;
}

.site-nav {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-width: 0;
}

.site-nav a {
  display: flex;
  align-items: center;
  margin-bottom: -1px;               /* the active rule sits on the hairline */
  border-bottom: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--color-ink);
}

.site-nav a.active,
.site-nav a[aria-current="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.site-nav a:focus-visible {
  outline-offset: -3px;
}

/* ---- frame: three columns ------------------------------------------------ */

/* Source order is main → toc → sidebar; the grid re-places them. The sidebar
   column sits on a surface that runs the full page height and bleeds to the
   left edge of the viewport (drawn by ::before), with a hairline where it
   meets the content. */
.layout {
  position: relative;
  isolation: isolate;
  flex: 1;
  width: 100%;
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w);
  column-gap: var(--col-gap);
  align-items: start;
}

.layout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: calc(100% - var(--gutter) - var(--sidebar-w));
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
}

.layout > main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: var(--measure);
  padding: 40px 0 64px;
}

.layout > .sidebar,
.layout > .toc {
  grid-row: 1;
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 40px 0 32px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
}

.layout > .sidebar {
  grid-column: 1;
}

.layout > .toc {
  grid-column: 3;
}

/* ---- sidebar (site tree) ------------------------------------------------- */

.sidebar-title,
.toc-title {
  margin: 0 0 12px;
  padding-top: 8px;
  border-top: 2px solid var(--color-line-strong);
  font-weight: 700;
  color: var(--color-ink);
}

.sidebar-title {
  margin-right: 16px;
}

.sidebar-section {
  margin: 20px 16px 4px 0;
  font-weight: 700;
}

.sidebar-section:first-of-type {
  margin-top: 0;
}

.sidebar-section a {
  color: var(--color-ink);
  text-decoration: none;
}

.sidebar-section a:hover {
  color: var(--color-accent);
}

.sidebar-list {
  list-style: none;
}

.sidebar-list a {
  display: block;
  padding: 4px 16px 4px 0;
  margin-right: 0;
  border-right: 3px solid transparent;
  color: var(--color-muted);
  text-decoration: none;
}

.sidebar-list a:hover {
  color: var(--color-ink);
}

/* Current page: the 3px signal rule on the sidebar's right edge, where the
   surface meets the content. */
.sidebar-list a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 700;
  border-right-color: var(--color-accent);
}

/* ---- right rail (on this page) ------------------------------------------- */

.toc-list {
  list-style: none;
}

.toc-list a {
  display: block;
  padding: 4px 0;
  color: var(--color-muted);
  text-decoration: none;
}

.toc-list a:hover {
  color: var(--color-ink);
}

/* ---- page title ---------------------------------------------------------- */

main > h1,
.doc h1 {
  margin: 0 0 16px;
  font-size: 2rem;            /* 32px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

/* ---- prose --------------------------------------------------------------- */

.doc h2,
.doc h3,
.doc h4 {
  scroll-margin-top: calc(var(--header-h) + 16px);
  color: var(--color-ink);
}

.doc h2 {
  margin: 48px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.5rem;          /* 24px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.doc > h2:first-child {
  margin-top: 24px;
}

.doc h3 {
  margin: 32px 0 8px;
  font-size: 1.125rem;        /* 18px */
  font-weight: 600;
  line-height: 1.3;
}

.doc h4 {
  margin: 24px 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.doc p {
  margin: 0 0 16px;
}

.doc .lede {
  margin-bottom: 24px;
  font-size: 1.1875rem;       /* 19px */
  line-height: 1.5;
  color: var(--color-ink);
}

.doc strong {
  font-weight: 600;
}

.doc ul,
.doc ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.doc li {
  margin-bottom: 6px;
}

.doc li > ul,
.doc li > ol {
  margin: 6px 0 0;
}

.doc li::marker {
  color: var(--color-muted);
}

.doc a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent-underline);
  text-underline-offset: 0.18em;
}

.doc a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent-hover);
}

.doc hr {
  margin: 48px 0;
  border: 0;
  border-top: 2px solid var(--color-line-strong);
}

.doc blockquote {
  margin: 0 0 16px;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--color-line);
  color: var(--color-muted);
}

/* Definition lists: term on its own line, body indented. */
.doc dl {
  margin: 0 0 16px;
}

.doc dt {
  margin-top: 14px;
  font-weight: 600;
}

.doc dt:first-child {
  margin-top: 0;
}

.doc dd {
  margin: 4px 0 0 24px;
}

.doc dd > p {
  margin-bottom: 8px;
}

.doc dd > p:last-child {
  margin-bottom: 0;
}

/* ---- code ---------------------------------------------------------------- */

.doc code {
  font-size: 0.875em;
  padding: 0.05em 0.2em;
  background: var(--color-surface);
  border-radius: 3px;
  color: var(--color-ink);
}

.doc a code {
  color: inherit;
}

/* Code inside a heading is the heading; no panel behind it. */
.doc h1 code,
.doc h2 code,
.doc h3 code,
.doc h4 code {
  padding: 0;
  background: none;
  font-size: 0.9em;
}

.doc pre {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 3px;
  overflow-x: auto;
  tab-size: 4;
}

.doc pre code {
  display: block;
  padding: 0;
  background: none;
  font-size: 0.875rem;        /* 14px */
  line-height: 1.6;
  color: var(--color-ink);
}

.doc pre.long {
  max-height: 30rem;
  overflow-y: auto;
}

/* ---- tables -------------------------------------------------------------- */

.doc table {
  width: 100%;
  margin: 16px 0 24px;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.doc th,
.doc td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}

.doc th:first-child,
.doc td:first-child {
  padding-left: 0;
}

.doc th {
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-line-strong);
}

.doc th:first-child {
  padding-left: 12px;
}

.doc td:first-child {
  padding-left: 12px;
}

/* Code in cells wraps at its spaces: the grammar tables carry 50-character
   commit subjects, and a table wider than the column pushes the page sideways. */
.doc table code {
  font-size: 0.9em;
  white-space: normal;
}

/* First columns are names (gates, flags, keys); the longest in the set is
   40 characters, so they are kept on one line. */
.doc td:first-child {
  white-space: nowrap;
}

/* Gate and state cells: a 6px filled square in the signal colour before the
   text label. No page in this set carries state columns yet; the grammar is
   here for the tables that will. */
.state::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: 1px;
  background: currentColor;
}

.state-approved { color: var(--color-approved); }
.state-declined { color: var(--color-declined); }
.state-waiting  { color: var(--color-caution-label); }

/* ---- figures and diagrams ------------------------------------------------ */

.doc figure {
  margin: 24px 0;
}

.doc figcaption {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.doc figure.diagram {
  margin: 28px 0 32px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  overflow-x: auto;
}

.diagram-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-ink);
}

/* Labels sit on connectors. A stroke in the ground colour, painted under the
   glyphs, knocks the line out where the text crosses it. */
.diagram-svg text {
  paint-order: stroke;
  stroke: var(--color-ground);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.diagram-svg .d-bg {
  fill: var(--color-surface);
}

.diagram-svg .d-accent {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.diagram-svg .d-accent-stroke {
  stroke: var(--color-accent);
}

.diagram-svg .d-accent-fill {
  fill: var(--color-accent);
}

.diagram-svg .d-mono {
  font-family: var(--font-mono);
  font-size: 9px;
}

.diagram-svg .d-bold {
  font-weight: 700;
}

.diagram-svg .d-small {
  font-size: 9px;
}

.diagram-svg .d-faint {
  fill: var(--color-muted);
}

.diagram-svg .d-dashed {
  stroke-dasharray: 4 3;
}

/* A figure may ship a wide and a restacked narrow drawing; one is shown. */
.diagram-svg.d-narrow-only {
  display: none;
}

@media (max-width: 600px) {
  .diagram-svg.d-wide-only {
    display: none;
  }

  .diagram-svg.d-narrow-only {
    display: block;
  }
}

/* ---- callouts ------------------------------------------------------------ */

/* Tinted surface, hairline, a small label; no coloured bar. The generic
   .callout is a note; .caution and .danger are the two other tones. */
.doc .callout,
.callout {
  margin: 0 0 20px;
  padding: 12px 16px 14px;
  background: var(--color-note-bg);
  border: 1px solid var(--color-line);
  border-radius: 3px;
  font-size: 1rem;
  line-height: 1.55;
}

.callout::before {
  content: "Note";
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-note-label);
}

.callout.caution {
  background: var(--color-caution-bg);
}

.callout.caution::before {
  content: "Caution";
  color: var(--color-caution-label);
}

.callout.danger {
  background: var(--color-danger-bg);
}

.callout.danger::before {
  content: "Declined";
  color: var(--color-danger-label);
}

.callout > p {
  margin-bottom: 8px;
}

.callout > p:last-child {
  margin-bottom: 0;
}

/* ---- onboarding: exercise ------------------------------------------------ */

/* A ruled section on the white page: 2px ink rule above, hairline below. The
   code panels inside keep their surface tint, so nothing sits on a tint. */
.doc .exercise {
  margin: 32px 0;
  padding: 14px 0 4px;
  border-top: 2px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line);
}

.doc .exercise > h3,
.doc .exercise > .exercise-label {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}

.doc .exercise > p {
  margin-bottom: 14px;
}

.doc .exercise ul,
.doc .exercise ol {
  margin-bottom: 14px;
}

.doc .exercise pre {
  margin-bottom: 14px;
}

/* Expected output: the 28px label row the spine describes, carrying its
   label in muted; the panel is otherwise the ordinary code panel. */
.doc .exercise .exercise-output {
  padding-top: 0;
}

.doc .exercise .exercise-output::before {
  content: "Expected output";
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0 -16px 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
}

.doc .exercise .exercise-output code {
  color: var(--color-muted);
}

/* ---- onboarding: check your understanding -------------------------------- */

.doc .check {
  margin: 32px 0;
  padding: 12px 16px 14px;
  background: var(--color-note-bg);
  border: 1px solid var(--color-line);
  border-radius: 3px;
}

.doc .check > h3,
.doc .check > .check-label {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-note-label);
}

.doc .check > p {
  margin-bottom: 8px;
  font-size: 1rem;
}

.doc .check ol,
.doc .check ul {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.doc .check li {
  margin-bottom: 6px;
}

.doc .check li:last-child {
  margin-bottom: 0;
}

/* ---- onboarding: maintainer note ----------------------------------------- */

.doc .maintainer-note {
  margin: 32px 0;
  padding: 12px 16px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 3px;
}

.doc .maintainer-note > h3,
.doc .maintainer-note > .note-label {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-muted);
}

.doc .maintainer-note > p {
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.55;
}

.doc .maintainer-note > p:last-child {
  margin-bottom: 0;
}

.doc .maintainer-note code {
  background: var(--color-ground);
}

/* ---- pager --------------------------------------------------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--measure);
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-ui);
}

.pager a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.pager-spacer {
  flex: 1 1 0;
}

.pager-next {
  text-align: right;
}

.pager-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.pager-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-accent);
}

.pager a:hover .pager-title {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ---- section hubs: ruled rows -------------------------------------------- */

.hub-list {
  max-width: var(--measure);
  margin: 0 0 40px;
  border-top: 1px solid var(--color-line);
}

.hub-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
}

.hub-number {
  flex: 0 0 32px;
  padding-top: 2px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.hub-body {
  min-width: 0;
}

.hub-body h3 {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.hub-body h3 a {
  color: var(--color-accent);
  text-decoration: none;
}

.hub-body h3 a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.hub-body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

/* ---- onboarding: module list --------------------------------------------- */

.module-list-heading {
  max-width: var(--measure);
  margin: 48px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.module-list {
  max-width: var(--measure);
  margin: 0 0 16px;
}

.module-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
}

.module-item .module-number {
  flex: 0 0 32px;
  padding-top: 3px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.module-item .module-body {
  min-width: 0;
}

.module-item h2 {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.module-item h2 a {
  color: var(--color-accent);
  text-decoration: none;
}

.module-item h2 a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.module-item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.module-item.planned h2,
.module-item.planned .module-number,
.module-item.planned p {
  color: var(--color-muted);
}

/* "Exercises" / "Planned": a plain word after the title, no badge. */
.module-tag {
  margin-left: 10px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
  white-space: nowrap;
}

.module-tag::before {
  content: "\00b7\00a0";
}

/* ---- landing page -------------------------------------------------------- */

/* The landing sits in the interior frame and is the page's own site map: the
   intro, then the four sections as ruled rows (name left, text right) in the
   same grammar as the section hubs, then the licence note. */
.section-nav {
  max-width: var(--measure);
  margin: 0 0 8px;
}

.section-nav-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}

.section-nav-row h3 {
  grid-column: 1;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}

.section-nav-row h3 a {
  color: var(--color-accent);
  text-decoration: none;
}

.section-nav-row h3 a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.section-nav-row p {
  grid-column: 2;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.doc .landing-note {
  margin: 32px 0 8px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.doc .provenance {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

/* ---- footer -------------------------------------------------------------- */

.site-footer {
  padding: 16px max(var(--gutter), calc((100% - var(--frame-w)) / 2 + var(--gutter))) 24px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
  background: var(--color-ground);
}

.footer-sep {
  margin: 0 6px;
}

.site-footer a {
  color: var(--color-accent);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ---- responsive ---------------------------------------------------------- */

/* Two columns: the rail is dropped, the tree stays. */
@media (max-width: 1279px) {
  .layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    column-gap: 40px;
  }

  .layout > .toc {
    display: none;
  }
}

/* Single column: content first, then the site tree as an in-flow list on its
   own surface band. */
@media (max-width: 899px) {
  :root {
    --gutter: 16px;
  }

  .layout {
    display: block;
  }

  .layout::before {
    display: none;
  }

  .layout > main {
    max-width: none;
    padding: 28px 0 40px;
  }

  main > h1,
  .doc h1 {
    font-size: 1.75rem;       /* 28px */
  }

  .layout > .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0 calc(-1 * var(--gutter));
    padding: 24px var(--gutter) 32px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
  }

  .sidebar-title {
    margin-right: 0;
  }

  .sidebar-list a {
    border-right: 0;
    padding-right: 0;
  }

  .sidebar-list a[aria-current="page"] {
    border-right: 0;
  }

  .pager {
    flex-direction: column;
    gap: 16px;
  }

  .pager-next {
    text-align: left;
  }

  .section-nav-row {
    display: block;
  }

  .section-nav-row h3 {
    margin-bottom: 6px;
  }

  /* Reference tables carry code in every cell and cannot reflow; they scroll
     inside themselves rather than pushing the page sideways. */
  .doc table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 599px) {
  /* Four section links do not fit beside the wordmark on a phone. The bar
     becomes two rows — wordmark, then the section links on their own rule —
     and stops being sticky, since two rows would take a fifth of the screen. */
  .site-header {
    position: static;
    height: auto;
    flex-wrap: wrap;
    gap: 0;
  }

  .wordmark {
    height: 48px;
  }

  .wordmark {
    font-size: 1.125rem;
  }

  .site-nav {
    flex-basis: 100%;
    gap: 20px;
    height: 40px;
    border-top: 1px solid var(--color-line);
  }

  .site-nav a {
    margin-bottom: 0;
    font-size: 0.875rem;
  }

  .layout > main {
    padding-top: 24px;
  }

  .doc h2,
  .doc h3,
  .doc h4 {
    scroll-margin-top: 16px;
  }

  .doc h2 {
    font-size: 1.375rem;      /* 22px */
    margin-top: 40px;
  }

  .doc pre {
    padding: 10px 12px;
  }

  .doc .exercise .exercise-output::before {
    margin: 0 -12px 8px;
    padding: 0 12px;
  }
}