/* site/look-reader.css — the "Reading room" look in the READER (the app shell at /app: top bar, library, poets,
 * search, the poem view, the video stage's poem pane, the player bar, modals). Companion to site/look.css, which
 * owns the account route and /plus and defines the tokens (--bg, --surface, --surface-2, --plate, --text, --text-2,
 * --muted, --border, --border-strong, --btn, --btn-text, --rr-serif, --rr-sans, --rr-top) for light and dark.
 *
 * Scope: every rule is under html[data-look="reading-room"] (app.html sets it before paint), and the account route
 * is left to look.css (body:not(:has(.account-view)) on the shared chrome). Remove the attribute and the reader is
 * exactly styles.css + video_stage.css again. Behaviour is untouched: no audio, video, karaoke or routing rule
 * here, only type, surfaces, radii and the poem's cover column (app.js inserts <figure class="rr-poem-cover">).
 *
 * Kept as they are (Dom-tuned): the luminous green ring on the mute / tuck / reveal buttons (video_stage.css,
 * !important), the black backdrop behind the black-studio portraits (body.backdrop-black keeps #000; only its text
 * tokens take the brand greys), the spotlight's sofa-scaling poem size at >= 1400 px, the music bed timings.
 *
 * Type: Cormorant Garamond (self-hosted, 400 + 500 only) for the poem, titles and the big buttons; Inter for UI
 * labels, glosses, chips and the player bar. Hairlines, 4 px radii, no shadows, no em dashes in copy.
 */

/* ---------- tokens: styles.css's names mapped onto the look's, so untouched rules follow too ---------- */
html[data-look="reading-room"] body:not(:has(.account-view)):not(.rr-plus) {
  --paper: var(--bg); --paper-raised: var(--surface); --rule: var(--border);
  --ink: var(--text); --ink-soft: var(--text-2); --ink-faint: var(--muted);
  --accent: var(--text); --accent-soft: var(--border-strong); --gold: var(--text-2);
  --en: var(--text-2); --es: var(--text-2); --shadow: none;
  background: var(--bg); color: var(--text);
}
/* the black studio backdrop stays black (the portraits are shot on #000); its text takes the brand greys */
html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split):not(:has(.account-view)):not(.rr-plus) {   /* outranks the token rule above */
  --paper: #000; --paper-raised: #0b0b0b; --rule: #39352b; --ink: #d1ccc3; --ink-soft: #9f9b93; --ink-faint: #807c74;
  --accent: #d1ccc3; --accent-soft: #635e54; --gold: #9f9b93; --en: #9f9b93; --es: #9f9b93; --shadow: none;
  --surface: #0b0b0b; --surface-2: #202225; --border: #39352b; --border-strong: #635e54; --text: #d1ccc3; --text-2: #9f9b93; --muted: #807c74;
  --btn: #eae5d9; --btn-text: #090c10; --plate: #16181b;
  background: #000; color: #d1ccc3;
}

/* ---------- chrome: top bar, nav, footer ---------- */
html[data-look="reading-room"] body:not(:has(.account-view)) .topbar {
  background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--rule);
}
/* phones in the reader: the top bar floats over the face, folded to the badge (video_stage.css bar-auto); it stays
   transparent here, or its tinted strip would paint a dark band over the top of the reader's head */
html[data-look="reading-room"] body.bar-auto:not(.bar-open):not(:has(.account-view)) .topbar { background: transparent; border-bottom-color: transparent; }
html[data-look="reading-room"] body.bar-auto.bar-open:not(:has(.account-view)) .topbar { background: var(--paper); }
html[data-look="reading-room"] body:not(:has(.account-view)) .topnav .nav-link {
  font-family: var(--rr-serif); color: var(--ink-soft); border-radius: 4px; background: transparent; border-color: transparent;
}
html[data-look="reading-room"] body:not(:has(.account-view)) .topnav .nav-link:hover { background: var(--paper-raised); color: var(--ink); }
html[data-look="reading-room"] body:not(:has(.account-view)) .topnav .nav-link.active { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--border-strong); }
html[data-look="reading-room"] .due-pill { background: var(--btn); color: var(--btn-text); font-family: var(--rr-sans); }
html[data-look="reading-room"] .nav-plus { color: var(--ink); }
html[data-look="reading-room"] body:not(:has(.account-view)) .footer { border-top-color: var(--rule); color: var(--ink-faint); font-family: var(--rr-sans); }

/* ---------- shared pieces: buttons, chips, fields, badges, cards ---------- */
html[data-look="reading-room"] .app .btn {
  font-family: var(--rr-serif); font-size: 1rem; line-height: 1.35; font-weight: 500; letter-spacing: .01em;   /* the same 22.95 px line box as Inter .9rem */
  background: var(--btn); color: var(--btn-text); border: 1px solid var(--btn); border-radius: 4px;
  transition: background .15s, color .15s, border-color .15s;
}
html[data-look="reading-room"] .app .btn:hover { background: color-mix(in srgb, var(--btn) 88%, var(--paper)); border-color: color-mix(in srgb, var(--btn) 88%, var(--paper)); }
html[data-look="reading-room"] .app .btn.ghost, html[data-look="reading-room"] .app .btn.again, html[data-look="reading-room"] .app .btn.good {
  background: transparent; color: var(--ink); border-color: var(--border-strong);
}
html[data-look="reading-room"] .app .btn.ghost:hover, html[data-look="reading-room"] .app .btn.again:hover, html[data-look="reading-room"] .app .btn.good:hover {
  background: var(--paper-raised); color: var(--ink); border-color: var(--ink-soft); filter: none;
}
html[data-look="reading-room"] .app .btn.ghost.active { color: var(--ink); border-color: var(--ink); background: var(--surface-2); }
html[data-look="reading-room"] .app .btn:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
html[data-look="reading-room"] .chip, html[data-look="reading-room"] .trans-picker .chip {
  font-family: var(--rr-sans); color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 999px;
}
html[data-look="reading-room"] .chip:hover { border-color: var(--border-strong); color: var(--ink); }
html[data-look="reading-room"] .chip.active { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
html[data-look="reading-room"] .segmented { border-color: var(--rule); }
html[data-look="reading-room"] .segmented .seg { font-family: var(--rr-sans); color: var(--ink-soft); box-shadow: 0 -1px 0 var(--rule); }
html[data-look="reading-room"] .segmented .seg:not(:last-child) { border-right-color: var(--rule); }
html[data-look="reading-room"] .segmented .seg.active { background: var(--surface-2); color: var(--ink); }
html[data-look="reading-room"] .facet-label { font-family: var(--rr-sans); color: var(--ink-faint); letter-spacing: 1.4px; }
html[data-look="reading-room"] .lib-search, html[data-look="reading-room"] .lib-poet, html[data-look="reading-room"] .recall-fb-text, html[data-look="reading-room"] .music-sheet .ms-search {
  font-family: var(--rr-sans); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 4px; color: var(--ink);
}
html[data-look="reading-room"] .lib-search:focus, html[data-look="reading-room"] .lib-poet:focus, html[data-look="reading-room"] .recall-fb-text:focus { border-color: var(--border-strong); outline: 0; }
html[data-look="reading-room"] .badge { font-family: var(--rr-sans); font-weight: 500; letter-spacing: .04em; border-radius: 2px; }
html[data-look="reading-room"] .badge.cefr { background: var(--surface-2); color: var(--ink-soft); }
html[data-look="reading-room"] .badge.lang-es, html[data-look="reading-room"] .badge.lang-en, html[data-look="reading-room"] .badge.translated { color: var(--ink-soft); border: 1px solid var(--rule); font-weight: 500; }
html[data-look="reading-room"] .badge.read-only { border-style: solid; }
html[data-look="reading-room"] .learned-dot { background: var(--ok); }
html[data-look="reading-room"] .deck-card, html[data-look="reading-room"] .controls, html[data-look="reading-room"] .browse-poets-link,
html[data-look="reading-room"] .dir-card, html[data-look="reading-room"] .rail-card, html[data-look="reading-room"] .showcase {
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 4px; box-shadow: none;
}
html[data-look="reading-room"] .dir-card:hover, html[data-look="reading-room"] .rail-card:hover, html[data-look="reading-room"] .showcase-poem:hover { border-color: var(--border-strong); transform: none; }
html[data-look="reading-room"] .browse-poets-link { color: var(--ink); font-family: var(--rr-serif); font-weight: 500; font-size: 1.05rem; }
html[data-look="reading-room"] .browse-poets-link:hover { border-color: var(--border-strong); }

/* ---------- headings and lists: library, poets, rails, review ---------- */
html[data-look="reading-room"] .view-head h2, html[data-look="reading-room"] .view-head h1, html[data-look="reading-room"] .poet-head h2,
html[data-look="reading-room"] .hero h1, html[data-look="reading-room"] .review-empty .big {
  font-family: var(--rr-serif); font-weight: 500; letter-spacing: -.005em; color: var(--ink);
}
html[data-look="reading-room"] .view-head .sub, html[data-look="reading-room"] .lib-count, html[data-look="reading-room"] .rail-head span { font-family: var(--rr-sans); color: var(--ink-faint); }
html[data-look="reading-room"] .hero h1 em { color: var(--ink-soft); }
html[data-look="reading-room"] .dir-card h3, html[data-look="reading-room"] .rail-head h3, html[data-look="reading-room"] .rc-title, html[data-look="reading-room"] .deck-t,
html[data-look="reading-room"] .showcase h3, html[data-look="reading-room"] .letter-div, html[data-look="reading-room"] .cloze-src, html[data-look="reading-room"] .gather-line,
html[data-look="reading-room"] .gather-close, html[data-look="reading-room"] .returns-line, html[data-look="reading-room"] .stat .n { font-family: var(--rr-serif); font-weight: 500; color: var(--ink); }
html[data-look="reading-room"] .rc-lvl, html[data-look="reading-room"] .showcase-kicker, html[data-look="reading-room"] .stat .l, html[data-look="reading-room"] .gather-meta, html[data-look="reading-room"] .cloze-meta {
  font-family: var(--rr-sans); font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-faint);
}
html[data-look="reading-room"] .poem-list { gap: 0; }
html[data-look="reading-room"] .poem-row {
  background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: .85rem .35rem; transition: background .12s;
}
html[data-look="reading-room"] .poem-row:last-child { border-bottom: 1px solid var(--rule); }
html[data-look="reading-room"] .poem-row:hover { background: var(--paper-raised); transform: none; }
html[data-look="reading-room"] .poem-row .title { font-family: var(--rr-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.33; color: var(--ink); }   /* the same box as Fraunces 1.15rem x 1.5 */
html[data-look="reading-room"] .poem-row .author { font-family: var(--rr-sans); font-size: .82rem; color: var(--ink-faint); margin-top: .1rem; }
html[data-look="reading-room"] .letter-div { background: var(--paper); border-bottom-color: var(--rule); color: var(--ink-soft); font-size: 1.25rem; }
html[data-look="reading-room"] .poet-row { border-bottom-color: var(--rule); }
html[data-look="reading-room"] .poet-row:hover { background: var(--paper-raised); }
html[data-look="reading-room"] .poet-row .mono { background: var(--plate); color: var(--btn); font-family: var(--rr-serif); font-weight: 500; border: 1px solid var(--rule); }
html[data-look="reading-room"] body.backdrop-black .poet-row .mono, html[data-look="reading-room"][data-theme="dark"] .poet-row .mono { color: var(--text); }
html[data-look="reading-room"] .poet-row .pname { font-family: var(--rr-serif); font-size: 1.15rem; font-weight: 500; }
html[data-look="reading-room"] .poet-row .pcount { font-family: var(--rr-sans); }
html[data-look="reading-room"] .showcase { background: var(--paper-raised); border-color: var(--rule); }
html[data-look="reading-room"] .showcase-faces img { border-radius: 4px; border-color: var(--paper-raised); box-shadow: none; }
html[data-look="reading-room"] .showcase-poem { background: var(--paper); border-color: var(--rule); border-radius: 4px; }
html[data-look="reading-room"] .showcase-poem .n { color: var(--ink-faint); font-family: var(--rr-sans); }
html[data-look="reading-room"] .showcase-poem .t { font-family: var(--rr-serif); font-size: 1.1rem; }
html[data-look="reading-room"] .showcase-go { font-weight: 500; }
html[data-look="reading-room"] .trans-picker-label { font-family: var(--rr-sans); }
html[data-look="reading-room"] .deck-n { color: var(--ink-soft); font-family: var(--rr-sans); }
html[data-look="reading-room"] .saved-line-src { font-family: var(--rr-serif); font-size: 1.3rem; font-weight: 500; }
html[data-look="reading-room"] .empty-note, html[data-look="reading-room"] .read-only-note { font-family: var(--rr-sans); color: var(--ink-faint); }

/* ---------- the poem view ---------- */
html[data-look="reading-room"] .back-link { font-family: var(--rr-sans); color: var(--ink-soft); }
html[data-look="reading-room"] .back-link:hover { color: var(--ink); }
html[data-look="reading-room"] .reader-nav .nav-link {
  font-family: var(--rr-sans); font-size: .85rem; color: var(--ink); background: transparent; border: 1px solid var(--border-strong); border-radius: 4px;
}
html[data-look="reading-room"] .reader-nav .nav-link:hover { background: var(--paper-raised); color: var(--ink); border-color: var(--ink-soft); }
html[data-look="reading-room"] .reader-nav .nav-link.nav-prev { color: var(--ink-soft); border-color: var(--rule); }
html[data-look="reading-room"] .reader-head h1 { font-family: var(--rr-serif); font-weight: 500; letter-spacing: -.005em; color: var(--ink); }
html[data-look="reading-room"] .reader-head .byline { font-family: var(--rr-serif); color: var(--ink-soft); }
html[data-look="reading-room"] .line-title .gloss { font-family: var(--rr-sans); font-size: 14px; }
html[data-look="reading-room"] .ai-disclosure { background: transparent; color: var(--ink-faint); font-family: var(--rr-sans); }
html[data-look="reading-room"] .ai-disclosure-x { font-family: var(--rr-serif); font-size: .95rem; }
html[data-look="reading-room"] .controls { border-radius: 4px; }
html[data-look="reading-room"] .custom-select-menu, html[data-look="reading-room"] .dock-panel, html[data-look="reading-room"] .vol-pop {
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 4px; box-shadow: none;
}
html[data-look="reading-room"] .custom-select-option, html[data-look="reading-room"] .speed-tick, html[data-look="reading-room"] .dock-nav button,
html[data-look="reading-room"] .dock-jump, html[data-look="reading-room"] .study-tab, html[data-look="reading-room"] .study-list li { border-radius: 4px; }
html[data-look="reading-room"] .speed-val, html[data-look="reading-room"] .vol-val { background: var(--surface-2); color: var(--ink); border-color: var(--rule); border-radius: 4px; font-family: var(--rr-sans); }
html[data-look="reading-room"] .speed-slider::-webkit-slider-thumb { background: var(--btn); box-shadow: none; }
html[data-look="reading-room"] .speed-slider::-moz-range-thumb { background: var(--btn); }
html[data-look="reading-room"] .speed-tick.active { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
html[data-look="reading-room"] .music-bed { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 4px; font-family: var(--rr-sans); }
html[data-look="reading-room"] .music-bed .mb-track, html[data-look="reading-room"] .music-bed .mb-mute, html[data-look="reading-room"] .music-bed .mb-lib, html[data-look="reading-room"] .music-bed .mb-start { border-radius: 4px; }
html[data-look="reading-room"] .music-bed .mb-track.active, html[data-look="reading-room"] .music-bed .mb-start { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

/* the poem: Cormorant in exactly the boxes styles.css / video_stage.css build (1.3rem = 20.8 px, line-height 1, the
   spotlight's sofa scaling and the reader's own size setting on top), so every layout keeps its geometry (Dom 25 Oct).
   Glosses stay Inter .95rem (their wrapping sets the line boxes), muted. */
html[data-look="reading-room"] .poem-body { font-family: var(--rr-serif); }
html[data-look="reading-room"] .line { border-radius: 4px; }
html[data-look="reading-room"] .line:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
html[data-look="reading-room"] .line.revealed { background: color-mix(in srgb, var(--ink) 3%, transparent); }
html[data-look="reading-room"] .line .gloss { font-family: var(--rr-sans); color: var(--ink-faint); }   /* size as built (.95rem): a smaller gloss wraps to fewer lines and moves every line under it */
html[data-look="reading-room"] .line .note { font-family: var(--rr-sans); color: var(--ink-faint); opacity: .9; }
html[data-look="reading-room"] .line .wnote { font-family: var(--rr-serif); font-style: italic; color: var(--ink-soft); }
html[data-look="reading-room"] .line .w .wg { font-family: var(--rr-sans); background: var(--btn); color: var(--btn-text); border-radius: 2px; }
html[data-look="reading-room"] .line .w.cog .wt { border-bottom-color: var(--border-strong); }
html[data-look="reading-room"] .line .w:hover .wt { background: var(--surface-2); }
html[data-look="reading-room"] .line-play, html[data-look="reading-room"] .line-from-here { font-family: var(--rr-sans); border-radius: 2px; }
html[data-look="reading-room"] .line-play:hover, html[data-look="reading-room"] .line-from-here:hover { color: var(--ink); background: var(--surface-2); border-color: var(--rule); }
html[data-look="reading-room"] .line-save.on { color: var(--ink); }
html[data-look="reading-room"] .line .src:focus-visible, html[data-look="reading-room"] .line .gloss:focus-visible { outline-color: var(--border-strong); }

/* karaoke: the line being read sits on a plate (light #e9e8e5; dark and the black backdrop: ivory #eae5d9 with ink on
   it); the word being spoken keeps its scale from video_stage.css and takes the plate's ink, not the old accent */
html[data-look="reading-room"] .line.speaking { background: var(--surface-2); }
html[data-look="reading-room"] .reader.has-stage .line.speaking .src { font-weight: 500; }
html[data-look="reading-room"] .reader.has-stage .line.speaking .gloss { color: var(--ink-soft); font-weight: 500; }
html[data-look="reading-room"] .reader.has-stage .line.speaking .tok.now { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { html[data-look="reading-room"] .reader.has-stage .line.speaking .tok.now { text-decoration-color: var(--ink); } }
@media (prefers-color-scheme: dark) {
  html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking { background: #eae5d9; }
  html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking .src, html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking .tok,
  html[data-look="reading-room"]:not([data-theme="light"]) .reader.has-stage .line.speaking .tok.now { color: #3c321f; }
  html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking .gloss, html[data-look="reading-room"]:not([data-theme="light"]) .reader.has-stage .line.speaking .gloss,
  html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking .note,
  html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking .line-btns button, html[data-look="reading-room"]:not([data-theme="light"]) .line.speaking .line-save { color: #5a574f; }
}
html[data-look="reading-room"][data-theme="dark"] .line.speaking, html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking { background: #eae5d9; }
html[data-look="reading-room"][data-theme="dark"] .line.speaking .src, html[data-look="reading-room"][data-theme="dark"] .line.speaking .tok, html[data-look="reading-room"][data-theme="dark"] .reader.has-stage .line.speaking .tok.now,
html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking .src, html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking .tok,
html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .reader.has-stage .line.speaking .tok.now { color: #3c321f; }
html[data-look="reading-room"][data-theme="dark"] .line.speaking .gloss, html[data-look="reading-room"][data-theme="dark"] .reader.has-stage .line.speaking .gloss, html[data-look="reading-room"][data-theme="dark"] .line.speaking .note,
html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking .gloss, html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .reader.has-stage .line.speaking .gloss,
html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking .note,
html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking .line-btns button, html[data-look="reading-room"] body:is(.backdrop-black, .backdrop-split) .line.speaking .line-save { color: #5a574f; }

/* end of poem */
html[data-look="reading-room"] .recall { border-top-color: var(--rule); }
html[data-look="reading-room"] .recall p { font-family: var(--rr-serif); color: var(--ink-soft); }
html[data-look="reading-room"] .recall-fb-note { font-family: var(--rr-sans); }

/* ---------- the player bar (video_stage.js stage-dock: in the top bar on desktop, a fixed bottom row on phones) ---------- */
html[data-look="reading-room"] .stage-dock .btn, html[data-look="reading-room"] .dock-nav button, html[data-look="reading-room"] .dock-jump, html[data-look="reading-room"] .dock-gear {
  font-family: var(--rr-sans); border-radius: 4px;
}
html[data-look="reading-room"] .stage-dock .btn { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
html[data-look="reading-room"] .stage-dock .btn:hover { background: var(--paper-raised); border-color: var(--ink-soft); }
html[data-look="reading-room"] .stage-dock .btn.dock-listen, html[data-look="reading-room"] .stage-dock .btn.play-all { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
html[data-look="reading-room"] .stage-dock .btn.dock-listen:hover, html[data-look="reading-room"] .stage-dock .btn.play-all:hover { background: color-mix(in srgb, var(--btn) 88%, var(--paper)); }
html[data-look="reading-room"] .dock-title b { font-family: var(--rr-serif); font-weight: 500; }
html[data-look="reading-room"] .dock-title span { font-family: var(--rr-sans); }
html[data-look="reading-room"] body.dock-thumb .stage-dock { background: color-mix(in srgb, var(--paper) 92%, transparent); border-top: 1px solid var(--rule); }
html[data-look="reading-room"] .topbar .bar-poem { font-family: var(--rr-serif); }
html[data-look="reading-room"] .dock-theme-swatch, html[data-look="reading-room"] .dock-theme-tag, html[data-look="reading-room"] .dock-order-opt { border-radius: 4px; }
html[data-look="reading-room"] .dock-order-opt[aria-pressed="true"] { border-color: var(--border-strong); box-shadow: none; }

/* ---------- modals and sheets: Plus prompt, limit, Gather, layout sheet, music library ---------- */
html[data-look="reading-room"] .upsell-card, html[data-look="reading-room"] .gather-card, html[data-look="reading-room"] .layout-sheet {
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; box-shadow: none;
}
html[data-look="reading-room"] .upsell-title, html[data-look="reading-room"] .layout-sheet h3, html[data-look="reading-room"] .music-sheet .ms-head h3 { font-family: var(--rr-serif); font-weight: 500; font-size: 1.6rem; color: var(--ink); }
html[data-look="reading-room"] .upsell-text, html[data-look="reading-room"] .gather-prompt, html[data-look="reading-room"] .gather-sense { font-family: var(--rr-serif); font-size: 1.05rem; color: var(--ink-soft); }
html[data-look="reading-room"] .upsell-offer { color: var(--ink); font-family: var(--rr-serif); font-weight: 500; }
html[data-look="reading-room"] .gather-line mark, html[data-look="reading-room"] .returns-line mark { background: var(--surface-2); }
html[data-look="reading-room"] .upsell-actions .btn:focus-visible { outline-color: var(--border-strong); }
html[data-look="reading-room"] .layout-opt, html[data-look="reading-room"] .backdrop-opt, html[data-look="reading-room"] .layout-ico, html[data-look="reading-room"] .backdrop-swatch { border-radius: 4px; }
html[data-look="reading-room"] .music-sheet .ms-now-bar { background: var(--surface-2); border-color: var(--rule); border-radius: 4px; }
html[data-look="reading-room"] .music-sheet .ms-row, html[data-look="reading-room"] .music-sheet .ms-search { border-radius: 4px; }
html[data-look="reading-room"] .music-sheet .ms-tab[aria-selected="true"], html[data-look="reading-room"] .music-sheet .ms-previewing .ms-prev { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
html[data-look="reading-room"] .music-sheet .ms-row.ms-now { background: var(--surface-2); }
html[data-look="reading-room"] .music-sheet .ms-chip[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }

/* ---------- the Reading room cover column (app.js viewReader inserts <figure class="rr-poem-cover"> before .reader
   once the stage has mounted: the poem's engraving from brand/covers/, else the stage poet's portrait). The figure is
   hidden whenever a video stage is open (video wins); the Focus layout, which shows no faces, brings it back. ---------- */
html[data-look="reading-room"] .rr-poem-cover { display: none; margin: 0; background: #0b0d10; overflow: hidden; }
html[data-look="reading-room"] .rr-poem-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
html[data-look="reading-room"] .rr-poem-cover.rr-cover-portrait img { object-position: 50% 20%; }
/* the one switch: the cover shows, and the band / column rules below apply, with no stage, a stage without video, or a
   video stage in Focus (no faces on screen). A video poem in any other layout matches no rule here at all, so .app and
   every layout stay exactly as built (Dom 25 Oct). video_stage.js toggles data-layout live, hence :has(), not a class. */
html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { display: block; }

/* phone (< 720): a 96 px band above the poem, full bleed; nothing else changes */
@media (max-width: 719px) {
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { height: 96px; margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) calc(-1 * clamp(1rem, 4vw, 2rem)) 1rem; }
  html[data-look="reading-room"] body.phone-split .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { display: none; }   /* the split screen cannot scroll: no band over the pinned face */
  html[data-look="reading-room"] body.bar-auto .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { margin-top: 0; }
}
/* tablet (720 to 1199): no column; a 200 px band above the poem */
@media (min-width: 720px) and (max-width: 1199px) {
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { height: 200px; border-radius: 4px; margin: 0 0 1.5rem; }
}
/* desktop (>= 1200): two columns, the cover 420 to 520 px on the left and sticky, the poem on the right. ONLY while the
   cover is visible (the :has() switch above); a poem with video keeps .app and every layout exactly as built. The
   spotlight's fixed face (a stage without video shows the translator's still) keeps to the right edge, a little narrower. */
@media (min-width: 1200px) {
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) { display: grid; grid-template-columns: clamp(420px, 30vw, 520px) minmax(0, 1fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; max-width: none; padding-left: 0; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { position: sticky; top: var(--topbar-h, var(--rr-top)); height: calc(100vh - var(--topbar-h, var(--rr-top))); margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) 0 0; }
  html[data-look="reading-room"] body.bar-auto .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .rr-poem-cover { top: 0; height: 100vh; margin-top: 0; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader { max-width: 44rem; margin: 0; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader.has-stage { max-width: none; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="spotlight"] { --spot-w: min(calc((100vh - var(--topbar-h, 4.5rem) - .7rem) * 9 / 16), 28vw); }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="spotlight"] .vslot { left: auto; right: 3vw; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="spotlight"] .stage-grid { grid-template-columns: minmax(0, 1fr) var(--spot-w); gap: 3vw; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="spotlight"] .stage-main { max-width: 44rem; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="focus"] .stage-grid,
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="classic"] .stage-grid { margin: 0; }
}
/* ultra-wide (>= 1800): the cover up to 640 px, the poem column capped at 60rem (~72ch of the poem face), gutters 96 px; no centred strip */
@media (min-width: 1800px) {
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) { grid-template-columns: clamp(520px, 26vw, 640px) minmax(0, 1fr); column-gap: 96px; padding-right: 96px; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader { max-width: 60rem; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader.has-stage { max-width: none; }
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="spotlight"] .stage-main,
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="focus"] .stage-grid,
  html[data-look="reading-room"] .app:has(> .rr-poem-cover):has(> .reader:not(.has-stage), > .reader.has-stage[data-video="none"], > .reader.has-stage[data-layout="focus"]) > .reader[data-layout="classic"] .stage-grid { max-width: 60rem; }
}