/* ==============================================
   BOOK VIEW DISPLAY PAGE STYLES -- Claude Design reskin
   Page: /books/view/{BookName}
   Ported from the approved "Building Resilient .NET Systems" mockup.
   Every selector / class name is preserved -- only property values
   changed and the --bvr-* token layer added. CSS only, no behavior.
   Dark mode is handled via body.dark-mode (never prefers-color-scheme).
   --bvr-* tokens are reader-scoped: they intentionally do NOT redefine
   --card-bg / --border-color / --box-shadow-light, which the embedded
   AudioPlayerV2 reads globally.
   ============================================== */

/* ==============================================
   TOKEN LAYER
   ============================================== */
.book-view-page {
    --bvr-primary: var(--brand-primary, #00B4FF);
    --bvr-primary-deep: var(--brand-secondary, #0174B1);
    --bvr-primary-light: var(--brand-primary-light, #4DB8FF);
    --bvr-cta: var(--brand-cta, #FFAA00);
    --bvr-bg: #F6FBFF;
    --bvr-surface: #FFFFFF;
    --bvr-surface-2: #F8FAFC;
    --bvr-ink: var(--brand-charcoal, #222222);
    --bvr-ink-2: #475569;
    --bvr-ink-3: #64748B;
    --bvr-border: var(--brand-divider, #E0E0E0);
    --bvr-chip: #F1F5F9;
    --bvr-reader-bg: #FFFFFF;
    --bvr-reader-text: #2B2B2B;
    --bvr-skel: #E9EFF5;
    --bvr-navbg: rgba(255, 255, 255, 0.82);
    --bvr-r-sm: 8px; --bvr-r-md: 12px; --bvr-r-lg: 16px; --bvr-r-xl: 22px; --bvr-r-pill: 999px;
    --bvr-shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.06);
    --bvr-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.08);
    --bvr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.dark-mode .book-view-page {
    --bvr-bg: #0E141C; --bvr-surface: #19212C; --bvr-surface-2: #141A23;
    --bvr-ink: #EEF2F6; --bvr-ink-2: #B7C2CE; --bvr-ink-3: #8593A2;
    --bvr-border: #2A3340; --bvr-chip: #222C39;
    --bvr-reader-bg: #161D26; --bvr-reader-text: #D5DCE4; --bvr-skel: #222C39;
    --bvr-navbg: rgba(20, 26, 35, 0.82);
    --bvr-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --bvr-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Keyboard focus rings -- match the design-system :focus-visible convention.
   Scoped to .book-view-page so it also covers the Details-tab buttons in
   book.css (they render inside .book-view-page). */
.book-view-page button:focus-visible,
.book-view-page a:focus-visible,
.book-view-page select:focus-visible,
.book-view-error-button:focus-visible {
    outline: 2px solid var(--bvr-primary, #00B4FF);
    outline-offset: 2px;
}
/* Hero controls sit on a dark photo overlay -- use a white ring for contrast. */
.book-view-hero button:focus-visible,
.book-view-hero a:focus-visible {
    outline-color: #FFFFFF;
}

/* ==============================================
   LOADING & ERROR STATES
   (rendered OUTSIDE .book-view-page, so --bvr-* does not cascade --
    use brand values directly + a body.dark-mode override)
   ============================================== */
.book-view-loading,
.book-view-error {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 3rem 2rem;
    background: #F6FBFF;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.dark-mode .book-view-loading,
body.dark-mode .book-view-error {
    background: #0E141C;
}

.book-view-loading-spinner {
    width: 56px;
    height: 56px;
    margin-bottom: 1.5rem;
    border: 4px solid #E9EFF5;
    border-top-color: var(--brand-primary, #00B4FF);
    border-radius: 50%;
    animation: bookViewSpin 0.8s linear infinite;
}

body.dark-mode .book-view-loading-spinner {
    border-color: #222C39;
    border-top-color: var(--brand-primary-light, #4DB8FF);
}

@keyframes bookViewSpin {
    to { transform: rotate(360deg); }
}

.book-view-loading-text {
    margin: 0;
    color: #64748B;
    font-size: 0.95rem;
    font-weight: 500;
}

.book-view-error-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    border-radius: 22px;
    color: #64748B;
    font-size: 2.6rem;
}

.book-view-error-title {
    margin: 0 0 1rem 0;
    color: #0F172A;
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

.book-view-error-text {
    margin: 0 0 2rem 0;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
    max-width: 420px;
}

.book-view-error-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    background: var(--brand-primary, #00B4FF);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 180, 255, 0.28);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.book-view-error-button:hover {
    background: var(--brand-secondary, #0174B1);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 180, 255, 0.38);
}

body.dark-mode .book-view-error-icon {
    background: #222C39;
    color: #8593A2;
}

body.dark-mode .book-view-error-title {
    color: #EEF2F6;
}

body.dark-mode .book-view-error-text,
body.dark-mode .book-view-loading-text {
    color: #B7C2CE;
}

/* ==============================================
   PAGE LAYOUT
   ============================================== */
.book-view-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bvr-bg);
    color: var(--bvr-ink);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.book-view-page *,
.book-view-page *::before,
.book-view-page *::after { box-sizing: border-box; }

/* ==============================================
   HERO SECTION
   ============================================== */
.book-view-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding: 8rem 2rem 3rem 2rem;
    overflow: hidden;
    /* Dark fallback for the no-image case: when neither a promo banner nor a
       cover is available, .book-view-hero-background is not rendered, so the
       light page background (--bvr-bg) would show through the lighter focal
       wash and leave white hero text unreadable. This base only shows when
       there is no image; a rendered background image (z-index 0, opaque) fully
       covers it, so the with-image case is unchanged. */
    background-color: #0E141C;
}

.book-view-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
    transform: scale(1.02);
    z-index: 0;
}

.book-view-hero-background.use-blur {
    filter: blur(46px) saturate(1.2);
    transform: scale(1.15);
    animation: heroZoomSlow 14s ease-in-out both;
}

@keyframes heroZoomSlow {
    0% { transform: scale(1.12); }
    100% { transform: scale(1.18); }
}

.book-view-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Focal scrim: a soft wash centered on the content with a gentle bottom
       seat, fading to transparent at the top and outer edges so the cover
       artwork stays vivid. Legibility is carried by text-shadow (see the
       hero-details / title rules), not by darkening the whole image. */
    background:
        radial-gradient(ellipse 80% 80% at 50% 52%,
            rgba(8, 12, 18, 0.40) 0%,
            rgba(8, 12, 18, 0.14) 52%,
            rgba(8, 12, 18, 0) 76%),
        linear-gradient(180deg,
            rgba(8, 12, 18, 0) 0%,
            rgba(8, 12, 18, 0) 50%,
            rgba(8, 12, 18, 0.30) 100%);
    z-index: 1;
}

.book-view-hero-container {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    z-index: 2;
}

.book-view-hero-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    align-items: center;
}

.book-view-hero-cover {
    position: relative;
}

.book-view-cover-image {
    width: 100%;
    height: auto;
    border-radius: var(--bvr-r-md);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.book-view-hero-details {
    color: white;
    /* Baseline legibility for naked text over the lighter focal scrim.
       Chips (stats, rating, buttons) carry their own translucent background,
       so this mainly seats the author, description, and progress label.
       The title overrides with a stronger shadow below. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.book-view-title {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.06;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* Content maturity rating (sits under the title in the hero; light text on the dark hero image) */
.book-view-maturity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin: 0 0 0.85rem 0;
}

.book-view-maturity-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

/* Mature (16+) gets a distinct warm accent so it reads as a caution, not just a label. */
.book-view-maturity-badge.mature {
    background: rgba(178, 42, 42, 0.9);
    border-color: rgba(255, 180, 180, 0.65);
}

.book-view-maturity-note {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    max-width: 46ch;
}

/* Author Section with Follow Button */
.book-view-author-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    margin-top: 0.875rem;
}

.book-view-author {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.86);
}

.book-view-author-link {
    color: white;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.2s ease;
    padding-bottom: 1px;
}

.book-view-author-link:hover {
    border-bottom-color: white;
}

/* Follow Author Button */
.book-view-follow-author-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--bvr-r-pill);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s var(--bvr-ease);
    backdrop-filter: blur(10px);
}

.book-view-follow-author-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.book-view-follow-author-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.book-view-follow-author-btn.following {
    background: rgba(23, 178, 106, 0.2);
    border-color: rgba(23, 178, 106, 0.5);
    color: #34d399;
}

.book-view-follow-author-btn.following:hover:not(:disabled) {
    background: rgba(23, 178, 106, 0.3);
    border-color: rgba(23, 178, 106, 0.7);
}

.book-view-description {
    margin: 1rem 0 0 0;
    font-size: 0.97rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 560px;
}

/* Stats Row */
.book-view-stats {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.125rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.book-view-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--bvr-r-pill);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.book-view-stat i {
    font-size: 1rem;
    opacity: 0.95;
}

.book-view-stat i.bi-people-fill {
    color: #60a5fa !important;
}

.book-view-stat i.bi-journal-text {
    color: #a78bfa !important;
}

.book-view-stat i.bi-headphones {
    color: #34d399 !important;
}

.book-view-stat i.bi-check-circle {
    color: #22c55e !important;
}

/* ==============================================
   HERO ACTION BUTTONS
   ============================================== */

/* Rating in Hero (clickable button) */
.book-view-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.875rem;
    margin-bottom: 0;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bvr-r-md);
    cursor: pointer;
    transition: all 0.16s var(--bvr-ease);
    color: white;
    font-family: inherit;
    font-size: inherit;
}

.book-view-rating:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.book-view-rating-stars {
    display: flex;
    gap: 0.125rem;
    color: var(--bvr-cta);
    font-size: 1.2rem;
}

.book-view-rating-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 600;
}

.book-view-rating-chevron {
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.book-view-rating:hover .book-view-rating-chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* Reading Progress Bar in Hero */
.book-view-reading-progress {
    margin-top: 1.25rem;
    margin-bottom: 0;
    padding: 0;
    max-width: 420px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.book-view-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.book-view-progress-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: 600;
}

.book-view-progress-percentage {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: 600;
}

.book-view-progress-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: var(--bvr-r-pill);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.book-view-progress-bar {
    height: 100%;
    background: var(--bvr-primary);
    transition: width 0.4s var(--bvr-ease);
    border-radius: var(--bvr-r-pill);
}

.book-view-progress-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.book-view-progress-text i {
    font-size: 0.9rem;
    color: #34d399;
}

/* Details Tab Content */
.book-view-details-tab {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1rem 0;
}

.book-view-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.375rem;
    margin-bottom: 0;
}

.book-view-action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: var(--bvr-r-md);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.16s var(--bvr-ease);
}

.book-view-action-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.book-view-action-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(4px);
}

.book-view-action-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.book-view-action-outline {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(4px);
}

.book-view-action-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.book-view-action-following {
    background: rgba(23, 178, 106, 0.2);
    color: #34d399;
    border: 1px solid rgba(23, 178, 106, 0.5);
}

.book-view-action-following:hover:not(:disabled) {
    background: rgba(23, 178, 106, 0.3);
    border-color: rgba(23, 178, 106, 0.7);
}

/* ==============================================
   TAB NAVIGATION -- pill bar
   ============================================== */
.book-view-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem;
    background: transparent;
    border-bottom: none;
    position: relative;
    z-index: 100;
}

.book-view-tab-btn {
    padding: 0.625rem 1.125rem;
    border: none;
    background: transparent;
    border-radius: var(--bvr-r-pill);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bvr-ink-2);
    cursor: pointer;
    transition: all 0.16s var(--bvr-ease);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.book-view-tab-btn:hover {
    background: var(--bvr-chip);
    color: var(--bvr-ink);
}

.book-view-tab-btn.active {
    background: var(--bvr-primary);
    color: white;
    box-shadow: 0 8px 24px rgba(0, 180, 255, 0.28);
}

/* "Read to me" is an ACTION in the Listen slot for read-along books (it starts narration,
   it is not a tab that toggles active). Accent it in brand orange so it reads as an inviting
   call-to-action and stays visually distinct from the blue Listen/active tabs. */
.book-view-tab-btn.book-view-tab-readtome {
    color: var(--bvr-cta);
}
.book-view-tab-btn.book-view-tab-readtome:hover {
    background: rgba(255, 170, 0, 0.14);
    color: var(--bvr-cta);
}

/* ==============================================
   CONTENT AREA
   ============================================== */
.book-view-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.375rem 24px 5rem;
}

/* ==============================================
   CHAPTER NAVIGATION
   ============================================== */
.book-view-chapter-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.75rem;
    background: var(--bvr-navbg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-md);
    margin-bottom: 1.125rem;
    box-shadow: var(--bvr-shadow-sm);
    /* position:relative makes z-index effective even in the default (non-stuck) state. The bar's
       backdrop-filter forms a stacking context, so the absolutely-positioned Aa popover (.rdc-panel)
       lives inside it. When the bar was static its z-index was inert, so the bar painted in DOM order
       and the later .book-view-chapter-content (also a stacking context) covered the open panel. Being
       positioned lifts the whole bar -- popover included -- above the content, matching .is-stuck. */
    position: relative;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
}

.book-view-chapter-nav.is-stuck {
    position: fixed;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1032px;
    border-radius: 0 0 var(--bvr-r-md) var(--bvr-r-md);
    box-shadow: var(--bvr-shadow-md);
    /* Glide in sync with the global top nav auto-hide (navigation.css), which moves
       the stuck offset between 85px and a small gap via inline `top`. The initial
       static->fixed stick is not animated (top goes from auto, which is not interpolable). */
    transition: top 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .book-view-chapter-nav.is-stuck {
        transition: none;
    }
}

.book-view-nav-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--bvr-border);
    background: var(--bvr-surface);
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s var(--bvr-ease);
    color: var(--bvr-ink);
}

.book-view-nav-btn:hover:not(:disabled) {
    background: var(--bvr-primary);
    border-color: var(--bvr-primary);
    color: white;
}

.book-view-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.book-view-chapter-select {
    flex: 1;
    max-width: 400px;
    padding: 0.625rem 1rem;
    border: 1px solid var(--bvr-border);
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    background: var(--bvr-surface);
    color: var(--bvr-ink);
    cursor: pointer;
}

.book-view-chapter-select:focus {
    outline: none;
    border-color: var(--bvr-primary);
}

/* ==============================================
   CHAPTER CONTENT
   ============================================== */
.book-view-chapter-content {
    background: var(--bvr-reader-bg);
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-lg);
    padding: 3rem 2.5rem 2.5rem;
    box-shadow: var(--bvr-shadow-sm);
    /* Premium page turn: the chapter content remounts (Razor @key) on each turn and fades/slides in,
       masking the hard content swap. min-height reserves space so a short chapter cannot collapse-then-
       grow and shift the layout (the "reload" feeling). */
    min-height: 60vh;
    animation: bvChapterIn 280ms var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes bvChapterIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .book-view-chapter-content {
        animation: none;
    }
    /* Pause the long-running hero background zoom for motion-sensitive readers. */
    .book-view-hero-background.use-blur {
        animation: none !important;
    }
}

.book-view-chapter-cover {
    text-align: center;
    padding: 1.5rem;
}

.book-view-chapter-cover img {
    width: 300px;
    max-width: 100%;
    height: auto;
    border-radius: var(--bvr-r-md);
    box-shadow: var(--bvr-shadow-md);
    display: block;
    margin: 0 auto;
}

.book-view-toc-context {
    text-align: center;
    margin: 0 0 0.25rem 0;
    color: var(--bvr-ink-3);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.book-view-toc h2 {
    text-align: center;
    margin: 0 0 1rem 0;
    color: var(--bvr-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.book-view-toc-summary {
    text-align: center;
    margin: 0 0 2rem 0;
    color: var(--bvr-ink-2);
    font-size: 0.9rem;
}

.book-view-toc-summary strong {
    color: var(--bvr-ink);
}

.book-view-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-lg);
    overflow: hidden;
    background: var(--bvr-surface);
}

.book-view-toc-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--bvr-border);
    cursor: pointer;
    transition: background 0.14s ease;
}

.book-view-toc-item:last-child {
    border-bottom: none;
}

.book-view-toc-item:hover {
    background: var(--bvr-surface-2);
}

.book-view-toc-number {
    width: 30px;
    height: 30px;
    background: var(--bvr-chip);
    color: var(--bvr-ink-2);
    border-radius: var(--bvr-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.book-view-toc-title {
    font-size: 0.9rem;
    color: var(--bvr-ink);
    font-weight: 600;
}

.book-view-chapter-title {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--bvr-ink);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

/* ==============================================
   READING PANE TYPOGRAPHY
   (ports the design's .prose rules onto our author-HTML container)
   ============================================== */
.book-view-section-content {
    max-width: 660px;
    margin: 0 auto;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-size: calc(19px * var(--reader-font-scale, 1));
    line-height: 1.78;
    color: var(--bvr-reader-text);
}

.book-view-section-content p {
    margin: 0 0 1.35em;
}

/* Drop cap on the chapter opening only. Each text section is its own
   .book-view-section-content sibling, so scope to the first child to avoid a
   drop cap repeating on every text section (only applies when the chapter
   opens with text; an image/code-first chapter simply gets none). */
.book-view-chapter-sections > .book-view-section-content:first-child > p:first-of-type::first-letter {
    float: left;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 3.47em;
    line-height: 0.78;
    padding: 8px 12px 0 0;
    color: var(--bvr-primary-deep);
}

.book-view-section-content h2 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.42em;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--bvr-ink);
    margin: 1.9em 0 0.55em;
}

.book-view-section-content h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bvr-ink);
    margin: 1.7em 0 0.5em;
}

.book-view-section-content blockquote {
    margin: 1.7em 0;
    padding: 2px 0 2px 24px;
    border-left: 3px solid var(--bvr-primary);
    font-style: italic;
    font-size: 1.105em;
    line-height: 1.6;
    color: var(--bvr-ink-2);
}

.book-view-section-content ul,
.book-view-section-content ol {
    margin: 1.2em 0;
    padding-left: 26px;
}

.book-view-section-content li {
    margin: 0 0 0.55em;
}

.book-view-section-content strong {
    color: var(--bvr-ink);
    font-weight: 700;
}

.book-view-section-content code {
    font-family: 'SFMono-Regular', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.82em;
    background: var(--bvr-chip);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--bvr-ink);
}

.book-view-section-content a {
    color: var(--bvr-primary-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 116, 177, 0.35);
}

.book-view-section-content a:hover {
    border-bottom-color: var(--bvr-primary-deep);
}

/* Lighter link color in dark mode -- primary-deep on the dark reader bg is too low-contrast. */
body.dark-mode .book-view-section-content a {
    color: var(--bvr-primary-light);
    border-bottom-color: rgba(77, 184, 255, 0.4);
}

.book-view-section-content figure {
    margin: 1.9em 0;
}

.book-view-section-content figcaption {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.684em;
    color: var(--bvr-ink-3);
    text-align: center;
    margin-top: 11px;
}

/* Section Image Styling - constrained to viewport */
.book-view-section-image-container {
    width: 100%;
    max-height: 75vh;
    max-height: 75dvh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.9em auto;
}

.book-view-section-image {
    max-height: 75vh;
    max-height: 75dvh;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--bvr-r-md);
    box-shadow: var(--bvr-shadow-sm);
}

/* Section Video Styling */
.book-view-section-video {
    margin: 1.9em auto;
    text-align: center;
}

.book-view-loading-sections,
.book-view-no-content {
    text-align: center;
    padding: 3rem;
    color: var(--bvr-ink-3);
}

/* ==============================================
   PREVIEW MODE BANNER
   ============================================== */
.preview-info-banner {
    max-width: 1080px;
    margin: 1.125rem auto 0;
    background: linear-gradient(100deg, rgba(255, 170, 0, 0.14), rgba(255, 170, 0, 0.06));
    border: 1px solid rgba(255, 170, 0, 0.34);
    border-radius: var(--bvr-r-lg);
    padding: 0.8125rem 1.125rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bvr-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preview-info-banner i {
    font-size: 1.2rem;
    color: var(--brand-cta, #FFAA00);
}

.preview-info-banner a {
    color: var(--bvr-primary-deep);
    font-weight: 700;
    text-decoration: underline;
}

.preview-info-banner a:hover {
    color: var(--bvr-primary);
}

body.dark-mode .preview-info-banner {
    background: linear-gradient(100deg, rgba(255, 170, 0, 0.16), rgba(255, 170, 0, 0.07));
    color: var(--bvr-ink);
    border-color: rgba(255, 170, 0, 0.34);
}

body.dark-mode .preview-info-banner a {
    color: var(--bvr-primary-light);
}

/* ==============================================
   LOCKED CHAPTER / UPGRADE PROMPT
   ============================================== */
.book-view-upgrade-prompt {
    text-align: center;
    padding: 2.25rem 2.125rem;
    max-width: 560px;
    margin: 0.5rem auto 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    background: var(--bvr-surface);
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-xl);
    box-shadow: var(--bvr-shadow-md);
}

.upgrade-prompt-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 170, 0, 0.15);
    border-radius: 18px;
    color: var(--brand-cta, #FFAA00);
    font-size: 2rem;
    box-shadow: none;
}

.upgrade-prompt-title {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.375rem, 3vw, 1.625rem);
    font-weight: 800;
    color: var(--bvr-ink);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.upgrade-prompt-text {
    max-width: 380px;
    margin: 0 auto 1.375rem;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--bvr-ink-2);
}

/* Feature bullets */
.upgrade-prompt-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6875rem;
    max-width: 330px;
    margin: 0 auto 1.375rem;
}

.upgrade-prompt-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--bvr-ink);
    font-weight: 500;
}

.upgrade-prompt-feature i {
    color: var(--bvr-primary);
    font-size: 1.125rem;
}

/* Action buttons -- side by side */
.upgrade-prompt-actions {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.upgrade-prompt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.375rem;
    border-radius: 11px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s var(--bvr-ease);
    border: none;
    text-decoration: none;
    box-sizing: border-box;
}

.upgrade-prompt-btn:hover {
    text-decoration: none;
}

/* Premium CTA -- brand amber */
.upgrade-prompt-btn-premium {
    background: var(--bvr-cta);
    color: white;
    box-shadow: 0 10px 24px rgba(255, 170, 0, 0.28);
}

.upgrade-prompt-btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 170, 0, 0.42);
    color: white;
}

/* Free / secondary CTA -- outlined blue */
.upgrade-prompt-btn-free {
    background: var(--bvr-surface);
    color: var(--bvr-primary-deep);
    border: 1px solid var(--bvr-primary);
    box-shadow: none;
}

.upgrade-prompt-btn-free:hover {
    transform: translateY(-2px);
    background: rgba(0, 180, 255, 0.06);
    color: var(--bvr-primary-deep);
}

/* Pricing micro-copy */
.upgrade-prompt-pricing {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    color: var(--bvr-ink-3);
}

/* Back to TOC -- understated text link */
.upgrade-prompt-toc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--bvr-r-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bvr-ink-2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-prompt-toc-link:hover {
    color: var(--bvr-primary);
    background: rgba(0, 180, 255, 0.06);
}

/* Dark mode -- values follow tokens, but keep explicit fallbacks */
body.dark-mode .upgrade-prompt-title {
    color: var(--bvr-ink);
}

body.dark-mode .upgrade-prompt-text {
    color: var(--bvr-ink-2);
}

body.dark-mode .upgrade-prompt-feature {
    color: var(--bvr-ink);
}

body.dark-mode .upgrade-prompt-pricing {
    color: var(--bvr-ink-3);
}

body.dark-mode .upgrade-prompt-toc-link {
    color: var(--bvr-ink-2);
}

body.dark-mode .upgrade-prompt-toc-link:hover {
    color: var(--bvr-primary-light);
    background: rgba(77, 184, 255, 0.1);
}

/* Responsive -- stack buttons on small screens (handled in 768px media query below) */

/* ==============================================
   TOC LOCKED/COMPLETED STATES
   ============================================== */
.book-view-toc-item.locked {
    opacity: 1;
    cursor: not-allowed;
}

.book-view-toc-item.locked .book-view-toc-number {
    background: var(--bvr-chip);
    color: var(--bvr-ink-3);
}

.book-view-toc-item.locked .book-view-toc-title {
    color: var(--bvr-ink-3);
}

.book-view-toc-item.locked:hover {
    background: transparent;
}

.book-view-toc-lock {
    margin-left: auto;
    color: var(--bvr-ink-3);
    font-size: 1.1rem;
}

.book-view-toc-number.completed {
    background: rgba(23, 178, 106, 0.14);
    color: #17B26A;
}

.book-view-toc-item.completed .book-view-toc-title {
    color: var(--bvr-ink-2);
}

/* ==============================================
   CHAPTER FEEDBACK SECTION
   ============================================== */
.chapter-feedback {
    max-width: 660px;
    margin: 2.125rem auto 0;
    padding-top: 1.625rem;
    border-top: 1px solid var(--bvr-border);
    text-align: center;
}

.chapter-feedback-header h4 {
    margin: 0 0 0.875rem 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bvr-ink);
}

.chapter-feedback-rating {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 44px;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-pill);
    background: var(--bvr-surface);
    color: var(--bvr-ink);
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.15s var(--bvr-ease);
}

.feedback-btn:hover {
    border-color: var(--bvr-primary);
    color: var(--bvr-primary);
}

.feedback-btn.active {
    border-color: var(--bvr-primary);
    background: rgba(0, 180, 255, 0.1);
    color: var(--bvr-primary-deep);
}

.feedback-btn:first-child:hover,
.feedback-btn:first-child.active {
    border-color: var(--bvr-primary);
    color: var(--bvr-primary-deep);
}

.feedback-btn:first-child.active {
    background: rgba(0, 180, 255, 0.1);
    color: var(--bvr-primary-deep);
}

.feedback-btn:last-child:hover,
.feedback-btn:last-child.active {
    border-color: #ec4899;
    color: #ec4899;
}

.feedback-btn:last-child.active {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.feedback-thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 1.125rem 0;
    color: #17B26A;
    font-weight: 700;
    font-size: 0.9375rem;
}

.guest-feedback-text {
    margin: 0 0 1.5rem 0;
    color: var(--bvr-ink-2);
    font-size: 0.9rem;
}

.guest-feedback-text a {
    color: var(--bvr-primary-deep);
    font-weight: 600;
    text-decoration: underline;
}

.chapter-feedback-actions {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.chapter-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-pill);
    background: var(--bvr-surface);
    color: var(--bvr-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--bvr-ease);
}

.chapter-action-btn:hover {
    border-color: var(--bvr-primary);
    color: var(--bvr-primary);
    background: rgba(0, 180, 255, 0.05);
}

.chapter-comment-form {
    max-width: 660px;
    margin: 1.375rem auto 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chapter-comment-input {
    width: 100%;
    min-height: 74px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-md);
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: inherit;
    resize: vertical;
    background: var(--bvr-surface);
    color: var(--bvr-ink);
}

.chapter-comment-input:focus {
    outline: none;
    border-color: var(--bvr-primary);
}

.chapter-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.chapter-comment-cancel,
.chapter-comment-submit {
    padding: 0.5625rem 1rem;
    border-radius: 9px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--bvr-ease);
}

.chapter-comment-cancel {
    background: var(--bvr-surface);
    border: 1px solid var(--bvr-border);
    color: var(--bvr-ink-2);
}

.chapter-comment-cancel:hover {
    border-color: var(--bvr-ink-3);
}

.chapter-comment-submit {
    background: var(--bvr-primary);
    border: none;
    color: white;
}

.chapter-comment-submit:hover:not(:disabled) {
    background: var(--bvr-primary-deep);
}

.chapter-comment-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==============================================
   CHAPTER COMMENTS DISPLAY
   ============================================== */
.chapter-comments-section {
    max-width: 660px;
    margin: 1.625rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bvr-border);
}

.chapter-comments-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--bvr-surface);
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-md);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bvr-ink);
    cursor: pointer;
    transition: all 0.15s var(--bvr-ease);
}

.chapter-comments-toggle:hover {
    border-color: var(--bvr-primary);
    color: var(--bvr-primary);
}

.chapter-comments-list {
    margin-top: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.chapter-comment-item {
    display: flex;
    gap: 0.75rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--bvr-r-pill);
    background: linear-gradient(150deg, #00B4FF, #0174B1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    overflow: hidden;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.comment-author {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bvr-ink);
}

.comment-time {
    font-size: 0.75rem;
    color: var(--bvr-ink-3);
}

.comment-delete-btn {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--bvr-ink-3);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.comment-text {
    margin: 0;
    color: var(--bvr-ink-2);
    font-size: 0.875rem;
    line-height: 1.55;
}

.comment-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--bvr-ink-3);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.comment-action-btn:hover {
    color: var(--bvr-primary);
}

.chapter-comment-thread {
    margin-top: 0.875rem;
    margin-left: 50px;
    padding-top: 0.875rem;
    border-top: 1px solid var(--bvr-border);
}

.chapter-comment-reply-form {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.chapter-comment-reply-input {
    flex: 1;
    min-width: 0;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-pill);
    background: var(--bvr-surface-2);
    color: var(--bvr-ink);
    font-size: 0.84375rem;
}

.chapter-comment-reply-input:focus {
    outline: none;
    border-color: var(--bvr-primary);
}

.chapter-comment-reply-submit {
    padding: 0.625rem 1rem;
    border: none;
    border-radius: var(--bvr-r-pill);
    background: var(--bvr-primary);
    color: white;
    font-weight: 600;
    font-size: 0.84375rem;
    cursor: pointer;
    transition: all 0.15s var(--bvr-ease);
}

.chapter-comment-reply-submit:hover:not(:disabled) {
    background: var(--bvr-primary-deep);
}

.chapter-comment-reply-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chapter-comment-thread-list {
    margin-top: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.chapter-comment-thread-item {
    display: flex;
    gap: 0.75rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.comment-avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 820px) {
    .book-view-hero {
        padding: 7rem 1rem 2rem 1rem;
        min-height: auto;
    }

    .book-view-hero-content {
        grid-template-columns: 1fr;
        gap: 1.375rem;
        text-align: center;
    }

    .book-view-hero-cover {
        max-width: 200px;
        margin: 0 auto;
    }

    .book-view-author-section {
        justify-content: center;
    }

    .book-view-stats {
        justify-content: center;
    }

    .book-view-hero-actions {
        justify-content: center;
    }

    .book-view-rating {
        justify-content: center;
    }

    .book-view-description {
        margin-left: auto;
        margin-right: auto;
    }

    .book-view-content {
        padding: 1.375rem 1rem 4rem;
    }

    .book-view-chapter-content {
        padding: 2rem 1.25rem;
    }

    .book-view-chapter-nav {
        gap: 0.5rem;
        padding: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--bvr-r-md);
    }

    .book-view-chapter-nav.is-stuck {
        top: 70px;
        max-width: 100%;
        border-radius: 0 0 var(--bvr-r-md) var(--bvr-r-md);
    }

    .book-view-nav-btn {
        width: 36px; /* Smaller buttons on mobile */
        height: 36px;
        flex-shrink: 0; /* Prevent buttons from shrinking */
    }

    .book-view-chapter-select {
        flex: 1;
        max-width: none; /* Allow full width on mobile */
        min-width: 0; /* Allow shrinking if needed */
        padding: 0.5rem 0.75rem; /* Less padding on mobile */
        font-size: 0.85rem; /* Slightly smaller text */
    }

    .book-view-upgrade-prompt {
        padding: 1.75rem 1.25rem;
    }

    .upgrade-prompt-actions {
        flex-direction: column;
        align-items: center;
    }

    .upgrade-prompt-btn {
        width: 100%;
        max-width: 320px;
    }

    .book-view-section-content {
        font-size: calc(18px * var(--reader-font-scale, 1));
    }
}

/* ==============================================
   DARK MODE (element-level overrides where a value
   is not already tokenized under .book-view-page)
   ============================================== */
body.dark-mode .book-view-hero-overlay {
    background:
        radial-gradient(ellipse 80% 80% at 50% 52%,
            rgba(4, 8, 13, 0.48) 0%,
            rgba(4, 8, 13, 0.18) 52%,
            rgba(4, 8, 13, 0) 76%),
        linear-gradient(180deg,
            rgba(4, 8, 13, 0) 0%,
            rgba(4, 8, 13, 0) 50%,
            rgba(4, 8, 13, 0.38) 100%);
}

body.dark-mode .book-view-tab-btn {
    color: var(--bvr-ink-2);
}

body.dark-mode .book-view-tab-btn:hover {
    background: var(--bvr-chip);
    color: var(--bvr-ink);
}

body.dark-mode .book-view-tab-btn.active {
    background: var(--bvr-primary);
    color: white;
}

body.dark-mode .book-view-toc h2,
body.dark-mode .book-view-chapter-title,
body.dark-mode .book-view-toc-title {
    color: var(--bvr-ink);
}

body.dark-mode .book-view-toc-context,
body.dark-mode .book-view-toc-summary {
    color: var(--bvr-ink-2);
}

body.dark-mode .book-view-toc-summary strong {
    color: var(--bvr-ink);
}

body.dark-mode .book-view-section-content {
    color: var(--bvr-reader-text);
}

body.dark-mode .book-view-follow-author-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .book-view-follow-author-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .book-view-follow-author-btn.following {
    background: rgba(23, 178, 106, 0.2);
    border-color: rgba(23, 178, 106, 0.4);
}

body.dark-mode .chapter-feedback {
    border-color: var(--bvr-border);
}

body.dark-mode .chapter-feedback-header h4 {
    color: var(--bvr-ink);
}

body.dark-mode .feedback-btn {
    background: var(--bvr-surface);
    border-color: var(--bvr-border);
    color: var(--bvr-ink);
}

body.dark-mode .chapter-action-btn {
    background: var(--bvr-surface);
    border-color: var(--bvr-border);
    color: var(--bvr-ink);
}

body.dark-mode .chapter-action-btn:hover {
    background: rgba(0, 180, 255, 0.1);
}

body.dark-mode .chapter-comment-input {
    background: var(--bvr-surface);
    border-color: var(--bvr-border);
    color: var(--bvr-ink);
}

body.dark-mode .chapter-comment-cancel {
    background: var(--bvr-surface);
    border-color: var(--bvr-border);
    color: var(--bvr-ink-2);
}

body.dark-mode .chapter-comments-toggle {
    background: var(--bvr-surface);
    border-color: var(--bvr-border);
    color: var(--bvr-ink);
}

body.dark-mode .chapter-comment-item {
    background: transparent;
}

/* ==============================================
   CODE BLOCKS WITH SYNTAX HIGHLIGHTING
   ============================================== */

.codeblock-container {
    position: relative;
    margin: 1.9em 0;
}

.codeblock-container pre.code {
    margin: 0;
    padding: 1rem;
    background: var(--bvr-surface-2);
    border-radius: var(--bvr-r-md);
    border: 1px solid var(--bvr-border);
    overflow: auto;
}

.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: var(--bvr-r-sm);
    border: 1px solid var(--bvr-border);
    background: var(--bvr-surface);
    color: var(--bvr-ink-2);
    cursor: pointer;
    box-shadow: var(--bvr-shadow-sm);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.copy-button:hover {
    background: rgba(0, 180, 255, 0.06);
    border-color: var(--bvr-primary);
    color: var(--bvr-primary-deep);
    box-shadow: 0 2px 10px rgba(0, 180, 255, 0.15);
}

.copy-button:active {
    transform: translateY(1px);
}

.copy-button.copied,
.copy-button[aria-pressed="true"] {
    background: rgba(0, 180, 255, 0.1);
    border-color: var(--bvr-primary);
    color: var(--bvr-primary-deep);
}

body.dark-mode .codeblock-container pre.code {
    background: var(--bvr-surface-2);
    border-color: var(--bvr-border);
}

body.dark-mode .copy-button {
    background: var(--bvr-surface);
    color: var(--bvr-ink-2);
    border-color: var(--bvr-border);
    box-shadow: var(--bvr-shadow-sm);
}

body.dark-mode .copy-button:hover {
    background: rgba(77, 184, 255, 0.12);
    border-color: var(--bvr-primary-light);
    color: var(--bvr-ink);
    box-shadow: 0 2px 12px rgba(77, 184, 255, 0.25);
}

/* ==============================================
   DETAILS TAB - PUBLIC REVIEWS LIST
   ============================================== */
.book-reviews-list-section {
    margin-top: 1.25rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--bvr-border);
}

.book-reviews-list-heading {
    margin: 0 0 1rem 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bvr-ink);
}

.book-reviews-more-info {
    text-align: center;
    color: var(--bvr-ink-3);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Dark mode for reviews list section */
body.dark-mode .book-reviews-list-section {
    border-top-color: var(--bvr-border);
}

body.dark-mode .book-reviews-list-heading {
    color: var(--bvr-ink);
}

body.dark-mode .book-review-item {
    background: var(--bvr-surface-2);
    border-color: var(--bvr-border);
}

body.dark-mode .book-review-username {
    color: var(--bvr-ink);
}

body.dark-mode .book-review-date {
    color: var(--bvr-ink-3);
}

body.dark-mode .book-review-text {
    color: var(--bvr-ink-2);
}

body.dark-mode .book-reviews-empty {
    color: var(--bvr-ink-3);
}

body.dark-mode .book-reviews-more-info {
    color: var(--bvr-ink-3);
}

/* ==========================================================================
   Narrated read-along control (ra-)
   The kid-friendly "Read along" bar shown under the chapter nav when a picture
   book has per-page narration. Brand blue primary, accent orange for the
   tap-to-continue fallback. Large, obvious tap targets for small children.
   ========================================================================== */
.ra-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.10), rgba(255, 170, 0, 0.10));
    border: 2px solid rgba(0, 180, 255, 0.35);
}

.ra-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.1;
    min-height: 52px;
    padding: 0.7rem 1.4rem;
    font-size: 1.05rem;
    transition: transform 0.06s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ra-btn:active {
    transform: translateY(1px);
}

.ra-btn:focus-visible {
    outline: 3px solid #FFAA00;
    outline-offset: 2px;
}

.ra-btn i {
    font-size: 1.35rem;
}

/* Primary action: start / keep reading / read again -- brand blue. */
.ra-btn-main {
    color: #fff;
    background: #00B4FF;
    box-shadow: 0 4px 0 rgba(0, 130, 190, 0.65);
}

.ra-btn-main:hover {
    background: #00a3e6;
}

/* Pause uses a calmer outline so it does not compete with the primary action. */
.ra-btn-pause {
    color: #0077a8;
    background: #fff;
    box-shadow: 0 4px 0 rgba(0, 130, 190, 0.25);
}

.ra-btn-pause:hover {
    background: #f3fbff;
}

/* The tap-to-continue fallback (autoplay blocked) -- accent orange so it reads as "your turn". */
.ra-btn-tap {
    background: #FFAA00;
    color: #4a2e00;
    box-shadow: 0 4px 0 rgba(196, 130, 0, 0.7);
}

.ra-btn-tap:hover {
    background: #ffb91f;
}

/* Exit / dismiss -- deliberately NOT a transport control. A quiet, trailing icon-only ghost "X" so
   it reads as "close read-along," never as a second media button beside Pause. Pushed to the bar's
   trailing edge by the flex-grow on .ra-hint, and kept a 44px circular tap target. The button has no
   text label (the markup's aria-label/title name the action), so it is a square that the pill radius
   rounds into a circle. */
.ra-btn-stop {
    margin-left: auto;
    justify-content: center;
    color: #5f6b72;
    background: transparent;
    border: 1.5px solid rgba(0, 119, 168, 0.28);
    box-shadow: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

.ra-btn-stop i {
    font-size: 1.15rem;
}

.ra-btn-stop:hover {
    background: rgba(0, 119, 168, 0.08);
    color: #0077a8;
    border-color: rgba(0, 119, 168, 0.45);
}

.ra-hint {
    flex: 1 1 12rem;
    min-width: 10rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0077a8;
}

body.dark-mode .ra-bar {
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.14), rgba(255, 170, 0, 0.12));
    border-color: rgba(0, 180, 255, 0.45);
}

body.dark-mode .ra-btn-pause {
    color: #cdeffd;
    background: #143240;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

body.dark-mode .ra-btn-pause:hover {
    background: #1a3e50;
}

/* Keep the dark exit a quiet ghost circle too -- the same calm dismiss as light mode, not the old
   reddish opaque pill (which would read as a transport/danger button next to Pause). */
body.dark-mode .ra-btn-stop {
    color: #9fb4bd;
    background: transparent;
    border-color: rgba(143, 214, 245, 0.30);
    box-shadow: none;
}

body.dark-mode .ra-btn-stop:hover {
    background: rgba(143, 214, 245, 0.12);
    color: #cdeffd;
    border-color: rgba(143, 214, 245, 0.50);
}

body.dark-mode .ra-hint {
    color: #8fd6f5;
}

/* Reading-speed cycle button: quiet outline so it does not compete with the primary action. */
.ra-btn-speed {
    color: #0077a8;
    background: #fff;
    box-shadow: 0 4px 0 rgba(0, 130, 190, 0.18);
    font-variant-numeric: tabular-nums;
}

.ra-btn-speed:hover {
    background: #f3fbff;
}

body.dark-mode .ra-btn-speed {
    color: #cdeffd;
    background: #143240;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

body.dark-mode .ra-btn-speed:hover {
    background: #1a3e50;
}

/* While a page's clip plays, give the page content a soft spotlight so the reader's eye lands on
   what is being read. Page/section level (no per-word sync). */
.book-view-chapter-content.is-narrating {
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.35), 0 10px 30px rgba(0, 180, 255, 0.12);
    border-radius: 14px;
    transition: box-shadow 240ms var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

body.dark-mode .book-view-chapter-content.is-narrating {
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.45), 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* While a read-along session is active the bar docks to the bottom of the viewport as a floating
   caption strip (the approved Claude Design treatment), so the page art stays visible above it. */
.ra-bar.is-active {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    z-index: 100;
    border-radius: 22px;
    background: var(--bvr-surface, #FFFFFF);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: saturate(1.1) blur(2px);
}
body.dark-mode .ra-bar.is-active {
    background: var(--bvr-surface, #19212C);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* While docked, the big script line is the status -- hide the small text hint so the strip stays clean. */
.ra-bar.is-active .ra-hint { display: none; }

/* On mobile the bottom nav (.bottom-nav, shown <=768px, ~52px tall + safe area) is fixed at bottom:0
   with a higher z-index, so the strip must sit ABOVE it. Reuse the nav's own height variable and
   safe-area expression so the two never drift (and it stays correct in the iOS/Android hosts). */
@media (max-width: 768px) {
    .ra-bar.is-active {
        bottom: calc(var(--bottom-nav-height, 52px)
            + max(env(safe-area-inset-bottom), var(--android-nav-inset-bottom, 0px))
            + 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .book-view-chapter-content.is-narrating {
        transition: none;
    }
}

/* In-text karaoke highlight: the word currently being narrated. Word level (synced to clip timings or
   speech boundary events); the page-level .is-narrating spotlight remains the floor when no per-word
   data is available. Amber matches the read-along brand cue. */
.book-view-section-content .ra-word {
    border-radius: 4px;
    transition: background-color 120ms var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                color 120ms var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.book-view-section-content .ra-word.is-spoken {
    background-color: var(--bvr-cta, #FFAA00);
    color: #20140A;
    box-shadow: 0 0 0 2px var(--bvr-cta, #FFAA00);
}
body.dark-mode .book-view-section-content .ra-word.is-spoken {
    color: #1A1206;
}
@media (prefers-reduced-motion: reduce) {
    .book-view-section-content .ra-word {
        transition: none;
    }
}

/* The read-along caption-strip line: the current page's narration sentence, the surface the per-word
   highlight lights up. This is the single karaoke surface (image-only picture books have no body text).
   The line takes the full bar width and wraps the controls below/around it via the bar's flex layout. */
.ra-script {
    flex: 1 1 100%;
    order: 2;
    text-align: center;
    font-weight: 700;
    font-size: clamp(20px, 4.6vw, 30px);
    line-height: 1.3;
    color: var(--bvr-reader-text, #2B2B2B);
    padding: 0.25rem 0.5rem;
    /* Cap the caption to ~3 lines and scroll internally; the engine's per-word scrollIntoView keeps the
       spoken word in view, so a long narration shows a fixed window that follows the reading rather than
       growing into the nav or down the page. The scrollbar is hidden because the caption auto-follows the
       word -- the reader never scrolls it by hand. */
    max-height: calc(1.3em * 3 + 0.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ra-script::-webkit-scrollbar { display: none; }
.ra-script:empty { display: none; }
body.dark-mode .ra-script { color: var(--bvr-reader-text, #D5DCE4); }

@keyframes ra-word-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.ra-script .ra-word {
    display: inline-block;
    border-radius: 999px;
    transition: background-color 120ms var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                color 120ms var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.ra-script .ra-word.is-spoken {
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
    background-color: var(--bvr-cta, #FFAA00);
    color: #20140A;
    box-shadow: 0 6px 16px rgba(255, 170, 0, 0.45);
    animation: ra-word-breathe 1.7s var(--bvr-ease, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}
body.dark-mode .ra-script .ra-word.is-spoken { color: #1A1206; }

@media (prefers-reduced-motion: reduce) {
    .ra-script .ra-word { transition: none; }
    .ra-script .ra-word.is-spoken { animation: none; }
}

/* =============================================
   Watch the series card (Details tab)
   Compact link card to /watch/{slug} shown when a
   published show links this book. Link only -- the
   book page never hosts a duplicate player.
   ============================================= */
.book-watch-card { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.book-watch-card:hover { border-color: #00b4ff; box-shadow: 0 4px 16px rgba(0, 180, 255, 0.12); color: inherit; }
.book-watch-thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: 0.6rem; overflow: hidden; background: linear-gradient(135deg, #16213e, #0f3460); }
.book-watch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-watch-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; background: rgba(8, 12, 24, 0.3); }
.book-watch-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.book-watch-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #0090cc; }
.book-watch-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.book-watch-sub { font-size: 0.85rem; color: var(--text-secondary, #666); }
.book-watch-chevron { margin-left: auto; flex: none; color: var(--text-secondary, #999); font-size: 1.1rem; }
body.dark-mode .book-watch-eyebrow { color: #35c3ff; }
body.dark-mode .book-watch-sub { color: var(--text-secondary, #9aa3b2); }

/* ==============================================
   READER DISPLAY CONTROL (Aa: theme + text size)
   ============================================== */
.rdc-root {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}

.rdc-trigger {
    width: 38px;
    height: 38px;
    border: 1px solid var(--bvr-border);
    background: var(--bvr-surface);
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bvr-ink);
    font-weight: 700;
    transition: all 0.16s var(--bvr-ease);
}

.rdc-trigger:hover {
    background: var(--bvr-primary);
    border-color: var(--bvr-primary);
    color: #fff;
}

.rdc-trigger-aa { font-size: 0.95rem; line-height: 1; }

.rdc-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    min-width: 240px;
    padding: 0.75rem;
    background: var(--bvr-surface);
    border: 1px solid var(--bvr-border);
    border-radius: var(--bvr-r-md);
    box-shadow: var(--bvr-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rdc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rdc-row-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bvr-ink);
}

.rdc-size-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rdc-step-btn {
    min-width: 34px;
    height: 32px;
    border: 1px solid var(--bvr-border);
    background: var(--bvr-surface);
    border-radius: 8px;
    cursor: pointer;
    color: var(--bvr-ink);
    font-weight: 700;
    transition: all 0.16s var(--bvr-ease);
}

.rdc-step-btn:hover:not(:disabled) {
    background: var(--bvr-primary);
    border-color: var(--bvr-primary);
    color: #fff;
}

.rdc-step-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.rdc-size-value {
    min-width: 3.2ch;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bvr-ink-2);
}

.rdc-trigger:focus-visible,
.rdc-step-btn:focus-visible {
    outline: 2px solid var(--bvr-primary);
    outline-offset: 2px;
}

/* Dark mode: panel + controls sit on the dark reader surface. */
body.dark-mode .rdc-panel {
    background: var(--bvr-surface);
    border-color: var(--bvr-border);
}