/* GSAP Playground: the workshop service manual.
   Two-colour print on cool newsprint: near-black ink plus one spot green, in 100/40/12% screens.
   The spot colour lives on the frame (running head, thumb tabs, rail, numerals, figure, links, the flash);
   the reading column stays ink on paper. Warning, caution and note differ by shape and rule weight.
   Sections: fonts, tokens, base, sheet, running head, rail, thumbs, lesson head, figure, editor theme,
   toolbar, fault finding, reference sections, pager, banners, contents rows, home, topic page, narrow. */

/* ---------- fonts (self-hosted, Latin subset, SIL OFL: vendor/fonts/*-ofl.txt) ---------- */

@font-face {
  font-family: "Archivo";
  src: url(../vendor/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),
       url(../vendor/fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url(../vendor/fonts/public-sans-latin-wght-normal.woff2) format("woff2-variations"),
       url(../vendor/fonts/public-sans-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../vendor/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../vendor/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Paper and ink. Contrast on paper: ink 15:1, ink-2 6.7:1, spot 5.6:1 (paper on spot the same). */
  --paper: #e9edeb;        /* cool newsprint */
  --sheet: #f5f7f6;        /* the brighter stock of a figure plate */
  --ink: #15191b;
  --ink-2: #4a5357;        /* secondary text: folios, counts, minutes */
  --rule: #a9adad;         /* ink 30% screen: light rules and leaders */
  --rule-faint: #d0d4d2;   /* ink 12% screen */
  --spot: #006b45;         /* the one spot colour: workshop green */
  --spot-40: #8cb9a9;      /* 40% screen: the highlighter */
  --spot-12: #cdddd7;      /* 12% screen: tab ground, current row */
  --grid-minor: rgba(21, 25, 27, 0.06);
  --grid-major: rgba(21, 25, 27, 0.16);

  /* Type. Condensed caps heads, a humanist grotesque for text, mono only for code and parameter names. */
  --font-head: "Archivo", "Archivo Narrow", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-text: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --text: 1.0625rem;       /* 17px body */
  --small: 0.875rem;
  --label: 0.75rem;        /* condensed caps labels */
  --code: 0.8125rem;
  --h1: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
  --measure: 68ch;

  /* Space: tight inside a group, generous between groups. */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;

  /* Rules carry the hierarchy: hairline, plate frame, heavy chapter rule. */
  --hair: 1px solid var(--rule);
  --frame: 1.5px solid var(--ink);
  --heavy: 3px solid var(--ink);

  /* Frame geometry. The figure is sized so the stage, editor and toolbar fit the first viewport. */
  --head-h: 2.75rem;
  --rail-w: 16rem;
  --thumb-w: 3.25rem;
  --margin-head: 10.5rem;
  --stage-pad: 40px;
  --fig-h: clamp(18rem, 100vh - 25.5rem, 34rem);

  /* Drawn marks (masks over currentColor), so no glyph ever falls back to an emoji face. */
  --i-run: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.2v11.6L13.6 8z'/%3E%3C/svg%3E");
  --i-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.6 9.2A4.8 4.8 0 1 1 11.2 4.6' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M13.6 1.6v5.2H8.4z'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5h8v8h-8z M2.5 10.5v-8h8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.8 3.7 7.2-8.4' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
  --i-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 2.4a5.6 5.6 0 0 1 0 11.2z'/%3E%3C/svg%3E");
  --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1v14' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4.4 1.8h9.2l-2.6 3.6 2.6 3.6H4.4z'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 11.5 8 5 13.5z'/%3E%3C/svg%3E");
  --i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .8 15.6 14.6H.4zM7.1 5.4h1.8v4.8H7.1zM7.1 11.2h1.8v1.8H7.1z'/%3E%3C/svg%3E");
  --i-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4 14.3 13.8H1.7z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7.2 6.2h1.6v4H7.2zM7.2 11h1.6v1.5H7.2z'/%3E%3C/svg%3E");
  --i-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5h11v11h-11z' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M5 6h6v1.5H5zM5 9h4v1.5H5z'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  caret-color: var(--spot);
}

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

a { color: var(--spot); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.runninghead :focus-visible { outline-color: var(--paper); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p, ol, ul { margin: 0; }

/* Mono panes and the rail scroll with ink scrollbars, not the platform grey. */
.rail, .CodeMirror-scroll, .stage, .editor-fallback { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }

/* A drawn mark: the element's text stays for assistive tech and tests, the mask is what you see. */
.mark, .sep, .toolbar button::before, .pager a::before, .bookmark::before, aside::before, td[data-src]::before {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ---------- sheet: rail | column | thumbs under the running head ---------- */

.sheet {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--thumb-w);
  grid-template-areas: "head head head" "rail column thumbs";
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.sheet-home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "column"; }

/* ---------- running head ---------- */

.runninghead {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--head-h);
  padding: var(--s2) var(--s5);
  background: var(--spot);
  color: var(--paper);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 650;
  font-size: var(--small);
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-width: 0; }
.breadcrumb a, .runninghead .docs-link { color: var(--paper); text-decoration: none; text-transform: uppercase; }
.breadcrumb a:hover, .runninghead .docs-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.breadcrumb .sep {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  overflow: hidden;
  color: transparent;
  background: var(--paper);
  opacity: 0.75;
  -webkit-mask-image: var(--i-chevron); mask-image: var(--i-chevron);
  user-select: none;
}
/* The page itself keeps its own case: lesson titles are code (gsap.to()), and case is meaning there. */
.crumb-here { font-weight: 800; letter-spacing: 0.03em; }
.sheet-home .crumb-here { text-transform: uppercase; }
.runninghead .docs-link { flex: none; white-space: nowrap; padding: var(--s1) 0; }
/* The outbound arrow is drawn, like every other mark. */
.docs-link { display: inline-flex; align-items: center; gap: 0.35em; }
.docs-link .ext {
  display: inline-block;
  width: 0.7em; height: 0.7em;
  overflow: hidden;
  color: transparent;
  background: var(--spot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12.5 3.5M6 3h7v7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12.5 3.5M6 3h7v7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  user-select: none;
}
.runninghead .docs-link .ext { background: var(--paper); }

/* ---------- rail: the contents, current chapter opened into parts ---------- */

.rail {
  grid-area: rail;
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--s4) var(--s4) var(--s6);
}
/* The rule between rail and column runs the page's full height, so it belongs to the column. */
.sheet:not(.sheet-home) > .column { border-left: var(--frame); }
.rail-toggle > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: var(--heavy);
  margin-bottom: var(--s3);
}
.rail-toggle > summary::-webkit-details-marker { display: none; }
.rail-toggle > summary::before {
  content: "";
  width: 0.7em; height: 0.7em;
  background: var(--spot);
  -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat;
}
.rail-toggle[open] > summary::before { transform: rotate(90deg); }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail-chapter + .rail-chapter { border-top: var(--hair); }
.rail-head { display: flex; align-items: center; gap: var(--s2); min-height: 2.25rem; }
.rail-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-head);
  font-stretch: 72%;
  font-size: var(--small);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.rail-code {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  color: var(--spot);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.rail-link:hover .rail-title { text-decoration: underline; text-underline-offset: 0.2em; }
/* The open chapter's number becomes a solid tab, the same mark the thumb index carries. */
.rail-chapter.current > .rail-head .rail-code { background: var(--spot); color: var(--paper); }
.rail-chapter.current > .rail-head .rail-title { font-weight: 800; }
.rail .chapter-count, .chapter-count {
  flex: none;
  color: var(--ink-2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-size: var(--label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.rail .part { margin: var(--s2) 0 var(--s3); }
.rail .part-title { margin: var(--s2) 0 var(--s1) 0; }

/* ---------- drawn state marks: ✓ visited or complete, ◐ partial, ⚑ where you stopped ---------- */

.mark {
  flex: none;
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  background: var(--spot);
  vertical-align: -0.1em;
  user-select: none;
  -webkit-mask-image: var(--i-check); mask-image: var(--i-check);
}
.mark[data-mark="partial"] { -webkit-mask-image: var(--i-half); mask-image: var(--i-half); }
.mark[data-mark="bookmark"] { -webkit-mask-image: var(--i-flag); mask-image: var(--i-flag); }

/* ---------- thumb index: one tab per chapter on the outer edge ---------- */

.thumbs {
  grid-area: thumbs;
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  padding: var(--s4) 0;
}
.thumbs ol { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; gap: 2px; }
.thumbs li { flex: 1 1 0; max-height: 3.25rem; min-height: 1.75rem; display: flex; }
.thumb {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-left: var(--s2);
  background: var(--spot-12);
  color: var(--spot);
  text-decoration: none;
  font-family: var(--font-head);
  font-stretch: 70%;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.thumb:hover { background: var(--spot-40); color: var(--ink); }
/* The open chapter's tab is printed solid and stands proud of the others. */
.thumb.current { margin-left: 0; background: var(--spot); color: var(--paper); }
.thumb .mark { width: 0.7em; height: 0.7em; background: currentColor; }
.thumb.current .mark { background: var(--paper); }
/* The chapter name prints beside the tab only when you reach for it. */
.thumb-title {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  translate: 0 -50%;
  padding: var(--s1) var(--s2);
  border: var(--frame);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.thumb:hover .thumb-title, .thumb:focus-visible .thumb-title { opacity: 1; }

/* ---------- column and the lesson head: folio, title, imperative ---------- */

.column {
  grid-area: column;
  min-width: 0;
  padding: var(--s5) clamp(var(--s4), 3vw, var(--s7)) var(--s8);
}
.column > * { max-width: 76rem; }

/* The folio sits in the page's outer corner, as a printed manual numbers its pages. */
.column > .folio {
  float: right;
  margin: 0 0 0 var(--s5);
  color: var(--spot);
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.column > h1 {
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: -0.005em;
}
.column > .imperative {
  clear: both;
  margin-top: var(--s2);
  padding-bottom: var(--s3);
  border-bottom: var(--heavy);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- figure: the live stage beside the editable code ---------- */

.column { counter-reset: fig; }
.example {
  counter-increment: fig;
  display: grid;
  grid-template-columns: var(--margin-head) minmax(0, 1fr);
  column-gap: var(--s5);
  margin-top: var(--s5);
}
.example > * { grid-column: 1 / -1; }
.example + .example { margin-top: var(--s8); }
.example > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 750;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}
.example > h2::before {
  content: "Fig. " counter(fig);
  flex: none;
  color: var(--spot);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.figure {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(var(--fig-h), auto);
  border: var(--frame);
  background: var(--sheet);
}
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: flex-start;
  gap: var(--s5);
  min-width: 0;
  min-height: 14rem;
  padding: var(--s6) var(--stage-pad);
  overflow: clip;
  background-color: var(--sheet);
  /* The measurement ground: 20px minor squares, 100px major, origin at the stage's inner left edge. */
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: var(--stage-pad) center, var(--stage-pad) center, var(--stage-pad) center, var(--stage-pad) center;
}
/* The scale callout, so x: 300 reads as three squares. */
.stage::after {
  content: "1 square = 100 px";
  position: absolute;
  right: var(--s3);
  bottom: var(--s2);
  color: var(--spot);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Only the first figure has to fill the first viewport; later ones size to a working plate. */
.example ~ .example .figure { grid-template-rows: minmax(20rem, auto); }
.stage > .scroller { width: 100%; height: 100%; overflow: auto; }

/* Demo parts the lessons share: the moving part is printed in the spot colour. */
.stage .box { flex: none; width: 60px; height: 60px; background: var(--spot); }
.stage .circle { flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--ink); }
.stage .dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }

.editor {
  position: relative;
  min-width: 0;
  min-height: 16rem;
  border-left: var(--frame);
  background: var(--sheet);
}
.editor::before {
  content: "demo.js \00b7  editable";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 var(--s3);
  border-bottom: var(--hair);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 700;
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.editor .CodeMirror, .editor .editor-fallback { position: absolute; top: 2rem; right: 0; bottom: 0; left: 0; height: auto; }
.editor-fallback {
  width: 100%;
  margin: 0;
  padding: var(--s3);
  border: 0;
  resize: none;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--code);
  line-height: 1.6;
}

/* page kind: the stage is a tall region and the code docks in a drawer at the foot of the screen. */
.figure:has(> details.drawer) { display: block; }
.figure:has(> details.drawer) .stage { display: block; overflow-x: clip; overflow-y: visible; }
.drawer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: var(--frame);
  background: var(--paper);
}
.drawer > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s4);
  cursor: pointer;
  background: var(--spot);
  color: var(--paper);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drawer .editor { height: min(22rem, 45vh); border-left: 0; }

/* ---------- editor theme: the code printed in two colours, never a dark IDE ---------- */

.cm-s-manual.CodeMirror { background: var(--sheet); color: var(--ink); font-family: var(--font-mono); font-size: var(--code); line-height: 1.6; }
.cm-s-manual .CodeMirror-gutters { background: var(--sheet); border-right: var(--hair); }
.cm-s-manual .CodeMirror-linenumber { color: var(--ink-2); padding: 0 var(--s2) 0 var(--s3); }
.cm-s-manual .CodeMirror-lines { padding: var(--s3) 0; }
.cm-s-manual .CodeMirror-cursor { border-left: 2px solid var(--spot); }
.cm-s-manual .CodeMirror-selected { background: var(--spot-12); }
/* Selection stays on the 12% screen, where spot strings and numbers keep 4.7:1; the 40% screen belongs to the flash. */
.cm-s-manual.CodeMirror-focused .CodeMirror-selected { background: var(--spot-12); }
.cm-s-manual .CodeMirror-line::selection, .cm-s-manual .CodeMirror-line > span::selection, .cm-s-manual .CodeMirror-line > span > span::selection { background: var(--spot-12); color: var(--ink); }
.cm-s-manual.CodeMirror-focused { outline: 2px solid var(--ink); outline-offset: -2px; }
.cm-s-manual .cm-keyword { color: var(--ink); font-weight: 700; }
.cm-s-manual .cm-def, .cm-s-manual .cm-variable, .cm-s-manual .cm-variable-2, .cm-s-manual .cm-property { color: var(--ink); }
.cm-s-manual .cm-string, .cm-s-manual .cm-string-2 { color: var(--spot); }
.cm-s-manual .cm-number, .cm-s-manual .cm-atom { color: var(--spot); font-weight: 700; }
.cm-s-manual .cm-operator, .cm-s-manual .cm-punctuation, .cm-s-manual .cm-bracket { color: var(--ink-2); }
.cm-s-manual .cm-comment { color: var(--ink-2); font-style: normal; }
.cm-s-manual .CodeMirror-matchingbracket { color: var(--ink) !important; background: var(--spot-12); outline: 1px solid var(--spot); }
/* The comment dialect: WHY explains (quiet), TRY invites a change (spot on its screen), GOTCHA warns (heavy ink, ruled). */
.cm-s-manual span.cm-why { color: var(--ink-2); }
/* TRY is bold spot with no fill: a fill on the code means only "this line just changed". */
.cm-s-manual span.cm-try { color: var(--spot); font-weight: 700; }
.cm-s-manual span.cm-gotcha { color: var(--ink); font-weight: 700; text-decoration: underline 1.5px; text-decoration-style: dotted; text-underline-offset: 3px; }
/* The highlighter swipe on the lines an experiment changed. */
.cm-s-manual .CodeMirror-linebackground.cm-flash { background: var(--spot-40); transform-origin: left center; }
.cm-s-manual .cm-flash-text span { color: var(--ink) !important; }
.cm-s-manual .CodeMirror-nonmatchingbracket, .cm-s-manual .cm-error { color: var(--ink) !important; background: none; text-decoration: underline wavy 1px; text-underline-offset: 3px; }

/* ---------- toolbar: Run, Reset, Copy and the edited mark, docked under the figure ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border: var(--frame);
  border-top: 0;
  background: var(--paper);
}
.toolbar button, .faults [data-try] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 2.5rem;
  padding: 0 var(--s4);
  border: var(--frame);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.toolbar button::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  background: currentColor;
}
.toolbar [data-run]::before { -webkit-mask-image: var(--i-run); mask-image: var(--i-run); }
.toolbar [data-reset]::before { -webkit-mask-image: var(--i-reset); mask-image: var(--i-reset); }
.toolbar [data-copy]::before { -webkit-mask-image: var(--i-copy); mask-image: var(--i-copy); }
.toolbar [data-run] { min-width: 7rem; border-color: var(--spot); background: var(--spot); color: var(--paper); }
.toolbar button:hover, .faults [data-try]:hover { background: var(--spot-12); }
.toolbar [data-run]:hover { border-color: var(--ink); background: var(--ink); }
.toolbar .edited {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-right: var(--s2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.toolbar .edited::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--spot); }

/* A fault in the code: the heaviest rule on the page, printed in ink. */
.error-panel {
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  border: var(--heavy);
  background: var(--sheet);
  font-family: var(--font-mono);
  font-size: var(--code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.error-panel::before {
  content: "Fault";
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- fault finding: change this, expect that, try it ---------- */

.faults-title, .column section > h2, .column section > .section-title {
  font-family: var(--font-head);
  font-stretch: 72%;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  padding-top: var(--s3);
}
.example > .faults-title { grid-column: 1; margin-top: var(--s5); border-top: var(--heavy); }
.example > .faults { grid-column: 2; margin-top: var(--s5); }
.faults { list-style: none; padding: 0; counter-reset: fault; border-top: var(--heavy); }
.faults > li {
  counter-increment: fault;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  grid-template-areas: "n title try" "n expect try";
  column-gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: var(--hair);
}
.faults > li::before {
  content: counter(fault);
  grid-area: n;
  color: var(--spot);
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
}
.fault-title { grid-area: title; font-weight: 700; }
.fault-expect { grid-area: expect; max-width: var(--measure); }
.fault-expect::before {
  content: "Expect ";
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.faults [data-try] { grid-area: try; align-self: center; min-width: 6.5rem; }
/* The experiment in force: its row and button print solid. */
.faults > li:has([aria-pressed="true"]) { background: var(--spot-12); }
.faults [data-try][aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ---------- reference sections: specifications, procedure, warnings and notes ---------- */

.column > section:not(.example):not(.results) {
  clear: both;
  display: grid;
  grid-template-columns: var(--margin-head) minmax(0, 1fr);
  column-gap: var(--s5);
  row-gap: var(--s4);
  margin-top: var(--s8);
}
.column > section:not(.example):not(.results) > :not(h2) { grid-column: 2; }
.column > section:not(.example):not(.results) > h2 { grid-column: 1; border-top: var(--heavy); }

table.specs {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--heavy);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.specs th {
  padding: var(--s3) var(--s3) var(--s2) 0;
  border-bottom: var(--frame);
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.specs td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: var(--hair); vertical-align: top; overflow-wrap: break-word; }
.specs td:first-child { font-family: var(--font-mono); font-size: var(--code); font-weight: 700; white-space: nowrap; }
.specs td:nth-child(2) { color: var(--ink-2); font-size: var(--small); }
.specs td:nth-child(3) { font-family: var(--font-mono); font-size: var(--code); max-width: 16rem; }
.specs td:nth-child(4) { min-width: 16ch; }
.specs td:last-child { white-space: nowrap; }
/* Source marks are shapes: a solid square from the docs, a ringed dot seen in the demo, an open dashed ring not yet checked. */
td[data-src], .src-key {
  white-space: nowrap;
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}
td[data-src]::before, .src-key::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4em;
  vertical-align: -0.08rem;
  background: var(--ink);
}
td[data-src="observed"]::before, .src-key[data-src="observed"]::before { border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 32%, transparent 34% 56%, var(--ink) 58%); }
td[data-src="unverified"]::before, .src-key[data-src="unverified"]::before { border-radius: 50%; background: transparent; border: 1.5px dashed var(--ink); }
td[data-src="unverified"] { color: var(--ink-2); }
td[data-src] { cursor: help; }
/* The legend sits under the Specifications heading, in the same marks the rows carry. */
.src-legend { color: var(--ink-2); font-size: var(--small); line-height: 1.8; }
.src-key { color: var(--ink); margin-right: 0.15em; }

#procedure ol { list-style: none; padding: 0; counter-reset: step; border-top: var(--heavy); }
/* Steps hold inline code, so the numeral hangs in the margin rather than making the step a grid. */
#procedure li {
  counter-increment: step;
  position: relative;
  max-width: calc(var(--measure) + 3.5rem);
  min-height: 2.75rem;
  padding: var(--s3) 0 var(--s3) 3.5rem;
  border-bottom: var(--hair);
}
#procedure li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--s3);
  color: var(--spot);
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 2rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Warning: the heaviest rule and a solid triangle. Caution: a frame and an open triangle. Note: hairlines and a ruled square. */
#notes aside, .column aside { max-width: calc(var(--measure) + 4rem); padding: var(--s4) var(--s5); }
.column aside::before {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin-bottom: var(--s2);
  background: var(--ink);
}
.column aside > :first-child::before {
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.6em;
}
.column aside.warning { border: 4px solid var(--ink); }
.column aside.warning::before { -webkit-mask-image: var(--i-warning); mask-image: var(--i-warning); }
.column aside.warning > :first-child::before { content: "Warning"; }
.column aside.caution { border: var(--frame); }
.column aside.caution::before { -webkit-mask-image: var(--i-caution); mask-image: var(--i-caution); }
.column aside.caution > :first-child::before { content: "Caution"; }
.column aside.note { border-top: var(--hair); border-bottom: var(--hair); padding-left: 0; padding-right: 0; }
.column aside.note::before { width: 1.1rem; height: 1.1rem; -webkit-mask-image: var(--i-note); mask-image: var(--i-note); }
.column aside.note > :first-child::before { content: "Note"; }
.column aside p + p { margin-top: var(--s2); }

/* ---------- pager: the way on, with minutes ahead ---------- */

.pager {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5);
  margin-top: var(--s8);
  border-top: var(--heavy);
}
.pager a {
  position: relative;
  display: block;
  padding: var(--s4) 0 var(--s4) 1.5rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
}
.pager a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--spot);
  -webkit-mask-image: var(--i-chevron); mask-image: var(--i-chevron);
  transform: scaleX(-1);
}
.pager .pager-next { grid-column: 2; text-align: right; padding: var(--s4) 1.5rem var(--s4) 0; }
.pager .pager-next::before { left: auto; right: 0; transform: none; }
.pager-label {
  display: block;
  color: var(--ink-2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pager-folio { color: var(--spot); font-family: var(--font-head); font-stretch: 70%; font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pager-title { font-weight: 650; font-size: 1.0625rem; }
.pager-minutes { color: var(--ink-2); font-size: var(--small); white-space: nowrap; }
.pager a:hover .pager-title { text-decoration: underline; text-decoration-color: var(--spot); text-underline-offset: 0.2em; }

/* ---------- banners: load faults and missing comments ---------- */

.banner {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border: var(--heavy);
  background: var(--sheet);
  font-weight: 600;
  font-size: 0.9375rem;
  max-width: none;
}
.banner::before {
  content: "Notice";
  display: block;
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.load-banner::before { content: "Load fault"; }
.minified-banner::before { content: "Comments missing"; }

/* ---------- contents rows: home, topic page, rail and search results ---------- */

.lessons { list-style: none; margin: 0; padding: 0; }
.part-title {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: var(--s4) 0 var(--s1);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 750;
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.part-letter { color: var(--spot); font-weight: 900; font-size: 0.9375rem; letter-spacing: 0; }
.lesson-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: var(--s2);
  padding: 0.3rem var(--s2) 0.3rem 0;
  line-height: 1.35;
}
.row-folio {
  order: 0;
  flex: 0 0 3.25rem;
  color: var(--ink-2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 650;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
.row-title { order: 1; flex: 0 1 auto; min-width: 0; font-size: 0.9375rem; }
.lesson-row .kind, .todo-note { flex: none; white-space: nowrap; }
.results .lesson-row { flex-wrap: wrap; }
a.row-title { color: var(--ink); font-weight: 650; text-decoration: none; }
a.row-title:hover { text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; }
.lesson-row .kind {
  order: 2;
  padding: 0 0.35em;
  border: 1px solid var(--ink);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 750;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.todo-note {
  order: 3;
  color: var(--ink-2);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 650;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Dot leaders run from the title to the minutes, as a printed contents page sets its page numbers. */
.lesson-row::after {
  content: "";
  order: 4;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  align-self: center;
  translate: 0 0.3em;
  border-bottom: 2px dotted var(--rule);
}
.lesson-row .minutes { order: 5; color: var(--ink-2); font-size: var(--small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lesson-row .mark { order: 6; }
.matched { order: 7; flex: 0 0 100%; padding-left: 3.75rem; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--code); }
/* A page not written yet: lighter weight and grey, never a link, and it says so. */
.lesson-row.muted .row-title { color: var(--ink-2); font-weight: 400; }
.lesson-row.current { background: var(--spot-12); }
.lesson-row.current .row-folio { color: var(--spot); font-weight: 800; }
.lesson-row.current .row-title { font-weight: 800; }

/* The rail keeps only folio, title and mark; the rest stays readable to assistive tech. */
.rail .lesson-row { flex-wrap: nowrap; padding: 0.2rem var(--s1); }
.rail .lesson-row::after { display: none; }
.rail .row-folio { flex-basis: 2.75rem; font-size: var(--label); }
.rail .row-title { flex: 1 1 auto; font-size: var(--small); }
.rail .lesson-row .minutes, .rail .todo-note, .rail .lesson-row .kind {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- home: the manual's title page and contents ---------- */

.sheet-home .column {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "title title" "tag tag" "search progress" "search resume" "contents contents";
  column-gap: var(--s7);
  padding-top: var(--s7);
}
.sheet-home .column > * { max-width: none; }
.sheet-home h1 {
  grid-area: title;
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 850;
  font-size: clamp(3rem, 1.6rem + 5.6vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.tagline {
  grid-area: tag;
  margin-top: var(--s3);
  padding-bottom: var(--s5);
  border-bottom: var(--heavy);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
}
.search { grid-area: search; display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s5); }
.search label, .progress {
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-search] {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--s4);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--sheet);
  color: var(--ink);
  font: 500 1.125rem/1.2 var(--font-text);
  -webkit-appearance: none;
  appearance: none;
}
[data-search]::placeholder { color: var(--ink-2); opacity: 1; }
[data-search]:focus-visible { outline: 3px solid var(--spot); outline-offset: 0; }
/* Progress: a printed ruler of the whole manual, filled in the spot colour as pages are written. */
.progress { grid-area: progress; padding-top: var(--s5); font-variant-numeric: tabular-nums; }
.progress::after {
  content: "";
  display: block;
  height: 1.1rem;
  margin-top: var(--s2);
  border: var(--frame);
  background:
    linear-gradient(to right, var(--spot) calc(var(--written, 0) / var(--total, 1) * 100%), transparent 0),
    repeating-linear-gradient(to right, transparent 0 calc(1000% / var(--total, 1) - 1px), var(--ink) calc(1000% / var(--total, 1) - 1px) calc(1000% / var(--total, 1))),
    var(--spot-12);
}
.resume { grid-area: resume; padding-top: var(--s3); }
.bookmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  font-weight: 650;
}
.bookmark::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: var(--spot); -webkit-mask-image: var(--i-flag); mask-image: var(--i-flag); }

.sheet-home .contents, .sheet-home .results { grid-area: contents; margin-top: var(--s7); }
.sheet-home .contents { columns: 2 30rem; column-gap: var(--s7); column-rule: var(--hair); }
.chapter { padding-bottom: var(--s6); }
.chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: var(--s3);
  padding-top: var(--s2);
  border-top: var(--heavy);
  break-after: avoid;
}
.chapter-code {
  color: var(--spot);
  font-family: var(--font-head);
  font-stretch: 62%;
  font-weight: 850;
  font-size: 2.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chapter-title {
  font-family: var(--font-head);
  font-stretch: 70%;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.chapter-link { color: var(--ink); text-decoration: none; }
.chapter-link:hover { text-decoration: underline; text-decoration-color: var(--spot); text-decoration-thickness: 2px; }
.chapter-summary { margin: var(--s2) 0 0; max-width: var(--measure); font-size: 0.9375rem; line-height: 1.5; break-after: avoid; }
.chapter .part { break-inside: avoid; }
.results-count {
  padding-top: var(--s2);
  border-top: var(--heavy);
  font-family: var(--font-head);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.no-results { margin-top: var(--s3); }
.results .lessons { margin-top: var(--s3); columns: 2 30rem; column-gap: var(--s7); }
.results .lesson-row { break-inside: avoid; }

/* ---------- topic page: one chapter, opened ---------- */

.sheet-topic .chapter-head { grid-template-columns: auto minmax(0, 1fr) auto auto; border-top: 0; padding-top: 0; }
.sheet-topic .chapter-code { font-size: var(--h1); }
.sheet-topic h1.chapter-title { font-size: var(--h1); font-stretch: 62%; letter-spacing: 0; }
.sheet-topic .chapter-summary {
  margin-top: var(--s2);
  padding-bottom: var(--s3);
  border-bottom: var(--heavy);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: none;
}
.sheet-topic .chapter > .docs-link { display: inline-block; margin-top: var(--s3); font-weight: 650; }
.sheet-topic .chapter .part { max-width: 52rem; margin-top: var(--s5); }
.sheet-topic .part-title { font-size: var(--small); }
.sheet-topic .column .lesson-row { padding-top: 0.45rem; padding-bottom: 0.45rem; border-bottom: var(--hair); }
.chapter-nav { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s4); border-top: var(--heavy); }
.chapter-nav a { font-weight: 650; }
.chapter-next { margin-left: auto; }

/* ---------- motion: small, purposeful, and only when the reader allows it ---------- */

@media (prefers-reduced-motion: no-preference) {
  .toolbar button, .faults [data-try], .thumb, .lesson-row { transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out; }
  .toolbar button:active, .faults [data-try]:active { transform: translateY(1px); }
  .rail-toggle > summary::before { transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .thumb-title { transition: opacity 120ms ease-out; }
  .cm-s-manual .CodeMirror-linebackground.cm-flash { animation: swipe 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- medium: the figure stacks before the code gets too narrow to read ---------- */

@media (max-width: 1180px) {
  .figure { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .stage { min-height: 18rem; }
  .editor { border-left: 0; border-top: var(--frame); min-height: 0; }
  /* Capped with its own scroll, so Run stays one short scroll below the stage instead of after the whole listing. */
  .editor .CodeMirror, .editor .editor-fallback { position: static; height: min(26rem, 55vh); margin-top: 2rem; }
  /* The page-kind drawer fixes its editor's height, so the code must fill that box and not spill over the toolbar. */
  .drawer .editor .CodeMirror, .drawer .editor .editor-fallback { height: calc(100% - 2rem); }
  .example, .column > section:not(.example):not(.results) { grid-template-columns: minmax(0, 1fr); }
  .example > .faults-title, .example > .faults,
  .column > section:not(.example):not(.results) > :not(h2),
  .column > section:not(.example):not(.results) > h2 { grid-column: 1; }
  .example > .faults { margin-top: 0; border-top: 0; }
  .column > section:not(.example):not(.results) > h2 { padding-bottom: 0; }
  .column > section:not(.example):not(.results) { row-gap: var(--s3); }
  table.specs { border-top: 0; }
  #procedure ol { border-top: 0; }
}

/* ---------- narrow (matches NARROW in playground.js): one column, contents behind a button ---------- */

@media (max-width: 700px) {
  :root { --stage-pad: 20px; }
  .sheet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rail" "column"; grid-template-rows: auto auto 1fr; }
  .thumbs { display: none; }
  .runninghead { flex-wrap: wrap; padding: 0 var(--s4); column-gap: var(--s4); row-gap: 0; }
  /* 44px touch targets for every navigation link; inline links inside running text and spec cells are exempt. */
  .breadcrumb a, .runninghead .docs-link, .chapter-nav a, .chapter-link, .sheet-topic .chapter > .docs-link, .rail-link, a.row-title {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .runninghead .docs-link { padding: 0; }
  .rail { position: static; max-height: none; overflow: visible; border-bottom: var(--frame); padding: 0 var(--s4); }
  .sheet:not(.sheet-home) > .column { border-left: 0; }
  .rail-toggle > summary { min-height: 2.75rem; margin-bottom: 0; border-bottom: 0; }
  .rail-toggle[open] { padding-bottom: var(--s4); }
  .rail-toggle[open] > summary { border-bottom: var(--heavy); margin-bottom: var(--s3); }
  .rail-head, .rail .lesson-row { min-height: 2.75rem; }
  .column { padding: var(--s5) var(--s4) var(--s7); }
  .column > .folio { font-size: 1.5rem; margin-left: var(--s3); }
  .stage { min-height: 14rem; }
  .toolbar button, .faults [data-try] { min-height: 2.75rem; }
  .toolbar [data-run] { min-width: 0; }
  .faults > li { grid-template-columns: 1.75rem minmax(0, 1fr); grid-template-areas: "n title" "n expect" "n try"; row-gap: var(--s2); }
  .faults [data-try] { justify-self: start; }
  .pager { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pager .pager-next { grid-column: 1; }
  .pager-prev + .pager-next { border-top: var(--hair); }

  /* Specifications become one ruled block per property. */
  table.specs, .specs tbody, .specs tr, .specs td { display: block; }
  .specs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.specs { border-top: var(--heavy); }
  .specs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: var(--hair); }
  .specs td { padding: 0; border: 0; }
  .specs td:first-child { white-space: normal; overflow-wrap: anywhere; }
  .specs td:nth-child(3) { max-width: none; }
  .specs td:nth-child(1) { grid-column: 1; font-size: 0.875rem; }
  .specs td:nth-child(5) { grid-column: 2; grid-row: 1; align-self: center; }
  .specs td:nth-child(2), .specs td:nth-child(3), .specs td:nth-child(4), .specs td:nth-child(6) { grid-column: 1 / -1; }
  .specs td:nth-child(2)::before { content: "Type "; }
  .specs td:nth-child(3)::before { content: "Default "; font-family: var(--font-head); }
  .specs td:nth-child(2)::before, .specs td:nth-child(3)::before {
    font-family: var(--font-head); font-stretch: 75%; font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  }
  .specs td:nth-child(4) { margin-top: var(--s1); }

  .sheet-home .column { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tag" "search" "progress" "resume" "contents"; padding-top: var(--s6); }
  .sheet-home .contents, .results .lessons { columns: 1; }
  .chapter-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chapter-head .mark { grid-column: 3; }
  .lesson-row { min-height: 2.75rem; align-content: center; flex-wrap: wrap; }
  /* Narrow rows: folio, title and minutes on the first line; the kind and "not written yet" drop below the title. */
  .column .lesson-row .row-title { flex: 1 1 0; }
  .column .lesson-row::after { display: none; }
  .column .lesson-row::before { content: ""; order: 7; flex: 0 0 100%; height: 0; }
  .column .lesson-row .kind, .column .lesson-row .todo-note { order: 8; }
  .column .lesson-row .kind, .column .lesson-row:not(:has(.kind)) .todo-note { margin-left: 3.75rem; }
  .sheet-topic .chapter-code, .sheet-topic h1.chapter-title { font-size: 2.5rem; }
}