/* ==========================================================================
   BOOK TEMPLATE — style.css
   --------------------------------------------------------------------------
   1. Tokens          5. Cover page        9. Panels, sheets, overlays
   2. Themes (14)     6. Chapter pages    10. Lightbox, toasts, read-aloud
   3. Base            7. Contents / 404   11. Motion & reveal
   4. Top bar         8. Footer           12. Zen, RTL, print, utilities
   Per-book tweaks belong in custom.css (loaded after this file), never here.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
    --font-base: 17px;
    --font-scale: 1;
    --line-height: 1.7;
    --reading-width: 740px;
    --page-width: 1040px;
    --gutter: 16px;
    --font-heading: 'Gabriela', Georgia, 'Times New Roman', serif;
    --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Gabriela', Georgia, 'Times New Roman', serif;
    --font-body: var(--font-sans);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --topbar-h: 58px;
    --dur-fast: 150ms;
    --dur: 260ms;
    --dur-slow: 600ms;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --shadow-1: 0 1px 2px var(--c-shadow), 0 2px 8px var(--c-shadow);
    --shadow-2: 0 4px 14px var(--c-shadow), 0 10px 32px var(--c-shadow);
    --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 640px) {
    :root { --font-base: 16px; --topbar-h: 54px; --gutter: 14px; }
}

/* ---------- 2. THEMES ---------------------------------------------------
   Each theme sets the same variables. Applied on <html class="theme-…"> and
   on the swatches in the theme picker (so the picker needs no extra colours).
   --c-on-accent is the text colour that is readable ON the accent colour.
   -------------------------------------------------------------------------- */
:root, .theme-creme {
    --scheme: light;
    --c-bg: #fffdf5; --c-panel: #fcf6e5; --c-panel-2: #f5ecd3;
    --c-text: #3d3625; --c-text-muted: #7a6d4d; --c-heading: #8a5f0a;
    --c-primary: #a5720c; --c-secondary: #8a6f2d; --c-accent: #8f5e00; --c-on-accent: #ffffff;
    --c-border: #e6dac1; --c-shadow: rgba(74, 66, 45, .10);
    --c-link: #8a5f0a; --c-link-hover: #b8860b; --c-selection: #f4e2a6; --c-highlight: #fff0b3;
}
.theme-ink {
    --scheme: light;
    --c-bg: #f5f5f5; --c-panel: #ffffff; --c-panel-2: #ececec;
    --c-text: #1a1a1a; --c-text-muted: #5c5c5c; --c-heading: #111111;
    --c-primary: #222222; --c-secondary: #4d4d4d; --c-accent: #111111; --c-on-accent: #ffffff;
    --c-border: #dddddd; --c-shadow: rgba(0, 0, 0, .10);
    --c-link: #1f4fbf; --c-link-hover: #000000; --c-selection: #d6d6d6; --c-highlight: #fff3a3;
}
.theme-ethereal {
    --scheme: light;
    --c-bg: #f0f4f0; --c-panel: #e6ede6; --c-panel-2: #d9e4d9;
    --c-text: #1b3022; --c-text-muted: #4f6455; --c-heading: #2d5a27;
    --c-primary: #2d5a27; --c-secondary: #467142; --c-accent: #2f5e2b; --c-on-accent: #ffffff;
    --c-border: #cedbcd; --c-shadow: rgba(27, 48, 34, .10);
    --c-link: #2d5a27; --c-link-hover: #467142; --c-selection: #c5e0c1; --c-highlight: #e8f3c8;
}
.theme-denim {
    --scheme: light;
    --c-bg: #f0f4f8; --c-panel: #e1e7ee; --c-panel-2: #d2dbe6;
    --c-text: #243b53; --c-text-muted: #55677c; --c-heading: #2b4a6b;
    --c-primary: #3c5e82; --c-secondary: #5a7290; --c-accent: #334e68; --c-on-accent: #ffffff;
    --c-border: #bcccdc; --c-shadow: rgba(36, 59, 83, .10);
    --c-link: #2f5a8f; --c-link-hover: #486581; --c-selection: #c7d7ea; --c-highlight: #fff1b8;
}
.theme-peach {
    --scheme: light;
    --c-bg: #fff5f2; --c-panel: #fcf0eb; --c-panel-2: #f7e3da;
    --c-text: #4a3229; --c-text-muted: #7e6257; --c-heading: #a94f2e;
    --c-primary: #b7583a; --c-secondary: #9c6a58; --c-accent: #b0512f; --c-on-accent: #ffffff;
    --c-border: #f0ded5; --c-shadow: rgba(92, 64, 51, .10);
    --c-link: #a94f2e; --c-link-hover: #d68162; --c-selection: #ffd8c8; --c-highlight: #ffe6b8;
}
.theme-sahara {
    --scheme: light;
    --c-bg: #fdf5e6; --c-panel: #f5eedc; --c-panel-2: #ece2c8;
    --c-text: #4e362c; --c-text-muted: #7b6559; --c-heading: #7a5240;
    --c-primary: #8c6547; --c-secondary: #8a6a52; --c-accent: #7f5a3f; --c-on-accent: #ffffff;
    --c-border: #e6dcc5; --c-shadow: rgba(93, 64, 55, .10);
    --c-link: #7a5240; --c-link-hover: #a67b5b; --c-selection: #f0dcb8; --c-highlight: #fbe8b0;
}
.theme-lavendermist {
    --scheme: light;
    --c-bg: #f9f5ff; --c-panel: #f3ebff; --c-panel-2: #e9dcff;
    --c-text: #3b2260; --c-text-muted: #6a5588; --c-heading: #5e1791;
    --c-primary: #6a1b9a; --c-secondary: #7b4aa0; --c-accent: #6a1b9a; --c-on-accent: #ffffff;
    --c-border: #e7d6ff; --c-shadow: rgba(74, 20, 140, .10);
    --c-link: #6a1b9a; --c-link-hover: #9c27b0; --c-selection: #e2cdfd; --c-highlight: #fff0c2;
}
.theme-midnight {
    --scheme: dark;
    --c-bg: #0a0e14; --c-panel: #161e2b; --c-panel-2: #1f2a3b;
    --c-text: #e6f1ff; --c-text-muted: #a9bad3; --c-heading: #8fbfff;
    --c-primary: #60a5fa; --c-secondary: #7fb3f7; --c-accent: #2364c0; --c-on-accent: #ffffff;
    --c-border: #2d3748; --c-shadow: rgba(0, 0, 0, .55);
    --c-link: #7cb3ff; --c-link-hover: #b4d2ff; --c-selection: #274a7a; --c-highlight: #3b4a10;
}
.theme-auburn {
    --scheme: dark;
    --c-bg: #1a0a0a; --c-panel: #2a1212; --c-panel-2: #3a1a1a;
    --c-text: #ffefef; --c-text-muted: #d4b0b0; --c-heading: #ff9e9e;
    --c-primary: #f87171; --c-secondary: #e19191; --c-accent: #c22f2f; --c-on-accent: #ffffff;
    --c-border: #451a1a; --c-shadow: rgba(0, 0, 0, .6);
    --c-link: #ff9e9e; --c-link-hover: #fca5a5; --c-selection: #6b1f1f; --c-highlight: #4a3a10;
}
.theme-artdeco {
    --scheme: dark;
    --c-bg: #121212; --c-panel: #1c1c1c; --c-panel-2: #262626;
    --c-text: #f4f4f4; --c-text-muted: #bdbdbd; --c-heading: #e0bd4a;
    --c-primary: #d4af37; --c-secondary: #c9b16a; --c-accent: #8e6d13; --c-on-accent: #ffffff;
    --c-border: #333333; --c-shadow: rgba(0, 0, 0, .7);
    --c-link: #e0bd4a; --c-link-hover: #f1e5ac; --c-selection: #5a4a12; --c-highlight: #4a3f14;
}
.theme-acid {
    --scheme: dark;
    --c-bg: #050505; --c-panel: #0a0f0a; --c-panel-2: #131c13;
    --c-text: #dfffdf; --c-text-muted: #a9cfa9; --c-heading: #6dff4f;
    --c-primary: #39ff14; --c-secondary: #7fe36b; --c-accent: #1f7a1f; --c-on-accent: #ffffff;
    --c-border: #1a2a1a; --c-shadow: rgba(0, 0, 0, .7);
    --c-link: #7dff64; --c-link-hover: #bfff00; --c-selection: #1f4a1f; --c-highlight: #2a4a10;
}
.theme-vaporwave {
    --scheme: dark;
    --c-bg: #1a0b2e; --c-panel: #2d144d; --c-panel-2: #3a1d62;
    --c-text: #ffe6f6; --c-text-muted: #d9a9cf; --c-heading: #ff8ad8;
    --c-primary: #01cdfe; --c-secondary: #05ffa1; --c-accent: #8a3fd6; --c-on-accent: #ffffff;
    --c-border: #4a237a; --c-shadow: rgba(0, 0, 0, .55);
    --c-link: #7fe4ff; --c-link-hover: #05ffa1; --c-selection: #5a2a8a; --c-highlight: #5a3a10;
}
.theme-boreal {
    --scheme: dark;
    --c-bg: #0d1b1e; --c-panel: #162d31; --c-panel-2: #1e3a40;
    --c-text: #e0f2f1; --c-text-muted: #a7c9c6; --c-heading: #5fd3c7;
    --c-primary: #26a69a; --c-secondary: #4db6ac; --c-accent: #0f7f74; --c-on-accent: #ffffff;
    --c-border: #23474d; --c-shadow: rgba(0, 0, 0, .55);
    --c-link: #6fd6cb; --c-link-hover: #a8e6df; --c-selection: #1f5f5a; --c-highlight: #3a4a10;
}
.theme-neonvoid {
    --scheme: dark;
    --c-bg: #000000; --c-panel: #001a1a; --c-panel-2: #002626;
    --c-text: #e0ffff; --c-text-muted: #a3d6d6; --c-heading: #4ff2f2;
    --c-primary: #00ffff; --c-secondary: #66d9d9; --c-accent: #0e7f7a; --c-on-accent: #ffffff;
    --c-border: #003333; --c-shadow: rgba(0, 255, 255, .12);
    --c-link: #66f0f0; --c-link-hover: #afeeee; --c-selection: #005a5a; --c-highlight: #3a4a10;
}

/* ---------- 3. BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    font-size: calc(var(--font-base) * var(--font-scale));
    font-family: var(--font-body);
    color: var(--c-text);
    background: var(--c-bg);
    color-scheme: var(--scheme);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 12px);
    accent-color: var(--c-accent);
}
html.font-sans { --font-body: var(--font-sans); }
html.font-serif { --font-body: var(--font-serif); }
body {
    margin: 0;
    line-height: var(--line-height);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--c-bg);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.no-scroll { overflow: hidden; }
::selection { background: var(--c-selection); }
a { color: var(--c-link); text-decoration: none; text-underline-offset: .15em; transition: color var(--dur-fast); }
a:hover { color: var(--c-link-hover); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font: 600 .85em var(--font-sans); background: var(--c-panel-2); border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: 6px; padding: .1em .5em; }
code { font-family: ui-monospace, Consolas, 'SFMono-Regular', Menlo, monospace; font-size: .92em; background: var(--c-panel-2); padding: .1em .35em; border-radius: 5px; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }
.icon { width: 1.35em; height: 1.35em; flex: none; vertical-align: middle; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--c-accent); color: var(--c-on-accent); padding: .6rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { left: 8px; }
[hidden] { display: none !important; }

.page {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--gutter) 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.banner { margin: 12px 0 4px; }
.banner img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-1); }

/* Progress bar */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transition: width 120ms linear; }

/* Splash ("flash" title screen): only shown when the boot script adds html.show-splash.
   THE WHOLE PICTURE, ALWAYS: it is scaled to fit inside the screen (never cropped, never trimmed by
   rounded corners, the zoom ends at exactly 100 %), whatever its shape and whatever the screen. */
.splash {
    position: fixed; inset: 0; z-index: 900;
    display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
    padding: 3vh 3vw; box-sizing: border-box; background: var(--c-bg); cursor: pointer;
    opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
html.show-splash .splash { display: flex; }
.splash.is-on { opacity: 1; }
.splash.is-off { opacity: 0; pointer-events: none; }
.splash img {
    display: block; flex: 0 1 auto; min-height: 0;
    max-width: 94vw; max-height: 84vh; max-height: 84dvh; width: auto; height: auto; object-fit: contain;
    box-shadow: var(--shadow-2);
    transform: scale(.96); transition: transform 2.6s var(--ease);
}
.splash.is-on img { transform: none; }
.splash-hint { font-family: var(--font-heading); font-size: 1.1rem; color: var(--c-text-muted); letter-spacing: .04em; }

/* ---------- 4. TOP BAR -------------------------------------------------- */
/* A floating rounded "pill" that sticks just below the top edge (never touches the corners). */
.topbar {
    position: sticky; top: 8px; z-index: 50;
    margin: 10px 0 18px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--c-panel) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-radius var(--dur);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .topbar { background: var(--c-panel); } }
.topbar.is-stuck { box-shadow: var(--shadow-2); }
.topbar.is-hidden { transform: translateY(calc(-100% - 12px)); }
.topbar-inner { max-width: var(--page-width); margin: 0 auto; display: flex; align-items: center; gap: 6px; min-height: calc(var(--topbar-h) - 12px); }
.tb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: 44px; height: 44px; flex: none; padding: 0;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--c-text);
    transition: background var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.tb-btn:hover { background: var(--c-panel-2); color: var(--c-heading); text-decoration: none; }
.tb-btn:active { transform: scale(.94); }
.tb-btn.is-disabled { opacity: .3; pointer-events: none; }
.tb-btn[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); }
.tb-arrow { background: var(--c-panel-2); }
.tb-arrow:hover { background: var(--c-accent); color: var(--c-on-accent); }
.tb-select-wrap { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; margin: 0 auto; }
.tb-select-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; color: var(--c-text-muted); pointer-events: none; }
.tb-select {
    width: 100%; height: 44px; padding: 0 36px 0 38px;
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'><path d='M7 10l5 5 5-5'/></svg>") no-repeat right 10px center / 18px;
    color: var(--c-text); font-weight: 600; font-size: .95rem;
    appearance: none; -webkit-appearance: none; cursor: pointer;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.tb-select:hover { border-color: var(--c-primary); }
.tb-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.tb-read .icon-when-reading, .tb-read[aria-pressed="true"] .icon-when-idle { display: none; }
.tb-read[aria-pressed="true"] .icon-when-reading { display: block; }
@media (max-width: 640px) {
    .tb-tools .tb-btn:not(.tb-more) { display: none; }
    .tb-btn { width: 42px; height: 42px; }
    .tb-select { height: 42px; font-size: .9rem; }
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 46px; padding: .7rem 1.4rem;
    border-radius: var(--radius-pill); border: 2px solid transparent;
    font-weight: 700; font-family: var(--font-sans); line-height: 1.2; text-align: center;
    text-decoration: none; cursor: pointer; white-space: normal;
    transition: transform var(--dur-fast), box-shadow var(--dur), background var(--dur-fast), color var(--dur-fast), filter var(--dur-fast);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); box-shadow: var(--shadow-1); }
.btn-primary:hover { color: var(--c-on-accent); filter: brightness(1.08); }
.btn-secondary { background: var(--c-panel); color: var(--c-text); border-color: var(--c-border); }
.btn-secondary:hover { color: var(--c-heading); border-color: var(--c-primary); }
.btn-ghost { background: transparent; color: var(--c-text-muted); min-height: 40px; padding: .4rem .9rem; }
.btn-ghost:hover { color: var(--c-text); box-shadow: none; transform: none; background: var(--c-panel-2); }
.btn-lg { font-size: 1.15rem; padding: .9rem 2rem; min-height: 54px; }
.btn .icon { width: 1.25em; height: 1.25em; }
.btn-arrow { transition: transform var(--dur-fast); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- 5. COVER PAGE ---------------------------------------------- */
.cover-page { display: flex; flex-direction: column; gap: 2.6rem; padding-bottom: 1rem; }
.cover-page h1, .cover-page h2, .cover-page h3 { font-family: var(--font-heading); color: var(--c-heading); font-weight: 400; }
.cover-page img { max-width: 100%; height: auto; }
.cover-top {
    display: grid; grid-template-columns: minmax(220px, 38%) 1fr; gap: clamp(1.2rem, 3.5vw, 2.6rem);
    align-items: center;
    background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: clamp(1.2rem, 3vw, 2.4rem); box-shadow: var(--shadow-1);
}
.cover-top.no-art { grid-template-columns: 1fr; text-align: center; }
.cover-art { margin: 0; }
.cover-art img {
    width: 100%; border-radius: 10px; box-shadow: 0 14px 30px var(--c-shadow), 0 2px 6px var(--c-shadow);
    cursor: zoom-in; transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.cover-art img:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 36px var(--c-shadow); }
.cover-text { min-width: 0; }
.cover-title { font-family: var(--font-heading); font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.12; margin: 0 0 .35rem; color: var(--c-heading); letter-spacing: -.01em; text-wrap: balance; }
.cover-subtitle { font-family: var(--font-heading); font-size: 1.2rem; margin: 0 0 .5rem; color: var(--c-text-muted); font-style: italic; }
.cover-author { margin: 0 0 1rem; font-size: 1.05rem; color: var(--c-text-muted); }
.cover-author span { color: var(--c-text); font-weight: 700; }
.cover-blurb { color: var(--c-text); font-size: 1.02rem; max-width: 58ch; }
.cover-blurb p { margin: 0 0 .8rem; }
.cover-resume { margin: 1.2rem 0 0; font-size: .95rem; color: var(--c-text-muted); }
.cover-resume a { font-weight: 700; }
/* the one "Presented by …" line: last thing on the cover, nothing below it */
.cover-publisher { margin: 2.8rem 0 0; padding: 0 0 calc(.6rem + var(--safe-b)); text-align: center; font-size: .86rem; color: var(--c-text-muted); letter-spacing: .02em; }
.cover-publisher a { color: var(--c-text-muted); font-weight: 700; }
.cover-publisher a:hover { color: var(--c-link-hover); }
.cover-publisher img { height: 1.4em; width: auto; vertical-align: middle; margin-right: .35em; border-radius: 3px; }
.cover-section-title { font-family: var(--font-heading); font-size: 1.5rem; margin: 0 0 1rem; color: var(--c-heading); text-align: center; }
.chapter-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.chapter-card {
    display: flex; align-items: center; gap: .9rem; height: 100%;
    padding: .85rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-panel); color: var(--c-text); text-decoration: none;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur), border-color var(--dur-fast);
}
.chapter-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-primary); color: var(--c-text); }
.chapter-card.is-current { border-color: var(--c-accent); box-shadow: inset 0 0 0 2px var(--c-accent); }
.chapter-card.is-done .card-num { background: var(--c-accent); color: var(--c-on-accent); }
.card-num { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c-panel-2); color: var(--c-heading); font-family: var(--font-heading); font-size: 1.1rem; }
.kind-front .card-num { font-size: .95rem; }
.card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card-title { font-weight: 700; line-height: 1.3; }
.card-time { font-size: .82rem; color: var(--c-text-muted); margin-top: .15rem; }
.card-arrow { color: var(--c-text-muted); transition: transform var(--dur-fast); }
.chapter-card:hover .card-arrow { transform: translateX(4px); color: var(--c-heading); }

/* Picture strip: every picture in the same 4:3 frame, alternating sides */
.cover-strip { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2.4rem); padding-top: .4rem; border-top: 1px solid var(--c-border); }
.strip-row { display: grid; grid-template-columns: minmax(240px, 46%) 1fr; gap: clamp(1rem, 3vw, 2.2rem); align-items: center; margin: 0; }
.strip-row-alt { grid-template-columns: 1fr minmax(240px, 46%); }
.strip-row-alt .strip-media { order: 2; }
.strip-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--c-panel-2); }
.strip-media img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform var(--dur-slow) var(--ease); }
.strip-media:hover img { transform: scale(1.04); }
.strip-text { min-width: 0; }
.strip-text h3 { font-family: var(--font-heading); font-size: 1.45rem; margin: 0 0 .5rem; color: var(--c-heading); }
.strip-text p { margin: 0; font-size: 1.02rem; color: var(--c-text); }
@media (max-width: 760px) {
    .cover-top { grid-template-columns: 1fr; text-align: center; }
    .cover-art { max-width: 300px; margin: 0 auto; }
    .cover-blurb { margin: 0 auto; }
    .strip-row, .strip-row-alt { grid-template-columns: 1fr; gap: .8rem; }
    .strip-row-alt .strip-media { order: 0; }
    .strip-text { text-align: center; }
}

/* ---------- 6. CHAPTER PAGES -------------------------------------------- */
.content { flex: 1; outline: none; }
.chapter-body {
    max-width: var(--reading-width); margin: 0 auto; padding: clamp(1rem, 3vw, 2.2rem) clamp(.9rem, 3vw, 2.4rem) 2rem;
    background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.chapter-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); border-bottom: 1px solid var(--c-border); padding-bottom: .5rem; margin-bottom: 1.4rem; }
.chapter-text { font-size: 1.02rem; overflow-wrap: break-word; }
.chapter-text > *:first-child { margin-top: 0; }
.chapter-text h1, .chapter-text h2, .chapter-heading {
    font-family: var(--font-heading); color: var(--c-heading); font-weight: 400; line-height: 1.2;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 1.4rem; text-wrap: balance;
}
.chapter-text h3 { font-family: var(--font-heading); color: var(--c-heading); font-weight: 400; font-size: 1.45rem; margin: 2.2rem 0 .8rem; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.chapter-text h4 { color: var(--c-heading); font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
/* Body text is fully justified (settings.php $Justify_Text = false turns it off); hyphenation follows
   the page language. Verse, poems and anything marked .text-left / .text-center keep their own alignment. */
.chapter-text p, .chapter-text li { margin: 0 0 1.1em; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.chapter-text li { margin: .3em 0; }
body.no-justify .chapter-text p, body.no-justify .chapter-text li { text-align: start; }
.chapter-text .text-left, .chapter-text .text-left p, .chapter-text [align="left"] { text-align: start !important; }
.text-center, .chapter-text .text-center p, .chapter-text [align="center"], .chapter-text center { text-align: center !important; }
.chapter-text p.drop-cap::first-letter, .chapter-text .drop-cap::first-letter {
    float: left; font-family: var(--font-heading); font-size: 3.6em; line-height: .8; padding: .08em .12em 0 0; color: var(--c-heading); font-weight: 400;
}
[dir="rtl"] .chapter-text .drop-cap::first-letter { float: right; padding: .08em 0 0 .12em; }
.chapter-text blockquote {
    margin: 1.6rem 0; padding: 1rem 1.3rem; border-left: 4px solid var(--c-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--c-panel-2); color: var(--c-text); font-style: italic;
}
.chapter-text blockquote p { margin: 0 0 .5em; }
.chapter-text blockquote cite { display: block; font-style: normal; font-size: .9rem; color: var(--c-text-muted); text-align: right; }
.chapter-text blockquote cite::before { content: "— "; }
.chapter-text .verse, .chapter-text .poem { margin: 1.4rem auto; padding: .4rem 1.2rem; max-width: 34em; font-style: italic; line-height: 1.55; border-left: 2px solid var(--c-border); }
.chapter-text .verse p, .chapter-text .poem p { margin: 0 0 .9em; text-align: start; hyphens: manual; }
.chapter-text hr.scene-break { border: 0; text-align: center; margin: 2.4rem 0; }
.chapter-text hr.scene-break::before { content: "✦ ✦ ✦"; color: var(--c-primary); letter-spacing: .6em; font-size: .9rem; }
.chapter-text ul, .chapter-text ol { padding-left: 1.6em; margin: 0 0 1.1em; }
.chapter-text li::marker { color: var(--c-primary); font-weight: 700; }
.chapter-text table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.chapter-text th, .chapter-text td { padding: .55rem .7rem; border: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.chapter-text th { background: var(--c-panel-2); color: var(--c-heading); }
.chapter-text .table-wrap { overflow-x: auto; }
.chapter-text a.bible-ref, .chapter-text strong > a { font-weight: 700; border-bottom: 1px dotted var(--c-primary); }
.chapter-text a.bible-ref:hover { border-bottom-style: solid; text-decoration: none; }
.chapter-text mark, mark.search-hit { background: var(--c-highlight); color: inherit; border-radius: 3px; padding: 0 .1em; }
.tts-current { background: var(--c-highlight); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Figures. Legacy .chapter-image (+ .float-left/.float-right) still works. */
.chapter-text img, .figure img, .chapter-image { border-radius: var(--radius-sm); box-shadow: var(--shadow-1); cursor: zoom-in; }
.figure { margin: 1.4rem 0; }
.figure img { width: 100%; }
.figure figcaption { font-size: .88rem; color: var(--c-text-muted); text-align: center; margin-top: .5rem; font-style: italic; }
.figure figcaption.fig-name { font-style: normal; font-size: .8rem; opacity: .85; }
.figure-full, .figure-center { clear: both; }
.figure-right { float: right; clear: right; width: min(44%, 340px); margin: .3rem 0 1rem 1.4rem; }
.figure-left { float: left; clear: left; width: min(44%, 340px); margin: .3rem 1.4rem 1rem 0; }
.chapter-image { max-width: min(44%, 340px); float: right; clear: right; margin: .3rem 0 1rem 1.4rem; }
.chapter-image.float-left { float: left; clear: left; margin: .3rem 1.4rem 1rem 0; }
.chapter-image.float-none, .chapter-image.full { float: none; max-width: 100%; width: 100%; margin: 1.4rem 0; }
.chapter-text h3, .chapter-end, .the-end { clear: both; }
@media (max-width: 600px) {
    .figure-right, .figure-left, .chapter-image, .chapter-image.float-left { float: none; width: 100%; max-width: 100% !important; margin: 1.2rem 0; }
}
/* Picture band: <div class="carousel"> groups 2-3 pictures (template-v1 books). Without this rule every
   picture inside kept its float and they stacked down the right edge; here the group is one full-width
   band of equal pictures, clear of the text above and below. */
.chapter-text .carousel { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.6rem 0; align-items: start; }
.chapter-text .carousel > div { margin: 0; }
.chapter-text .carousel .chapter-image { float: none; width: 100%; max-width: 100%; margin: 0; }
@media (max-width: 600px) {
    .chapter-text .carousel { grid-template-columns: 1fr; gap: 1.2rem; }
}
/* Scripture citation: <p class="verse-ref">MARK 16:15-18</p> above a quoted passage. The printed books set
   it in caps; typed as <h3> it would become a section heading (clears floats, breaks the rhythm). */
.chapter-text .verse-ref { margin: 1.4rem 0 .4rem; text-align: start; font-size: .9rem; letter-spacing: .04em; color: var(--c-text-muted); }
.chapter-text .verse-ref strong, .chapter-text .verse-ref strong > a { font-weight: 700; color: inherit; }
.chapter-text .verse-ref + blockquote { margin-top: 0; }

/* Up-next card / The End */
.chapter-end { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: .8rem; }
.next-card {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label arrow" "title arrow" "time arrow"; align-items: center; column-gap: 1rem;
    padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--c-accent); color: var(--c-on-accent); text-decoration: none;
    box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur), filter var(--dur-fast);
}
.next-card:hover { text-decoration: none; color: var(--c-on-accent); transform: translateY(-3px); box-shadow: var(--shadow-2); filter: brightness(1.06); }
.next-card-label { grid-area: label; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.next-card-title { grid-area: title; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.25; }
.next-card-time { grid-area: time; font-size: .85rem; opacity: .85; }
.next-card-arrow { grid-area: arrow; font-size: 2rem; transition: transform var(--dur-fast); }
.next-card:hover .next-card-arrow { transform: translateX(6px); }
.prev-link { align-self: flex-start; font-size: .92rem; color: var(--c-text-muted); }
.the-end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem 0; font-family: var(--font-heading); font-size: 1.4rem; color: var(--c-heading); }
.the-end-mark { color: var(--c-primary); font-size: 1.6rem; }

/* ---------- 7. CONTENTS PAGE / 404 -------------------------------------- */
.contents-list { list-style: none; margin: 0; padding: 0; }
.contents-item { border-top: 1px solid var(--c-border); padding: .5rem 0; }
.contents-item:first-child { border-top: 0; }
.contents-link { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: baseline; padding: .55rem .3rem; border-radius: var(--radius-sm); color: var(--c-text); font-weight: 700; }
.contents-link:hover { background: var(--c-panel-2); text-decoration: none; color: var(--c-heading); }
.contents-num { font-family: var(--font-heading); color: var(--c-heading); min-width: 1.6em; text-align: right; }
.kind-front .contents-link { grid-template-columns: 1fr auto; }
.contents-time { font-size: .82rem; font-weight: 400; color: var(--c-text-muted); }
.contents-subs { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 2.6rem; font-size: .93rem; }
.contents-subs li { padding: .15rem 0; }
.contents-subs a { color: var(--c-text-muted); }
.contents-subs a::before { content: "› "; color: var(--c-primary); }
.not-found { text-align: center; }
.not-found-code { font-family: var(--font-heading); font-size: 5rem; margin: 0; color: var(--c-border); line-height: 1; }
.not-found h1 { font-family: var(--font-heading); color: var(--c-heading); }

/* ---------- 8. FOOTER --------------------------------------------------- */
/* Deliberately bare: a "Back to top" link on chapter pages, nothing on the cover (Footer.php). */
.site-footer { margin-top: auto; padding: 2rem 0 calc(.5rem + var(--safe-b)); text-align: center; font-size: .86rem; color: var(--c-text-muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .6rem; }
.footer-title { font-family: var(--font-heading); color: var(--c-heading); font-size: 1rem; }
.footer-link { color: var(--c-text-muted); }

/* ---------- 9. PANELS, SHEETS, OVERLAYS -------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity var(--dur); }
.backdrop.is-on { opacity: 1; }
.panel, .sheet {
    position: fixed; z-index: 80; background: var(--c-panel); color: var(--c-text);
    border: 1px solid var(--c-border); box-shadow: var(--shadow-2);
    max-height: min(85vh, 85dvh); overflow: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(12px) scale(.98); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.panel.is-on, .sheet.is-on { opacity: 1; transform: none; }
.panel { top: calc(var(--topbar-h) + 10px); right: max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))); width: min(420px, calc(100vw - 2 * var(--gutter))); border-radius: var(--radius); padding: .6rem .9rem 1rem; }
.sheet { top: calc(var(--topbar-h) + 10px); right: max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))); width: min(380px, calc(100vw - 2 * var(--gutter))); border-radius: var(--radius); padding: .4rem .6rem .8rem; }
@media (max-width: 640px) {
    .panel, .sheet { top: auto; right: 0; left: 0; bottom: 0; width: 100%; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(1rem + var(--safe-b)); transform: translateY(40px); }
    .panel.is-on, .sheet.is-on { transform: none; }
}
.panel-head, .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--font-heading); font-size: 1.1rem; color: var(--c-heading); padding: .2rem 0 .4rem .3rem; }
.sheet-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .3rem; padding: .2rem .2rem .6rem; border-bottom: 1px solid var(--c-border); }
.sheet-tool { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--c-text); font-size: .74rem; line-height: 1.15; text-align: center; }
.sheet-tool:hover { background: var(--c-panel-2); color: var(--c-heading); }
.sheet-tool .icon { width: 1.6em; height: 1.6em; }
.sheet-tool.tb-read[aria-pressed="true"] { color: var(--c-accent); }
.sheet-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.sheet-list a { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center; padding: .6rem .6rem; border-radius: var(--radius-sm); color: var(--c-text); }
.sheet-list a:hover { background: var(--c-panel-2); text-decoration: none; color: var(--c-heading); }
.sheet-list a span { font-weight: 600; }
.sheet-list a small { grid-column: 2; color: var(--c-text-muted); font-size: .76rem; line-height: 1.3; overflow-wrap: anywhere; }   /* the file name, under the label */
.sheet-list .icon { grid-row: 1 / span 2; color: var(--c-primary); }

/* Theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .5rem; padding-top: .4rem; }
.theme-swatch { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem .3rem; border: 2px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: .74rem; }
.theme-swatch:hover { background: var(--c-panel-2); }
.theme-swatch.is-active { border-color: var(--c-accent); }
.swatch-box { width: 100%; height: 44px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); display: flex; align-items: center; justify-content: center; gap: .3rem; position: relative; overflow: hidden; }
.swatch-text { font-family: var(--font-heading); font-size: 1.05rem; color: var(--c-heading); }
.swatch-accent { width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent); }
.theme-swatch-auto .swatch-box { background: linear-gradient(110deg, #fffdf5 50%, #0a0e14 50%); color: #555; }
.theme-swatch-auto .icon { width: 1.3em; height: 1.3em; }
.theme-swatch-auto .icon-sun { color: #b8860b; }
.theme-swatch-auto .icon-moon { color: #8fbfff; }
.swatch-name { color: var(--c-text); line-height: 1.15; }
/* the picker lives inside the page theme; swatches must show THEIR colours */
.panel .theme-swatch .swatch-name { color: inherit; }

/* Reading settings */
.reader-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--c-border); }
.reader-row:first-of-type { border-top: 0; }
.reader-row-end { justify-content: flex-end; }
.reader-label { font-weight: 600; }
.stepper { display: inline-flex; align-items: center; gap: .2rem; background: var(--c-panel-2); border-radius: var(--radius-pill); padding: 2px; }
.stepper button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--c-text); display: grid; place-items: center; }
.stepper button:hover { background: var(--c-accent); color: var(--c-on-accent); }
.stepper output { min-width: 4.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.segmented { display: inline-flex; background: var(--c-panel-2); border-radius: var(--radius-pill); padding: 2px; }
.segmented button { border: 0; background: transparent; color: var(--c-text); padding: .45rem .9rem; border-radius: var(--radius-pill); font-weight: 600; }
.segmented button.is-active { background: var(--c-accent); color: var(--c-on-accent); }
.seg-serif { font-family: var(--font-serif); }
.seg-sans { font-family: var(--font-sans); }

/* Search */
.overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: min(10vh, 80px) var(--gutter) var(--gutter); opacity: 0; transition: opacity var(--dur); }
.overlay.is-on { opacity: 1; }
.overlay-box { width: min(680px, 100%); max-height: calc(100vh - 12vh); display: flex; flex-direction: column; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-2); transform: translateY(-10px); transition: transform var(--dur) var(--ease); }
.overlay.is-on .overlay-box { transform: none; }
.search-bar { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem .6rem 1rem; border-bottom: 1px solid var(--c-border); }
.search-bar .icon { color: var(--c-text-muted); }
#search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.1rem; padding: .5rem 0; outline: none; }
#search-input::-webkit-search-cancel-button, #search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-status { padding: .5rem 1rem; font-size: .85rem; color: var(--c-text-muted); }
.search-results { list-style: none; margin: 0; padding: 0 .5rem .6rem; overflow: auto; overscroll-behavior: contain; }
.search-results a { display: block; padding: .6rem .7rem; border-radius: var(--radius-sm); color: var(--c-text); }
.search-results a:hover, .search-results a.is-focused { background: var(--c-panel-2); text-decoration: none; }
.search-results .sr-title { font-weight: 700; color: var(--c-heading); display: block; }
.search-results .sr-snip { font-size: .9rem; color: var(--c-text-muted); display: block; }
.search-results mark { background: var(--c-highlight); color: inherit; border-radius: 3px; }
@media (max-width: 640px) { .overlay { padding: 8px; align-items: stretch; } .overlay-box { max-height: none; } }

/* Share */
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; padding-top: .4rem; }
.share-btn { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .4rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); font-size: .8rem; font-weight: 600; }
.share-btn:hover { border-color: var(--c-primary); background: var(--c-panel-2); text-decoration: none; color: var(--c-heading); }
.share-btn .icon { width: 1.6em; height: 1.6em; color: var(--c-primary); }

/* Keyboard help */
.keys { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.keys td { padding: .45rem .3rem; border-top: 1px solid var(--c-border); }
.keys tr:first-child td { border-top: 0; }
.keys td:first-child { white-space: nowrap; width: 1%; padding-right: 1rem; }
.keys-note { font-size: .85rem; color: var(--c-text-muted); margin: .8rem 0 0; }

/* ---------- 10. LIGHTBOX, TOASTS, READ-ALOUD ---------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92); display: grid; grid-template-rows: 1fr auto; opacity: 0; transition: opacity var(--dur); touch-action: none; }
.lightbox.is-on { opacity: 1; }
.lb-stage { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; }
.lb-stage img { max-width: 100%; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); cursor: zoom-in; transition: transform var(--dur) var(--ease), opacity var(--dur); transform-origin: center; user-select: none; -webkit-user-drag: none; }
.lightbox.is-zoomed .lb-stage img { cursor: grab; max-height: none; max-width: none; }
.lightbox.is-loading .lb-stage img { opacity: .3; }
.lightbox.is-dragging .lb-stage img { transition: none; cursor: grabbing; }
.lightbox .lb-stage img.slide-in-left { animation: lb-in-left var(--dur-slow) var(--ease); }
.lightbox .lb-stage img.slide-in-right { animation: lb-in-right var(--dur-slow) var(--ease); }
@keyframes lb-in-left { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes lb-in-right { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
.lb-btn { position: absolute; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; transition: background var(--dur-fast), transform var(--dur-fast); }
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
.lb-btn:active { transform: scale(.94); }
.lb-btn.is-disabled { opacity: .25; pointer-events: none; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-bar { display: flex; align-items: center; gap: 1rem; padding: 10px 16px calc(10px + var(--safe-b)); color: #eee; font-size: .9rem; background: rgba(0, 0, 0, .5); }
.lb-counter { flex: none; font-variant-numeric: tabular-nums; opacity: .8; }
.lb-info { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.lb-caption { font-style: italic; }
.lb-caption:empty { display: none; }
.lb-name { font-size: .8rem; opacity: .75; letter-spacing: .02em; overflow-wrap: anywhere; }
.lb-name:empty { display: none; }
.lb-actions { flex: none; display: flex; gap: .4rem; }
.lb-small { position: static; width: 40px; height: 40px; }
/* Phones: the arrows stay (smaller, darker, at the very edges) — swiping works too. */
@media (max-width: 640px) {
    .lb-prev, .lb-next { width: 40px; height: 40px; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-caption { font-size: .82rem; }
    .lb-name { font-size: .74rem; }
}

.toasts { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; width: min(92vw, 520px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; border-radius: var(--radius-pill); background: var(--c-text); color: var(--c-bg); box-shadow: var(--shadow-2); font-weight: 600; font-size: .92rem; opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); max-width: 100%; }
.toast.is-on { opacity: 1; transform: none; }
.toast button { border: 0; background: var(--c-bg); color: var(--c-text); border-radius: var(--radius-pill); padding: .3rem .8rem; font-weight: 700; font-size: .85rem; }
.toast button.link { background: transparent; color: var(--c-bg); text-decoration: underline; padding: .3rem .2rem; }

.tts { position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); z-index: 65; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-2); max-width: calc(100vw - 2 * var(--gutter)); transition: transform var(--dur) var(--ease), opacity var(--dur); }
.tts[hidden] { display: none; }
.tts-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-panel-2); color: var(--c-text); display: grid; place-items: center; }
.tts-btn:hover { background: var(--c-accent); color: var(--c-on-accent); }
.tts-toggle { background: var(--c-accent); color: var(--c-on-accent); }
.tts .icon-when-paused, .tts.is-paused .icon-when-playing { display: none; }
.tts.is-paused .icon-when-paused { display: block; }
.tts-status { font-size: .8rem; color: var(--c-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tts-field { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--c-text-muted); }
.tts-field select { border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius-sm); padding: .25rem .3rem; font-size: .8rem; max-width: 150px; }
@media (max-width: 640px) { .tts-voice { display: none; } .tts-status { display: none; } }

/* ---------- 11. MOTION & REVEAL ---------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
body.anim-subtle .reveal { opacity: 1; transform: none; transition: none; }
.page-fade { transition: opacity var(--dur) var(--ease); }
body.is-leaving .page { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
body.is-entering .page { animation: page-in var(--dur-slow) var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.anim-rich .cover-art img { animation: float-in 1.2s var(--ease) both; }
body.anim-rich .chapter-text .drop-cap::first-letter { animation: drop-in .9s var(--ease) both; }
@keyframes float-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tb-btn.is-bumped { animation: bump var(--dur) var(--ease); }
@keyframes bump { 40% { transform: scale(.88); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- 12. ZEN, RTL, PRINT, UTILITIES ----------------------------- */
body.zen .topbar, body.zen .banner, body.zen .site-footer, body.zen .progress, body.zen .chapter-meta { display: none; }
body.zen .page { padding-top: 1.5rem; }
body.zen .chapter-body { box-shadow: none; border-color: transparent; }
.zen-exit { position: fixed; top: 12px; right: 12px; z-index: 60; display: none; }
body.zen .zen-exit { display: inline-flex; }

[dir="rtl"] .chapter-text p { text-align: right; }
[dir="rtl"] .chapter-text blockquote { border-left: 0; border-right: 4px solid var(--c-primary); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .tb-select { padding: 0 38px 0 36px; background-position: left 10px center; }
[dir="rtl"] .tb-select-icon { left: auto; right: 10px; }
[dir="rtl"] .tb-arrow .icon, [dir="rtl"] .next-card-arrow, [dir="rtl"] .card-arrow, [dir="rtl"] .btn-arrow { transform: scaleX(-1); }
[dir="rtl"] .figure-right, [dir="rtl"] .chapter-image { float: left; margin: .3rem 1.4rem 1rem 0; }
[dir="rtl"] .figure-left, [dir="rtl"] .chapter-image.float-left { float: right; margin: .3rem 0 1rem 1.4rem; }
[dir="rtl"] .panel, [dir="rtl"] .sheet { right: auto; left: max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))); }

@media print {
    :root { --font-base: 12pt; }
    html, body { background: #fff !important; color: #000 !important; }
    .topbar, .banner, .site-footer, .progress, .splash, .chapter-end, .backdrop, .panel, .sheet, .overlay, .tts, .lightbox, .toasts, .skip-link, .cover-strip, .cover-resume { display: none !important; }
    .page { max-width: none; padding: 0; }
    .chapter-body, .cover-top { max-width: none; border: 0; box-shadow: none; padding: 0; background: #fff; }
    .chapter-text a { color: #000; text-decoration: none; }
    .chapter-text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
    .chapter-text a.bible-ref::after { content: none; }
    .figure-right, .figure-left, .chapter-image { max-width: 40%; }
    h2, h3 { break-after: avoid; }
    p, blockquote, figure { break-inside: avoid; }
    .chapter-cards { grid-template-columns: 1fr 1fr; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--c-text-muted); }