/* The look of a 1930s travel poster: cream paper, flat lithograph inks, Jost
   capitals for the interface and Sorts Mill Goudy for reading. By night the
   page turns lapis, the ink cream, and the accent saffron. Day or night is
   data-theme on <html>: the appearance setting, or the system's (ui/theme.js;
   index.html sets it before the first paint). The drawings' own inks are in
   art.css, which design/build.py writes. */

/* ---------------------------------------------------------------- fonts
   Bundled, so the app looks the same offline (fonts/OFL.txt). */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sortsmillgoudy-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sortsmillgoudy-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sortsmillgoudy-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sortsmillgoudy-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- inks */
:root {
  --paper: #f3e8d2;
  --card: #fbf5e8;
  --ink: #221b16;
  --sub: #5e4e3f;
  --line: #dccba8;
  --rule: #cdb892;
  --accent: #8b2b22;
  --accent-ink: #fbf5e8;
  --sun: #e5a23b;
  --teal: #1f6e69;
  --lapis: #1f3152;
  --warn-bg: #f4dfaf;
  --warn-ink: #5a3a10;
  --track: #e3d5b8;
  --mat: rgba(34, 27, 22, 0.1);
  --rep: var(--ink);
  --badge: var(--sun);
  --badge-ink: var(--accent);
  --plate-sun: #f5d9a5;
  --plate-ring: #e9b35e;
  --route-open: #fbf6ec;
  --route-halo: none;
  --river: #a9c4d4;
  --river-wave: #dde9ef;
  --river-deep: #6d90aa;
  --river-lit: var(--sun);
  --shore: #c9ad7c;
  --shore-top: #7f9a5b;
  --sign: #efdfb8;
  --void: #e6eeef;
  --void-far: #cbd8de;
  --void-cloud: #f8faf8;
  --wind: rgba(34, 27, 22, 0.55);
  --snow-sky: #cfdbe3;
  --flake: #ffffff;
  --snow-rock: var(--a-r-mid-l);
  --snow-rock-walked: var(--ink);
  --cap: #8b2b22;
  --cap-ink: #fbf6ec;
  --serif: "Sorts Mill Goudy", "Goudy Old Style", Garamond, Georgia, serif;
  --sans: Jost, Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  /* Paper grain (design/build.py draws the tiles), at one tile pixel per screen pixel on a 2x screen. */
  --grain: url(paper-grain.png) 0 0 / 80px 80px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #121a2a;
  --card: #1b253a;
  --ink: #f1e6cf;
  --sub: #b5ab97;
  --line: #2e3a55;
  --rule: #34405c;
  --accent: #ebaa45;
  --accent-ink: #121a2a;
  --sun: #ebaa45;
  --teal: #7cc2ba;
  --lapis: #9fb4da;
  --warn-bg: #3a2c1c;
  --warn-ink: #f0c48c;
  --track: #2a3550;
  --mat: rgba(241, 230, 207, 0.1);
  --rep: var(--accent);
  --badge-ink: var(--paper);
  --plate-sun: #24314f;
  --plate-ring: #987541;
  --route-open: #16213a;
  --route-halo: #2e3c58; /* cream figures need a dark edge where they cross the snow */
  --river: #2b3c5f;
  --river-wave: #5a6d92;
  --river-deep: #1b2944;
  --river-lit: var(--ink);
  --shore: #3d3a4c;
  --shore-top: #34503f;
  --sign: #34405c;
  --void: #16213a;
  --void-far: #1d2943;
  --void-cloud: #28344d;
  --wind: rgba(241, 230, 207, 0.6);
  --snow-sky: #1a2640;
  --flake: #efe7d6;
  --snow-rock: #5a6d92;
  --snow-rock-walked: #0f1626;
  --grain: url(paper-grain-night.png) 0 0 / 80px 80px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- the page */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 18px/1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
}

h1 {
  margin: 0 0 12px;
  font: 400 36px/1.1 var(--serif);
  text-wrap: balance;
}

/* Section headings: spaced capitals between two rules. */
h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 12px;
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}
h2::before, h2::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--rule); }

p { margin: 0 0 12px; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
small { font-size: 0.85em; }
.lead { font-size: 20px; line-height: 1.45; }
.fine { margin: 10px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--sub); }
.fine a { font-weight: 500; }
.kicker, .label {
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.label { color: var(--sub); font-size: 11px; letter-spacing: 0.18em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loading, .error { text-align: center; padding: 30vh 20px; color: var(--sub); }
[hidden] { display: none !important; }

.icon { display: block; width: 18px; height: 18px; flex: none; }
.pictogram { display: block; flex: none; }

/* A poster across the top of a page, under a double rule. */
.masthead { margin: 0 -20px; }
.scene { display: block; width: 100%; }
.double-rule { height: 6px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }

/* ---------------------------------------------------------------- pieces */
.card {
  display: block;
  margin: 16px 0;
  padding: 18px;
  background: var(--card) var(--grain);
  border: 4px double var(--rule);
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
}
/* Headings inside cards are labels, without the rules. */
.card h2 { justify-content: space-between; align-items: baseline; margin: 0 0 12px; letter-spacing: 0.2em; }
.card h2::before, .card h2::after { content: none; }
.card h2 small { font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--accent);
  font: 600 13px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The main action: a robe-red plate with a keyline inside its edge. */
.primary {
  min-height: 54px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  letter-spacing: 0.16em;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px color-mix(in srgb, var(--accent-ink) 45%, transparent);
}
.primary:active:not([disabled]) { transform: translateY(1px); }
.quiet { padding: 0 6px; }
button[disabled] { opacity: 0.45; cursor: default; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wide { display: flex; width: 100%; margin-top: 16px; }

.segmented { display: flex; margin: 0; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.segmented button {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 0;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.15;
}
.segmented button + button { border-left: 1.5px solid var(--ink); }
.segmented button.on { background: var(--ink); color: var(--paper); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 6px -6px;
  padding: 0 6px;
  color: var(--accent);
  font: 500 15px/1 var(--sans);
  text-decoration: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1.5px solid var(--teal);
  border-radius: 13px;
  color: var(--teal);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Notices: a warning or the stop rules, on saffron paper, with an icon. */
.warning, .stops {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 2px;
  font-size: 16px;
  line-height: 1.45;
}
.warning > .icon, .stops > .icon { width: 22px; height: 22px; margin-top: 1px; }
.warning > div, .stops > div { flex: 1; min-width: 0; }
.warning strong, .stops strong {
  display: block;
  margin: 2px 0 6px;
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.warning ul, .stops ul { margin: 0 0 8px; padding-left: 18px; }
.warning p, .stops p { margin: 0; }
.warning p + p, .warning p + button { margin-top: 8px; }
.warning .quiet { margin-left: -6px; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.suggest { margin: 14px 0; padding: 14px 16px; background: var(--card) var(--grain); border: 4px double var(--rule); border-radius: 2px; font-size: 16px; }
.suggest p { margin: 0 0 4px; }

/* Where an instruction comes from: a little rubber stamp. */
.source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 46px;
  height: 20px;
  padding: 0 6px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  color: var(--sub);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 2px;
  cursor: help;
}
.source-1939, .source-1946 { color: var(--accent); }
.source-1985, .source-1998, .source-1999 { color: var(--lapis); }
.source-modern { color: var(--teal); }

/* Quotations from the booklet, under a big saffron quotation mark. */
blockquote { position: relative; margin: 18px 0; padding: 4px 0 0 34px; font-style: italic; font-size: 18px; line-height: 1.5; }
blockquote::before { content: "\201C"; position: absolute; left: -3px; top: -14px; font: 400 72px/1 var(--serif); color: var(--sun); }
blockquote p { margin: 0 0 10px; }
blockquote + blockquote { margin-top: 30px; }
blockquote cite {
  display: block;
  font: 600 10.5px/1.4 var(--sans);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ---------------------------------------------------------------- the list */
main.list { padding-top: 0; }
.list .scene-poster { height: clamp(220px, 72vw, 320px); }
.masthead .title { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 20px 0; }
.masthead h1 { margin: 0; width: 100%; }
.wordmark { display: block; width: min(100%, 348px); height: auto; margin: 0 auto; }
/* The name's second line under the wordmark: THE CLIMB in spaced capitals between two rules. */
.title-sub { display: flex; align-items: center; gap: 0.9em; width: min(88%, 306px); margin: 6px auto 0; font: 600 13px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); }
.title-sub::before, .title-sub::after { content: ""; flex: 1 1 0; border-top: 1.5px solid currentColor; }
.title-sub > span { margin-right: -0.34em; }
.sub { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--sub); text-align: center; }

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.today h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 400 28px/1.15 var(--serif); letter-spacing: 0; text-transform: none; }
.today h2 .icon { width: 24px; height: 24px; color: var(--accent); stroke-width: 2.2; }
.plan { list-style: none; margin: 0 0 12px; padding: 0; }
.plan li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.plan li > span { flex: 1; font-size: 17px; line-height: 1.3; }
.plan small { font-size: 15px; color: var(--sub); }
.plan .pictogram { order: -1; width: 30px; height: 30px; color: var(--accent); }
.plan b { font: 600 18px/1 var(--sans); }
.plan b.open { font: 500 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
.messages { margin: 0 0 14px; padding: 0 0 0 18px; font-size: 15px; line-height: 1.45; color: var(--sub); }
.today .primary { width: 100%; }
.today .fine { margin-top: 12px; }
.left-out { margin: 0 0 12px; }
.plan li.done > span { color: var(--sub); }
.plan b.done-mark { display: flex; color: var(--accent); }
.plan b.done-mark .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.today .quiet.wide { margin-top: 6px; }
/* The reminder that the safety answers adapt some rites: always there while they do, and the way back to them. */
.adapted {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 16px 0 0; padding: 12px 14px;
  background: var(--card) var(--grain); border: 1.5px solid var(--teal); border-radius: 3px;
  justify-content: flex-start; color: var(--ink); font: 400 16px/1.45 var(--serif); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer;
}
.adapted > .icon { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--teal); }
.adapted > span { display: flex; flex-direction: column; gap: 2px; }
.adapted strong { font: 600 12px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.adapted .review { margin-top: 4px; font: 500 14.5px/1.4 var(--sans); color: var(--accent); }

.rite { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px 14px 14px 12px; }
/* A saffron disc with a drawing on it: the rites' pictograms, the library's books, a tab page's icon. */
.rite .badge, .book .badge, .page-head .badge { display: flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--badge); color: var(--badge-ink); }
.rite .badge .pictogram { width: 43px; height: 43px; }
.rite .body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rite .kicker { font-size: 11px; }
.rite strong { font: 400 22px/1.15 var(--serif); }
.rite .description { font-size: 14.5px; line-height: 1.4; color: var(--sub); }
.rite .time { margin-top: 2px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.rite .reps { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; }
.rite .reps b { font: 600 26px/1 var(--sans); }
.rite .reps small { font: 600 9.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub); }

footer { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); font: 400 13px/1.45 var(--sans); color: var(--sub); text-align: center; }

/* ---------------------------------------------------------------- the tab bar */
/* Along the foot of the page, as in the native apps: the rites, your progress,
   the library and the settings. The open tab's icon sits on a saffron pill. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 6px env(safe-area-inset-bottom);
  background: var(--card) var(--grain);
  border-top: 4px double var(--rule);
}
.tabbar > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; }
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 0 9px;
  color: var(--sub);
  font: 600 10.5px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tab-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 30px; border-radius: 15px; }
.tab-icon .icon { width: 24px; height: 24px; }
.tabbar a.on { color: var(--ink); }
.tabbar a.on .tab-icon { background: var(--badge); color: var(--badge-ink); }
.tabbar a:focus-visible { outline-offset: -2px; }
/* Room at the foot of every page with the bar, so the page's end clears it. */
body.tabbed main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- a tab's own page */
/* Its head: the tab's icon on a saffron disc, the title, a line, and a short double rule. */
.page-head { display: flex; flex-direction: column; align-items: center; padding: 22px 0 0; text-align: center; }
.page-head .badge { margin: 0 0 14px; }
.page-head .badge .icon { width: 30px; height: 30px; }
.page-head h1 { margin: 0 0 8px; font-size: 38px; }
.page-head .lead { max-width: 30em; margin: 0; font-size: 18px; font-style: italic; color: var(--sub); }
.page-head::after { content: ""; width: 40px; margin: 18px 0 4px; border-top: 4px double var(--rule); }

/* The library: a card for each page, like the rites' cards. */
.shelf { margin: 18px 0 0; }
.book { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px 10px 14px 12px; }
.book .badge .icon { width: 30px; height: 30px; }
.book .body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.book .kicker { font-size: 11px; }
.book strong { font: 400 21px/1.2 var(--serif); text-wrap: balance; }
.book .time { font: 400 13.5px/1.3 var(--sans); color: var(--sub); }
.book > .icon { color: var(--accent); }

/* Settings: a card for each group. */
.group h2 { margin-bottom: 16px; }
.group .field { margin: 0 0 18px; }
.group .field:last-child { margin-bottom: 0; }
.group .label { display: block; margin: 0 0 8px; }
.group .sublabel { display: block; margin: 0 0 6px; font-size: 15px; color: var(--sub); }
.group .quiet { margin-left: -6px; }
.group > .fine { margin: 0; font-size: 14.5px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.select { position: relative; }
.select select {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: 400 17px var(--serif);
  appearance: none;
  -webkit-appearance: none;
}
.select .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--accent); pointer-events: none; }
/* A row that opens another page, drawn like the select above it. */
.row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  font: 400 17px var(--serif);
  text-decoration: none;
}
.row-link .icon { color: var(--accent); }
/* Settings' account card: the sign-in form, drawn like the select and the row above. */
.account-form { display: grid; gap: 10px; margin-top: 4px; }
.account-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: 400 17px var(--serif);
}
.account-form .wide { margin-top: 4px; }
.account-or { margin: 14px 0 8px; color: var(--sub); font: 400 14px var(--sans); text-align: center; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; }
.account .error:empty { display: none; }
.account .error { color: var(--accent); }
.account-delete { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
/* The catastrophe notice (ui/catastrophe.js): over every screen, until its button is pressed. */
.catastrophe-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.card.catastrophe { width: 100%; max-width: 440px; margin: 0; }
.catastrophe h2 { color: var(--accent); justify-content: center; }
.catastrophe .lead { margin-bottom: 10px; font-size: 19px; }
.catastrophes { margin: 0 0 14px; padding: 0; list-style: none; }
.catastrophes li { padding: 8px 0; border-top: 1px solid var(--line); font: 400 16px/1.4 var(--serif); }
.catastrophes li:last-child { border-bottom: 1px solid var(--line); }
.catastrophe figure { margin: 0; border: 3px solid var(--ink); border-radius: 1px; }
.catastrophe .scene { aspect-ratio: 9 / 5; height: auto; }
.catastrophe .wide { margin-top: 16px; }

/* Test practice (ui/testpractice.js, dev only): its card, and a tab of robe red over every screen while it's on. */
.test-rite { margin-top: 12px; }
.test-rite small { font-size: 13.5px; }
.test-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.test-moves button { min-height: 44px; font-size: 15px; }
.test-moves button[data-sample="all"] { grid-column: 1 / -1; }
.test-notices { margin-top: 14px; }
body[data-test-practice]::before {
  content: attr(data-test-practice);
  position: fixed;
  z-index: 50;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: calc(2px + env(safe-area-inset-top)) 12px 3px;
  border-radius: 0 0 6px 6px;
  background: var(--accent);
  color: var(--card);
  font: 600 11px/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
/* The second kind of button: a robe-red outline. */
.secondary { min-height: 50px; border: 1.5px solid var(--accent); }
.secondary .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- a rite */
/* The figure as a plate in the booklet: framed, on a pale sun, numbered. */
.plate { margin: 0; padding: 10px 10px 8px; background: var(--card) var(--grain); border: 4px double var(--rule); border-radius: 2px; }
.plate .stage { position: relative; height: 250px; overflow: hidden; }
.plate .stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  border-radius: 50%;
  background: var(--plate-sun);
  box-shadow: 0 0 0 7px var(--card), 0 0 0 8.2px var(--plate-ring);
}
.plate canvas { position: relative; display: block; width: 100%; height: 100%; }
.plate figcaption { padding-top: 6px; font: 500 16px/1.3 var(--sans); text-align: center; }
.rite-screen h1 { margin: 22px 0 0; }
.rite-screen h1 .kicker { display: block; margin: 0 0 8px; }
.rite-screen .lead { margin-bottom: 16px; }
.rite-screen .segmented { margin: 16px 0; }
.go { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.count { display: flex; align-items: baseline; gap: 8px; }
.count b { font: 600 30px/1 var(--sans); }
.count span { font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); }
.go .primary { min-width: 150px; }
.stepper { display: inline-flex; align-items: center; gap: 2px; }
.stepper .quiet { min-width: 44px; padding: 0; }
.cues { list-style: none; margin: 0; padding: 0; }
.cues li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.cues .source { justify-self: start; margin-top: 3px; }

/* ---------------------------------------------------------------- practice */
/* The screen is exactly the viewport. The stage takes what's left, from a zero
   basis, so resizing its canvases can never grow the layout. */
.run-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100dvh;
  overflow: hidden;
  text-align: center;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.run-screen header { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; }
.run-screen .part { font: 600 11.5px/1.25 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); text-align: left; }
.controls { display: flex; flex: none; gap: 8px; }
.controls .quiet { gap: 6px; padding: 0 10px; border: 1.5px solid var(--rule); color: var(--ink); font-size: 12px; }
.controls .icon { width: 16px; height: 16px; stroke-width: 2; }
.run-screen .stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.run-screen .stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Loading, while the practitioner is fetched (ui/loading.js): the man of the pictograms
   spinning on the spot over a dotted orbit, in a ring of lettering that turns round the disc. */
.figure-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--ink); }
.figure-loading p { max-width: 70%; margin: 4px 0 0; color: var(--sub); font: italic 400 17px/1.3 var(--serif); animation: breathe 2.4s ease-in-out infinite; }
.figure-loading .quiet { margin-top: 2px; }
.loading-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: turn 36s linear infinite; }
.loading-ring text { font: 600 12.5px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; fill: var(--accent); }
.arriving { display: flex; flex-direction: column; align-items: center; perspective: 260px; }
.arriving .icon { width: clamp(96px, 26vmin, 140px); height: auto; aspect-ratio: 1; stroke: none; animation: arrive 3s linear infinite; }
.orbit { width: clamp(100px, 27vmin, 146px); height: auto; aspect-ratio: 100 / 30; margin-top: -13%; color: var(--accent); overflow: visible; }
.orbit .trail { stroke: currentColor; animation: travel 2.4s linear infinite; }
.orbit .arrow { fill: currentColor; }
@keyframes breathe { 50% { opacity: 0.45; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes arrive { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes travel { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { .figure-loading p, .loading-ring, .arriving .icon, .orbit .trail { animation: none; } }
/* On a rite's plate the disc is small: the man and the words, without the ring. */
.plate .loading-ring { display: none; }
.plate .arriving .icon { width: 72px; height: 72px; }
.plate .orbit { width: 76px; height: 24px; margin-top: -8px; }
.plate .figure-loading p { font-size: 15px; }
.words { min-height: 1.2em; margin: 6px 0 0; font: italic 400 30px/1.2 var(--serif); }
.rep { min-height: 1.05em; margin: 4px 0 0; font: 600 64px/1.05 var(--sans); letter-spacing: 0.02em; color: var(--rep); }
.rep span { font-weight: 400; font-size: 34px; color: var(--sub); }
.rep.clock { font-variant-numeric: tabular-nums; }
.rep.empty { visibility: hidden; }
.progress { height: 6px; margin: 14px 0 18px; border-radius: 3px; background: var(--track); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); }
.action { min-height: 60px; border: 2px solid var(--accent); font-size: 14px; letter-spacing: 0.16em; }
.action .icon { width: 20px; height: 20px; }
.action.off { visibility: hidden; } /* keeps its space, so the figure doesn't jump */
.check { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.check .row { display: flex; align-items: center; gap: 8px; font: 400 15px/1.4 var(--serif); }
.check .row > span:first-child { flex: 1; }
.check .label.warn, .check .warn { color: var(--accent); }
.check .ok { color: var(--teal); }
.check .icon { width: 16px; height: 16px; }
.listening { margin: 10px 0 0; text-align: center; font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub); }
.action.early { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px color-mix(in srgb, var(--accent-ink) 45%, transparent); }
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.overlay p { margin: 0 0 10px; font: italic 400 44px/1.1 var(--serif); }
.overlay .primary { min-width: 220px; }
@media (max-height: 700px) {
  .words { font-size: 24px; }
  .rep { font-size: 48px; }
  .rep span { font-size: 26px; }
  .action { min-height: 52px; }
}

/* ---------------------------------------------------------------- the end */
main.end-screen { padding-top: 0; }
.scene-banner { height: clamp(190px, 59vw, 260px); }
.end-screen h1 { margin: 26px 0 4px; font: italic 400 48px/1.1 var(--serif); text-align: center; }
.summary { margin: 0 0 18px; font-style: italic; font-size: 18px; color: var(--sub); text-align: center; }
/* The ledger: name, dotted leader, count. */
.results { list-style: none; margin: 0; padding: 0; }
.results li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.results .leader { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--rule); transform: translateY(-4px); }
.results b { display: inline-flex; align-items: center; gap: 6px; font: 600 18px/1.2 var(--sans); }
.results li:not(.done) b { font-weight: 500; font-size: 15px; color: var(--sub); }
.results .icon { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.4; }
.quote { margin: 30px 0 0; padding-left: 36px; font-size: 23px; line-height: 1.35; }
.quote::before { top: -18px; font-size: 80px; }
.afterwards { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 22px; padding: 14px 16px; background: var(--card) var(--grain); border: 4px double var(--rule); border-radius: 2px; font-size: 16px; line-height: 1.45; }
.afterwards .icon { width: 22px; height: 22px; color: var(--lapis); }
.afterwards p { margin: 0; }
.afterwards .source { margin-right: 4px; }
.end-screen .primary { width: 100%; margin-top: 28px; }
.end-screen .afterwards + .primary { margin-top: 0; }

/* ---------------------------------------------------------------- progress and order */
/* The climb: camps up a peak, and each rite's badge at its count. */
.route { display: block; width: 100%; height: auto; margin: 0 0 4px; border-radius: 1px; }
.route .trail { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1 4.2; stroke-linecap: round; }
.route .camp { fill: var(--route-open); stroke: var(--ink); stroke-width: 1.4; }
.route .camp.reached { fill: var(--ink); }
.route text { font: 600 11.5px var(--sans); fill: var(--ink); stroke: var(--route-halo); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
.route .summit { font-size: 13px; font-weight: 700; fill: var(--accent); }
.route .pole { stroke: var(--ink); stroke-width: 1.8; }
.route .pennant { fill: var(--accent); }
.route .badge circle { fill: var(--accent); stroke: var(--a-r-snow); stroke-width: 1.4; }
.route .badge text { font-size: 9px; font-weight: 700; fill: var(--accent-ink); stroke: none; }
.route .badge .figure { color: var(--accent-ink); }
/* The week's days as stepping stones to the next camp: walked ones filled, the badge on the last. */
.route .stone { fill: var(--route-open); stroke: var(--ink); stroke-width: 1.4; }
.route .stone.walked { fill: var(--ink); }
.route .badge { cursor: pointer; }
.route .badge.lit circle { stroke: var(--ink); stroke-width: 2.4; }
.week-line { margin: 2px 0 6px; }
.water-line { margin: 0 0 6px; color: var(--warn-ink); }
/* Each rite's week as a river to cross: the count on the near bank, the next on the far one,
   a stepping stone a day between them, and the water rising with the days missed. */
.rivers { list-style: none; margin: 0; padding: 0; }
.rivers li { padding: 8px 0 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: color 0.2s; }
.rivers li:last-child { border-bottom: 0; padding-bottom: 0; }
.rivers li.left-out { opacity: 0.55; }
.river-head { display: flex; align-items: baseline; gap: 10px; font: 400 17px/1.3 var(--serif); color: var(--ink); }
.river-head .name { flex: none; } /* the rite's name on one line; the note beside it wraps instead */
.river-head small { font-size: 15px; color: var(--sub); text-wrap: balance; }
.river-head b { margin-left: auto; font: 600 17px/1.3 var(--sans); }
.rivers li.lit .river-head { color: var(--accent); }
.crossing { display: block; width: 100%; height: auto; margin: 2px 0 0; }
/* The shores and their signposts. */
.crossing .bank { fill: var(--shore); }
.crossing .grass { fill: var(--shore-top); }
.crossing .cliff, .crossing .ledge { fill: var(--a-r-mid-d); }
.crossing .cliff-lit { fill: var(--a-r-mid-l); }
.crossing .ledge-snow { fill: var(--a-r-snow); }
.crossing .post { stroke: var(--ink); stroke-width: 2; }
.crossing .board { fill: var(--sign); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.crossing .sign-text { font-family: var(--sans); font-weight: 700; letter-spacing: 0.06em; fill: var(--ink); }
/* The stones: open, and walked. */
.crossing .stone { fill: var(--route-open); stroke: var(--ink); stroke-width: 1.4; }
.crossing .stone.walked { fill: var(--ink); }
/* In the snow the rocks are rock, and the walked ones dark against the snow, by night too. */
.crossing .stone.rock { fill: var(--snow-rock); }
.crossing .stone.rock.walked { fill: var(--snow-rock-walked); }
/* The river: its water, the tide in front of the stones, and its waves. */
.crossing .water { fill: var(--river); }
.crossing .tide { fill: var(--river-deep); }
.crossing .wave { fill: none; stroke: var(--river-wave); stroke-width: 1.5; stroke-linecap: round; }
.crossing .wave.crest { stroke-width: 1.3; }
/* The pass: the void, its far ridge and clouds, the pillars, and the wind. */
.crossing .void { fill: var(--void); }
.crossing .far { fill: var(--void-far); }
.crossing .cloud { fill: var(--void-cloud); }
.crossing .pillar { fill: var(--a-r-mid-d); }
.crossing .pillar-lit { fill: var(--a-r-mid-l); }
.crossing .haze { fill: var(--void); opacity: 0.55; }
.crossing .gust { fill: none; stroke: var(--wind); stroke-width: 1.4; stroke-linecap: round; }
/* The snow: the sky, the slope loading above, the snowfield, the drift and the flakes. */
.crossing .snow-sky { fill: var(--snow-sky); }
.crossing .slope { fill: var(--a-r-mid-l); }
.crossing .slope-snow, .crossing .snowfield { fill: var(--a-r-snow); }
.crossing .slide { fill: none; stroke: var(--a-r-snow-sh); stroke-width: 1.6; stroke-linecap: round; }
.crossing .drift { fill: var(--a-r-snow); }
.crossing .flake { fill: var(--flake); }
.crossing .man { color: var(--accent); }
.rivers li.lit .crossing .man { color: var(--river-lit); }
.flood-line { margin: 2px 0 6px; color: var(--warn-ink); }
.unit .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 12px/1 var(--sans);
}
/* The practice ledger (ui/ledger.js): a row for each week, a column for each rite under its
   pictogram, and in each cell the rite's week: its count, a stone a day, a tick where a new
   count began, the catastrophe's sign under the morning it struck. */
.ledger { display: grid; grid-template-columns: 42px repeat(var(--rites, 5), minmax(0, 1fr)); gap: 0 3px; align-items: center; margin: 10px 0 0; }
.ledger-corner { display: block; }
.ledger-head { display: flex; justify-content: center; padding: 4px 0 6px; border-radius: 3px 3px 0 0; color: var(--accent); }
.ledger-head .pictogram { width: 26px; height: 26px; }
.ledger-week { padding-right: 4px; font: 500 11px/1.2 var(--sans); color: var(--sub); white-space: nowrap; }
.ledger-week.now { color: var(--ink); font-weight: 700; }
.ledger-cell { display: block; width: 100%; min-height: 0; padding: 1px 0; border-radius: 0; letter-spacing: 0; }
.ledger-cell svg { display: block; width: 100%; height: auto; }
.ledger .lit { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.ledger-cell.chosen { outline: 1.5px solid var(--ink); outline-offset: -1px; border-radius: 3px; }
.ledger, .legend { --open-stone: var(--rule); }
:root[data-theme="dark"] .ledger, :root[data-theme="dark"] .legend { --open-stone: #56648a; }
.ledger svg .stone, .legend svg .stone { fill: none; stroke: var(--open-stone); stroke-width: 1.2; }
.ledger svg .stone.walked, .legend svg .stone.walked { fill: var(--accent); stroke: var(--accent); }
.ledger svg .stone.aside, .legend svg .stone.aside { stroke: var(--accent); }
.ledger svg .pip, .legend svg .pip { fill: var(--accent); }
.ledger svg .stone.future { stroke-dasharray: 1.3 1.3; opacity: 0.55; }
.ledger svg .today { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.ledger svg .count { font: 600 9.5px var(--sans); fill: var(--ink); }
.ledger svg .tick, .legend svg .tick { stroke: var(--sub); stroke-width: 1; }
.ledger svg .sign, .legend svg .sign { fill: none; stroke: var(--accent); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.ledger svg .sign.camp, .legend svg .sign.camp { fill: var(--accent); stroke-width: 0.6; }
/* Each crossing, its seven days from its first stone, under the stones; a check where it got across. */
.ledger svg .span, .legend svg .span { fill: none; stroke: var(--sub); stroke-width: 1.15; stroke-linecap: round; opacity: 0.9; }
.ledger svg .span.ahead { stroke-dasharray: 1.2 1.8; opacity: 0.65; }
.ledger svg .span-start, .legend svg .span-start { fill: var(--sub); opacity: 0.9; }
.ledger svg .across, .legend svg .across { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ledger-earlier { display: flex; margin: 6px 0 -4px auto; min-height: 36px; font-size: 11.5px; }
.ledger-detail { min-height: 2.9em; margin-top: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend svg { width: 14px; height: 14px; overflow: visible; }

/* On a tablet or a desktop: the climb and the ledger on one side, the rivers on the other. */
@media (min-width: 900px) {
  main.progress-screen { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .progress-screen > .page-head { grid-column: 1 / -1; }
  .progress-screen > .climb { grid-column: 1; grid-row: 2; }
  .progress-screen > .practice { grid-column: 1; grid-row: 3; }
  .progress-screen > .rivers-card { grid-column: 2; grid-row: 2 / span 2; }
}

.order-screen .lead { font-size: 18px; }
.units { list-style: none; margin: 16px 0 0; padding: 0; }
.unit { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 8px 12px 14px; }
.unit .number { width: 30px; height: 30px; font-size: 14px; }
.unit .body { flex: 1; display: grid; gap: 4px; min-width: 0; font-size: 18px; line-height: 1.3; }
.unit .body small { font-size: 15px; color: var(--sub); }
.unit .out { color: var(--sub); }
.unit .moves { display: flex; }
.unit .moves .quiet { min-width: 44px; padding: 0; }
.unit .moves .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- long reads */
.text-screen .vignette { margin: 0 0 4px; padding: 6px; background: var(--card) var(--grain); border: 4px double var(--rule); }
.text-screen .scene-vignette { aspect-ratio: 350 / 120; height: auto; }
.text-screen .pictograms { display: flex; justify-content: space-between; margin: 6px 0 0; padding: 14px 6px 10px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--accent); }
.text-screen .pictograms .pictogram { width: 50px; height: 50px; }
.text-screen .kicker { margin: 22px 0 8px; letter-spacing: 0.24em; text-align: center; }
.text-screen h1 { margin: 0 0 14px; font-size: 38px; text-align: center; }
.text-screen .lead { font-size: 18.5px; font-style: italic; color: var(--sub); }
/* Long headings read better in the book face than in spaced capitals. */
.text-screen h2 { display: block; margin: 36px 0 12px; font: 400 25px/1.2 var(--serif); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.text-screen h2::before { content: ""; display: block; width: 40px; margin: 0 0 14px; border-top: 4px double var(--rule); }
.text-screen h2::after { content: none; }
.text-screen section p { line-height: 1.55; }
/* A drop cap, on the first paragraph of the first section. */
.text-screen section:first-of-type > p:first-of-type::first-letter {
  float: left;
  margin: 5px 12px 0 0;
  padding: 7px 10px 3px;
  background: var(--cap);
  color: var(--cap-ink);
  font: 400 46px/0.9 var(--serif);
  box-shadow: inset 0 0 0 3px var(--cap), inset 0 0 0 4px color-mix(in srgb, var(--cap-ink) 60%, transparent);
}
.sources { list-style: none; margin: 4px 0 12px; padding: 0; font: 400 13.5px/1.4 var(--sans); }
.sources li { margin: 6px 0; }
.sources .icon { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; }
.ornament { display: flex; justify-content: center; gap: 10px; margin: 30px 0 0; }
.ornament span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--sun); }
.ornament span + span { background: var(--cap); }
.ornament span:last-child { background: var(--lapis); }

/* ---------------------------------------------------------------- the safety check */
main.safety-screen { padding-top: 0; }
.safety-screen .masthead { position: relative; margin-bottom: 92px; }
.safety-screen .scene-poster { height: clamp(200px, 64vw, 280px); }
.safety-screen .scene-figure { display: none; }
/* The way back, a tag pinned over the poster. */
.safety-screen .masthead > .back {
  position: absolute;
  z-index: 1;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px 0 9px;
  border-radius: 20px;
  background: var(--paper) var(--grain);
  box-shadow: 0 0 0 1.5px var(--rule);
}
.seal-ring { position: absolute; left: 50%; bottom: -84px; width: 168px; height: 168px; margin-left: -84px; padding: 6px; border-radius: 50%; background: var(--paper); }
.seal { display: block; width: 100%; height: 100%; }
.safety-screen h1 { font-size: 38px; text-align: center; }
.safety-screen > .lead { font-size: 19px; text-align: center; }
.safety-screen > .fine { text-align: center; }
.question { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.question p { margin: 0 0 10px; font-size: 17.5px; line-height: 1.45; }
.question .segmented { max-width: 200px; }
.changes { padding-left: 20px; }
.changes li { margin: 6px 0; }

/* ---------------------------------------------------------------- the figure lab (#/lab) */
.lab header { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 0; font: 400 15px/1.3 var(--sans); }
.lab header a { font-weight: 500; text-decoration: none; }
.lab select { min-height: 36px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); font: inherit; }
.lab .segmented { display: inline-flex; }
.stage3d { display: block; width: 100%; height: 62vh; border-radius: 2px; background: var(--card); }
.lab-status { color: var(--sub); font: 400 14px/1.4 var(--sans); }
.lab-flat { display: block; width: 100%; height: 22vh; }
.ink-lab { margin: 4px 0 18px; }
.ink-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0; color: var(--sub); font: 400 14px/1.4 var(--sans); }
.ink-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 12px 0; }
.ink-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; color: var(--sub); font: 400 14px/1.4 var(--sans); }
.ink-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }

/* ---------------------------------------------------------------- the sound check (#/soundcheck) */
.soundcheck h2 { margin: 22px 0 6px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.soundcheck-status { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0; font: 400 14px/1.4 var(--sans); }
.soundcheck-status dt { color: var(--sub); }
.soundcheck-status dd { margin: 0; overflow-wrap: anywhere; }
.soundcheck-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; }
.soundcheck-log { padding-left: 0; list-style: none; font: 400 13px/1.45 var(--sans); }
.soundcheck-log time { color: var(--sub); font-variant-numeric: tabular-nums; }
.ink-row output { color: var(--ink); font-variant-numeric: tabular-nums; }
.ink-json { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--card); color: var(--sub); font-size: 0.75rem; white-space: pre-wrap; }