/* reader/folio.css — THE FOLIO template: a book, not a website. Pages that turn.
   Page box = 100svh + viewport-fit safe-areas; each chapter (.rd-sec) is an
   overflow:hidden multicol track (column-width = the page width — set in px by
   folio.js as --rd-colw; column-fill auto; height = the page box) paged by
   scrollLeft (see the mechanism note atop folio.js). Two-page spread with a
   spine gradient on wide screens INCLUDING landscape phones (standing rule:
   landscape phone = full desktop). Auto-hiding chrome keys off
   :root[data-rd-chrome]; ALL pagination styling keys off :root[data-rd-folio]
   (set by folio.js) — without JS the page degrades to a plain themed document.
   Consumes ONLY themes.css tokens (spec §A1). */

:root {
  --rdt-topbar: 56px;
  --rdt-runhead: 40px;
  --rdt-foot: 44px;
  --rdt-colgap: 64px;              /* page-to-page gutter = the spread's spine gap */
  --rd-folio-perpage: 1;           /* folio.js reads this — 2 = two-page spread */
  --rdt-pagemax: 37rem;            /* single-page box ≈ 30–34rem text + padding */
}
/* WAVE V3 — width-only spread breakpoint: two-page SPREAD at ≥800px (landscape
   phone 844w + desktop), SINGLE page below 800px (portrait phone). A spread
   needs real width; a 667px landscape phone gets the comfortable single page,
   not two cramped ~300px columns. */
@media (min-width: 800px) {
  :root { --rd-folio-perpage: 2; --rdt-pagemax: 78rem; }
}

/* ---------- top bar — auto-hiding chrome (tap center toggles) ---------- */
.rd-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--rdt-topbar); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0 0.8rem; padding-left: calc(0.8rem + env(safe-area-inset-left));
  padding-right: calc(0.8rem + env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--rd-rule);
  transition: transform 0.18s ease;
}
:root[data-rd-folio]:not([data-rd-chrome]) .rd-topbar { transform: translateY(-110%); }
.rd-topbar-left, .rd-topbar-right { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.rd-book { display: flex; flex-direction: column; min-width: 0; padding: 0 0.3rem; }
.rd-book-title {
  font-family: var(--rd-serif); font-style: italic; font-weight: 600; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.rd-book-author { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-iconbtn {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 0.45rem;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; font-family: inherit; font-size: 0.95rem;
}
.rd-iconbtn:hover { background: var(--rd-surface); }
.rd-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* controls v2: A− A+ live in the visible cluster on every template */
/* the whole-page progress bar is a scroll device — the Folio has folio numbers */
.rd-progress { display: none; }

/* ---------- the page box ---------- */
body.rd-body { overflow: hidden; }
:root:not([data-rd-folio]) body.rd-body { overflow: auto; }   /* no JS → plain document */
.rd-reading {
  position: fixed; top: 0; left: 0; right: 0;
  /* border-box so height:100svh INCLUDES the runhead/footer padding — without it
     (the reader ships no box-sizing reset) the padded content box spilled ~60px
     below the viewport and the last text line overlapped the page footer. */
  box-sizing: border-box;
  height: 100vh; height: 100svh;                               /* svh: iOS toolbar-stable */
  display: flex; justify-content: center;
  /* WAVE V3 — BOOK MARGINS: the page leaf floats clear of the running head
     (top) and the folio footer / docked player (bottom) with a breathing gap,
     and sits inset from the screen edges. Text NEVER touches the chrome. */
  padding: calc(var(--rdt-runhead) + env(safe-area-inset-top) + clamp(0.5rem, 2vh, 1.2rem))
           calc(clamp(1.1rem, 5vw, 2.4rem) + env(safe-area-inset-right))
           calc(var(--rdt-foot) + env(safe-area-inset-bottom) + clamp(0.5rem, 2vh, 1.2rem))
           calc(clamp(1.1rem, 5vw, 2.4rem) + env(safe-area-inset-left));
}
:root:not([data-rd-folio]) .rd-reading { position: static; height: auto; display: block; padding: 2rem 1rem; }
/* the player's mini bar shortens the page box; folio.js repaginates on the attr */
:root[data-rd-folio][data-rd-player-open] .rd-reading {
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}
.rd-article {
  position: relative; width: 100%; height: 100%;
  max-width: var(--rdt-pagemax);
  overflow: hidden;
  /* page-surface treatment: a 1px inner edge (spec §A1) */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
/* a whisper of paper grain over the page box — part of the spread's signature.
   Pure CSS (inline SVG feTurbulence data URI), soft-light so it reads in both
   polarities; high-contrast themes and forced colors switch it off. */
:root[data-rd-folio] .rd-article::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.028; mix-blend-mode: soft-light;
}
:root[data-reader-theme='hc-light'] .rd-article::after,
:root[data-reader-theme='hc-dark'] .rd-article::after { display: none; }
@media (forced-colors: active) { :root[data-rd-folio] .rd-article::after { display: none; } }
:root:not([data-rd-folio]) .rd-article { max-width: var(--rd-measure); margin: 0 auto; height: auto; overflow: visible; box-shadow: none; }

/* ---------- the track: one chapter = one multicol snap-track ---------- */
:root[data-rd-folio] .rd-sec {
  display: none;
  height: 100%; margin: 0;
  overflow: hidden;                                  /* scrollLeft-pageable, never user-panned */
  column-width: var(--rd-colw, 100vw);               /* folio.js sets the exact px */
  column-gap: var(--rdt-colgap);
  column-fill: auto;
  /* WAVE V3 — generous inner page margins so the text block feels inset like a
     real book page: comfortable head/foot + ~7% outer/inner side gutters
     (folio.js reads the resolved padding, so pagination adapts). On a spread the
     side padding is the outer margin; the column-gap is the spine (inner) margin. */
  padding: clamp(1.6rem, 4.5vh, 3.2rem) clamp(1.3rem, 7%, 3rem);
  box-sizing: border-box;
  touch-action: pan-y;                               /* the swipe is ours (pointer events) */
}
/* will-change: scroll-position promotes the track to a composited scroller so
   taps hit-test at the SCROLLED offset (WebKit mis-routes taps on a
   programmatically-scrollLeft'd overflow box without this) — the footnote
   markers inside the columns then reliably receive their clicks. */
:root[data-rd-folio] .rd-sec.rd-cur { display: block; will-change: scroll-position; }
:root[data-rd-folio] .rd-chapter-head { break-inside: avoid; }
:root[data-rd-folio] .rd-prose img { break-inside: avoid; max-height: 70vh; max-height: 70svh; }

/* chapter head — the ARC signature, opening the chapter's first page */
.rd-chapter-head { margin: 0 0 2rem; text-align: center; padding-top: clamp(1rem, 8vh, 4rem); }
.rd-chapter-eyebrow { text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.7rem; color: var(--accent); }
.rd-chapter-title {
  font-family: var(--rd-serif); font-weight: 600; font-size: clamp(1.7rem, 4.6vw, 2.4rem);
  line-height: 1.1; margin: 0.35rem 0 0.5rem; letter-spacing: -0.01em; text-wrap: balance;
}
.rd-chapter-rule { width: 64px; height: 2px; background: var(--accent); margin: 1.3rem auto 0; opacity: 0.8; border: none; }
.rd-chapter-rule::before { content: none; }

/* drop cap on each chapter's first paragraph (Book/Classic presets; Comfort turns caps off) */
:root:not([data-reader-font='comfort']) .rd-sec .rd-prose > p:first-of-type::first-letter {
  font-family: var(--rd-serif); float: left; font-size: 3.1em; line-height: 0.82;
  padding: 0.04em 0.08em 0 0; color: var(--accent); font-weight: 600;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  :root:not([data-reader-font='comfort']) .rd-sec .rd-prose > p:first-of-type::first-letter {
    float: none; padding: 0 0.08em 0 0; font-size: inherit; line-height: inherit;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
}

/* ---------- running head + folio footer (part of the page, not the chrome) ----------
   Print convention: verso (left page) carries the book title, recto (right
   page) the chapter title. Single page shows the book title only; on a spread
   each span centers over its own page half (folio.js paints the chapter). */
.rd-runhead {
  position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; height: var(--rdt-runhead);
  display: none; align-items: center; justify-content: center; z-index: 30; pointer-events: none;
  font-family: var(--rd-serif); font-style: italic; font-size: 0.78rem;
  letter-spacing: 0.08em; color: color-mix(in srgb, var(--muted) 72%, transparent);
  white-space: nowrap; padding: 0 3rem;
}
.rd-runhead-book, .rd-runhead-ch {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.rd-runhead-ch { display: none; }
.rd-pagefoot {
  position: fixed; bottom: env(safe-area-inset-bottom); left: 0; right: 0; height: var(--rdt-foot);
  display: none; align-items: center; justify-content: center; z-index: 30;
}
:root[data-rd-folio] .rd-runhead, :root[data-rd-folio] .rd-pagefoot { display: flex; }
:root[data-rd-folio][data-rd-player-open] .rd-pagefoot { display: none; }   /* the mini bar owns that band */
/* spread: one running head per page half, spanning the page box */
@media (min-width: 800px) {
  :root[data-rd-folio] .rd-runhead {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--rdt-colgap); align-items: center;
    left: 50%; transform: translateX(-50%); width: min(var(--rdt-pagemax), 100vw); right: auto;
    padding: 0 clamp(1.1rem, 3.5vw, 2.4rem); box-sizing: border-box;
  }
  :root[data-rd-folio] .rd-runhead-ch { display: block; }
}
.rd-pagefoot-btn {
  font-family: var(--rd-sans); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--muted); font-variant-numeric: tabular-nums;
  background: transparent; border: none; cursor: pointer; padding: 0.4rem 0.9rem;
  border-radius: 999px; white-space: nowrap;
}
.rd-pagefoot-btn:hover { color: var(--ink); background: var(--rd-surface); }
.rd-pagefoot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- spine shadow — spreads only ----------
   The book cracked open: soft wings falling into a crisp center crease
   (the same fold language as the ARC rails, turned vertical). */
.rd-spine {
  display: none; position: fixed; z-index: 31; pointer-events: none;
  top: calc(var(--rdt-runhead) + env(safe-area-inset-top));
  bottom: calc(var(--rdt-foot) + env(safe-area-inset-bottom));
  left: 50%; width: 72px; transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--ink) 5%, transparent) 40%,
    color-mix(in srgb, var(--ink) 15%, transparent) 49.4%,
    color-mix(in srgb, var(--ink) 22%, transparent) 50%,
    color-mix(in srgb, var(--ink) 15%, transparent) 50.6%,
    color-mix(in srgb, var(--ink) 5%, transparent) 60%,
    transparent);
}
@media (min-width: 800px) {
  :root[data-rd-folio] .rd-spine { display: block; }
}

/* ---------- flip affordance: the "flip switch" (remake research §5) ----------
   Hovering a turn zone (the same 30% edges the click math uses — folio.js
   paints data-rd-flipcue from the shared flipZone()) fades in a soft gradient
   scrim + a chevron that eases toward the edge: the cue shows exactly WHERE a
   click flips. pointer-events: none throughout — the cue is a teaching device,
   never the mechanism; clicks land on the document as always. Hover-capable
   pointers only; touch devices get the one-time coach overlay instead. */
.rd-flip { display: none; }
@media (hover: hover) and (pointer: fine) {
  :root[data-rd-folio] .rd-flip {
    position: fixed; z-index: 32; pointer-events: none;
    top: calc(var(--rdt-runhead) + env(safe-area-inset-top));
    bottom: calc(var(--rdt-foot) + env(safe-area-inset-bottom));
    width: 30vw;
    display: flex; align-items: center;
    color: var(--muted);
    opacity: 0; transition: opacity 0.22s ease;
  }
  :root[data-rd-folio] .rd-flip svg { transition: transform 0.22s ease; }
  .rd-flip-left {
    left: 0; justify-content: flex-start; padding-left: 14px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent), color-mix(in srgb, var(--ink) 3%, transparent) 55%, transparent 78%);
  }
  .rd-flip-right {
    right: 0; justify-content: flex-end; padding-right: 14px;
    background: linear-gradient(270deg, color-mix(in srgb, var(--ink) 8%, transparent), color-mix(in srgb, var(--ink) 3%, transparent) 55%, transparent 78%);
  }
  :root[data-rd-flipcue='left'] .rd-flip-left, :root[data-rd-flipcue='right'] .rd-flip-right { opacity: 1; }
  :root[data-rd-flipcue='left'] .rd-flip-left svg { transform: translateX(-4px); }
  :root[data-rd-flipcue='right'] .rd-flip-right svg { transform: translateX(4px); }
  /* the whole zone is clickable — say so */
  :root[data-rd-flipcue] body.rd-body { cursor: pointer; }
}

/* ---------- one-time touch coach: the Kindle-style zone diagram ----------
   Shown once on hover-less devices (folio.js keys off localStorage), dismissed
   forever by the first tap. The overlay owns that tap — it never turns a page. */
.rd-coach {
  /* start BELOW the top chrome so the topbar controls (Listen, Aa, theme) stay
     tappable while the one-time flip hint teaches the reading area */
  position: fixed; top: var(--rdt-topbar, 56px); left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 30% 1fr 30%; align-items: stretch;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding-bottom: calc(3.4rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.rd-coach[hidden] { display: none; }
.rd-coach-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--ink); font-family: var(--rd-sans); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.rd-coach-zone + .rd-coach-zone { border-left: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.rd-coach-menu { color: var(--muted); }
.rd-coach-hint {
  position: absolute; left: 0; right: 0; bottom: calc(1.1rem + env(safe-area-inset-bottom));
  margin: 0; text-align: center; color: var(--muted);
  font-family: var(--rd-serif); font-style: italic; font-size: 0.88rem;
}

/* ---------- bottom chrome bar: chapter scrub (auto-hiding with the top bar) ---------- */
.rd-fbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  padding-left: calc(0.8rem + env(safe-area-inset-left));
  padding-right: calc(0.8rem + env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--rd-rule);
}
:root[data-rd-folio][data-rd-chrome] .rd-fbar { display: flex; }
:root[data-rd-folio][data-rd-player-open] .rd-fbar { display: none; }   /* the player docks there */
.rd-fbar-ch {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink);
  cursor: pointer; font-family: inherit; font-size: 1.15rem; line-height: 1;
}
.rd-fbar-ch:hover { background: var(--rd-surface); }
.rd-fbar-ch:disabled { opacity: 0.3; cursor: default; background: transparent; }
.rd-fbar-ch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rd-fbar-mid { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.rd-fbar-label {
  font-family: var(--rd-sans); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.rd-fbar-scrub {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 16px;
  margin: 0; background: transparent; cursor: pointer;
}
.rd-fbar-scrub::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.rd-fbar-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5.5px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--rd-dim) 60%, transparent);
}
.rd-fbar-scrub::-moz-range-track { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.rd-fbar-scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.rd-fbar-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- gated chapters: the gate renders as a page in the flow ---------- */
.rd-gatepage[hidden] { display: none; }
:root[data-rd-folio] .rd-gatepage:not([hidden]) {
  break-before: column; height: 100%;
  display: grid; place-items: center; text-align: center;
}
.rd-gatepage .gate-slot[hidden] { display: none; }

/* ---------- TOC — a panel that SPAWNS UNDER the contents button (reader-core.js
   anchors + viewport-clamps it via --rd-rail-mode:anchor); a full-height left
   drawer on portrait phones. The centered values below are the no-JS fallback. ---------- */
.rd-rail {
  --rd-rail-mode: anchor;
  position: fixed; top: 8vh; left: 50%; z-index: 46;
  transform: translateX(-50%) translateY(6px);
  width: min(460px, calc(100vw - 32px)); max-height: 76vh;
  background: var(--bg); border: 1px solid var(--rd-rule); border-radius: 16px;
  padding: 0.5rem 0.5rem 0.9rem;
  box-shadow: 0 24px 70px -24px color-mix(in srgb, var(--rd-dim) 90%, transparent);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  /* razor-thin scrollbar (standing rule) */
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
:root[data-rd-rail='open'] .rd-rail { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(-50%); }
/* portrait phone: full-height left drawer with a dismiss scrim */
@media (max-width: 639px), (max-width: 899px) and (orientation: portrait) {
  .rd-rail {
    --rd-rail-mode: drawer;
    top: 0; bottom: 0; left: 0; right: auto; height: 100%;
    transform: translateX(-104%); width: min(320px, 86vw); max-height: none;
    border-radius: 0; border: none; border-right: 1px solid var(--rd-rule);
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0.18s;
  }
  :root[data-rd-rail='open'] .rd-rail { transform: none; }
  :root[data-rd-rail='open'] body::after {
    content: ''; position: fixed; inset: 0; z-index: 45;
    background: color-mix(in srgb, var(--ink) 24%, transparent);
  }
}
.rd-rail:hover, .rd-rail:focus-within { scrollbar-color: color-mix(in srgb, var(--rd-dim) 60%, transparent) transparent; }
.rd-rail::-webkit-scrollbar { width: 12px; background: transparent; }
.rd-rail::-webkit-scrollbar-track, .rd-rail::-webkit-scrollbar-corner { background: transparent; border: 0; }
.rd-rail::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.rd-rail::-webkit-scrollbar-thumb {
  background-color: transparent; background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px; min-height: 40px;
}
.rd-rail:hover::-webkit-scrollbar-thumb, .rd-rail:focus-within::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--rd-dim) 60%, transparent);
}
@media (hover: none) {
  .rd-rail { scrollbar-width: auto; scrollbar-color: auto; scrollbar-gutter: auto; }
  .rd-rail::-webkit-scrollbar { width: 0; height: 0; }
}
.rd-rail-head {
  padding: 0.5rem 0.6rem 0.6rem; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); border-bottom: 1px solid var(--rd-rule); margin-bottom: 0.4rem;
}
.rd-toc-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border: none; border-radius: 9px; background: transparent;
  color: var(--ink); cursor: pointer; font-family: inherit; font-size: 0.9rem; line-height: 1.25;
}
.rd-toc-item:hover { background: var(--rd-surface); }
.rd-toc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rd-toc-item.active { background: var(--rd-surface); box-shadow: inset 2px 0 0 var(--accent); }
.rd-toc-num {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--rd-rule);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: var(--muted);
}
.rd-toc-item.active .rd-toc-num { border-color: var(--accent); color: var(--accent); }
.rd-toc-kind-frontmatter .rd-toc-num, .rd-toc-kind-backmatter .rd-toc-num { border: none; }
.rd-toc-label { flex: 1; min-width: 0; }
.rd-toc-min { flex: none; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* per-chapter page counts + the reader's current position (folio.js paints
   them when the overlay opens — counts are honest, measured in this geometry) */
.rd-toc-pages { flex: none; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-toc-item.active .rd-toc-pages { color: var(--accent); font-weight: 600; }

/* ---------- settings popover (Aa — the Folio's 4 controls) ---------- */
.rd-pop {
  position: fixed; top: calc(var(--rdt-topbar) + env(safe-area-inset-top) + 8px); right: 12px; z-index: 70;
  width: min(340px, calc(100vw - 24px)); max-height: 72vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--rd-rule); border-radius: 14px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 14px 40px -16px color-mix(in srgb, var(--rd-dim) 80%, transparent);
}
.rd-pop[hidden] { display: none; }

/* ---------- empty book ---------- */
.rd-empty { text-align: center; color: var(--muted); padding: 18vh 1rem; font-family: var(--rd-serif); font-style: italic; }

/* ---------- audiobook: mini bar docked above the bottom safe-area; the sheet
   rises as a full bottom sheet (drag the bar up, or the ▲ button) ---------- */
.rd-player { z-index: 55; }
/* cover thumb: no cover art on this surface yet — a warm book-dot stands in */
.rdp-info { position: relative; padding-left: 40px; }
.rdp-info::before {
  content: ''; position: absolute; left: 4px; top: 50%; width: 28px; height: 28px;
  transform: translateY(-50%); border-radius: 7px;
  background: radial-gradient(circle at 30% 28%,
    color-mix(in srgb, var(--accent) 55%, var(--bg)),
    color-mix(in srgb, var(--accent) 22%, var(--bg)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.rdp-sheet {
  position: fixed; left: 10px; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom));
  width: auto; margin-bottom: 0; max-height: min(66vh, 66svh);
  border-radius: 18px;
}

/* ---------- footnotes: the page-bottom band (remake research §3) ----------
   Popovers fight the page metaphor — on the Folio the tapped note surfaces as
   a print-style band at the page's foot: top rule, small serif, page background.
   notes.js drives it (sheet mode on this template); a page turn retires it. */
:root[data-rd-folio] .rd-fnpop[data-rd-mode='sheet'] {
  bottom: calc(var(--rdt-foot) + env(safe-area-inset-bottom, 0px) + 4px);
  width: min(var(--rdt-pagemax), calc(100vw - 32px));
  max-height: 34vh; max-height: 34svh;
  background: var(--bg);
  border: none; border-top: 2px solid var(--rd-rule); border-radius: 0;
  box-shadow: none;
  padding: 0.8rem 0.4rem 0.5rem;
  font-size: 0.82rem;
}
/* while the mini bar docks at the bottom, the band sits above it */
:root[data-rd-folio][data-rd-player-open] .rd-fnpop[data-rd-mode='sheet'] {
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}
/* the endnotes block paginates as book pages at the chapter's end — keep each
   note whole on its page */
:root[data-rd-folio] .rd-note { break-inside: avoid; }
:root[data-rd-folio] .rd-notes { break-before: column; }

/* ============================================================================
   SPREAD — the print-exact reading variant (BM-028). A folio flag, not a new
   template: same pagination, but the page leaves take the book's TRIM aspect
   (--rd-trim = width/height, set by the SSR from the colophon), the running head
   and folio numbers move INSIDE the page box (part of the page, print-true), and
   mirrored inner/outer margins scale with the leaf. Portrait phones fall back to
   a single page via folio's own <800px single-page rule (standing rule:
   landscape phone = full desktop). Everything keys off :root[data-rd-spread]
   AND [data-rd-folio], so without JS it stays a plain document. ==========  */
:root[data-rd-spread][data-rd-folio] .rd-reading {
  container-type: size;                 /* the page box fits this content box (cqw/cqh) */
  align-items: center;
  /* the running head + folio numbers live inside the page now, so the reading
     area only needs a small breathing inset around the leaf (+ safe areas) */
  padding: calc(env(safe-area-inset-top) + clamp(0.8rem, 3vh, 1.6rem))
           calc(env(safe-area-inset-right) + clamp(0.8rem, 3vw, 2rem))
           calc(env(safe-area-inset-bottom) + clamp(0.8rem, 3vh, 1.6rem))
           calc(env(safe-area-inset-left) + clamp(0.8rem, 3vw, 2rem));
}
/* the page leaf: TRIM aspect, fit to whichever of width/height binds (min()),
   centred with letterbox gutters. One page below the spread breakpoint, two above. */
:root[data-rd-spread][data-rd-folio] .rd-article {
  --rd-spread-pages: 1;
  --rd-spread-ar: calc(var(--rd-trim, 0.667) * var(--rd-spread-pages));
  width: auto;
  height: min(100cqh, calc(100cqw / var(--rd-spread-ar)));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--rd-spread-ar);
}
@media (min-width: 800px) {
  :root[data-rd-spread][data-rd-folio] .rd-article { --rd-spread-pages: 2; }
}
/* mirrored margins: side padding = the OUTER margin of each page, the column gap
   = the two INNER (spine-side) margins — both scaled to the leaf so the geometry
   reads as print at any size (folio.js reads the resolved px, so it paginates to it). */
:root[data-rd-spread][data-rd-folio] .rd-sec {
  padding: clamp(2.2rem, 6%, 3.4rem) clamp(1.4rem, 7.5%, 3rem);
  column-gap: clamp(2rem, 9%, 4.2rem);
}
/* running head INSIDE the leaf — verso book title / recto chapter, in the top
   margin. On a spread each half centres over its page; single page shows the
   book title only (folio's .rd-runhead-ch stays display:none below 800px). */
:root[data-rd-spread][data-rd-folio] .rd-article .rd-runhead {
  position: absolute; top: 0; left: 0; right: 0; bottom: auto;
  transform: none; width: auto; z-index: 2;
  height: clamp(1.9rem, 5%, 3rem);
  padding: 0 clamp(1.4rem, 7.5%, 3rem);
}
@media (min-width: 800px) {
  :root[data-rd-spread][data-rd-folio] .rd-article .rd-runhead {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 9%, 4.2rem);
  }
  :root[data-rd-spread][data-rd-folio] .rd-article .rd-runhead-ch { display: block; }
}
/* spine crease down the centre of the open book (spreads only), inside the leaf */
:root[data-rd-spread][data-rd-folio] .rd-article .rd-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1;
}
@media (min-width: 800px) {
  :root[data-rd-spread][data-rd-folio] .rd-article .rd-spine { display: block; }
}
/* folio numbers in the outer-bottom margin — verso bottom-left, recto bottom-right
   on a spread; a single centred number below the spread breakpoint. */
.rd-foliobar { display: none; }
:root[data-rd-spread][data-rd-folio] .rd-article .rd-foliobar {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: clamp(1.9rem, 5%, 3rem);
  align-items: center; justify-content: center; gap: 1rem;
  padding: 0 clamp(1.4rem, 7.5%, 3rem);
  pointer-events: none;
  font-family: var(--rd-serif); font-size: 0.82rem;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-variant-numeric: tabular-nums;
}
.rd-folionum { display: none; }
:root[data-rd-spread][data-rd-folio] .rd-folio-verso { display: inline-block; }
@media (min-width: 800px) {
  :root[data-rd-spread][data-rd-folio] .rd-article .rd-foliobar { justify-content: space-between; }
  :root[data-rd-spread][data-rd-folio] .rd-folio-recto { display: inline-block; }
  :root[data-rd-spread][data-rd-folio] .rd-folio-recto[hidden] { display: none; }
}
/* the centre metric toggle is replaced by the printed folio numbers on the spread */
:root[data-rd-spread][data-rd-folio] .rd-pagefoot { display: none; }