/* Real books only (html.manifest-mode): reading chrome layout, and the immersive full-screen mode (immersive.js).
   The landing's book.json embed never gets .manifest-mode or .is-immersive, so nothing here reaches it. */

/* ---------- normal mode, wide screens: the options row sits at the right end of the page-turn row (more height for
   the book). Below 1320 px the centred Previous/progress/Next group would run into it, so it keeps its own row. ---------- */
@media (min-width: 1320px) and (min-height: 601px) {
  .manifest-mode #stage.has-tools #readerTools { position: absolute; right: 20px; bottom: 12px; padding: 0; z-index: 16; }
  .manifest-mode #stage.has-tools #readingControls { min-height: 64px; padding-bottom: 8px; }
}
/* A real book is not capped at the old 1180 px wide box; viewer.js caps the spread itself (1600 px outside full screen). */
.manifest-mode #bookViewport { max-width: none; }
/* Design D has no table shadow under the book (one spine shadow per spread is all); the old ellipse was positioned from the
   visible pages after a turn and could be left stale beside the book after a dragged slide (seen in 1440_slide_mid50.png). */
.manifest-mode #bookShadow { display: none; }

/* ---------- immersive mode ---------- */
/* Buttons are nearly opaque: they float over the page (text or art) until they fade. */
html.is-immersive { --imm-ink: #f4eee6; --imm-line: rgba(255, 248, 238, .3); --imm-btn: rgba(24, 20, 27, .88); --imm-btn-hover: rgba(46, 40, 50, .94); }
html.is-immersive, html.is-immersive body,
html.is-immersive #stage { background: radial-gradient(ellipse at 50% 45%, var(--imm-bg-2, #2b2630) 0, var(--imm-bg, #1b181e) 70%); }
html.is-immersive[data-theme="dark"], html.is-immersive[data-theme="dark"] body,
html.is-immersive[data-theme="dark"] #stage { background: radial-gradient(ellipse at 50% 45%, var(--imm-bg-2-d, #18151b) 0, var(--imm-bg-d, #0d0b0f) 70%); }
html.is-immersive #bookWrap { padding: 0; }
html.is-immersive #bookShadow { display: none; }
/* The chrome floats over the backdrop and fades. */
html.is-immersive #topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; border-bottom: 0; color: var(--imm-ink);
  background: linear-gradient(to bottom, rgba(12, 10, 14, .78), rgba(12, 10, 14, .35) 70%, rgba(12, 10, 14, 0)); padding-top: max(8px, env(safe-area-inset-top)); }
html.is-immersive #readingControls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; min-height: 60px;
  background: linear-gradient(to top, rgba(12, 10, 14, .78), rgba(12, 10, 14, .35) 70%, rgba(12, 10, 14, 0)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
html.is-immersive #stage.has-tools #readerTools { position: absolute; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 0; z-index: 31; }
html.is-immersive #topbar, html.is-immersive #readingControls, html.is-immersive #readerTools { transition: opacity .35s ease; }
html.is-immersive #stage.chrome-hidden #topbar,
html.is-immersive #stage.chrome-hidden #readingControls,
html.is-immersive #stage.chrome-hidden #readerTools { opacity: 0; pointer-events: none; }
html.is-immersive #stage.chrome-hidden, html.is-immersive #stage.chrome-hidden #book.turn-on { cursor: none; }
/* Light-on-dark controls (both themes: the backdrop is dark in both). */
html.is-immersive #bookTitle, html.is-immersive #progress { color: var(--imm-ink); }
html.is-immersive .iconbtn, html.is-immersive .toolbtn, html.is-immersive .navbtn, html.is-immersive .toolsel {
  color: var(--imm-ink); border-color: var(--imm-line); background: var(--imm-btn); }
html.is-immersive .iconbtn:hover, html.is-immersive .toolbtn:hover, html.is-immersive .navbtn:hover, html.is-immersive .toolsel:hover { background: var(--imm-btn-hover); }
html.is-immersive .toolbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
html.is-immersive button:focus-visible, html.is-immersive .toolsel:focus-within { outline-color: #e9d9ff; }
html.is-immersive .toolsel option { color: #2b2420; background: #fbf6ec; }
html.is-immersive #btnFullscreen { background: rgba(255, 248, 238, .16); }
/* Phone in immersive: the options row sits above the page-turn row, both over the bottom of the page. */
@media (max-width: 760px) {
  html.is-immersive #stage.has-tools #readerTools { left: 0; right: 0; bottom: calc(52px + max(8px, env(safe-area-inset-bottom))); justify-content: center; }
  html.is-immersive #readingControls { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-immersive #topbar, html.is-immersive #readingControls, html.is-immersive #readerTools { transition: none; }
}

/* ---------- 19.10 (Oz item 14, "Full Page ... something black on the whole page") ----------
   Full screen keeps the warm paper desk (light theme) instead of the near-black backdrop, the one page fills the screen on a
   phone or portrait tablet (viewer.js), and the controls float over it as the same cream pills, without dark gradient bars.
   Safe areas (notch, home bar) are kept by the chrome's padding. The dark theme keeps its dark backdrop. */
html.is-immersive:not([data-theme="dark"]), html.is-immersive:not([data-theme="dark"]) body,
html.is-immersive:not([data-theme="dark"]) #stage { background: radial-gradient(120% 70% at 50% 0%, #fffaf3 0, #f4e8d8 60%, #ead8c2 100%); }
html.is-immersive #topbar, html.is-immersive #readingControls { background: none; }
html.is-immersive #topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
html.is-immersive:not([data-theme="dark"]) #bookTitle { color: #33291f; text-shadow: 0 1px 8px rgba(255, 246, 227, .9); }
html.is-immersive:not([data-theme="dark"]) #progress { color: #33291f; }
html.is-immersive:not([data-theme="dark"]) .iconbtn, html.is-immersive:not([data-theme="dark"]) .toolbtn, html.is-immersive:not([data-theme="dark"]) .navbtn-prev,
html.is-immersive:not([data-theme="dark"]) .toolsel { color: #33291f; background: rgba(255, 246, 227, .94); border-color: transparent; }
html.is-immersive:not([data-theme="dark"]) .navbtn-next { color: #fff6e3; background: #33291f; }
html.is-immersive:not([data-theme="dark"]) #btnFullscreen { background: rgba(255, 246, 227, .94); }
html.is-immersive .progress-box { padding: 6px 12px; border-radius: 999px; background: rgba(255, 246, 227, .9); box-shadow: 0 2px 10px rgba(51, 41, 31, .16); }
html.is-immersive[data-theme="dark"] .progress-box { background: rgba(34, 29, 25, .88); }
html.is-immersive #book.turn-on.bd-phone .turn-shift .slot-single:not(.bd-cover) { border-radius: 0; }
html.is-immersive #book.bd-phone .page.bd-page:not(.bd-cover):not(.bd-back) { border-radius: 0; }
@media (hover: none) {
  html.is-immersive:not([data-theme="dark"]) #topbar .iconbtn:hover, html.is-immersive:not([data-theme="dark"]) #readingControls .navbtn-prev:hover { background: rgba(255, 246, 227, .94); }
  html.is-immersive:not([data-theme="dark"]) #readingControls .navbtn-next:hover { background: #33291f; }
}
/* m3 (early review 19.10): a visible keyboard focus ring on the light full-screen desk */
html.is-immersive:not([data-theme="dark"]) button:focus-visible, html.is-immersive:not([data-theme="dark"]) a:focus-visible,
html.is-immersive:not([data-theme="dark"]) .toolsel:focus-within { outline: 3px solid #33291f; outline-offset: 3px; }

/* 26.10: the sample book's every-page button floats with the chrome, right above the page-turn row */
html.is-immersive #sampleCtaBar { position:absolute; left:0; right:0; bottom:calc(60px + max(10px, env(safe-area-inset-bottom))); z-index:31; padding:0 16px; transition:opacity .35s ease; }
html.is-immersive #stage.chrome-hidden #sampleCtaBar { opacity:0; pointer-events:none; }