/* ===========================================================================
 * Triptych browser — shared stylesheet
 * ===========================================================================
 *
 * The structure, typography and furniture every reading page shares. It
 * carries no colour identity of its own: the section palette arrives in the
 * six variables below, and the site's layout sets them from the section a page
 * is entered through — liturgy the red of the site's liturgy section,
 * scripture the gold of the scripture section.
 *
 *   --section-accent   rules, labels, markers, the page's line of identity
 *   --section-ink      headings and links: the accent darkened to read as text
 *   --section-wash     the faint tint behind panels
 *   --section-pale     soft borders inside toned blocks
 *   --section-row      the tint of a toned block or a selected row
 *   --section-line     the border of a toned block
 *
 * WHERE THE PALETTE COMES FROM, AND WHY NO PAGE HERE RESTATES IT
 *
 * The values are declared once, in `release/public-alpha/assets/site.css`, as
 * `.section-red`, `.section-gold` and their six siblings. Which class a
 * reading page is dressed in is declared once, in `BROWSER_SECTION_COLOURS` in
 * `tools/public-alpha`. Published, the layout puts `section-toned
 * section-<colour>` on the reading area and the variables resolve there.
 *
 * Five page stylesheets used to carry a second copy of six values apiece,
 * guarded by `body:not(:has(> .site-header))`, so that a file opened straight
 * from the repository would not be colourless. Two of the five had already
 * drifted:
 *
 *   - `catena.css` declared a violet (#7d5cb8 / #5b4088) that is not the
 *     `.section-violet` the site ships (#5a3f96 / #3e2b6b) — and its own
 *     comment cited a contrast ratio, 8.3:1, measured on a colour no reader
 *     has ever seen.
 *   - `history.css` declared `--section-accent: #7a5230` with no guard at all,
 *     so it overrides the site's green ON THE PUBLISHED PAGE, leaving the map
 *     brown and the headings green. That one is left exactly as it was: it is
 *     a live disagreement about what colour the history section is, and
 *     settling it is a design decision, not a refactor.
 *
 * The fallbacks are gone. Three options were open. DERIVING BOTH FROM ONE
 * SOURCE is the rule this project follows everywhere else and is the one thing
 * CSS cannot do here: `site.css` is loaded by every page of the site and this
 * file only by the nine reading pages, so there is no file both already read,
 * and making one would mean changing what the build copies. PROVING THE
 * FALLBACK AGREES in a check is sound, and belongs in `tools/`. DROPPING THE
 * FALLBACK is what was done, and it is better than a proof for a reason worth
 * stating: a fallback that is approximately right is a fluent wrong answer —
 * the exact failure `guidance/the-shape.md` §1 is about — and catena's went
 * unnoticed for precisely that reason. The neutral palette below announces
 * itself as not-the-theme, so nobody can mistake a repository page for a
 * published one. The cost is real and accepted: opened straight from the
 * repository, a reading page renders in neutral grey. To see a page in its
 * section's colour, build the site.
 * ======================================================================== */

:root {
  /* The site these pages hang off declares `only light`, so a dark-mode
     override here would make a browser page black while the landing page it
     was reached from stayed cream. The section palettes below are the theme;
     they are not conditioned on the reader's system preference. */
  color-scheme: only light;

  --page: #fbfaf7;
  --panel: #ffffff;
  --ink: #1d1b17;
  --ink-soft: #55504a;
  /* The quietest text on the page is still text: references, positions and
     meta lines are set in it, and a reader who cannot make them out cannot say
     where they are. #7b746b measured 4.42:1 on --page, just under the 4.5:1
     that body-sized text needs; #777067 measures 4.68:1 there and 4.89:1 on
     --panel, at no visible cost to the hierarchy. */
  --ink-faint: #777067;
  --notice: #7a2f2f;
  --notice-bg: #f8ecea;

  /* The palette a page wears when nothing has dressed it — which now means
     exactly one case: a file opened straight from the repository, outside the
     site's layout. Neutral, not invisible, and deliberately not any section's
     colour. See the note at the head of this file. */
  --section-accent: #6a635a;
  --section-ink: #453f38;
  --section-wash: rgba(106, 99, 90, 0.12);
  --section-pale: #ddd7cc;
  --section-row: #efece6;
  --section-line: #cdc6b8;
  --focus: var(--section-ink);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  /* Running scripture is set in its own face, not the page's. A grotesque was
     asked for and a grotesque is what this is: Helvetica and Arial first, with
     Liberation and Nimbus covering Linux, so the same shapes land wherever the
     page opens. `--sans` above is deliberately NOT reused — it leads with
     `system-ui`, which is whatever the operating system dresses its menus in,
     and scripture should not change face with the platform. */
  --scripture: "Helvetica Neue", Helvetica, Arial, "Liberation Sans",
    "Nimbus Sans", "Segoe UI", Roboto, sans-serif;

  /* Commentary keeps the serif, which is now a distinction and not an
     accident: on the catena page the scripture and the fathers commenting on
     it are set in different faces, so a reader can tell them apart before
     reading a word. */
  --serif-text: Charter, "Bitstream Charter", "Source Serif 4",
    "Source Serif Pro", Literata, Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --measure: 65ch;
}


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

html { -webkit-text-size-adjust: 100%; }

/* A phone is roughly 20rem of usable width, and one long unbreakable run — a
   URL, a query string, a Latin compound — is enough to widen the whole document
   and leave every line of prose scrolling sideways. Breaking inside a word is
   ugly; a page the reader has to pan is worse, and only the run that cannot fit
   is broken. */
body { overflow-wrap: break-word; }

/* Published, these pages are handed to the reader inside the site's own
   layout: its header, its navigation, its footer, its background, its width.
   This stylesheet then owns only what is inside the reading area, which the
   layout hands over as `main.page-browser`. Styling `body` unconditionally is
   what used to draw a second, narrower, differently-coloured page inside the
   site's own, and it is why the colour scheme appeared to stop at the edge of
   the reading pages.

   Opened straight from the repository the same file has no site layout around
   it, and the page still has to render. The guard is the site header itself:
   present, the site is dressing the page; absent, this stylesheet does. */
body:not(:has(> .site-header)) {
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  max-width: 52rem;
  background:
    radial-gradient(circle at 100% 0, var(--section-wash), transparent 28rem),
    var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  /* `100vh` on iOS is the viewport with the browser chrome retracted, so a page
     sized to it is always taller than what the reader can see and always
     scrolls a little. `100svh` is the smallest visible height; the `100vh`
     above it is the fallback for anything that does not know the unit. */
  min-height: 100vh;
  min-height: 100svh;
}

/* The reading area inside the site's layout. The surfaces are mixed from the
   section's own accent, which the layout sets from `.section-red` or
   `.section-gold` in the site's stylesheet, so no page here restates a colour
   the site already owns and none of them can drift from it. */
.page-browser {
  --page: color-mix(in srgb, var(--section-accent) 4%, var(--surface, #fbfaf7));
  --panel: color-mix(in srgb, var(--section-accent) 2%, #fff);
  /* Re-declared here rather than inherited from :root. A custom property whose
     value is another var() is substituted where it is declared, so `--focus`
     declared at :root resolves against the neutral fallback `--section-ink`
     there and never against the section's. Declared here it resolves against
     the section the layout actually set, and the focus ring is the section's
     colour instead of grey. */
  --focus: var(--section-ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

/* ---- Skip link and screen-reader helpers ---- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--focus);
  border-radius: 0 0 6px 0;
  z-index: 10;
}

.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Header ---- */

.page-header {
  margin-bottom: 1.5rem;
  padding-left: 0.9rem;
  border-left: 0.32rem solid var(--section-accent);
}

/* Inside the site's layout the reading area already carries the section's rule
   down its left edge and across its top. A third bar 3rem inside the first is
   furniture, not identity. */
.page-browser .page-header {
  padding-left: 0;
  border-left: 0;
}

.page-header h1 {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--section-ink);
}

.page-mark {
  margin-right: 0.4rem;
  color: var(--section-accent);
  font-weight: 400;
}

.lede {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* The count under the lede: what the page holds, in figures. Five pages emit
   it — catena, history, law, sources, texts — and three of them styled it
   privately while two forgot to, so the same line read as small grey apparatus
   on three pages and as body prose on two. One rule, and the catena page's
   tighter margin is its own departure below. */
.tally {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ---- Banner ---- */

.banner {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--section-line);
  border-left: 4px solid var(--section-accent);
  border-radius: 4px;
  background: var(--section-row);
  color: var(--section-ink);
  font-size: 0.9rem;
  max-width: var(--measure);
}

.banner[hidden] { display: none; }

/* ---- Controls ---- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  margin: 0 0 2rem;
  padding: 1rem;
  border: 1px solid var(--section-line);
  border-top: 0.2rem solid var(--section-accent);
  border-radius: 8px;
  background: var(--panel);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 15rem;
}

/* A hidden field must actually go: display:flex would otherwise beat the
   hidden attribute and leave the control on screen and in the tab order. */
.field[hidden] { display: none; }

.field-narrow { flex: 1 1 11rem; }

.field label,
.field-legend {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--section-ink);
}

/* Every control the reader touches, sized once.
 *
 * Two numbers matter on a phone and neither is decorative. 2.75rem is 44px,
 * the smallest target Apple's interface guidelines will call reliable; a
 * `select` padded to 0.5rem measured about 37px, which is a miss waiting to
 * happen on a page whose whole purpose is choosing between things. And a form
 * control under 16px makes iOS Safari zoom the page on focus and leave it
 * zoomed, so `font: inherit` is load-bearing: it takes the 1rem set above, and
 * no control here may quietly set itself smaller.
 *
 * `input` is styled with `select` although no page in this repository styles a
 * bare input: a page that adds one otherwise gets Safari's own 13.3px default
 * and the zoom with it, and the defect arrives in a page rather than here. */
.field select,
.field input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--section-line);
  border-radius: 5px;
}

.field select:hover:not(:disabled) { border-color: var(--section-accent); }

.field select:disabled { opacity: 0.6; }

/* A control that is a question rather than a filter: "only what can be read
   here". The box and its name are one target, and the pair sits on the
   baseline with the selects rather than stacking a label above a checkbox.
   Three files carried a version of this and only one page emits the class;
   the other two were styling markup that does not exist. */
.field-check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}

/* The label beside a checkbox is a name, not a field heading, so it drops the
   uppercase weight `.field label` gives the labels above the selects. */
.field-check label { font-weight: 400; }

.field-steps { flex: 0 0 auto; }

.steps { display: flex; gap: 0.5rem; }

.steps button {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--section-line);
  border-radius: 5px;
  cursor: pointer;
}

.steps button:hover:not(:disabled) {
  border-color: var(--section-accent);
  background: var(--section-row);
}

.steps button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- Reading ---- */

.reading { max-width: var(--measure); }

.reading:focus { outline: none; }

.reading[aria-busy="true"] { opacity: 0.55; }

.placeholder, .error {
  margin: 0;
  color: var(--ink-soft);
  font-style: italic;
}

.entry-title {
  margin: 0 0 0.15rem;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--section-ink);
}

.entry-meta {
  margin: 0 0 1.5rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* ---- A block of citations: a proper, or a reading ---- */

.proper {
  margin: 0 0 2.5rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--section-pale);
}

/* Section text is set in --section-ink rather than --section-accent. The
   accent is a rule-and-marker colour: at 0.8rem the gold of the scripture
   section does not carry enough contrast on white to be read as text, and the
   ink of every section does. */
.proper-name {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--section-ink);
}

.proper-incipit {
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-soft);
}

.citation { margin-top: 1rem; }

.citation-ref {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* The same passage, said in the edition's own numbering, where the structure
   file's reference is written in the other one. */
.citation-recast::before { content: " — "; }

.citation-recast { font-style: italic; }

/* A citation that crosses a chapter boundary says where the boundary is: verse
   numbers restart there, and without a marker a new chapter is indistinguishable
   from a repeated verse. Shown only for citations that actually cross one. */
.chapter-mark {
  margin: 1.5rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section-ink);
}

.citation > .chapter-mark:first-child,
.chapter-mark:first-child { margin-top: 0; }

.chapter-mark-number { letter-spacing: 0.08em; }

/* Scripture proper: the reason for the generous measure and leading. */
/* 1.09rem at 1.85 leading was a display setting, not a reading one — a printed
   bible sets nearer 1.4, and a screen wants a little more, not half again. The
   verse numbers are what actually need the air, and they get it from their own
   superscript rather than from the whole column. */
.passage {
  margin: 0 0 0.75rem;
  font-family: var(--scripture);
  font-size: 0.94rem;
  line-height: 1.55;
  hyphens: auto;
}

.passage:last-child { margin-bottom: 0; }

.verse { display: inline; }

/* Verse numbers are subordinate: small, superscript, and never bold enough to
   compete with the verse. The number is also given to assistive technology as
   ordinary text, so nothing depends on reading this. */
.verse-num {
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-right: 0.22em;
  color: var(--section-ink);
  user-select: none;
}

.composed {
  margin: 1rem 0 0;
  font-family: var(--serif);
  font-size: 1.09rem;
  line-height: 1.85;
}

.composed-label {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* A citation that could not be rendered always says so, in place. The notice
   colour is deliberately not the section colour: a failure must not read as
   ordinary page furniture. */
.notice {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--notice);
  border-radius: 0 4px 4px 0;
  background: var(--notice-bg);
  color: var(--notice);
  font-size: 0.92rem;
}

.notice strong { font-weight: 700; }

/* ===========================================================================
 * The record panel
 * ===========================================================================
 *
 * The history page and the law page ask the same question in the same shape:
 * here is one act, or one station, and here is what it did, and here is what
 * the record rests on. Every rule in this section stood twice, once in
 * `history.css` and once in `law.css`, and the copies had already begun to
 * part — one panel at 1.4rem and its twin at 1.5rem.
 *
 * TWO NAMES FOR ONE COMPONENT ARE WRITTEN AS ONE SELECTOR LIST. The two pages
 * call the same card `.change` and `.stop`, and the same block heading
 * `.detail-section-title` and `.block-title`. Renaming a class is a change to
 * the markup, which this refactor does not make; the honest thing a stylesheet
 * can do is state the rule once and name both. The rename is the right next
 * step and belongs in a commit that moves the HTML and the JavaScript with it.
 * ======================================================================== */

/* The panel itself. `texts.css` also has a `.detail`, and it is a DIFFERENT
   component — a record card the reader opens beside the catalogue, toned
   rather than white. It restates every declaration below and therefore renders
   unchanged; it is a name collision and not a shared component, and it is the
   second reason a rename is owed. */
.detail,
.panel {
  margin: 0 0 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--section-line);
  border-top: 4px solid var(--section-accent);
  border-radius: 8px;
  background: var(--panel);
}

.detail-title,
.panel-title {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.panel-note {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.panel-controls {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}

/* A heading over one block inside a panel. */
.detail-section-title,
.block-title {
  margin: 0 0 0.6rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--section-line);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* What the record states about one thing, as term and value. */
.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
}

.detail-list dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: baseline;
}

.detail-list dd { margin: 0; }

.detail-summary {
  margin: 0.8rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.edge-title {
  margin: 0.7rem 0 0.15rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

.edge-basis {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* ---- One change, or one act's touch on one canon ----
   The left edge is the kind of change, and each page names the kinds it can
   report; the card itself is one thing and is drawn here.

   `--weak-accent` is the page's, deliberately: it is the colour of a weaker
   claim about evidence, and the two pages reach it differently — the law page
   mixes it from the section's accent, the history page names it outright
   because that page's accent is not the section's either. It is NOT declared
   at `:root` here: a custom property whose value is another `var()` resolves
   where it is declared, so a `:root` derivation would freeze the neutral
   accent and never follow the section, exactly as `--focus` does above. */

.change,
.stop {
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--section-line);
  border-left: 4px solid var(--weak-accent);
  border-radius: 5px;
}

.change-head,
.stop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.02rem;
}

.change-kinds,
.stop-kinds,
.touched-kinds {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--section-line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

/* ---- What the record rests on ----
   Below the change and quieter than it: this is the project's ground for the
   claim above, not the claim. */

.basis {
  margin: 0.6rem 0 0;
  border-top: 1px dotted var(--section-line);
  padding-top: 0.45rem;
}

.basis-entry {
  margin: 0.35rem 0 0;
  font-size: 0.83rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.basis-kind {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A machine-readable locator, printed verbatim. It scrolls in its own box
   rather than widening the page. */
.marker {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.6rem;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 4px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---- The state as it stood ----
   A fold, because the state is context for the change above it and not the
   answer the reader came for. */

.fold {
  margin-top: 1.3rem;
  border-top: 1px solid var(--section-line);
  padding-top: 0.6rem;
}

.fold-summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
}

.fold-body { margin-top: 0.8rem; }

/* One thing the book or the Code held at that moment. */
.held {
  margin: 0 0 0.7rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--section-line);
}

/* The size is each page's own: the missal holds prayers under slot names and
   the Code holds units under citations, and the two are not the same length of
   line. Everything else about the head is one rule. */
.held-name {
  margin: 0 0 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-family: var(--sans);
  font-weight: 700;
}

/* ---- A button that reads as a link ----
   Used where the action is navigation within the page and a button would
   claim more than it does. It is a `button` in the markup, because it is one:
   nothing here fakes a link with an anchor that goes nowhere. */

.link-button {
  display: inline;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--section-accent);
  font: inherit;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus { text-decoration-thickness: 2px; }

/* ---- A work, on a page that lists works ----
   The catalogue and the source library draw the same card, and drew it twice.
   The top rule is the section's; the border is the section's line. */

.work {
  border: 1px solid var(--section-line);
  border-top: 0.2rem solid var(--section-accent);
  border-radius: 0.2rem;
  padding: 0.85rem 1rem 1rem;
  background: var(--panel);
}

/* ---- Footer ---- */

.page-footer {
  margin-top: 3.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--section-line);
  max-width: var(--measure);
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.page-footer p { margin: 0 0 0.6rem; }

.page-footer p:last-child { margin-bottom: 0; }

.page-footer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

@media (max-width: 34rem) {
  body:not(:has(> .site-header)) { padding: 1.25rem 1rem 3rem; }

  /* The controls already span the full width of a phone, so the card drawn
     around them is a border the reading measure pays for twice over and a
     second frame inside the site's own. The accent rule stays, because that is
     the identity; the box was the furniture. */
  .controls {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem 0 0;
    border: 0;
    border-top: 0.2rem solid var(--section-accent);
    border-radius: 0;
    background: none;
  }

  .field-steps { flex: 1 1 100%; }
  .steps button { flex: 1 1 auto; }

  /* A title set for a wide column costs three lines of a narrow one before the
     reader reaches anything the page is actually for. */
  .page-header { margin-bottom: 1.25rem; }
  .page-header h1 { font-size: 1.55rem; }
  .entry-title { font-size: 1.35rem; }
}

/* A term-and-value grid needs two columns to be a grid. Under about 40rem
   there is room for one, so the value goes under its term and the pairs are
   separated by space instead of by a column. */
@media (max-width: 40rem) {
  .detail-list {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .detail-list dd { margin-bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}