/* Page-turn book reader — shared by /book-demo and the Reading Rooms books
   (resources/views/book-demo/index.blade.php, resources/views/users/books/show.blade.php). */

:root {
    --bd-paper: #fdfbf5;
    --bd-navy: #3b2a1c;          /* walnut ink: headings, controls (was navy) */
    --bd-cover: #7a5230;         /* cover cloth; each book sets its collection's colour */
    --bd-foil: #f1dca2;          /* gold-foil lettering on the cover */
    --bd-gold: #e0b400;
    --bd-gold-soft: #fff4c7;
    --bd-ink: #23232b;
    --bd-muted: #6b6b7b;
    --bd-line: #ecebe4;
    --bd-controls-h: 64px;
    --bd-topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #f5f4ef;
    color: var(--bd-ink);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.bd-demo-badge {
    position: sticky;
    top: 0;
    z-index: 40;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--bd-navy);
    background: var(--bd-gold-soft);
    border-bottom: 1px solid var(--bd-line);
    padding: .35rem .5rem;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
.bd-demo-badge { flex: 0 0 auto; }
/* Whatever height the banner wraps to (two lines on a phone), the reader gets the
   rest of the screen — controls always on screen, never pushed off the bottom. */
.bd-app {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bd-topbar {
    flex: 0 0 var(--bd-topbar-h);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    background: #faf6ec;
    color: var(--bd-ink);
    border-bottom: 1px solid #e6dfcd;
}

.bd-title {
    flex: 1;
    min-width: 0;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-demo-pill {
    display: inline-block;
    margin-left: .4rem;
    font-family: 'Poppins', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--bd-navy);
    background: var(--bd-gold);
    border-radius: 999px;
    padding: .1rem .5rem;
    vertical-align: middle;
}

.bd-btn {
    flex: 0 0 auto;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 0 .75rem;
    background: #fff;
    color: var(--bd-navy);
    border: 1px solid #e3dccb;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}
.bd-btn:hover { background: var(--bd-gold-soft); }
.bd-btn[aria-pressed="true"] { background: var(--bd-gold); color: var(--bd-navy); border-color: var(--bd-gold); }

.bd-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    overflow: hidden;
    background:
        radial-gradient(900px 320px at 90% 0%, rgba(224, 180, 0, .07), transparent 70%),
        linear-gradient(180deg, #fbf9f3 0%, #f0efe8 100%);
}

/* #book-demo-flip: holds the book's leaves (.bd-leaf). Without JS (and in Scroll
   view) they are a plain, scrollable column of pages; book-demo.js moves them onto
   the 3D sheets of .bd-book inside it (see "Book view" below). */
#book-demo-flip {
    width: 100%;
    outline: none;
}

.bd-leaf {
    position: relative;
    background: var(--bd-paper);
    border: 1px solid var(--bd-line);
    box-shadow: 0 2px 10px rgba(29, 29, 58, .08);
}

/* Front/back cover: the only leaves meant to read as the book's closed exterior
   rather than an inner paper page, so they get a bound-cover colour, a spine
   (binding) edge, a page-block edge suggesting the stacked pages behind them,
   and a deeper, layered shadow instead of the flat 2px one every other leaf uses. */
.bd-leaf--cover, .bd-leaf--back {
    border-color: color-mix(in srgb, var(--bd-cover) 60%, #000);
    border-radius: 0 7px 7px 0;
    background-color: var(--bd-cover);
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px),
        linear-gradient(135deg, color-mix(in srgb, var(--bd-cover) 82%, #fff) 0%, var(--bd-cover) 45%, color-mix(in srgb, var(--bd-cover) 62%, #000) 100%);
    box-shadow:
        0 1px 2px rgba(40, 24, 8, .35),
        0 14px 28px -10px rgba(60, 38, 12, .4),
        0 36px 54px -26px rgba(60, 38, 12, .35);
}

.bd-leaf--cover::before, .bd-leaf--back::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 16px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .08));
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .08);
}

.bd-leaf--cover::after, .bd-leaf--back::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to left, rgba(17, 17, 34, .22) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(to top, rgba(17, 17, 34, .18) 0 1px, transparent 1px 3px);
    background-position: right top, left bottom;
    background-size: 9px 100%, 100% 9px;
    background-repeat: no-repeat, no-repeat;
}

.bd-page-inner {
    height: 100%;
    overflow-y: auto; /* overflow fallback rather than clipping on very small/short viewports */
    padding: 1.5rem 1.35rem;
    font-family: 'Lora', Georgia, serif;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--bd-ink);
}

.bd-page-inner p { margin: 0 0 .9rem; }
.bd-page-inner p:last-child { margin-bottom: 0; }

.bd-demo-note {
    font-family: 'Poppins', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #7a5e00;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.bd-cover, .bd-back { text-align: center; display: flex; flex-direction: column; justify-content: center; padding-left: 16px; }
.bd-cover h1 { font-size: 1.65em; color: var(--bd-foil); margin: .25rem 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.bd-subtitle { color: color-mix(in srgb, var(--bd-foil) 80%, transparent); font-style: italic; }
.bd-author { color: color-mix(in srgb, var(--bd-foil) 75%, transparent); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.bd-cover .bd-demo-note, .bd-back .bd-demo-note { color: var(--bd-foil); }
.bd-back p { color: color-mix(in srgb, var(--bd-foil) 80%, transparent); }
/* A gold-foil rule framing the front cover. */
.bd-leaf--cover .bd-page-inner { outline: 1px solid color-mix(in srgb, var(--bd-foil) 45%, transparent); outline-offset: -14px; }

.bd-toc h2, .bd-end h2 { color: var(--bd-navy); font-size: 1.2em; margin: 0 0 1rem; }
.bd-toc-list { list-style: none; margin: 0; padding: 0; }
.bd-toc-list li { border-bottom: 1px solid var(--bd-line); }
.bd-toc-link {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 48px;
    align-items: center;
    background: none;
    border: none;
    padding: .4rem .1rem;
    font-family: 'Lora', Georgia, serif;
    font-size: .95rem;
    color: var(--bd-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.bd-toc-link:hover { color: #7a5e00; }
.bd-toc-link .bd-toc-page { color: var(--bd-muted); font-family: 'Poppins', sans-serif; font-size: .78rem; }

.bd-chapter-heading { color: var(--bd-navy); font-size: 1.2em; margin: 0 0 .9rem; outline: none; }

.bd-page-number {
    display: block;
    margin-top: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    color: var(--bd-muted);
    text-align: center;
}

.bd-controls {
    flex: 0 0 var(--bd-controls-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 .75rem;
    background: #faf6ec;
    border-top: 1px solid #e6dfcd;
}

.bd-ctrl-btn {
    min-width: 48px;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid var(--bd-line);
    background: var(--bd-paper);
    color: var(--bd-navy);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.bd-ctrl-btn:hover:not(:disabled) { background: var(--bd-gold-soft); }
.bd-ctrl-btn:disabled { opacity: .35; cursor: default; }

.bd-progress {
    min-width: 140px;
    text-align: center;
    font-size: .85rem;
    color: var(--bd-muted);
}
.bd-progress-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--bd-line);
    margin-top: .3rem;
    overflow: hidden;
}
.bd-progress-bar-fill { height: 100%; background: var(--bd-gold); width: 0%; transition: width .2s; }

/* Contents modal */
.bd-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 29, 58, .45);
    padding: 1rem;
}
.bd-modal[hidden] { display: none; }
.bd-modal-inner {
    background: var(--bd-paper);
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.25rem;
}
.bd-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.bd-modal-header h2 { font-family: 'Lora', Georgia, serif; color: var(--bd-navy); margin: 0; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
    .bd-progress-bar-fill { transition: none; }
}

@media (max-width: 480px) {
    .bd-title { font-size: .9rem; }
    .bd-demo-badge { font-size: .66rem; padding: .25rem .5rem; }
    .bd-controls { gap: .45rem; padding: 0 .5rem; }
    .bd-progress { min-width: 0; flex: 1 1 auto; max-width: 150px; font-size: .78rem; }
    .bd-controls .bd-ctrl-btn { min-width: 44px; min-height: 44px; }
    #book-demo-read-aloud { padding: 0 .55rem; font-size: .74rem; min-height: 40px; color: var(--bd-navy); background: var(--bd-paper); border-color: var(--bd-line); }
    /* plain (no-JS / Scroll view) pages only — never the reader's hidden measuring page */
    .bd-app:not(.bd-js-ready) #book-demo-flip > .bd-leaf > .bd-page-inner, .bd-scroll-mode #book-demo-flip > .bd-leaf > .bd-page-inner { font-size: .92rem; padding: 1.1rem 1rem; }
    .bd-leaf--cover::before, .bd-leaf--back::before { width: 12px; }
    .bd-cover, .bd-back { padding-left: 12px; }
}

/* Scroll view (the user's toggle) and the page before book-demo.js has run: the
   same leaves, stacked and scrollable — fully readable with no JS at all. */
.bd-scroll-mode .bd-stage,
.bd-app:not(.bd-js-ready) .bd-stage { overflow-y: auto; align-items: flex-start; }
.bd-scroll-mode #book-demo-flip,
.bd-app:not(.bd-js-ready) #book-demo-flip {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
    margin: 0 auto;
}
.bd-scroll-mode .bd-leaf,
.bd-app:not(.bd-js-ready) .bd-leaf { min-height: 220px; }
.bd-scroll-mode .bd-leaf--blank,
.bd-app:not(.bd-js-ready) .bd-leaf--blank { display: none; }

/* ── Book view (book-demo.js) ─────────────────────────────────────────
   .bd-book is sized in px by book-demo.js. Each .bd-sheet is a two-sided page
   hinged on its left edge; turning it rotates it -180° over the spine. The book
   holds the perspective but does NOT preserve 3D itself, so sheets stack by
   z-index (set by book-demo.js) rather than fighting over depth while flat. */
.bd-js-ready #book-demo-flip {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bd-book {
    position: relative;
    flex: 0 0 auto;
    perspective: 2600px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* The book handles every touch itself. Leaving vertical panning to the browser
   (pan-y) let a real finger's slightly diagonal swipe be taken over as a scroll
   mid-slide — the browser cancelled the drag and the page snapped. Pages are sized
   to fit the screen, so nothing inside the book needs the browser to scroll. */
.bd-book, .bd-book * { touch-action: none; }
.bd-book .bd-page-inner { overflow: hidden; }
/* One soft shadow under the phone's single page — not one per sheet, which stacked
   22 deep into a black halo. */
.bd-book.is-single::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    box-shadow: 0 18px 36px -14px rgba(60, 38, 12, .45);
}
.bd-book.is-dragging { cursor: grabbing; }
.bd-sheet {
    position: absolute;
    top: 0;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
}
.bd-book.is-spread .bd-sheet { left: 50%; width: 50%; }
.bd-book.is-single .bd-sheet { left: 0; width: 100%; }

.bd-face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}
.bd-face--back { transform: rotateY(180deg); }
.bd-face > .bd-leaf { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.bd-book .bd-page-inner { font-size: var(--bd-fs, .98rem); padding: var(--bd-pad, 1.5rem); }
/* Like a printed page: the number sits at the foot of the page, not under the text. */
.bd-book .bd-content { display: flex; flex-direction: column; }
.bd-book .bd-page-number { margin-top: auto; padding-top: 1rem; }
.bd-book .bd-cover, .bd-book .bd-back { padding-left: calc(var(--bd-pad, 1.5rem) + 12px); }
.bd-face--paper {
    background: linear-gradient(90deg, #f3efe3, var(--bd-paper) 30%);
    border: 1px solid var(--bd-line);
}

/* Light and shadow: the inner gutter by the spine, the darkening of a page as it
   lifts (.bd-shade, opacity set per frame), and the shadow it casts (.bd-cast). */
.bd-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.bd-face--front .bd-shade { background: linear-gradient(to right, rgba(20, 16, 8, .25), rgba(20, 16, 8, .6)); }
.bd-face--back .bd-shade { background: linear-gradient(to left, rgba(20, 16, 8, .25), rgba(20, 16, 8, .6)); }
.bd-book.is-spread .bd-face--front > .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back)::after,
.bd-book.is-spread .bd-face--back > .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    pointer-events: none;
}
.bd-book.is-spread .bd-face--front > .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back)::after {
    left: 0;
    background: linear-gradient(to right, rgba(40, 30, 10, .16), transparent);
}
.bd-book.is-spread .bd-face--back > .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back)::after {
    right: 0;
    background: linear-gradient(to left, rgba(40, 30, 10, .16), transparent);
}
.bd-cast {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
}
.bd-book.is-spread .bd-cast.is-right { left: 50%; width: 50%; background: linear-gradient(to right, rgba(0, 0, 0, .3), transparent 65%); }
.bd-book.is-spread .bd-cast.is-left { left: 0; width: 50%; background: linear-gradient(to left, rgba(0, 0, 0, .3), transparent 65%); }
.bd-book.is-single .bd-cast { left: 0; width: 100%; background: linear-gradient(to right, rgba(0, 0, 0, .28), transparent 60%); }

/* The back cover lies on the left once the book is closed at the end: its spine
   and page-block edge belong on the mirrored side. */
.bd-face--back > .bd-leaf--back { border-radius: 7px 0 0 7px; }
.bd-face--back > .bd-leaf--back::before {
    inset: 0 0 0 auto;
    background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .08));
}
.bd-face--back > .bd-leaf--back::after {
    background-image:
        repeating-linear-gradient(to right, rgba(17, 17, 34, .22) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(to top, rgba(17, 17, 34, .18) 0 1px, transparent 1px 3px);
    background-position: left top, left bottom;
}
.bd-book .bd-face--back .bd-back { padding-left: var(--bd-pad, 1.5rem); padding-right: calc(var(--bd-pad, 1.5rem) + 12px); }


/* ── A proper book ──────────────────────────────────────────────────── */

/* The book rests on a dark wooden desk under a warm reading light. */
.bd-js-ready .bd-stage {
    background:
        radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 255, 255, .7), transparent 72%),
        repeating-linear-gradient(90deg, rgba(120, 90, 40, .025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(120, 90, 40, .02) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #efe8d8 0%, #e5dcc7 100%);
}

/* Paper: warm, slightly grained, no web-card borders. */
.bd-book .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back),
.bd-book .bd-paper {
    border: none;
    box-shadow: none;
    background-color: #fbf6ea;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .5), transparent 75%);
}

/* The gutter: pages curve down into the spine — a deep shadow, then a soft highlight. */
.bd-book.is-spread .bd-face--front > .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back)::after {
    width: 14%;
    background: linear-gradient(to right, rgba(40, 28, 10, .34) 0%, rgba(40, 28, 10, .12) 18%, rgba(255, 255, 255, .22) 42%, transparent 100%);
}
.bd-book.is-spread .bd-face--back > .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back)::after {
    width: 14%;
    background: linear-gradient(to left, rgba(40, 28, 10, .34) 0%, rgba(40, 28, 10, .12) 18%, rgba(255, 255, 255, .22) 42%, transparent 100%);
}

/* Hardcover boards behind the open pages, overhanging them a little. */
.bd-board {
    position: absolute;
    top: -10px;
    bottom: -10px;
    width: calc(50% + 10px);
    z-index: 0;
    background-color: var(--bd-cover);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--bd-cover) 85%, #fff) 0%, var(--bd-cover) 50%, color-mix(in srgb, var(--bd-cover) 65%, #000) 100%);
    box-shadow: 0 2px 3px rgba(40, 24, 8, .35), 0 22px 40px -16px rgba(60, 38, 12, .5);
}
.bd-board--left { left: -10px; border-radius: 6px 2px 2px 6px; }
.bd-board--right { right: -10px; border-radius: 2px 6px 6px 2px; }

/* The block of page edges: fine lines on the outer side of each open page. */
.bd-edges {
    position: absolute;
    top: 3px;
    bottom: 3px;
    z-index: 0;
    background: repeating-linear-gradient(to right, #e3dac4 0 1px, #fbf6ea 1px 2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.bd-edges--right { left: 100%; border-radius: 0 2px 2px 0; }
.bd-edges--left { right: 100%; border-radius: 2px 0 0 2px; }

/* The bending page drawn while a page turns: hinged strips inside the book's 3D space. */
.bd-bender {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}
.bd-book.is-spread .bd-bender { left: 50%; }
.bd-book.is-single .bd-bender { left: 0; }
.bd-strip {
    position: absolute;
    top: 0;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
}
.bd-face.bd-strip-face > .bd-leaf {
    right: auto;
    width: var(--bd-page-w, 400px);
}

/* Book typography: justified text, a chapter that opens a third of the way down
   with a drop capital, the chapter name heading later pages, folios in the outer
   corner. Scoped to the book view; Scroll view keeps its plain layout. */
.bd-book .bd-content p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.bd-book .bd-chapter-heading {
    margin: 22% 0 1.6em;
    text-align: center;
    font-size: 1.45em;
    font-weight: 600;
    letter-spacing: .01em;
}
.bd-book .bd-chapter-heading::after {
    content: '';
    display: block;
    width: 2.6em;
    height: 1px;
    margin: .7em auto 0;
    background: #b8962e;
}
.bd-book .bd-chapter-heading + p::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: .8;
    padding: .07em .08em 0 0;
    color: var(--bd-navy);
    font-weight: 700;
}
.bd-running-head { display: none; }
.bd-book .bd-running-head {
    display: block;
    margin: -.4em 0 1.6em;
    text-align: center;
    font-family: 'Lora', Georgia, serif;
    font-size: .72em;
    font-style: italic;
    letter-spacing: .08em;
    color: var(--bd-muted);
}
.bd-book .bd-page-number { font-family: 'Lora', Georgia, serif; font-size: .8em; }
.bd-book .bd-face--front .bd-page-number { text-align: right; }
.bd-book .bd-face--back .bd-page-number { text-align: left; }
.bd-book.is-single .bd-face--front .bd-page-number { text-align: center; }
.bd-book .bd-toc h2, .bd-book .bd-end h2 { text-align: center; margin-top: 18%; font-size: 1.35em; }
.bd-book .bd-end h2 { margin-top: 40%; font-style: italic; }
.bd-book .bd-end p { text-align: center; }

/* Book view only (set by book-demo.js once the book is built): the book's own
   box is exactly sized, but rounding in that layout can
   still leave the document fractionally taller than the viewport, producing an
   unwanted scrollbar. Clipping the document here is safe only because the flip
   view paginates internally instead of relying on document scroll; the no-JS
   and scroll-mode fallbacks never get this class, so their intended scrolling
   is untouched. */
html.bd-doc-flip {
    overscroll-behavior: none;
    overflow: hidden;
}

/* ── Real books (Reading Rooms): the chapter source ───────────────────────
   #bd-source holds the whole book as text. book-paginate.js lays it out into pages for the
   book view (where the source is hidden); without JS, and in Scroll view, it is the page. */
.bd-source { max-width: 660px; margin: 0 auto; width: 100%; }
.bd-js-ready .bd-source { display: none; }
.bd-src-head { text-align: center; padding: 1.5rem 1rem .5rem; font-family: 'Lora', Georgia, serif; }
.bd-src-head h1 { color: var(--bd-navy); margin: 0 0 .3rem; font-size: 1.8rem; }
.bd-src-author { color: var(--bd-muted); margin: 0; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.bd-src-chapter {
    background: var(--bd-paper);
    border: 1px solid var(--bd-line);
    border-radius: 4px;
    padding: 1.6rem 1.4rem;
    margin: 0 0 1rem;
    font-family: 'Lora', Georgia, serif;
    line-height: 1.65;
    color: var(--bd-ink);
}
.bd-src-title { color: var(--bd-navy); font-size: 1.3rem; margin: 0 0 1rem; text-align: center; }
.bd-src-body p { margin: 0 0 .9rem; }
.bd-src-body blockquote, .bd-book .bd-content blockquote { margin: 0 0 .9rem 1.2em; font-style: italic; }
.bd-src-body h3, .bd-book .bd-content h3 { font-size: 1.05em; color: var(--bd-navy); text-align: center; margin: 1.2em 0 .7em; }

/* Long contents (100+ chapters): compact rows inside the book. */
.bd-book .bd-toc-link { min-height: 0; padding: .32em 0; font-size: .9em; }
.bd-book .bd-toc h2 { margin-top: 10%; }
.bd-book .bd-toc-list + .bd-toc-list, .bd-book .bd-toc > .bd-toc-list:first-child { margin-top: 0; }
.bd-modal .bd-toc-link { min-height: 44px; }

/* A continued paragraph (split across pages) and the back link in the top bar. */
.bd-book .bd-cont { text-indent: 0; }
.bd-back-link { text-decoration: none; font-size: 1.1rem; }

/* While a real book is being laid out into pages (fonts loading, measuring). */
.bd-js .bd-app:not(.bd-js-ready):not(.bd-scroll-mode) .bd-source { visibility: hidden; }
.bd-js .bd-app:not(.bd-js-ready):not(.bd-scroll-mode) .bd-stage { position: relative; overflow: hidden; }
.bd-js .bd-app:not(.bd-js-ready):not(.bd-scroll-mode) .bd-stage::after {
    content: 'Preparing your book…';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    color: var(--bd-muted);
}

/* Scroll view / no JS: one centred column (the stage is a row in the book view). A real
   book's empty flip area is hidden, and the page-turn controls do nothing here, so they go. */
.bd-scroll-mode .bd-stage,
.bd-app:not(.bd-js-ready) .bd-stage { flex-direction: column; align-items: stretch; justify-content: flex-start; } /* centring a column taller than the stage would push its start above the top, out of reach */
.bd-scroll-mode #book-demo-flip:empty,
.bd-app:not(.bd-js-ready) #book-demo-flip:empty { display: none; }
.bd-scroll-mode .bd-controls { display: none; }
.bd-source { padding: 0 .75rem 2rem; }

/* ── Listen (read aloud): its controls take the place of the page controls ── */
.bd-listening .bd-controls { position: relative; }
.bd-listening .bd-controls > #book-demo-prev,
.bd-listening .bd-controls > #book-demo-next,
.bd-listening .bd-controls > .bd-progress,
.bd-listening .bd-controls > #book-demo-read-aloud { display: none; }
.bd-listen { display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0; max-width: 100%; }
.bd-listen[hidden] { display: none; }
/* Each control: an icon with its word under it, so nobody has to guess what ⏮ means. */
.bd-listen-btn {
    flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-width: 52px; min-height: 52px; padding: 0 .35rem; border: 1px solid #d9ccb0; border-radius: 12px;
    background: var(--bd-paper); color: var(--bd-navy); font: 500 .66rem/1 'Poppins', sans-serif; cursor: pointer;
}
.bd-listen-btn svg { width: 20px; height: 20px; }
.bd-listen-play { background: var(--bd-navy); color: #fff8e8; border-color: var(--bd-navy); min-width: 60px; }
.bd-listen-page { font-size: .78rem; color: var(--bd-muted); min-width: 4.5rem; text-align: center; white-space: nowrap; }
.bd-listen-close { margin-left: .75rem; }
.bd-listen-settings {
    position: absolute; right: .75rem; bottom: calc(100% + 8px); z-index: 20; display: grid; gap: .6rem;
    min-width: 240px; padding: .9rem 1rem; border-radius: 14px; background: var(--bd-paper);
    border: 1px solid #d9ccb0; box-shadow: 0 12px 30px rgba(40, 28, 12, .18);
}
.bd-listen-settings[hidden] { display: none; }
.bd-listen-field { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--bd-navy); margin: 0; }
.bd-listen-field select {
    min-height: 44px; width: 100%; padding: 0 .6rem; border: 1px solid #cdbf9f; border-radius: 10px;
    background: #fff; color: var(--bd-navy); font: 500 .88rem 'Poppins', sans-serif; cursor: pointer;
}
.bd-listen-hint {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); margin: 0;
    padding: .5rem .9rem; border-radius: 999px; background: var(--bd-navy); color: #fff8e8;
    font-size: .82rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; z-index: 21;
}
.bd-listen-hint[hidden] { display: none; }
/* the sentence being read (its paragraph, in browsers without ::highlight) */
::highlight(bd-reading) { background-color: rgba(224, 180, 0, .32); color: inherit; }
.bd-page-inner > .bd-reading { background: rgba(224, 180, 0, .14); box-shadow: 0 0 0 .3em rgba(224, 180, 0, .14); border-radius: 2px; }
@media (max-width: 600px) {
    .bd-listen { gap: .4rem; width: 100%; }
    .bd-listen-btn { min-width: 46px; min-height: 50px; }
    .bd-listen-play { min-width: 52px; }
    .bd-listen-page { min-width: 0; font-size: .72rem; }
    .bd-listen-close { margin-left: .4rem; }
    .bd-listen-settings { left: .75rem; right: .75rem; min-width: 0; }
    .bd-listen-hint { white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
}
@media (max-width: 360px) { .bd-listen-page { display: none; } }

/* ── Reader polish (review round 3) ── */
/* Brand colours for "on" states: walnut with linen text, not mustard. */
.bd-btn[aria-pressed="true"], .bd-btn[aria-expanded="true"] { background: var(--bd-navy); color: #fff8e8; border-color: var(--bd-navy); }
.bd-progress-bar-fill { background: var(--bd-navy); }
.bd-btn, .bd-ctrl-btn { border-color: #cdbf9f; }
.bd-toc-link:hover { color: #7a5e00; }
/* A tap leaves no "hover" tint behind on touch screens. */
@media (hover: none) {
    .bd-btn:hover, .bd-ctrl-btn:hover:not(:disabled) { background: #fff; }
    .bd-btn[aria-pressed="true"]:hover, .bd-btn[aria-expanded="true"]:hover { background: var(--bd-navy); }
}
/* Focus you can see (3:1 against paper), including on the book itself. */
.bd-app :focus-visible, .bd-modal :focus-visible { outline: 3px solid var(--bd-navy); outline-offset: 2px; }
#book-demo-flip:focus-visible { outline: 3px dashed var(--bd-navy); outline-offset: 6px; }

/* Top bar: title (two lines, with the author) and tools with words under their icons. */
.bd-topbar { position: relative; }
.bd-title { display: flex; flex-direction: column; justify-content: center; white-space: normal; line-height: 1.2; }
.bd-title-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-title-author { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: .72rem; color: var(--bd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tool { flex-direction: column; gap: 2px; min-width: 56px; padding: 0 .45rem; font-size: .68rem; line-height: 1; }
.bd-popover {
    position: absolute; right: .75rem; top: calc(100% + 6px); z-index: 30; display: flex; align-items: center; gap: .6rem;
    padding: .6rem; border-radius: 14px; background: var(--bd-paper); border: 1px solid #d9ccb0; box-shadow: 0 12px 30px rgba(40, 28, 12, .18);
}
.bd-popover[hidden] { display: none; }
.bd-popover .bd-btn { font-family: 'Lora', Georgia, serif; font-size: .95rem; min-width: 52px; }
.bd-popover .bd-btn-big { font-size: 1.25rem; }
.bd-textsize-now { min-width: 3.2rem; text-align: center; font-size: .85rem; color: var(--bd-muted); }

#book-demo-read-aloud { min-height: 48px; }
.bd-modal .bd-toc-link { line-height: 1.35; padding-top: .45rem; padding-bottom: .45rem; }
.bd-modal .bd-toc-link[aria-current="true"] { background: #f1e8d2; border-radius: 8px; font-weight: 600; color: var(--bd-navy); padding-left: .5rem; padding-right: .5rem; }
.bd-modal-close { font-size: 1.7rem; line-height: 1; }
@media (pointer: coarse) { .bd-book .bd-toc-link { min-height: 44px; } }

/* Narrow pages: justified text leaves rivers of space between words — set it ragged. */
@media (max-width: 600px) { .bd-book .bd-content p { text-align: left; } }

/* Scroll view: the text follows the chosen size; a thin bar shows how far through you are. */
.bd-source { font-size: calc(1rem * var(--bd-scale, 1)); }
.bd-scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; pointer-events: none; }
.bd-scroll-progress > span { display: block; height: 100%; width: 0; background: var(--bd-navy); }
.bd-app:not(.bd-scroll-mode) .bd-scroll-progress { display: none; }

/* One-off notes: "Continuing where you left off", how to turn pages. */
.bd-toast {
    position: absolute; left: 50%; bottom: calc(var(--bd-controls-h) + 12px); transform: translateX(-50%); z-index: 40;
    display: flex; align-items: center; gap: .75rem; max-width: calc(100vw - 32px); width: max-content;
    padding: .55rem .6rem .55rem 1rem; border-radius: 14px; background: var(--bd-navy); color: #fff8e8;
    font-size: .88rem; box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.bd-toast[hidden] { display: none; }
.bd-toast button { min-height: 40px; padding: 0 .8rem; border-radius: 10px; border: 1px solid rgba(255,248,232,.5); background: transparent; color: #fff8e8; font: 600 .82rem 'Poppins', sans-serif; cursor: pointer; }
.bd-app { position: relative; }

@media (max-width: 480px) {
    .bd-topbar { gap: .35rem; padding: 0 .5rem; }
    .bd-tool { min-width: 48px; padding: 0 .3rem; }
    .bd-title-name { font-size: .88rem; }
    .bd-title-author { display: none; }
    .bd-back-link { min-width: 44px; padding: 0; }
}

/* Long chapter titles (some books' titles are whole sentences): the running head stays one
   line, and the chapter heading is set smaller so it never fills the page by itself. */
.bd-book .bd-running-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-book .bd-chapter-heading.is-long { font-size: 1.02em; line-height: 1.4; }
.bd-book .bd-chapter-heading.is-very-long { font-size: .9em; line-height: 1.4; }

/* ── Night: dark warm paper, soft cream text (the reader's choice, or the device's dark mode) ── */
html[data-bd-theme="night"] {
    --bd-paper: #1f1a14;
    --bd-ink: #e6dccb;
    --bd-muted: #a99d88;
    --bd-navy: #e2c58c;          /* headings and accents: warm gold on dark */
    --bd-line: #3a3127;
    --bd-gold-soft: #3a3122;
    color-scheme: dark;
}
html[data-bd-theme="night"], html[data-bd-theme="night"] body { background: #12100c; }
html[data-bd-theme="night"] .bd-topbar,
html[data-bd-theme="night"] .bd-controls { background: #1a1611; border-color: #2e271f; color: var(--bd-ink); }
html[data-bd-theme="night"] .bd-btn,
html[data-bd-theme="night"] .bd-ctrl-btn,
html[data-bd-theme="night"] .bd-listen-btn,
html[data-bd-theme="night"] .bd-listen-field select { background: #241e17; color: var(--bd-navy); border-color: #4a3f31; }
html[data-bd-theme="night"] .bd-btn[aria-pressed="true"],
html[data-bd-theme="night"] .bd-btn[aria-expanded="true"],
html[data-bd-theme="night"] .bd-listen-play,
html[data-bd-theme="night"] .bd-toast,
html[data-bd-theme="night"] .bd-listen-hint { background: #e2c58c; color: #1a150f; border-color: #e2c58c; }
html[data-bd-theme="night"] .bd-toast button { color: #1a150f; border-color: rgba(26, 21, 15, .45); }
@media (hover: none) {
    html[data-bd-theme="night"] .bd-btn:hover, html[data-bd-theme="night"] .bd-ctrl-btn:hover:not(:disabled) { background: #241e17; }
    html[data-bd-theme="night"] .bd-btn[aria-pressed="true"]:hover, html[data-bd-theme="night"] .bd-btn[aria-expanded="true"]:hover { background: #e2c58c; }
}
html[data-bd-theme="night"] .bd-js-ready .bd-stage,
html[data-bd-theme="night"] .bd-stage { background: linear-gradient(180deg, #17140f 0%, #100e0b 100%); }
html[data-bd-theme="night"] .bd-book .bd-leaf:not(.bd-leaf--cover):not(.bd-leaf--back),
html[data-bd-theme="night"] .bd-book .bd-paper,
html[data-bd-theme="night"] .bd-face--paper { background-color: #1f1a14; background-image: none; }
html[data-bd-theme="night"] .bd-edges { background: repeating-linear-gradient(to right, #3a3127 0 1px, #1f1a14 1px 2px); }
html[data-bd-theme="night"] .bd-modal-inner,
html[data-bd-theme="night"] .bd-popover,
html[data-bd-theme="night"] .bd-listen-settings { background: #1f1a14; border-color: #3a3127; color: var(--bd-ink); }
html[data-bd-theme="night"] .bd-modal .bd-toc-link[aria-current="true"] { background: #2e2619; }
html[data-bd-theme="night"] .bd-demo-note,
html[data-bd-theme="night"] .bd-toc-link:hover { color: #d4b06a; }
html[data-bd-theme="night"] .bd-cover .bd-demo-note,
html[data-bd-theme="night"] .bd-back .bd-demo-note { color: var(--bd-foil); }
html[data-bd-theme="night"] ::highlight(bd-reading) { background-color: rgba(226, 197, 140, .3); }
html[data-bd-theme="night"] .bd-reading { background: rgba(226, 197, 140, .16); box-shadow: 0 0 0 .3em rgba(226, 197, 140, .16); }
html[data-bd-theme="night"] .bd-progress-bar-fill,
html[data-bd-theme="night"] .bd-scroll-progress > span { background: #e2c58c; }

/* Page colour choice in the Text panel. */
.bd-popover { flex-wrap: wrap; max-width: calc(100vw - 24px); }
.bd-popover-row { display: flex; align-items: center; gap: .5rem; width: 100%; }
.bd-popover-row + .bd-popover-row { border-top: 1px solid var(--bd-line); padding-top: .6rem; }
.bd-popover-label { font-size: .75rem; color: var(--bd-muted); min-width: 3.4rem; }
.bd-popover .bd-theme-btn { font-family: 'Poppins', sans-serif; font-size: .8rem; flex: 1 1 0; }

/* Scroll view: Listen is here too (the page-turn controls aren't). */
.bd-scroll-mode .bd-controls { display: flex; }
.bd-scroll-mode .bd-controls > #book-demo-prev,
.bd-scroll-mode .bd-controls > #book-demo-next,
.bd-scroll-mode .bd-controls > .bd-progress { display: none; }
.bd-src-body > .bd-reading, .bd-src-title.bd-reading { background: rgba(224, 180, 0, .14); box-shadow: 0 0 0 .3em rgba(224, 180, 0, .14); border-radius: 2px; }

/* Changing the text size: the page dims softly while the book is laid out again, then fades back. */
#book-demo-flip { transition: opacity .22s ease, filter .22s ease; }
.bd-stage.is-reflowing #book-demo-flip { opacity: .35; filter: blur(1.5px); }
.bd-stage.is-reflowing { position: relative; }
.bd-stage.is-reflowing::after {
    content: 'Adjusting the text…';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
    padding: .55rem 1rem; border-radius: 999px; background: var(--bd-navy); color: #fff8e8;
    font: 500 .85rem 'Poppins', sans-serif; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); pointer-events: none;
    animation: bd-fade-in .2s ease;
}
html[data-bd-theme="night"] .bd-stage.is-reflowing::after { background: #e2c58c; color: #1a150f; }
@keyframes bd-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bd-textsize-now { transition: transform .15s ease; font-variant-numeric: tabular-nums; }
.bd-popover .bd-btn { transition: transform .12s ease, background-color .15s ease; }
.bd-popover .bd-btn:active { transform: scale(.93); }
.bd-popover .bd-btn:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: reduce) {
    #book-demo-flip, .bd-popover .bd-btn, .bd-textsize-now { transition: none; }
    .bd-stage.is-reflowing #book-demo-flip { filter: none; }
    .bd-stage.is-reflowing::after { animation: none; }
}