/* ---------- the Reader ----------
   One sheet, one room. Two kinds of colour meet in this file and they are not
   the same kind:

   THE FRAME is the app. It uses the house tokens (--panel, --edge, --ink,
   --muted, --accent, --shad) and follows the theme like every other room.

   THE PAGE is the book. Mark's ruling, 2026-08-20: the reading surface is
   independent of the system, because a reader needs options. So the paper and
   its ink are --rd-page-* , answered by the three paper blocks in tokens.css
   and chosen with data-paper on the room. The app theme does not reach inside
   the page, and the page does not leak out into the app.

   NOT A COLOUR IS TYPED IN THIS FILE. tokens.css is the only home for one
   (the theme law), and the colour ratchet counts every raw value outside it.

   GEOMETRY MIRROR: the ch column widths below mirror GEOMETRY in
   lib/reader.js. The pair is deliberate until the sheet is generated from
   those numbers. Change one, change both. Both ends say so. */

.rd { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rd-stage { flex: 1; min-height: 0; overflow: auto; }

/* ---------- the footer, and it is the frame, not the page ---------- */
.rd-foot {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 8px 0 10px; border-top: var(--bd) solid var(--edge);
  font-size: var(--t-tiny); color: var(--muted); letter-spacing: var(--ls-label);
}
.rd-turn {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: var(--t-sub); line-height: 1; padding: 2px 10px; border-radius: var(--r-sm);
}
.rd-turn:hover { color: var(--accent); background: var(--inset); }
.rd-where { min-width: 12ch; text-align: center; }

/* THE SIZE DIAL REACHES EVERY SURFACE. It used to reach one: the Kindle read
   --rd-size and the other three carried fixed sizes of their own, so a reader
   who pressed A+ on a book, a sheet or the source watched nothing happen.
   Mark found it the only way it could be found, by trying to read a page
   (2026-08-20). Pagination is measured, so bigger type simply means fewer
   words on a page rather than a clipped one.

   ---------- the manuscript: the source, verbatim ----------
   The gutter always matches the file, so a wrapped continuation never takes
   a number and the markers stay visible. It is the source. */
.rd-manuscript { padding: 26px 0 40vh; }
.rd-m-sheet {
  width: min(78ch, 94%); margin: 0 auto; padding: 26px 0;
  background: var(--rd-page-bg); color: var(--rd-page-ink);
  border: var(--bd) solid var(--edge); border-radius: var(--r-md);
  font-family: var(--rd-face, var(--font-ui)); font-size: var(--rd-size, 17px);
  line-height: var(--rd-leading, var(--lh-read));
}
.rd-m-line { display: flex; }
.rd-m-n {
  width: 6ch; flex: 0 0 6ch; text-align: right; padding-right: 2ch;
  opacity: .45; user-select: none; font-size: var(--t-tiny); line-height: inherit;
}
.rd-m-t { flex: 1; white-space: pre-wrap; word-break: break-word; padding-right: 3ch; }
.rd-m-h1 .rd-m-t { font-weight: var(--w-bold); }
.rd-m-h2 .rd-m-t { font-weight: var(--w-bold); opacity: .85; }
.rd-m-hr .rd-m-t { opacity: .5; }

/* ---------- the PDF: fixed US-Letter sheets, stacked ---------- */
.rd-pdf { padding: 26px 0 40vh; }
.rd-sheet {
  position: relative; overflow: hidden;
  width: min(720px, 92%); aspect-ratio: 8.5 / 11; margin: 0 auto 28px;
  background: var(--rd-page-bg); color: var(--rd-page-ink);
  box-shadow: var(--sh-card); padding: 9% 10%;
  font-family: var(--rd-face, var(--font-ui)); font-size: var(--rd-size, 17px);
  line-height: calc(var(--rd-leading, 1.75) - .13);
}

/* ---------- the Kindle: one warm column ---------- */
.rd-kindle {
  height: 100%; display: flex; flex-direction: column;
  background: var(--rd-page-bg); color: var(--rd-page-ink);
}
.rd-k-page {
  flex: 1; overflow: hidden; width: 100%; max-width: 64ch; margin: 0 auto;
  padding: 44px 38px 8px;
  font-family: var(--rd-face, var(--font-ui)); font-size: var(--rd-size, 17px);
  line-height: var(--rd-leading, var(--lh-read));
}
.rd-k-foot {
  width: 100%; max-width: 64ch; margin: 0 auto; padding: 6px 38px 16px;
  display: flex; justify-content: space-between;
  font-size: var(--t-label); opacity: .55;
}

/* ---------- the Book: a facing-page spread ---------- */
.rd-book { height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rd-spread {
  position: relative; display: flex; border-radius: var(--r-sm);
  height: min(88%, 900px); aspect-ratio: 17 / 11; max-width: 96%;
  box-shadow: var(--sh-panel);
}
.rd-leaf {
  position: relative; flex: 1; overflow: hidden; padding: 5.5% 6%;
  background: var(--rd-page-bg); color: var(--rd-page-ink);
  font-family: var(--rd-face, var(--font-ui));
  font-size: var(--rd-size, 17px);
  line-height: calc(var(--rd-leading, 1.75) - .15);
}
.rd-recto { border-radius: var(--r-sm) 0 0 var(--r-sm); box-shadow: inset -20px 0 30px -22px var(--shad); }
.rd-verso { border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: inset 20px 0 30px -22px var(--shad); }
.rd-spine { width: 2px; background: linear-gradient(var(--muted), var(--edge), var(--muted)); }

/* ---------- the prose itself, on every surface ---------- */
.rd-pn { position: absolute; bottom: 3.5%; font-size: .7em; opacity: .55; }
.rd-recto .rd-pn { left: 6%; }
.rd-verso .rd-pn { right: 6%; }
.rd-sheet .rd-pn { left: 0; right: 0; text-align: center; }
.rd-stage h1 { margin: 0 0 .9em; font-size: 1.5em; font-weight: var(--w-semi); text-align: center; }
.rd-stage h2 { margin: 1em 0 .5em; font-size: 1.1em; }
.rd-byline { margin: 0 0 1.4em; text-align: center; font-style: italic; opacity: .75; }
.rd-stage p { margin: 0 0 .7em; }
.rd-break { margin: .8em 0; text-align: center; opacity: .6; }
.rd-stage blockquote { margin: .6em 1.2em; padding-left: .8em; border-left: 2px solid currentColor; font-style: italic; opacity: .9; }
.rd-stage ul { margin: .4em 0 .7em 1.4em; padding: 0; }
.rd-image { margin: .6em 0; padding: 1.4em 1em; border: 1px dashed currentColor; border-radius: var(--r-sm); text-align: center; font-size: .85em; opacity: .7; }
.rd-fn { margin: .3em 0; font-size: .85em; opacity: .8; }
.rd-stage sup { font-size: .7em; }
.rd-hl { background: var(--rd-page-hl); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- the two layouts ----------
   Book is the trade standard: first-line indent, no gaps, justified, and the
   first paragraph after a head or a scene break set full out. A paragraph
   split across a page break is a continuation and never falsely indents.
   Block is web style, which is what a manuscript wants. */
.rd[data-layout="book"] .rd-stage p { margin: 0; text-indent: 1.5em; text-align: justify; hyphens: auto; }
.rd[data-layout="book"] .rd-stage h1 + p,
.rd[data-layout="book"] .rd-stage h2 + p,
.rd[data-layout="book"] .rd-stage .rd-break + p,
.rd[data-layout="book"] .rd-stage .rd-byline + p,
.rd[data-layout="book"] .rd-stage p:first-child,
.rd[data-layout="book"] .rd-stage p.rd-cont { text-indent: 0; }
.rd[data-layout="block"] .rd-stage p { text-indent: 0; text-align: left; }

/* ---------- the panels ----------
   The frame again, so all of this is house tokens and the house type scale.
   The book's own look stops at the edge of the page. */
.rd-shelf { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.rd-book-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel); border: var(--bd) solid var(--edge); color: var(--ink2);
  font: inherit;
}
.rd-book-row:hover { border-color: var(--accent-line); color: var(--ink); }
.rd-book-row.on { border-color: var(--accent); color: var(--ink); }
.rd-book-t { font-size: var(--t-small); font-weight: var(--w-med); }
.rd-book-s { font-size: var(--t-label); color: var(--muted); }

.rd-spine-panel { display: flex; flex-direction: column; gap: 4px; padding: 10px; min-height: 0; overflow: auto; }
.rd-panel-head {
  font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--muted); padding: 2px 2px 8px;
}
.rd-ch {
  text-align: left; cursor: pointer; font: inherit; font-size: var(--t-small);
  background: none; border: 0; color: var(--ink2); padding: 6px 8px; border-radius: var(--r-sm);
}
.rd-ch:hover { background: var(--inset); color: var(--ink); }
.rd-ch.on { color: var(--accent); }
.rd-ch-h2 { padding-left: 18px; color: var(--muted); }
.rd-where-panel { margin-top: auto; padding: 10px 2px 2px; font-size: var(--t-label); color: var(--muted); }

/* ---------- the gear rack ----------
   FRAME, not the page. The controls that change how the page looks live
   here; the look itself lives on the page. House tokens, house type scale.
   --rd-page-*, --rd-face, --rd-size and --rd-leading do not appear. */

/* The tab row slims to fit three controls: the two tabs share what is left
   and the gear is a square the height of the row, not a third segment. */
/* AND IT RECLAIMS 8px OF THE ROW'S HOUSE MARGIN (foreman, 2026-08-24, off
   Opus-3's Range-measured survey at the 200px floor): the Reader's two labels
   overflowed their boxes by ~1.5px each and painted into one another
   ("AssistantChapters"). 340a3da left this margin untouched under its brief,
   not because it was load-bearing. Measured after: 2.3 and 2.7px spare. */
.house-tabs-gear { gap: 2px; margin-left: 6px; margin-right: 6px; }
.house-tabs-gear .house-tab { min-width: 0; flex: 1 1 0; }
.house-tab-gear {
  flex: none; width: 32px; height: 32px; padding: 0;
  border: 0; background: transparent; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.house-tab-gear:hover { color: var(--ink); }
.house-tab-gear.on { color: var(--accent); }

/* ---------- THE FACE YOU ARE ON (M-17, Mark's amended ruling 2026-08-24) ---
   Novel Forge's face switcher lives in these gear seats, and its law is that
   the current face is MARKED. This is that mark, and it is deliberately NOT
   `.on`.

   `.on` ALREADY MEANS SOMETHING ELSE ON THIS EXACT ELEMENT: for the Reader's
   gear and megaphone it means "this panel is open", a toggle you pressed and
   can press again. The face you are STANDING ON is not a toggle, it is where
   you are, and pressing it does nothing. Two meanings on one class is the
   drift this repo is organised against, so the second meaning gets its own
   name and the name is what it means.

   MARKED, NOT TINTED. The doc's word is marked, and a colour change alone on
   a small icon reads as a hover rather than as a state. So the current seat
   takes the same filled pill `.house-tab.on` wears, which is how the rest of
   this house has always said "you are here" in a tab row. */
.house-tab-here { background: var(--sel); color: var(--accent); }
.house-tab-here:hover { color: var(--accent); }

.rd-gear {
  display: flex; flex-direction: column; gap: 14px;
  padding: 10px; min-height: 0; overflow: auto; flex: 1;
}
.rd-gear-group { display: flex; flex-direction: column; gap: 6px; }
.rd-gear-label {
  font-size: var(--t-tiny); font-weight: var(--w-med);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted);
}
.rd-gear-modes { display: flex; flex-direction: column; gap: 6px; }
.rd-gear-mode {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  text-align: left; cursor: pointer; font: inherit; font-size: var(--t-small); font-weight: var(--w-med);
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel); border: var(--bd) solid var(--edge); color: var(--ink2);
}
.rd-gear-mode:hover { border-color: var(--accent-line); color: var(--ink); }
.rd-gear-mode.on { border-color: var(--accent); color: var(--ink); }
.rd-gear-hint { font-size: var(--t-tiny); color: var(--muted); }
.rd-gear-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-gear-chip {
  cursor: pointer; font: inherit; font-size: var(--t-small);
  padding: 7px 12px; border-radius: var(--r-sm);
  background: var(--panel); border: var(--bd) solid var(--edge); color: var(--ink2);
}
.rd-gear-chip:hover { border-color: var(--accent-line); color: var(--ink); }
.rd-gear-chip.on { border-color: var(--accent); color: var(--accent); }
.rd-gear-note { font-size: var(--t-label); color: var(--muted); }
.rd-gear-size { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-gear-readout { min-width: 6ch; text-align: center; font-size: var(--t-label); color: var(--ink2); }

/* ---------- a screenplay, read ----------
   Mark's ruling, 2026-08-21: a screenplay you want to READ opens here, and
   Script Forge is where one is written. So this is the Script Forge page,
   read-only, drawn from the same engine and wearing the same element classes:
   there is one home for what a screenplay looks like and this is not a second
   one. The Reader adds exactly two things: its own paper, so the paper dial
   still means something, and a reflowed alternative for a narrow window.

   The GEOMETRY block (--sf-page-w and the indents) is declared ONCE, in
   forge-script.css, on the selector list this room joins. Redeclaring it here
   is what the ScriptForge battery fails on, and rightly. */
/* A TRUE PAGE IS A FIXED WIDTH, so a window narrower than the page has to
   SCROLL to it. Centring with flex overflows in both directions and the left
   half of the page becomes unreachable, which is what a narrow window showed.
   Auto margins on a block centre it and still let the scroller reach it. */
.rd-script { padding: 26px 0 40vh; overflow-x: auto; }
.rd-script > .rd-script-sheet { margin-left: auto; margin-right: auto; }
.rd-script-sheet {
  background: var(--rd-page-bg); color: var(--rd-page-ink);
  --sf-zoom: calc(var(--rd-size, 17px) / 17);
  --sf-paper: var(--rd-page-bg); --sf-pencil: var(--rd-page-ink);
}

/* THE REFLOW. The same elements in one readable measure, indents in em so
   dialogue still reads as dialogue at any width, and no page furniture at
   all: the page count is gone rather than wrong. */
.rd-column { padding: 26px 0 40vh; }
.rd-column-sheet {
  width: 100%; max-width: 72ch; margin: 0 auto; padding: 30px 26px;
  background: var(--rd-page-bg); color: var(--rd-page-ink);
  border-radius: var(--r-md); box-shadow: var(--sh-card);
  font-family: var(--rd-face, var(--font-ui)); font-size: var(--rd-size, 17px);
  line-height: var(--rd-leading, var(--lh-read));
}
.rd-sc { margin: 0 0 .5em; }
.rd-sc-scene { margin: 1.6em 0 .7em; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .04em; }
.rd-sc-character { margin: 1em 0 0; padding-left: 4em; font-weight: var(--w-semi); text-transform: uppercase; }
.rd-sc-paren { padding-left: 3.2em; font-style: italic; opacity: .8; }
.rd-sc-dialogue { padding-left: 2.4em; padding-right: 2.4em; margin: 0 0 .2em; }
.rd-sc-transition { margin: 1em 0; text-align: right; text-transform: uppercase; opacity: .75; }
.rd-sc-title { text-align: center; }
.rd-sc-action { margin: 0 0 .8em; }

/* a book arrives over the wire, so there is a state before it is here */
.rd-waiting { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.rd-waiting-t { font-size: var(--t-title); color: var(--ink); }
.rd-waiting-s { font-size: var(--t-small); color: var(--muted); }
.rd-shelf-empty { padding: 12px; font-size: var(--t-small); color: var(--muted); line-height: var(--lh-body); }

/* ---------- A SCANNED PAGE ----------
   The fallback surface: a file with no text in it, drawn as its own pages
   (lib/pdf-pages.js). The sheet stops pretending to be US Letter and lets the
   picture say how tall it is, because a scan is whatever size it was scanned
   at and forcing somebody's script into our aspect ratio would crop lines off
   the foot of every page. No padding either: the margins are already in the
   photograph. The paper token still shows around it, so the room is dressed
   the same as any other book. */
.rd-sheet.rd-scan { aspect-ratio: auto; padding: 0; }
.rd-scan-img { display: block; width: 100%; height: auto; }


/* ---------- THE DIRECTOR'S PANEL: who sounds like what ----------
   Behind the megaphone beside the gear. Stacked rows, like the gear panel
   next door: a two hundred pixel panel cannot hold a name beside fifty
   voices, so the name IS the row and the rack unfolds under the one being
   cast. One open at a time. */
.rd-cast { display: flex; flex-direction: column; gap: 4px; padding: 10px; min-height: 0; overflow: auto; }
.rd-cast-note { color: var(--muted); font-size: var(--t-tiny); line-height: 1.45; padding: 2px 2px 6px; }
.rd-cast-head {
  width: 100%; padding: 7px 8px; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: var(--t-small); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline;
}
.rd-cast-head:hover { color: var(--accent); }
.rd-cast-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-med); }
.rd-cast-v { color: var(--accent); font-size: var(--t-tiny); white-space: nowrap; }
.rd-cast-v.none { color: var(--muted); }
.rd-cast-c { color: var(--muted); font-size: var(--t-tiny); }

/* ---------- THE CHIP: what you do with a passage you picked ----------
   Docked in the right panel, under the tab row, on every tab (Mark,
   2026-08-22: the version pinned over the page was still sitting on top of
   the words you had just chosen, even parked at a fixed spot — "put it
   under the tab bar in the right panel"). rooms/partials.js draws it once,
   above whichever tab's own content is showing, so a room with four tab
   states never grows four copies. Same bar, same verbs, new address: it
   wraps onto two lines at this width rather than truncating harder, because
   the panel is narrower than the page it used to sit over. */
.rd-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: var(--bd) solid var(--edge);
  background: var(--panel); color: var(--ink);
}
.rd-chip-t { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: var(--t-tiny); font-style: italic; }
.rd-chip-b { flex: none; padding: 4px 10px; border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  background: var(--inset); color: var(--accent); font: inherit; font-size: var(--t-tiny); cursor: pointer; }
.rd-chip-b:hover { border-color: var(--accent); color: var(--ink); }
.rd-chip-x { flex: none; padding: 0 4px; border: 0; background: none; color: var(--muted);
  font-size: var(--t-body); line-height: 1; cursor: pointer; }

/* A SOURCE-ADDRESSABLE PASSAGE in an owned Forge book. This toolbar is
   already in the markup and is only positioned after mouseup, without a
   render that would destroy the browser selection beneath it. */
.rd-pick-pop {
  position: fixed; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  max-width: calc(100vw - 20px);
  padding: 6px; border: var(--bd) solid var(--accent-line); border-radius: var(--r-pill);
  background: var(--panel); color: var(--ink); box-shadow: var(--sh-panel);
}
.rd-pick-pop[hidden] { display: none; }
.rd-pick-go {
  border: 0; border-radius: var(--r-pill); padding: 6px 10px;
  background: none; color: var(--ink2); font: inherit; font-size: var(--t-tiny); cursor: pointer;
}
.rd-pick-go:hover, .rd-pick-go:focus-visible { background: var(--sel); color: var(--accent); }

/* The comparison stays beside the page. It is scrollable independently so
   three alternatives never make the rendered book itself jump. */
.rd-edit-card {
  position: absolute; z-index: 20; top: 16px; right: 16px;
  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 72px); overflow: auto;
  padding: 14px; border: var(--bd) solid var(--accent-line); border-radius: var(--r-lg);
  background: var(--panel); color: var(--ink); box-shadow: var(--sh-panel);
}
.rd-edit-head { font-family: var(--font-display); font-size: var(--t-sub); }
.rd-edit-line { color: var(--muted); font-size: var(--t-small); line-height: var(--lh-body); }
.rd-edit-choice { padding: 10px 0; border-top: var(--bd) solid var(--edge); }
.rd-edit-choice-h { color: var(--accent); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.rd-edit-choice p { margin: 6px 0 8px; color: var(--ink2); font-size: var(--t-small); line-height: var(--lh-body); white-space: pre-wrap; }
.rd-edit-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.rd-edit-use, .rd-edit-close {
  padding: 6px 10px; border: var(--bd) solid var(--accent-line); border-radius: var(--r-pill);
  background: var(--inset); color: var(--accent); font: inherit; font-size: var(--t-tiny); cursor: pointer;
}
.rd-edit-close { border-color: var(--edge); color: var(--muted); }
.rd-edit-use:hover, .rd-edit-close:hover { border-color: var(--accent); color: var(--ink); }
.rd-edit-use:disabled, .rd-edit-close:disabled { opacity: .45; cursor: default; }

/* A reviewed bridge from one exact Novel passage into the canonical World
   binder. The source remains visibly distinct from the editable claim: what
   the story said is evidence; what the writer confirms is canon. */
.rd-world-card { display: flex; flex-direction: column; gap: 10px; }
.rd-world-card .rd-edit-line { margin: 0; }
.rd-world-source {
  padding: 10px; border: var(--bd) solid var(--edge); border-radius: var(--r-md);
  background: var(--inset);
}
.rd-world-source > span, .rd-world-field > span {
  display: block; margin-bottom: 5px; color: var(--accent); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.rd-world-source blockquote {
  max-height: 110px; overflow: auto; margin: 0; color: var(--ink2);
  font-family: var(--font-reading); font-size: var(--t-small); line-height: var(--lh-body);
  white-space: pre-wrap;
}
.rd-world-field { display: block; }
.rd-world-field select, .rd-world-field textarea {
  width: 100%; box-sizing: border-box; border: var(--bd) solid var(--edge);
  border-radius: var(--r-md); background: var(--inset); color: var(--ink);
  font: inherit; font-size: var(--t-small);
}
.rd-world-field select { padding: 8px 10px; }
.rd-world-field textarea { min-height: 130px; padding: 10px; resize: vertical; line-height: var(--lh-body); }
.rd-world-field select:focus, .rd-world-field textarea:focus { outline: none; border-color: var(--accent); }
.rd-world-busy, .rd-world-error, .rd-world-receipt {
  margin: 0; font-size: var(--t-tiny); line-height: var(--lh-body);
}
.rd-world-busy { color: var(--accent); }
.rd-world-error { color: var(--danger); }
.rd-world-receipt { color: var(--muted); }

/* ---------- READING ALOUD, and it reads a scene ---------- */
.rd-cast-play { display: flex; gap: 6px; padding: 0 2px 8px; }
.rd-cast-go { flex: 1; padding: 8px 10px; border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--inset); color: var(--accent); font: inherit; font-size: var(--t-small);
  font-weight: var(--w-semi); cursor: pointer; }
.rd-cast-go:hover { border-color: var(--accent); color: var(--ink); }
.rd-cast-stop { flex: none; width: 34px; border: 1px solid var(--edge); border-radius: var(--r-md);
  background: var(--inset); color: var(--muted); font-size: var(--t-tiny); cursor: pointer; }
.rd-cast-stop:hover { color: var(--ink); border-color: var(--accent-line); }

/* ---------- WHAT YOU MARKED, beside the spine ----------
   They are places in the book, like a chapter is, and they jump the same way.
   A highlight is a note with nothing to say, so it is one list. */
.rd-marks { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px;
  border-bottom: 1px solid var(--edge); margin-bottom: 6px; }
.rd-marks-h { color: var(--muted); font-size: var(--t-tiny); letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 2px 4px; }
.rd-mark { display: flex; align-items: flex-start; gap: 4px; }
.rd-mark-go { flex: 1; min-width: 0; padding: 5px 6px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink2); font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; }
.rd-mark-go:hover { background: var(--sel); color: var(--ink); }
.rd-mark-a { font-size: var(--t-tiny); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-mark-n { font-size: var(--t-small); }
.rd-mark-x { flex: none; padding: 2px 5px; border: 0; background: none; color: var(--muted);
  font-size: var(--t-body); line-height: 1; cursor: pointer; }
.rd-mark-x:hover { color: var(--ink); }

/* ---------- A COMIC IS READ AS A SPREAD ----------
   Sheets mode stacks a scanned script down a column, which is right for
   paper that happens to have been photographed. A comic is drawn FOR the
   facing pair — a splash across two pages is a different picture stacked —
   so it gets the pair, sized to the window rather than to a Letter sheet:
   the whole spread has to be visible at once or it is not a spread.

   The cover rides alone, as it does on paper, and .rd-comic-solo is that one
   page centred at the same height. */
.rd-comic {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px; min-height: 100%;
}
.rd-comic-page { margin: 0; position: relative; display: flex; min-width: 0; }
.rd-comic-page img {
  display: block; max-width: 100%; max-height: calc(100vh - 190px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-sm); box-shadow: var(--sh-card);
}
.rd-comic-solo .rd-comic-page img { max-height: calc(100vh - 170px); }
.rd-comic .rd-pn {
  position: absolute; bottom: 4px; left: 0; right: 0;
  text-align: center; font-size: var(--t-tiny); color: var(--muted);
}
.rd-turn[disabled] { opacity: .3; cursor: default; }
.rd-turn[disabled]:hover { color: var(--muted); background: none; }

@media (max-width: 900px) {
  /* Two comic pages side by side on a phone are two unreadable pages. */
  .rd-comic { flex-direction: column; }
  .rd-comic-page img { max-height: none; }
}

/* ---------- THE CORNERS THAT TURN ----------
   Bottom left goes back, bottom right goes on, on the two surfaces that turn.
   Invisible until the pointer is near them: a reading page should look like a
   page, not like a control panel, and the hint only has to arrive at the
   moment somebody is already reaching.

   They sit ABOVE the page so the press lands, and they are kept small so the
   rest of the leaf is still ordinary text a reader can drag across. A drag
   that ends inside one is refused by readerTurnCorner rather than swallowed
   here, because CSS cannot tell a tap from the end of a selection. */
/* .rd-spread and .rd-comic-page ARE the paper, and both already stand
   relative, so nothing here claims the whole room. A wrapper meaning to hug
   the art was tried and removed: shrink-to-fit reads an image's INTRINSIC
   width, not the width max-height leaves it at, so it hugged nine hundred
   pixels of a page drawn at four hundred and seventy and put a cover's
   corner out in the margin. The figure ends where the art ends. */
.rd-corner {
  position: absolute; bottom: 0; z-index: 2;
  width: min(20%, 170px); height: min(26%, 200px);
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .18s ease;
}
.rd-corner-back { left: 0; border-radius: 0 var(--r-lg) 0 var(--r-md); }
.rd-corner-next { right: 0; border-radius: var(--r-lg) 0 var(--r-md) 0; }
.rd-corner:hover, .rd-corner:focus-visible { opacity: 1; background: var(--inset); }
.rd-corner:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }

@media (max-width: 900px) {
  /* Stacked comic pages scroll on a phone, and a corner that turns the page
     under a scrolling thumb is a trap. */
  .rd-comic .rd-corner { display: none; }
}