/* reader-ux.css: the book reader's chrome (toolbar, dock, spacing), redesigned 2026-10-09.
   Loaded by every books/<slug>.html after its inline <style>, so these rules win (the old toolbar used inline styles,
   hence the !important on button rules). The page content, page-turn engine and audio logic are untouched.
   Principles: one primary action (Listen, gilt), secondary tools grouped in one Aa menu, nothing wraps,
   controls in one docked region, the book uses the height it is given. Tokens match /os.css. */
:root { --os-ink: #14120e; --os-bar: #1a1712; --os-line: rgba(217, 164, 65, .18); --os-gilt: #d9a441; --os-text: #e7dfcc; --os-dim: #a89f8a; --tb: 56px; --dock: 128px; }

/* ---------- toolbar ---------- */
.topbar { height: var(--tb) !important; background: var(--os-ink) !important; border-bottom: 1px solid var(--os-line); gap: 10px !important; padding: 0 16px !important; flex-wrap: nowrap !important; overflow: visible !important; }
.topbar > * { flex: 0 0 auto; }
.topbar a, .topbar button, .topbar select { white-space: nowrap !important; }
.topbar .brand { font-size: 11px !important; letter-spacing: .2em !important; color: var(--os-gilt) !important; margin-right: 4px; }
.topbar .brand .rx-press { opacity: .7; }
.rx-btn, .topbar a.rx-btn { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; box-sizing: border-box; padding: 0 12px !important; border: 1px solid #3a3528 !important; border-radius: 9px !important; background: #221e17 !important; color: var(--os-text) !important; font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; opacity: 1 !important; text-decoration: none !important; cursor: pointer; }
.rx-btn:hover { border-color: #5c5340 !important; background: #2a251c !important; }
.rx-btn:focus-visible, .rx-menu button:focus-visible, .topbar select:focus-visible { outline: 2px solid var(--os-gilt); outline-offset: 2px; }
.rx-btn .ic { font-size: 14px; line-height: 1; }
.rx-back { padding: 0 10px !important; }
.topbar .sel select { height: 36px !important; border-radius: 9px !important; background: #221e17 !important; border: 1px solid #3a3528 !important; color: var(--os-text) !important; font: 600 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; padding: 0 10px !important; max-width: 30vw !important; }
.topbar #wksel { color: var(--os-gilt) !important; }
.rx-spacer { flex: 1 1 auto !important; }
.rx-primary, .topbar a.rx-primary { background: var(--os-gilt) !important; border-color: var(--os-gilt) !important; color: #1b1405 !important; font-weight: 800 !important; }
.rx-primary:hover { background: #e6b556 !important; }
.topbar .notify { display: none !important; }            /* "Keep me posted ... when this is available" is wrong on a finished book */
.topbar .rx-hide { display: none !important; }            /* originals moved into the Aa menu stay in the DOM for their listeners */

/* the Aa menu */
.rx-menuwrap { position: relative; }
.rx-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--os-bar); border: 1px solid #3a3528; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); padding: 8px; z-index: 60; display: none; }
.rx-menu.open { display: block; }
.rx-menu .rx-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px; color: var(--os-dim); font: 600 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: .04em; }
.rx-menu .rx-seg { display: inline-flex; border: 1px solid #3a3528; border-radius: 9px; overflow: hidden; }
.rx-menu button { background: #221e17; color: var(--os-text); border: 0; font: 700 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.rx-menu .rx-seg button + button { border-left: 1px solid #3a3528; }
.rx-menu button:hover { background: #2e281e; }
.rx-menu .rx-item { width: 100%; text-align: left; border-radius: 8px; background: transparent; }
.rx-menu hr { border: 0; border-top: 1px solid #2e2a20; margin: 6px 0; }

/* ---------- the book: fill the height between toolbar and dock ---------- */
.stage { inset: var(--tb) 0 0 0 !important; top: calc(var(--tb) + env(safe-area-inset-top, 0px)) !important; align-items: flex-start !important; padding-top: 14px; box-sizing: border-box; }
.book { height: calc(100dvh - var(--tb) - var(--dock) - 30px) !important; max-height: 1080px; }
.arrow { top: var(--tb) !important; bottom: var(--dock) !important; }

/* ---------- one dock: audio row above the page row, same width, opaque, never overlapping ---------- */
.pbar, .abar { left: 50% !important; transform: translateX(-50%) !important; width: min(760px, 94vw) !important; max-width: none !important; box-sizing: border-box; background: var(--os-bar) !important; border: 1px solid #3a3528 !important; border-radius: 14px !important; flex-wrap: nowrap !important; justify-content: space-between; }
.pbar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; padding: 6px 12px !important; }
.abar { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; padding: 7px 10px !important; gap: 8px !important; }
.abar button, .abar select { white-space: nowrap !important; }
.abar #aplay { background: var(--os-gilt) !important; color: #1b1405 !important; min-width: 128px; }
.abar input[type=range], .pbar input[type=range] { flex: 1 1 auto; width: auto !important; min-width: 60px; accent-color: var(--os-gilt) !important; }
.pbar button, .abar button.sk, .abar select { background: #221e17 !important; border-color: #3a3528 !important; color: var(--os-text) !important; }
.pbar .pcount, .abar .at { color: var(--os-dim) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the dock's height is reserved from the first paint (every book has audio now): if the book shrank when the audio row
   appeared, the pages measured a moment earlier would overflow their page (10-09) */

/* the "About this edition" text is for search engines and the scroll view: keep it fully below the fold */
.about { margin-top: calc(100dvh + 40px) !important; }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) { .rx-label { display: none; } .rx-btn { padding: 0 10px !important; } }
@media (max-width: 900px) { .topbar .brand { display: none !important; } }
@media (max-width: 640px) {
  :root { --tb: 52px; --dock: 120px; }
  .topbar { gap: 6px !important; padding: 0 8px !important; }
  .topbar .sel select { max-width: 42vw !important; }
  .rx-primary .rx-label { display: none; }
  .abar #aplay { min-width: 0; }
  .abar .at { display: none; }
}

/* [hidden] must win over the button display rule (e.g. the Scripture button on books without references) */
.topbar [hidden], .topbar a.rx-btn[hidden], .topbar button.rx-btn[hidden] { display: none !important; }
/* one Listen, not two: when the audio row is in the dock, its "Listen along" is the primary action */
body.rx-audio .topbar .rx-primary { display: none !important; }
.topbar .sel select { max-width: min(30vw, 420px) !important; }