/* /read — the browser e-reader.
 *
 * Ported from docs/ereader-mockup-himd.html (rev 2) with the rev 3 spec
 * (docs/ereader-spec.md §7 + Global constraints 3/6/9/10/11) governing where
 * the two differ. The differences that matter here:
 *   - prefs classes live on <html> (reader-prefs.js runs before first paint),
 *     not on <body> as in the mockup;
 *   - .pageblock has NO fixed height — a gate/CTA that cannot fit spans two
 *     consecutive columns instead of clipping (constraint 11);
 *   - --ink-dim is the spec §7.4.1 "Dim" column (the mockup's lighter greys
 *     miss the 7:1 bar), while the chrome uses its own high-contrast
 *     HARDBURN hardware tokens independent of the selected page theme;
 *   - the FREE PREVIEW state uses --bar-hi, not the mockup's fixed amber
 *     (which fails on Light/Sepia/Green);
 *   - every strip/deck/sheet control has a >=44x44 hit area — usually a
 *     transparent ::before overlay, so the painted glyph can stay small.
 * No inline <style>/style= anywhere on /read: the CSP forbids both.
 */

:root {
  /* HARDBURN // READER. Running prose gets a quiet, flat surface; the brand
     treatment is reserved for the chassis, controls and auxiliary pages. */
  --shell-bg: #020305;
  --shell-halo: #101711;
  --lcd-bg: #04060a;
  --chassis: linear-gradient(145deg, #242a25 0%, #111512 14%, #080b09 52%, #020403 100%);
  --chrome-metal: #d8e0d7;
  --ui-bg: #04060a;
  --ui-panel: #070b07;
  --ui-panel-2: #0b110c;
  --ui-ink: #eef3e8;
  --ui-muted: #a8b6aa;
  --ui-accent: #5dff8b;
  --ui-on-accent: #04060a;
  --ui-line: rgba(93, 255, 139, .3);
  --ui-line-soft: rgba(93, 255, 139, .17);
  --ui-glow: 0 0 18px rgba(93, 255, 139, .2);
  --control-face: linear-gradient(180deg, #222a23, #0c110d 70%, #070a08);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --size: 19px; --leading: 1.65; --dim: 0;
  --pad-x: 24px; --pad-y: 28px;

  /* The unclassed/default and explicit Dark theme use the storefront's
     phosphor palette. Reader prefs add a theme class before first paint. */
  --page-bg: var(--lcd-bg); --ink: #e6ecdf; --ink-hi: #fff; --ink-dim: #a8b6aa;
  --accent: #5dff8b; --on-accent: #04060a; --rule: rgba(93, 255, 139, .22);

  /* Chrome is a near-opaque hardware layer independent of the paper theme. */
  --bar: rgba(4, 6, 10, .975); --sheet: linear-gradient(180deg, #0b100c, #04060a 72%);
  --bar-ink: var(--ui-ink); --bar-dim: var(--ui-muted); --bar-hi: var(--ui-accent);
  --face: 'Literata', 'Charter', Georgia, serif;
}

:root.theme-light {
  --page-bg: #fbfaf7; --ink: #17181a; --ink-hi: #000; --ink-dim: #55514c;
  --accent: #2f4f8f; --on-accent: #fff; --rule: rgba(23, 24, 26, .18);
}
/* Sepia/Green accents are the rev-3 darkened values (spec §7.4.1): the
   rev-2 #7a4a1e / #2b6b46 measured 6.16:1 and 5.38:1 on their own pages —
   under the 7:1 bar for an information-bearing token (eyebrows, the card's
   kicker). #5a3410 = 9.00:1 on #f3e9d2, #1c4f31 = 8.01:1 on #e3efe3, and
   --on-accent white stays legible on both (10.86:1 / 9.49:1). */
:root.theme-sepia {
  --page-bg: #f3e9d2; --ink: #3e3122; --ink-hi: #1f1810; --ink-dim: #594936;
  --accent: #5a3410; --on-accent: #fff; --rule: rgba(62, 49, 34, .2);
}
:root.theme-green {
  --page-bg: #e3efe3; --ink: #1f2e22; --ink-hi: #0e1a11; --ink-dim: #3a513f;
  --accent: #1c4f31; --on-accent: #fff; --rule: rgba(31, 46, 34, .2);
}
:root.theme-dark {
  --page-bg: #04060a; --ink: #e6ecdf; --ink-hi: #fff; --ink-dim: #a8b6aa;
  --accent: #5dff8b; --on-accent: #04060a; --rule: rgba(93, 255, 139, .22);
}
:root.theme-auto {
  --page-bg: #fbfaf7; --ink: #17181a; --ink-hi: #000; --ink-dim: #55514c;
  --accent: #2f4f8f; --on-accent: #fff; --rule: rgba(23, 24, 26, .18);
}
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --page-bg: #17191c; --ink: #cfd2d6; --ink-hi: #fff; --ink-dim: #a3a8ae;
    --accent: #8fb4ff; --on-accent: #0b0d10; --rule: rgba(207, 210, 214, .18);
  }
}
/* Hi-MD is deliberately still the blue machine. It overrides the auxiliary
   UI tokens as well as the reading surface, while every other theme keeps the
   green HARDBURN hardware around its conventional page. */
:root.theme-himd {
  --page-bg: linear-gradient(180deg, #060a16 0%, #04060e 60%, #03050c 100%);
  --ink: #8fb4ff; --ink-hi: #e2ecff; --ink-dim: #8aa3d5;
  --accent: #e2ecff; --on-accent: #04060e; --rule: rgba(143, 180, 255, .22);
  --ui-bg: #04060e; --ui-panel: #080d1b; --ui-panel-2: #0b1428;
  --ui-ink: #e2ecff; --ui-muted: #91a9d8; --ui-accent: #8fb4ff; --ui-on-accent: #04060e;
  --ui-line: rgba(143, 180, 255, .32); --ui-line-soft: rgba(143, 180, 255, .18);
  --ui-glow: 0 0 18px rgba(143, 180, 255, .2);
  --shell-halo: #0b1224;
  --chassis: linear-gradient(150deg, #34383d 0%, #191a1d 16%, #0d0e10 55%, #050506 100%);
  --bar: rgba(5, 8, 17, .975); --sheet: linear-gradient(180deg, #0c1429, #040812 72%);
  --bar-ink: var(--ui-ink); --bar-dim: var(--ui-muted); --bar-hi: var(--ui-accent);
  --control-face: linear-gradient(180deg, #2c3548, #121827 70%, #080c14);
}

:root.face-book { --face: 'Literata', 'Charter', Georgia, serif }
:root.face-clean { --face: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif }
:root.face-mono { --face: 'Space Mono', ui-monospace, monospace }
:root.face-hyperlegible { --face: 'Atkinson Hyperlegible', system-ui, sans-serif }
/* --pad-y is never below 26px: the ↩ return chip sits in that band (4px top,
   22px tall) and must not land on the first line of prose. */
:root.margin-narrow { --pad-x: 14px; --pad-y: 26px }
:root.margin-wide { --pad-x: 40px; --pad-y: 36px }

* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--shell-bg) }
body { font-family: var(--mono); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden }
button, input { font-family: inherit }
button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
[hidden] { display: none !important }

/* ---------------------------------------------------------------- the rig */
.rig {
  position: relative; height: 100dvh; width: 100vw; margin: 0 auto; background: var(--chassis); overflow: hidden;
  isolation: isolate;
}
.lcd {
  position: absolute; inset: 0; background: var(--page-bg); overflow: hidden;
  touch-action: pan-y pinch-zoom; user-select: text; -webkit-user-select: text;
}
@media (min-width: 900px) {
  body {
    padding: 24px; display: flex; justify-content: center; align-items: center;
    background: radial-gradient(circle at 50% 32%, var(--shell-halo) 0, #04060a 46%, #020305 100%);
  }
  .rig {
    width: min(100%, 860px); height: min(960px, calc(100dvh - 48px)); border-radius: 16px;
    border: 1px solid rgba(216, 224, 215, .18);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -5px 16px rgba(0, 0, 0, .86),
      0 0 0 2px #010201, 0 28px 80px rgba(0, 0, 0, .72), var(--ui-glow);
  }
  .lcd {
    inset: 11px; border-radius: 7px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .28), 0 0 0 2px #020403, 0 0 0 5px #151b16;
  }
}

/* --------------------------------------------------------- the paginator */
.stage {
  position: absolute; left: var(--pad-x); right: var(--pad-x);
  top: calc(var(--pad-y) + var(--safe-t)); bottom: calc(var(--pad-y) + var(--safe-b));
  /* `clip`, not `hidden`: a hidden box is still a scroll container, so
     focusing a control on a later column (the gate field, START, a CTA
     button) scroll-into-views the stage and shifts every page sideways by a
     column. `clip` clips identically and creates no scroll container. */
  overflow: hidden;
  overflow: clip;
}
.flow {
  position: relative; height: 100%; column-fill: auto;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1); will-change: transform;
  font-family: var(--face); font-size: var(--size); line-height: var(--leading); color: var(--ink);
  text-rendering: optimizeLegibility;
}
:root.turn-none .flow { transition: none }
@media (prefers-reduced-motion: reduce) {
  .flow, .strip, .deck, .coach, .toast, .ret, .mark, button, a { transition: none !important }
}
:root.flow-scroll .stage { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain }
:root.flow-scroll .flow {
  column-width: auto !important; column-gap: 0 !important; height: auto !important;
  transform: none !important; padding-bottom: 8vh;
}

.flow p { margin: 0; text-indent: 1.4em; text-wrap: pretty; orphans: 2; widows: 2 }
:root.align-justify .flow article p { text-align: justify; -webkit-hyphens: auto; hyphens: auto }
.flow h1 + p, .flow hr + p { text-indent: 0 }
.flow hr {
  border: 0; height: auto; margin: 1.2em 0; text-align: center; color: var(--ink-dim);
  break-after: avoid;
}
.flow hr::before { content: "⁂"; font-family: var(--mono); font-size: .9em; letter-spacing: .3em }
.flow h1 { margin: 0 0 1.1em; line-height: 1.05; break-inside: avoid; break-after: avoid }
.flow .chnum {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .6em;
}
.flow .chtitle {
  display: block; font-family: 'Oswald', var(--face); font-weight: 500; font-size: 2.1em;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-hi);
  border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: .25em 0;
}
.flow .fail { font-family: var(--mono); font-size: 13px; color: var(--ink-hi); text-indent: 0 }

/* Whole-page blocks (disc label, gate, CTA, back matter). Constraint 11: no
   fixed height and no hidden overflow — when the block cannot fit the column
   it flows into the next one. The .pb-keep groups are what must not split. */
.pageblock {
  break-before: column; break-inside: auto; min-height: 60%;
  padding-top: .5em; text-indent: 0;
}
.pageblock:first-child { break-before: auto }
.pb-keep { break-inside: avoid }
.pageblock p { text-indent: 0 }

.disc, .gate-card, .cta {
  --ink: var(--ui-ink); --ink-hi: var(--ui-ink); --ink-dim: var(--ui-muted);
  --accent: var(--ui-accent); --on-accent: var(--ui-on-accent); --rule: var(--ui-line-soft);
}
.disc {
  position: relative; padding: 16px clamp(12px, 4vw, 24px); text-align: center; color: var(--ink);
  border: 1px solid var(--ui-line); border-left-width: 3px; border-radius: 4px;
  background: var(--ui-panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), var(--ui-glow);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.disc::before {
  content: "MTHR // READER CARTRIDGE"; display: block; margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--ui-line-soft); color: var(--ui-muted); font: 700 9px/1.2 var(--mono);
  letter-spacing: .18em; text-align: left;
}
.disc img {
  width: 112px; height: 157px; object-fit: cover; border-radius: 2px; background: #111;
  border: 1px solid var(--ui-line); box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}
.disc .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin: 10px 0 4px }
.disc .t { font-family: 'Oswald', var(--face); font-size: 2.4em; letter-spacing: .12em; color: var(--ink-hi); line-height: 1; margin: 0 }
.disc .by { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); margin: 8px 0 0 }
.disc .adv {
  font-size: .8em; line-height: 1.5; max-width: 28em; margin: 14px auto 0; padding: 9px 10px;
  border: 1px solid var(--ui-line-soft); background: var(--ui-bg);
}
.disc .adv em { font-style: normal; color: var(--ink-hi) }
.disc .adv p { margin: .4em 0 }
.disc .copy { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); max-width: 34em; line-height: 1.55; margin: 12px auto 0 }
.disc .copy p { margin: .5em 0 }
.btn-start {
  margin-top: 16px; padding: 13px 30px; border: 1px solid var(--accent); border-radius: 5px;
  background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 12px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; min-height: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -3px 0 rgba(0, 0, 0, .25), var(--ui-glow);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.btn-start:hover { filter: brightness(1.08) }
.btn-start:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35) }

.gate { font-family: var(--mono) }
.gate-card {
  position: relative; padding: clamp(14px, 4vw, 26px); color: var(--ink);
  border: 1px solid var(--ui-line); border-top-width: 3px; border-radius: 5px;
  background: var(--ui-panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), var(--ui-glow);
  break-inside: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gate-card::before {
  content: "CLEARANCE // SAMPLE LOCK"; display: block; margin: 0 0 14px; color: var(--ui-muted);
  font: 700 9px/1.2 var(--mono); letter-spacing: .18em;
}
.gate .g-end { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 18px; display: flex; align-items: center; gap: 10px }
.gate .g-end::after { content: ""; flex: 1; height: 1px; background: var(--ui-line) }
.gate .g-eyebrow { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px }
.gate .g-title { font-family: 'Oswald', var(--face); font-weight: 500; font-size: 1.7em; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-hi); margin: 0 0 8px; line-height: 1.1 }
.gate .g-desc { font-family: var(--face); font-size: .85em; line-height: 1.5; margin: 0 0 14px }
.gate form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 }
.gate input {
  flex: 1 1 170px; min-width: 0; min-height: 44px; padding: 12px; border: 1px solid var(--ui-line);
  border-radius: 4px; background: var(--ui-bg); color: var(--ink-hi); font-family: var(--mono); font-size: 16px;
}
.gate input::placeholder { color: var(--ui-muted); opacity: 1 }
.gate form button {
  flex: 0 0 auto; min-height: 44px; padding: 12px 18px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), var(--ui-glow);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.gate form button:hover { filter: brightness(1.08) }
.gate form button:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35) }
.gate form button:disabled { opacity: .6; cursor: progress }
.gate .g-msg { font-size: 12px; color: var(--ink-hi); min-height: 1em; margin: 10px 0 0 }
.gate .g-foot { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-dim); margin: 10px 0 0 }

/* CTA composition: completion first, then the next-book card carrying the
   primary button, then secondary actions. The card is one unbreakable group;
   it stacks (cover above text) when its
   text column would be squeezed, and only at the 200%-zoom extremes (a
   ~340px-tall viewport) do the cover and blurb drop out — the next book's
   name and the primary button are the only required content. */
.cta {
  position: relative; padding: clamp(14px, 4vw, 26px); font-family: var(--mono); color: var(--ink);
  border: 1px solid var(--ui-line); border-top-width: 3px; border-radius: 5px;
  background: var(--ui-panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), var(--ui-glow);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cta .c-eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin: 0; break-after: avoid }
.cta .c-title { font-family: 'Oswald', var(--face); font-weight: 500; font-size: clamp(1.3em, 8vw, 2em); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-hi); line-height: 1.05; margin: 7px 0 }
.cta .c-stat { font-size: 11px; letter-spacing: .08em; color: var(--ink-dim); margin: 0 }
.cta .card {
  display: flex; flex-wrap: wrap; gap: 14px; break-inside: avoid; border: 1px solid var(--ui-line);
  border-left: 3px solid var(--accent); border-radius: 4px; padding: 14px; margin: 16px 0;
  background: var(--ui-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.cta .card > div { flex: 1 1 175px; min-width: 0 }
.cta .card img { width: 84px; height: 118px; object-fit: cover; border-radius: 3px; background: #222 }
.cta .card .k { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent) }
.cta .card .n { font-family: 'Oswald', var(--face); font-weight: 500; font-size: 1.4em; letter-spacing: .06em; color: var(--ink-hi); line-height: 1.1; margin: 4px 0 6px }
.cta .card .b { font-family: var(--face); font-size: .8em; line-height: 1.45; margin: 0 0 10px }
.cta .row { display: flex; gap: 10px; flex-wrap: wrap }
.cta .sec {
  flex: 1 1 150px; min-height: 44px; padding: 11px; border: 1px solid var(--ui-line); border-radius: 4px;
  background: var(--control-face); color: var(--ink); font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 0 #010201;
  transition: transform .08s ease, color .12s ease, border-color .12s ease, box-shadow .08s ease;
}
.cta .sec:hover { color: var(--accent); border-color: var(--accent) }
.cta .sec:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55) }
.btn-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  min-height: 46px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent);
  color: var(--on-accent); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -3px 0 rgba(0, 0, 0, .25), var(--ui-glow);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  /* A required control must never be cut in half by a column break — when the
     stacked card outgrows a very short column the button moves whole. */
  break-inside: avoid;
}
.btn-cta:hover { filter: brightness(1.08) }
.btn-cta:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35) }
/* Full opacity, not .8: this is information-bearing ("direct"), and dimming
   --on-accent would needlessly reduce its contrast on the primary action. */
.btn-cta small { font-size: 9.5px; letter-spacing: .14em }
/* The stage is the viewport minus 2 x --pad-x (24px at Normal margins), so
   408px viewport == a 360px stage — the width at which the card's text
   column would be squeezed. It STACKS there (cover above text) and the block
   paginates; nothing is hidden, because a phone is the common case, not an
   extreme. A SHORT viewport is the other way the card runs out of room: at
   812x375 the column is only 319px tall, which the title and buttons blow
   past at a 28px reading size. */
@media (max-height: 460px) {
  /* A landscape phone at a 28px reading size: the title is what pushes the
     CTA past its column, so it is sized off the viewport height here. */
  .cta .c-title { font-size: clamp(16px, 5vh, 1.2em) }
  .cta .card { margin: 12px 0 8px }
  .cta .sec { font-size: 10px } /* one line per button, not two */
  /* Short viewports (landscape phones, zoomed phones): the blurb is the one
     non-required line that can push Get REENTRY off the CTA's first page. */
  .cta .card .b { display: none }
}
@media (max-width: 408px) {
  /* Stack, don't hide: column direction puts the cover above the text. The
     children need their flex-basis off the main axis (175px would become a
     175px HEIGHT floor in a column), hence flex: 0 1 auto / none. */
  .cta .card { gap: 10px; padding: 12px; margin: 12px 0; flex-direction: column }
  .cta .card > div { flex: 0 1 auto }
  .cta .card img { flex: none }
  .cta .c-title { margin: 6px 0 }
  .cta .sec { flex: 1 1 0; font-size: 10px; padding: 11px 8px } /* one row, not two */
}
/* The 200%-zoom extremes only (a ~340px-tall CSS viewport): there is room for
   the next book's name and the primary button, and nothing else. */
@media (max-height: 340px) { .cta .card img, .cta .card .b { display: none } }

/* A 320px phone at browser zoom 200% exposes only ~160 CSS pixels. Keep the
   required CTA control narrower than the 112px reading column so it cannot
   straddle two generated pages. Completion stats and secondary actions still
   paginate normally; only decorative/detail copy is compacted here. */
@media (max-width: 200px) {
  .gate-card, .cta { padding: 7px }
  .gate .g-foot { font-size: 8.5px; letter-spacing: 0; line-height: 1.4 }
  .gate input { padding: 8px; font-size: 13px }
  .gate form button { width: 100%; padding: 10px 6px }
  .cta .c-eyebrow { font-size: 8px; letter-spacing: .08em }
  .cta .c-title { font-size: 14px; letter-spacing: .025em; margin: 4px 0 }
  .cta .c-stat { display: none }
  .cta .card { width: 100%; min-width: 0; gap: 4px; margin: 7px 0; padding: 6px; border-left-width: 2px }
  .cta .card > div { width: 100%; max-width: 100%; min-width: 0 }
  .cta .card .k { font-size: 8px; letter-spacing: .08em; overflow-wrap: anywhere }
  .cta .card .n { font-size: 13px; letter-spacing: .025em; margin: 2px 0 4px }
  .btn-cta {
    width: 100%; min-width: 0; padding: 8px 5px; gap: 2px; flex-direction: column;
    align-items: flex-start; font-size: 9px; letter-spacing: .02em; overflow-wrap: anywhere;
  }
  .btn-cta small { font-size: 7.5px; letter-spacing: .06em }
}

/* -------------------------------------------- dim layers + standing hints */
.dim { position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; z-index: 3 }
/* The 8% chrome dim is a SEPARATE layer from the reader's Dim preference. */
.chromedim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2; transition: opacity .25s }
.rig.chrome .chromedim, .rig.coach .chromedim { opacity: .08 }
.hint {
  position: absolute; left: 0; right: 0; bottom: calc(6px + var(--safe-b)); margin: 0; text-align: center;
  font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); pointer-events: none; z-index: 4;
}
.rig.chrome .hint, .rig.coach .hint { opacity: 0 }
/* The chip lives INSIDE the stage's top padding band (--pad-y), so it never
   overlaps the first line of prose: 4px from the top and 22px tall painted,
   with the usual transparent >=44x44 hit overlay doing the touch target. */
.ret {
  position: absolute; left: 12px; top: calc(4px + var(--safe-t)); z-index: 12;
  padding: 0 8px; border: 1px solid var(--ui-line); border-radius: 3px; background: var(--bar);
  color: var(--bar-ink); font-family: var(--mono); font-size: 10px; line-height: 20px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.ret::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 44px; height: 44px; width: 100%;
}
/* The contextual return chip shares the top edge with the revealed strip.
   Keep it available in the resting reading state, but remove it from focus
   and paint while chrome/coach owns that edge. */
.rig.chrome .ret, .rig.coach .ret { opacity: 0; visibility: hidden; pointer-events: none }
.mark {
  position: absolute; top: calc(10px + var(--safe-t)); right: 14px; z-index: 12; margin: 0;
  font-size: 10px; letter-spacing: .2em; color: var(--ui-accent); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.mark.on { opacity: 1 }
.toast {
  position: absolute; left: 50%; bottom: calc(30px + var(--safe-b)); transform: translate(-50%, 10px);
  opacity: 0; pointer-events: none; z-index: 15; margin: 0; max-width: 84%;
  padding: 8px 14px; border: 1px solid var(--ui-line); border-radius: 4px; background: var(--bar);
  color: var(--bar-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .2s, transform .2s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0) }

/* ------------------------------- chrome overlays: strip (top) + deck (low) */
.strip, .deck {
  position: absolute; left: 0; right: 0; z-index: 10; background: var(--bar); color: var(--bar-ink);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.rig.chrome .strip, .rig.chrome .deck, .rig.coach .strip, .rig.coach .deck { opacity: 1; pointer-events: auto }
.rig.fading .strip, .rig.fading .deck { opacity: 0; pointer-events: none; transition: opacity 1.2s ease }
.strip[inert], .deck[inert] { pointer-events: none }
.strip {
  top: 0; padding: calc(6px + var(--safe-t)) 6px 6px; display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--ui-line); box-shadow: 0 10px 24px rgba(0, 0, 0, .46);
}
.strip .s-mid { min-width: 0; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35 }
.strip .s-sub {
  grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bar-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip .s-mid b {
  display: block; font-family: 'Oswald', var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; color: var(--bar-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-title-book { color: var(--bar-ink) }
.s-title-sep { padding: 0 .5em; color: var(--bar-dim) }
.s-title-context { color: var(--bar-hi) }
.strip .s-sub .preview { color: var(--bar-hi) }
.strip .icons {
  display: flex; flex: none; gap: 1px; padding: 2px; border: 1px solid var(--ui-line-soft);
  border-radius: 5px; background: rgba(255, 255, 255, .025);
}
.strip .s-notice {
  grid-column: 1 / -1; margin: 6px 0 2px; font-size: 11px; line-height: 1.4; letter-spacing: .02em;
  color: var(--bar-hi); text-align: center;
}
.ib {
  width: 44px; height: 44px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--bar-ink);
  font-size: 15px; cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: transform .08s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .08s ease;
}
.ib.aa { font-family: 'Literata', serif }
.ib:hover, .ib.active {
  border-color: var(--ui-line); background: rgba(93, 255, 139, .1); color: var(--bar-hi);
  box-shadow: inset 0 0 10px rgba(93, 255, 139, .07);
}
:root.theme-himd .ib:hover, :root.theme-himd .ib.active {
  background: rgba(143, 180, 255, .1); box-shadow: inset 0 0 10px rgba(143, 180, 255, .07);
}
.ib:active { transform: translateY(2px); background: var(--ui-panel-2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62) }
.strip button:focus-visible, .deck button:focus-visible, .sheet button:focus-visible,
.sheet input:focus-visible, .sheet a:focus-visible, .coach button:focus-visible {
  outline-color: var(--ui-accent);
}
.deck {
  bottom: 0; padding: 5px 10px calc(8px + var(--safe-b)); border-top: 1px solid var(--ui-line);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.drow { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px }
.drow .d-title {
  margin: 0; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bar-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scrub {
  position: relative; margin: 3px 0; height: 44px; border: 1px solid var(--ui-line-soft); border-radius: 3px;
  background: var(--ui-panel); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.scrub input {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 2;
}
.scrub input::-webkit-slider-runnable-track { height: 5px; margin-top: 18px; background: #010201; border: 1px solid var(--ui-line); border-radius: 1px }
.scrub input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 20px; margin-top: -9px; border-radius: 3px;
  background: var(--control-face); border: 1px solid var(--ui-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -3px 0 rgba(0, 0, 0, .45), 0 0 0 3px var(--ui-bg), var(--ui-glow);
}
.scrub input::-moz-range-track { height: 5px; background: #010201; border: 1px solid var(--ui-line); border-radius: 1px }
.scrub input::-moz-range-thumb { width: 22px; height: 20px; border-radius: 3px; background: #151c17; border: 1px solid var(--ui-accent); box-shadow: var(--ui-glow) }
.scrub .fill { position: absolute; left: 0; top: 19px; height: 5px; background: var(--ui-accent); border-radius: 1px; pointer-events: none; z-index: 1; box-shadow: var(--ui-glow) }
.scrub .dot { position: absolute; top: 17px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--ui-ink); border: 2px solid var(--ui-bg); pointer-events: none; z-index: 3; box-shadow: 0 0 0 1px var(--ui-accent) }
.scrub .ticks { position: absolute; left: 0; right: 0; top: 29px; height: 7px; pointer-events: none }
.scrub .ticks i { position: absolute; top: 0; width: 1px; height: 7px; background: var(--ui-muted); opacity: .82 }
.readout { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bar-dim) }
.readout b { color: var(--bar-hi); font-weight: 700 }
.readout .sp { flex: 1 }
.sw {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-line); border-radius: 3px;
  background: var(--control-face); color: var(--chrome-metal); font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .42), 0 2px 3px rgba(0, 0, 0, .6);
  transition: transform .08s ease, color .12s ease, box-shadow .08s ease;
}
.sw.listen { color: var(--bar-hi) }
.sw:hover { color: var(--bar-hi) }
.sw:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62) }

@media (max-width: 520px) {
  .strip { gap: 2px }
  #sTitle:has(.s-title-context:not([hidden])) .s-title-book,
  #sTitle:has(.s-title-context:not([hidden])) .s-title-sep { display: none }
  .s-title-context { display: block; overflow: hidden; text-overflow: ellipsis }
}

/* ------------------------------------------------ coach frame (first run) */
.coach {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center;
  padding: calc(82px + var(--safe-t)) 8px calc(154px + var(--safe-b));
  background: rgba(0, 0, 0, .7); color: var(--ui-ink); font-family: var(--mono); text-align: center;
  transition: opacity .4s;
}
.coach-card {
  --accent: var(--ui-accent); --on-accent: var(--ui-on-accent);
  width: min(100%, 580px); max-height: 100%; min-height: 0; padding: clamp(10px, 3vw, 16px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 9px;
  border: 1px solid var(--ui-line); border-top: 3px solid var(--ui-accent); border-radius: 5px;
  background: var(--ui-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 18px 45px rgba(0, 0, 0, .7), var(--ui-glow);
  overflow: visible;
}
.coach-head {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center;
  padding-bottom: 7px; border-bottom: 1px solid var(--ui-line-soft); text-align: left;
}
.coach-kicker, .coach-status { margin: 0; font: 700 9px/1.2 var(--mono); letter-spacing: .16em }
.coach-kicker { color: var(--ui-accent) }
.coach-status { color: var(--ui-muted); text-align: right }
/* #coachTitle intentionally retains .sr as a stable markup contract. Within
   the opaque coach card it is a real visible heading, so undo every clipping
   property supplied by the generic visually-hidden utility. */
.coach-card .coach-title {
  position: static; grid-column: 1 / -1; width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none; white-space: normal; display: block; margin: 2px 0 0;
  color: var(--ui-ink); font: 500 clamp(16px, 4.5vw, 22px)/1.05 'Oswald', var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.coach-grid {
  min-height: 0; display: grid; grid-template-columns: 30% 40% 30%; align-items: stretch; gap: 5px;
}
.cz {
  min-width: 0; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--ui-line-soft); background: var(--ui-panel);
}
.cz .cz-in { width: 100%; padding: 7px 5px; max-width: 100% }
.cz .g { display: block; font-size: clamp(16px, 5vw, 23px); line-height: 1; color: var(--ui-accent) }
.cz b { display: block; font-size: 11px; letter-spacing: .2em; color: var(--ui-accent); text-transform: uppercase }
.cz small { display: block; font-size: 9.5px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-ink) }
.cz em { display: block; font-style: normal; font-size: 9px; line-height: 1.25; letter-spacing: .06em; margin-top: 5px; color: var(--ui-muted) }
.coach-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px }
.cnote {
  margin: 0; padding: 5px 6px; border-left: 2px solid var(--ui-accent); background: var(--ui-panel);
  font-size: 9px; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted); text-align: left;
}
.coach .btn-start { justify-self: center; margin: 0; min-width: min(100%, 220px) }
.rig.coach .disc .btn-start { visibility: hidden }

@media (max-width: 420px) and (min-height: 521px) {
  .coach-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto }
  .coach-grid .cz:nth-child(2) { grid-column: 1 / -1; grid-row: 1 }
  .coach-grid .cz:first-child { grid-column: 1; grid-row: 2 }
  .coach-grid .cz:last-child { grid-column: 2; grid-row: 2 }
  .cz { min-height: 54px }
  .cz .g { display: inline; margin-right: 4px; font-size: 15px }
  .cz b { display: inline; font-size: 10px }
}
/* Landscape phones and deep zoom do not have enough height between the two
   demonstrated bars. The self-contained card comes above them in this one
   state, so its labels and START action never collide with either control. */
@media (max-height: 520px) {
  .coach { z-index: 11; padding: 6px; background: rgba(0, 0, 0, .7) }
  .coach-card { width: min(100%, 680px); padding: 8px; gap: 4px; grid-template-rows: auto auto auto auto }
  .coach-head { grid-template-columns: auto 1fr auto; padding-bottom: 3px }
  .coach-card .coach-title { grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; text-align: center }
  .coach-kicker, .coach-status { font-size: 8px; letter-spacing: .1em }
  .coach-grid { grid-template-columns: 1fr 1.2fr 1fr; gap: 3px }
  .cz { min-height: 46px }
  .cz .g { font-size: 14px }
  .cz b { font-size: 9px }
  .cz small, .cz em { font-size: 8px; margin-top: 2px }
  .coach-notes { gap: 3px }
  .cnote { padding: 3px 5px; font-size: 8px; line-height: 1.2 }
}

/* ---------------------------------------------------------------- sheets */
.backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .76); z-index: 20; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px) }
.sheet {
  --accent: var(--ui-accent); --on-accent: var(--ui-on-accent); --rule: var(--ui-line-soft);
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; z-index: 21; display: flex;
  flex-direction: column; border-radius: 8px 8px 0 0; background: var(--sheet);
  border: 1px solid var(--ui-line); border-top: 3px solid var(--ui-accent); border-bottom: 0; color: var(--bar-ink);
  box-shadow: 0 -18px 52px rgba(0, 0, 0, .72), var(--ui-glow);
}
@media (min-width: 900px) { .sheet { left: 10px; right: 10px } }
.sheet header {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px;
  border-bottom: 1px solid var(--ui-line); background: var(--ui-panel); color: var(--bar-hi);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.sheet header .sub2 { color: var(--bar-dim); font-size: 10.5px; letter-spacing: .06em }
.sheet header .x {
  margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--ui-line); border-radius: 3px;
  background: var(--control-face); color: var(--bar-ink); font-size: 14px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .42);
}
.sheet header .x:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62) }
.sheet .body {
  overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(16px + var(--safe-b));
  scrollbar-color: var(--ui-accent) var(--ui-bg); scrollbar-width: thin;
}
.sheet .sub { font-size: 11px; letter-spacing: .06em; color: var(--bar-dim); margin: 0 0 10px }
.sheet .sub.pad { margin-top: 14px }
.filters {
  display: flex; gap: 3px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--ui-line-soft);
  background: var(--ui-bg); border-radius: 4px;
}
.filters button, .chip {
  position: relative; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ui-line-soft); border-radius: 3px;
  background: var(--ui-panel); color: var(--bar-ink); font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: transform .08s ease, color .12s ease, background .12s ease, border-color .12s ease, box-shadow .08s ease;
}
/* Painted tile stays small; the hit area is a transparent >=44x44 overlay.
   (.ib, .sizectl button and .sheet header .x are already 44x44 painted.) */
.filters button::before, .chip::before, .swatch::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px; width: 100%; height: 100%;
}
.filters button { flex: 1 }
.filters button:hover, .chip:hover { color: var(--bar-hi); border-color: var(--ui-line) }
.filters button[aria-pressed=true], .chip[aria-pressed=true] {
  background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), var(--ui-glow);
}
.filters button:active, .chip:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .58) }
.chrow {
  display: grid; grid-template-columns: 28px 1fr auto 28px; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 10px 8px; border: 0; border-left: 2px solid transparent; border-bottom: 1px solid var(--ui-line-soft); background: transparent;
  color: var(--bar-ink); text-align: left; cursor: pointer; font-family: var(--mono); font-size: 12px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.chrow:hover { border-left-color: var(--ui-accent); background: rgba(255, 255, 255, .025) }
.chrow:active { transform: translateY(1px); background: var(--ui-panel-2) }
.chrow.cont { border: 1px solid var(--ui-accent); border-left-width: 3px; border-radius: 4px; margin-bottom: 10px; background: var(--ui-panel) }
.chrow .n { color: var(--bar-dim); font-size: 11px }
.chrow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chrow .t small { display: block; font-size: 10.5px; color: var(--bar-dim); letter-spacing: .06em; margin-top: 2px }
.chrow .m { font-size: 10.5px; color: var(--bar-dim); letter-spacing: .06em; text-align: right; white-space: nowrap }
.chrow .m b { display: block; color: var(--bar-ink); font-weight: 400 }
.chrow .k { text-align: center; font-size: 14px; color: var(--bar-hi) }
.chrow.cur .t { color: var(--bar-hi) }
.settings-group {
  margin: 0 0 12px; padding: 10px; border: 1px solid var(--ui-line-soft); border-left: 3px solid var(--ui-line);
  border-radius: 4px; background: var(--ui-panel);
}
.settings-group:last-child { margin-bottom: 0 }
.settings-group-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--bar-hi);
  font: 700 10px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.settings-group-title::after { content: ""; flex: 1; height: 1px; background: var(--ui-line) }
.slab {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0;
  padding: 7px 0; border-bottom: 1px solid var(--ui-line-soft);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bar-dim);
}
.settings-group .slab:last-of-type { border-bottom: 0 }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.chip { text-transform: none; letter-spacing: .04em; font-size: 12px }
.chip.fb { font-family: 'Literata', serif } .chip.fc { font-family: system-ui, sans-serif }
.chip.fm { font-family: var(--mono) } .chip.fh { font-family: 'Atkinson Hyperlegible', sans-serif }
.swatch {
  position: relative; width: 44px; height: 44px; padding: 0; border-radius: 3px; border: 1px solid var(--ui-line);
  cursor: pointer; font-size: 9.5px; letter-spacing: .04em; font-family: var(--mono);
  transition: transform .08s ease, outline-color .12s ease;
}
.swatch:active { transform: translateY(2px) }
.swatch[aria-pressed=true] { outline: 2px solid var(--ui-accent); outline-offset: 2px }
/* swatch paints (no style= attributes: the /read CSP forbids inline styles) */
.swatch.sw-auto { background: linear-gradient(90deg, #fbfaf7 50%, #17191c 50%); color: #17181a; text-align: left; padding-left: 5px }
.swatch.sw-light { background: #fbfaf7; color: #17181a }
.swatch.sw-sepia { background: #f3e9d2; color: #3e3122 }
.swatch.sw-green { background: #e3efe3; color: #1f2e22 }
.swatch.sw-dark { background: #04060a; color: #eef3e8 }
.swatch.sw-himd { background: #060a16; color: #8fb4ff }
.sizectl { display: flex; align-items: center; gap: 10px }
.sizectl button {
  position: relative; width: 44px; height: 44px; border: 1px solid var(--ui-line); border-radius: 3px;
  background: var(--control-face); color: var(--bar-ink); font-size: 14px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -3px 0 rgba(0, 0, 0, .42);
}
.sizectl button:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62) }
.sizectl output { min-width: 52px; text-align: center; font-size: 12px; color: var(--bar-hi) }
.slab input[type=range] { width: 100%; height: 44px; accent-color: var(--ui-accent) }
.preset {
  width: 100%; min-height: 44px; margin-top: 2px; border: 1px solid var(--ui-line); border-radius: 3px;
  background: var(--control-face); color: var(--bar-ink); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .4);
  transition: transform .08s ease, color .12s ease, border-color .12s ease, box-shadow .08s ease;
}
.preset:hover { color: var(--bar-hi); border-color: var(--ui-accent) }
.preset:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62) }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.menu { display: flex; flex-direction: column; gap: 8px }
.menu button, .menu a {
  display: block; width: 100%; min-height: 44px; padding: 12px; border: 1px solid var(--ui-line);
  border-radius: 3px; background: var(--control-face); color: var(--bar-ink); font-family: var(--mono);
  font-size: 12px; letter-spacing: .06em; text-align: left; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .4);
  transition: transform .08s ease, color .12s ease, border-color .12s ease, box-shadow .08s ease;
}
.menu button:hover, .menu a:hover { color: var(--bar-hi); border-color: var(--ui-accent) }
.menu button:active, .menu a:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .62) }
.menu p { margin: 0; padding: 12px; border: 1px dashed var(--ui-line); border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--bar-dim) }

@media (max-width: 480px) {
  .sheet { max-height: 92% }
  .sheet .body { padding-inline: 8px }
  .settings-group { padding: 9px 10px }
  .slab { grid-template-columns: 1fr; gap: 5px; padding-block: 8px }
  .slab > span { color: var(--bar-ink) }
  .filters { display: grid; grid-template-columns: 1fr 1fr }
  .chips { gap: 5px }
}
@media (max-width: 280px) { .row2 { grid-template-columns: 1fr } }
@media (max-height: 520px) { .sheet { max-height: 96% } }

/* ------------------------------------ mockup/demo bar (mock mode only) --- */
.demo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; height: 34px; display: flex; gap: 8px;
  align-items: center; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 0 10px;
  background: #1b1b1b; color: #bbb; font: 11px/1.4 var(--mono); border-top: 1px solid #333;
}
.demo b { color: #fff; letter-spacing: .14em }
.demo button { padding: 4px 8px; border: 1px solid #555; border-radius: 4px; background: #2a2a2a; color: #ddd; font: inherit; cursor: pointer }
.demo button[aria-pressed=true] { background: #2f4f8f; color: #fff; border-color: #2f4f8f }
.demo .ev { margin-left: auto; color: #9fe0b4; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
body.demo-on .rig { height: calc(100dvh - 34px) }
@media (min-width: 900px) {
  body.demo-on { padding-bottom: 58px }
  body.demo-on .rig { height: min(960px, calc(100dvh - 82px)) }
}