/* The one hand-written stylesheet — session 38: the single vocabulary,
   mirroring the design of record (docs/design/UNIFICATION-ORDER.md, with
   the gallery of record docs/design/gallery-of-record-2026-09-30/ and the
   captures under docs/design/current/ as the appearance reference since
   session 106; the drops' own galleries — drop 1's, archived at
   docs/archive/design/FULL-GALLERY-all-pages.html, drop 2's and drop 3's
   under their folders' mocks/ — are records, each save the ORDER's ruled
   departures) and inventoried in docs/design/CSS-VOCABULARY.md. Tokens
   verbatim from the session-23 prototype; two system fonts (Georgia +
   ui-monospace), no imports, no web fonts, no third-party anything.
   Copy is never authored here — text-transform is presentation, the
   pack strings are the copy. Rule weights: the ink double rule is the
   brand (masthead only); grey hairlines are structure; purple — the
   session-98 palette, drop 1 (ORDER v1.4 §4d) — is action and live status,
   never brand. */

:root {
  --ink: #1a1a1a; --accent: #53225c;
  --tint: #ebd999; --tint-ink: #4a3d12; --tint-rule: #a08b4a;
  --error: #d60036; --error-bg: #fdf2f5;
  --info-bg: #f6f2f7; --info-ink: #664a6b;
  --paper: #fff; --panel: #fbfbf9;
  --muted: #6b6b63; --faint: #b4b2a9;
  --star: #bd8c00;
  --measure: 34rem;
  --rule: rgba(0, 0, 0, .18); --hair: rgba(0, 0, 0, .09);
  --was: #f7dde3; --now: #cfe4d7;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* THE MEASURE (session 103, drop 3; the director's ruling of 1 Oct 2026): the body is one column,
   --measure its widest — the sheet's one max-width beside an image's 100% — and the text, the
   boxes, a field, a help line and a full button fill it. One length in rem, no width keyed to the
   screen: a narrower screen draws the same page, a wider one draws it centred. The components with a
   size of their own keep it — the masthead image, the small inline button, a multiple-choice item's
   cell, the stars' and the page squares' boxes, the sparkline. A surface that needs another column
   overrides the TOKEN on its own body, never the rule — the cockpit does (the last section). */

/* Border-box everywhere — the masthead pair's 4px height counts its own
   borders (ORDER §1.6): never content-box. */
* { box-sizing: border-box; }

body {
  font-family: var(--serif);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  margin: 0 auto;
  padding: 0 1.1rem 1.5rem;
  max-width: var(--measure);
  -webkit-text-size-adjust: 100%;
}

/* Accessibility floor: focus is always visible. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobile-first floor: nothing wider than the viewport. */
img { max-width: 100%; }
pre { white-space: pre-wrap; }

h1 { font-size: 1.3rem; line-height: 1.35; margin: 1rem 0 0.5rem; }

/* Section headings render as the small-caps label vocabulary. */
h2 {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0.25rem;
}
section { border-top: 0.5px solid var(--rule); margin-top: 1.3rem; }
section.first { border-top: 0; margin-top: 0.6rem; }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.55rem 0 0;
}
p.lede { font-size: 1.05rem; }
/* S45 (ORDER v1.3 §4c): a paper's display code never breaks mid-code. */
.code { white-space: nowrap; }
small { color: var(--muted); }
.m0 { margin: 0 0 0.1rem; }
a { color: var(--accent); }

/* Masthead (ORDER §1.6) — the wordmark image is the page identity; the
   ink double rule (2px over a 0.5px hairline, 1.5px of daylight) is the
   brand line, drawn full width by the pseudo-element. The header's
   bottom padding stays 0: the breathing room is the pseudo-element's
   margin-top. Sizing is width-first (header 225px, lockup 253px). The
   pseudo-element carries its own box-sizing (session 98, the review's
   row 21): the universal reset above matches elements, never pseudo-
   elements, so without it the 4px was content and the daylight 4px. */
header.brand { padding: 1.2rem 0 0; text-align: center; }
header.brand::after {
  content: "";
  display: block;
  height: 4px;
  box-sizing: border-box;
  margin-top: 1.1rem;
  border-top: 2px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}
header.brand img { width: min(225px, 100%); height: auto; }
.lockup { text-align: center; padding-top: 1.6rem; }
.lockup h1 { margin: 0; }
.lockup img { width: min(253px, 100%); height: auto; }
.lockup hr {
  border: 0;
  height: 4px;
  margin: 0.95rem 0 0;
  border-top: 2px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}

/* Messages — the message-box law (the ORDER's §2.4): .flash the gold box
   (something needs fixing, or can't be undone), .info the purple card
   (where things stand), .err the red card (this way is closed), .decask
   the December ask; instructions, legends and tips are plain text. The
   landing's offer box is one of the law's named exceptions — gold, in .flash
   (session 102's review, row 40). */
.flash {
  background: var(--tint);
  color: var(--tint-ink);
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
}
.info {
  border-left: 3px solid var(--accent);
  background: var(--info-bg);
  color: var(--info-ink);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
}
.err, .errorlist {
  border-left: 3px solid var(--error);
  background: var(--error-bg);
  color: var(--error);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
}
/* Field errors: Django's list (the ritual page's ul, routed to the fix series — s100.4) or the
   vocabulary's span inside its field's paragraph (forms.FieldErrors, session 100; every consent
   form's since session 102) — one dress for both. */
.errorlist { display: block; list-style: none; margin: 0.2rem 0; }
.decask {
  border-left: 3px solid var(--accent);
  background: var(--info-bg);
  color: var(--info-ink);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
  border-radius: 0 8px 8px 0;
}

/* Buttons — the grammar (ORDER §2.1): one base, then the dress.
   .btn filled purple = the page's one main act · .btn-o outline = every
   other action and every way out · .btn-rf red fill = the deletion
   ceremony · .btn-r careful red outline = the ask-a-person act ·
   .btn-dis inert grey (aria-disabled, focusable; dress, never opacity)
   · .pbtn the paper ladder, the face from the view (open · progress ·
   done · far; session 98, ORDER v1.4 §5.14 — the two held faces one outline). */
.btn, .btn-o, .btn-rf, .btn-dis, .btn-r, .pbtn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  margin: 0.6rem 0 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn, .pbtn.open { background: var(--accent); color: #fff; }
.btn-o { background: transparent; color: var(--accent); }
.btn-rf { background: var(--error); border-color: var(--error); color: #fff; }
.btn-r { background: transparent; border-color: var(--error); color: var(--error); }
.btn-dis { background: var(--muted); border-color: var(--muted); color: #fff; cursor: default; }
.pbtn.done, .pbtn.progress { background: transparent; color: var(--accent); }
.pbtn.far { background: transparent; border-color: #d3d1c7; color: var(--faint); cursor: default; }
/* Small outline = inline row actions (Change, notify when available). */
.btn-os {
  display: inline-block;
  font: inherit;
  font-size: 0.8rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.2rem 0.65rem;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Forms. A field is the column's width, as a button is (the measure). */
form p { margin: 1rem 0; }
label { display: block; margin-bottom: 0.2rem; font-size: 0.85rem; }
input[type="email"], input[type="text"], input[type="password"],
input[type="file"], select {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  background: var(--panel);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  margin-right: 0.4rem;
}
p:has(> input[type="checkbox"]) label { display: inline; }
/* A tick (session 100, drop 2): box and label side by side, a wrapped label keeping its left edge —
   the label on a zero basis, so it takes the rest of its box's line and wraps inside it, never onto
   a line of its own (the review's row 2); the box on the label's first baseline, as it sits inline
   (the director's STOP 1 ruling Q-E); a field error on its own line beneath. */
p.tick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; margin: 0.5rem 0 1.3rem; font-size: 0.9rem; }
p.tick > input { flex: none; margin: 0; }
p.tick > label { flex: 1; }
p.tick > .errorlist { flex-basis: 100%; }
.formrule { border-top: 0.5px solid var(--rule); margin-top: 1.7rem; }
small.help {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--accent);
}
/* The signup is_adult inversion (ORDER §5.5): ticked = adult, the
   parent field hides; unticked — the default — keeps the protective
   minor path in view. Without :has() nothing hides. */
form:has(#id_is_adult:checked) p.parent { display: none; }
/* Counsel's summary on signup (session 100, drop 2 panel 18; ORDER §2.1's named exception): white on
   the accent — a text panel, never an act. */
p.privacy-summary { background: var(--accent); color: #fff; border-radius: 8px; padding: 0.85rem 1rem; margin: 1rem 0; }
/* The transcript field — mono is the student's own words. */
textarea {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  background: var(--panel);
}
/* The ritual's double entry (presentation only; the machinery is the
   session-5 form): blind entry renders as the dots field, the visible
   re-entry as the spaced mono check. */
#ritual-form input[type="password"] { font-family: var(--mono); letter-spacing: 0.3em; }
#ritual-form input[type="text"] { font-family: var(--mono); letter-spacing: 0.16em; }
/* The multiple-choice grid (session 100, drop 2 panels 15 and 17): unframed; each question's
   number and select on one line, 9rem each (two to a line from 360px, drop 2's Chromium measure);
   "No answer" muted until a letter is chosen. Every grid shows (the director's ruling: no per-page
   rule). */
fieldset.mcq { border: 0; padding: 0; margin: 1.1rem 0 0.4rem; min-width: 0; }
fieldset.mcq legend { padding: 0; margin: 0 0 0.45rem; font-size: 0.85rem; line-height: 1.5; }
fieldset.mcq p { display: inline-flex; align-items: center; gap: 0.4rem; width: 9rem; margin: 0 0.7rem 0.5rem 0; vertical-align: top; }
fieldset.mcq label { margin: 0; min-width: 1.4rem; text-align: right; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
fieldset.mcq select { flex: 1; min-width: 0; padding: 0.45rem 0.4rem; font-size: 0.9rem; }
fieldset.mcq select:has(option[value=""]:checked) { color: var(--muted); }
/* Honeypot (session 20): off-screen, never display:none — humans and
   screen readers never meet it, form-stuffing bots do. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The feedback page (session 98; ORDER v1.4 §4d.4, gallery panel 33): one
   fieldset per statement, nothing counts them; the radio is the state — laid
   invisibly over its numeral chip (the system chooser's principle), the
   chosen one filled; the end labels ride bands 1 and 5 for readers (.vh)
   and sit beneath for eyes. The chip is the label's own span: the reader's
   hidden span inside it is never dressed. The pointer is the label's — a
   radio is a replaced element and never stretches to insets (the review's
   row 29); the label's activation is the click. */
.likert { border: 0; margin: 1.3rem 0 0; padding: 0; min-width: 0; }
.likert legend { padding: 0; margin: 0 0 0.45rem; line-height: 1.5; }
.lk { display: flex; gap: 6px; }
.lk label { flex: 1; position: relative; margin: 0; font-size: inherit; cursor: pointer; }
.lk input { position: absolute; margin: 0; opacity: 0; }
.lk label > span {
  display: block;
  text-align: center;
  padding: 0.5rem 0;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.95rem;
}
.lk input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.lk input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The chosen band stays visible in forced colours (session 100, drop 2; s98 row 20): the system's
   own highlight pair, which forcing keeps — a system colour is never forced (CSS Color Adjustment 1
   §3.1) — so nothing is released and the band's focus ring stays forced like every other (the
   review's row 13). */
@media (forced-colors: active) {
  .lk input:checked + span { background: Highlight; border-color: Highlight; color: HighlightText; }
}
.ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0; }
/* The rating's thanks page (session 100, drop 2 panels 1–2): five text stars on one row per row —
   a star that stands in --star, pressable or not (.stars .on outranks .stars > a), a pressable one
   that does not in the accent, a static one that does not muted. Each link's glyph box is the 44px
   target WCAG 2.2 names (2.5.5) — sized boxes, not a.pg's ::before inset, because adjacent stars'
   insets would overlap their hit areas — and the static row's boxes the same, for the layout; the
   first box starts at the text edge. */
.rate h2 { margin-top: 1.3rem; }
.stars { display: flex; margin: 0.1rem 0 0; font-size: 1.75rem; line-height: 1; }
.stars > a, .stars > .on, .stars > .off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
}
.stars > a { color: var(--accent); }
.stars .on { color: var(--star); }
.stars .off { color: var(--muted); }

/* The consent card — the cockpit's (submission, house, incident); the confirmation pages left
   it for the consent shape (session 103). */
article.consent-card {
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  padding: 0.35rem 1rem;
  margin: 1rem 0;
  background: var(--panel);
  font-size: 0.92rem;
}
article.consent-card p + p { border-top: 0.5px solid var(--hair); padding-top: 0.8rem; }

/* Rows, labels, folds. */
ul.rows, ul.subjects { list-style: none; padding: 0; margin: 0.3rem 0 0; }
ul.rows li { border-top: 0.5px solid var(--hair); padding: 0.45rem 0; }
ul.rows li:first-child { border-top: 0; }
details.group ul.rows li { border-top: 0; }
/* The summary's wrong-page warning (session 100, drop 2 panel 14): the gold row tucked under its
   page row, unfenced. */
ul.rows li.flash { border-top: 0; padding: 0.55rem 0.75rem; margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.5; }
li.srow { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
li.orow { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
/* A subject's sparkline (session 100, drop 2 panel 6): its own line beneath the subject's name, the
   svg 12.5rem × 4rem in the accent (the system's text colour in forced colours), shrinking only when
   the row is too narrow; its "latest" tag beside it. */
li.srow .spark { flex-basis: 100%; min-width: 0; display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0.1rem; }
li.srow .spark svg { flex: 0 1 12.5rem; min-width: 0; height: 4rem; color: var(--accent); }
@media (forced-colors: active) {
  li.srow .spark svg { color: CanvasText; }
}
.pgname { display: flex; align-items: center; gap: 0.55rem; }
/* The system chooser (subjects): the radio is the state — off-screen,
   keyboard-operable — and its label the button; :checked dresses the
   chosen one and the :has() rule reveals that system's list. Without
   :has() both lists render (the ruled degrade). */
.sys { display: flex; gap: 9px; margin: 1rem 0 0.4rem; }
.sys input { position: absolute; opacity: 0; }
.sysbtn {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
}
.sys input:checked + .sysbtn { background: var(--accent); color: #fff; }
.sys input:focus-visible + .sysbtn { outline: 2px solid var(--accent); outline-offset: 2px; }
form:has(#sys-vce:checked) ul.hsc, form:has(#sys-hsc:checked) ul.vce { display: none; }
li.dashrow { padding: 0; }
li.dashrow > a { display: block; padding: 0.45rem 0; text-decoration: none; color: var(--ink); }
li.dashrow .t { color: var(--accent); }
li.dashrow .sub { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.1rem; }
details.group, ul.rows.group { margin-left: 0.6rem; }
details.group { border-top: 0.5px solid var(--hair); padding: 0.35rem 0 0.5rem; }
details.group:first-of-type { border-top: 0; }
/* The one small label: muted by default, .tg the purple live-status
   variant — one rule set, no separate purple class. */
.tag {
  border: 0.5px solid var(--faint);
  border-radius: 3px;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  display: inline-block;
  margin-left: 0.4rem;
}
.tag.tg { border-color: var(--accent); color: var(--accent); }
/* Chips — verified results display (data values in the bold slot). */
.chip {
  display: inline-block;
  border: 0.5px solid var(--rule);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.15rem 0.3rem 0.15rem 0;
}
.chip b { color: var(--ink); }
/* Details-collapse vocabulary (native, no JS): no marker, ever — the
   arrow is drawn once by ::before. */
summary { cursor: pointer; padding: 0.25rem 0; color: var(--accent); list-style: none; }
summary::marker { content: ""; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "\25B8  "; }
details[open] > summary::before { content: "\25BE  "; }
.acct { border-top: 0.5px solid var(--rule); margin-top: 1.3rem; padding-top: 0.4rem; }
.acct details { margin: 0.5rem 0 0; }
.acct .ab { margin-top: 0.6rem; }
/* The sample showcase (ORDER v1.1 §4a, panel 26): two native folds,
   hairline-topped, un-indented, last in the landing's column; each
   page is an image framed like paper (its intrinsic size in markup —
   no layout shift). .vh hides the per-document summary from sight,
   not from readers (the honeypot's technique under its own name). */
details.sample { border-top: 0.5px solid var(--rule); margin-top: 1.3rem; padding: 0.35rem 0 0.5rem; }
details.sample summary { font-size: 1.02rem; }
details.sample img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.8rem 0 0;
  border: 0.5px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.vh { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Subject cards — the upload flow's step one. */
a.card, p.card {
  display: block;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  padding: 0.8rem 0.75rem;
  margin: 0.5rem 0;
  text-decoration: none;
}
p.card.dim { border-color: var(--hair); background: var(--panel); color: var(--muted); }
/* The available subject wears the fill (drop 1 §4d.6, panel 17). */
a.card { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The transcript-checking walk: page chips (links, 44px tap target via
   the pseudo-element), the mono script blocks, the before/after
   highlights. */
.pgs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0.9rem 0 0; }
.pg {
  width: 30px; height: 30px; border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, .22); color: var(--muted);
  text-align: center; line-height: 29px;
  font-family: var(--mono); font-size: 12px;
}
.pg.done { background: var(--accent); color: #fff; border-color: var(--accent); }
.pg.now { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; line-height: 27px; }
.pg.todo { color: var(--faint); }
a.pg { position: relative; text-decoration: none; }
a.pg::before { content: ""; position: absolute; inset: -7px; }
.script {
  border: 0.5px solid var(--rule); border-radius: 8px; padding: 13px;
  margin: 0.5rem 0 0; background: var(--panel);
  font-family: var(--mono); font-size: 0.8rem; line-height: 2.05;
  white-space: pre-wrap;
}
.script.old { color: var(--muted); }
.script.new { border-color: var(--accent); background: var(--info-bg); }
/* The [?] marker inside the script — inherits its mono, a touch smaller. */
.mm { font-size: 0.85em; }
.struck { text-decoration: line-through; color: var(--muted); }
.hl-old { background: var(--was); padding: 1px 3px; color: var(--ink); }
.hl-new { background: var(--now); padding: 1px 3px; }

/* Footer — the stacked entity lines, the integrity chain last. */
footer {
  border-top: 0.5px solid var(--rule);
  margin-top: 1.4rem;
  padding-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.7;
}
footer .ln { display: block; }
footer .ln + .ln { margin-top: 0.15rem; }
footer .chain { margin-top: 0.45rem; }
footer .chain-head { word-break: break-all; font-family: var(--mono); font-size: 0.65rem; color: var(--muted); }

/* CARRIED — old selectors the untouched templates still wear (ruled
   (D) 25 Aug 2026; the alias above points at its new home): ul.subjects
   for the cockpit's queues (stands with the cockpit); the landing's two
   retired with its rebuild (session 102). The bare button dress stands:
   the cockpit wears it (the re-agree screen's act a .btn since session 103). */
button {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  text-decoration: none;
  cursor: pointer;
}

/* Cockpit (director-only surface, session 6) — carried unchanged; its body keeps the column it had
   (session 103, D-ruled: the cockpit's own measure — the token overridden, the body's rule the one). */
body.cockpit { --measure: 42rem; }
.cockpit-bar { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e2e2e2; }
.cockpit-error { background: #fbeaea; border: 1px solid #d9a3a0; padding: 0.5rem 0.75rem; }
.pdf-frame { width: 100%; height: 30rem; border: 1px solid #dddddd; }
.side-by-side { display: flex; gap: 1rem; flex-wrap: wrap; }
.side-by-side > section { flex: 1 1 20rem; min-width: 0; }
pre.transcript { white-space: pre-wrap; background: #f6f6f4; border: 1px solid #dddddd; padding: 0.5rem; }
.burn-page { position: relative; display: inline-block; max-width: 100%; }
.burn-page img { max-width: 100%; display: block; user-select: none; }
.burn-box { position: absolute; background: #000000; opacity: 0.65; outline: 2px solid #a4160f; pointer-events: none; }
img.preview { max-width: 100%; border: 2px solid #a4160f; }

/* THE REGION PICKER (the footer-regions drop of 26 Oct 2026, docs/design/footer-regions-2026-10-26/, placed at session
   134's fix pass under the director's word — the fix map's Q1 (a), Q3 (a), Q-F6 (a); the rules the drop's, verbatim but
   for one: the list's cap `max-width: 17rem` is NOT taken, the sheet's one-token max-width law (test_design) admitting
   the measure or 100% alone — the list is as wide as its longest row, and a name longer than the column is that door's
   session's sizing; appended here, after the cockpit's rules, so every position the vocabulary cites stands). The
   Contact line is a row: its text (one span) left, the picker hugging the column's right edge, the two on the line's LAST
   baseline, so the picker stays level with the email when a narrow screen wraps the line. A browser without last-baseline
   alignment takes the row's bottom edge instead, about 8px lower. With no picker in it (one door served) the row lays
   out exactly as the block did. */
footer .contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-items: last baseline;
  gap: 0.75rem;
}
/* The picker is a native fold — no script — and its summary is the button: the current door's flag and nothing else,
   filling a 2.25 × 1.5rem chip (24px tall: the smallest target WCAG 2.5.8 allows) in the small outline's dress (.btn-os's
   1px accent border, a 6px radius) that crops the flag from its fly side. The chip stands taller than the text, so a
   negative top margin of its own height keeps it from opening the row: nothing of it counts above the baseline, and the
   text never moves. A block with no text of its own has its baseline synthesised from its bottom edge — that is the edge
   on the line. The door's name is for readers only (.vh); the house's fold arrow is off here. */
footer .regions { position: relative; margin-top: -1.5rem; }
footer .regions > summary {
  display: block;
  width: 2.25rem;
  height: 1.5rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--accent);
  border-radius: 6px;
}
footer .regions > summary::before { content: none; }
footer .regions img { display: block; }
footer .regions > summary img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
/* A flag may set its own window. Australia's sits 22% along the chip's overflow: the cut then falls between Epsilon and
   Delta Crucis, so every star the chip shows is whole, for 2px of the Union Jack's hoist edge (the director, 26 Oct 2026). */
footer .regions > summary img.flag-au { object-position: 22% 50%; }
/* The open list floats above the chip, right-aligned to it, so at the foot of a page it opens onto the screen and nothing
   reflows: one row per door that is served, in the environment's order, the current door ticked and not a link. It is as
   wide as its longest row (the drop's 17rem cap not taken — the sheet's law above), and as tall as about four and a half
   rows, past which it scrolls — the cut row is the hint. The shadow is the sheet's second literal, named in the vocabulary. */
footer .regions ul {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  width: max-content;
  max-height: 11.5rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  background: var(--paper);
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .12);
}
footer .regions li > a, footer .regions li > span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  text-decoration: none;
}
footer .regions li img { height: 0.75rem; width: auto; box-shadow: 0 0 0 0.5px var(--rule); }
/* The list clips its overflow, so a row's focus ring draws inside the row. */
footer .regions li > a:focus-visible { outline-offset: -2px; }
footer .regions li > span { color: var(--ink); }
footer .regions li > span::after { content: "\2713"; margin-left: auto; padding-left: 0.8rem; color: var(--accent); }

/* THE FOOTER'S TOUCH TARGETS (session 135; the director's eye on the render at STOP 1, docs/audits/s135/renders/footer-side-by-side-2x.png): the
   four targets — the three document links (span.ln > a) and the Contact mailto (div.ln.contact > span > a) — each an inline-block
   padded to a box of at least 24 px — WCAG 2.2's 2.5.8, Lighthouse's target-size item; 14 px boxes on a 22 px pitch before — by the
   padding alone, so the line boxes grow (the three document lines and the Contact row each 4.8 px taller, the picker's chip moving
   with the Contact baseline) and no two targets overlap; a negative margin that keeps the pitch hands the overlap to the later link
   and was refused. The selector names those four alone (the fix pass, the review's row 16): the picker's rows (footer .regions li > a,
   inside the Contact row) are outside it by construction, never by a specificity contest. Appended, so every position cited above stands. */
footer .ln > a, footer .contact > span > a { display: inline-block; padding: 0.15rem 0; }