/* assets/css/custom.css */
/* THE VOICE IS HISTORY — DARK VOID ETERNAL EDITION */
/* Final polish: Hero gold underlines (2px beneath h1 and h2 via .content.position-relative), sidebar/book1 h3 1px consistency */
/* Every original refined touch preserved — cleanup complete */

:root {
    --gold: #d4a373;
    --gold-dark: #8b4513;
    --void: #000000;
    --text: #ffffff;
    --text-muted: #999999;
    --text-subtle: rgba(255, 255, 255, 0.75);
    --highlight-glow-strong: 0 0 12px var(--gold), 0 0 24px var(--gold);
    --highlight-pulse: pulseGlowDark 1.5s ease-in-out infinite;
    --text-scale: 1.0;
}

/* ============================================= */
/* 1. Global & Dark Void Takeover */
body {
    background: var(--void) !important;
    color: var(--text) !important;
    font-family: 'Georgia', serif !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.dark-mode {
    background: var(--void) !important;
    color: var(--text) !important;
}

/* Gold text utility - used for icons like the graduation cap in Study Hub offcanvas */
.text-gold {
  color: var(--gold) !important;
}

/* Ensure graduation-cap in Study Hub offcanvas header is gold (high specificity) */
#bookmarkSidebar .offcanvas-header .fa-graduation-cap,
#bookmarkSidebar .offcanvas-title .fa-graduation-cap {
  color: var(--gold) !important;
}

/* Total void takeover (spare videos) */
.dark-mode #page-container > *:not(#hero-video):not(#footer-video):not(video) {
    background: var(--void) !important;
    color: var(--text) !important;
}

.dark-mode #page-header,
.dark-mode #sidebar,
.dark-mode #page-footer,
.dark-mode .content-header,
.dark-mode .block,
.dark-mode .dropdown-menu,
.dark-mode .breadcrumb,
.dark-mode .alert,
.dark-mode .nav-main-heading,
.dark-mode .nav-main-link,
.dark-mode .form-control {
    background: var(--void) !important;
    color: var(--text) !important;
    border-color: #333 !important;
}

/* Search/placeholder */
.dark-mode .form-control,
.dark-mode input::placeholder {
    color: var(--text) !important;
    opacity: 0.8;
}

/* Dropdowns */
.dark-mode .dropdown-menu {
    background: var(--void) !important;
    border: 1px solid #333 !important;
}
.dark-mode .dropdown-item {
    color: var(--text) !important;
}
.dark-mode .dropdown-item:hover {
    background: #222 !important;
}

/* Headers */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .block-title {
    color: var(--text) !important;
    text-shadow: none !important;
}

/* Primary buttons */
.dark-mode .btn-primary {
    background: var(--text) !important;
    border-color: var(--text) !important;
    color: var(--void) !important;
}
.dark-mode .btn-primary:hover {
    background: #ddd !important;
}

/* Kill leftover light bgs */
.dark-mode .bg-parchment,
.dark-mode .bg-body-light,
.dark-mode .bg-body-extra-light {
    background: var(--void) !important;
}

/* Video containers transparent */
.dark-mode .position-relative.overflow-hidden,
.dark-mode video#hero-video,
.dark-mode video#footer-video {
    background: transparent !important;
}

/* Alerts */
.dark-mode .alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}
.dark-mode .alert-success .fa-gift { color: #28a745 !important; }

.dark-mode .alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

.dark-mode .alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

/* Tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================= */
/* 2. Headings & Hero — Gold underlines (2px beneath h1 and hero lines, progressive sizes) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
}

/* (legacy 1px .hero-video-container rules removed previously; current 2px rules live in .content.position-relative) */

/* h1 in hero gets gold underline below (2px #d4a373, padding-bottom 8px), on all hero pages to mimic index.html.
   Scoped to the hero content area. h1 uses natural (larger) size — no !important shrink from prior merge. */
.content.position-relative h1 {
    border-bottom: 2px solid #d4a373 !important;
    padding-bottom: 8px !important;
}

/* The h2 immediately following h1 in the hero content (the "second line" h2) gets gold underline below, to mimic index h2 treatment.
   On teaser caesar-the-gallic-wars-teaser.html: this h2 is the author name, gets the underline below.
   On numbered book pages: this h2 is the "Book X", gets the underline below (its "top" is provided by the h1's bottom line above it, with spacing).
   The following h3 (author) gets no underline (avoids extra 3rd line). */
.content.position-relative h1 + h2 {
    border-bottom: 2px solid #d4a373 !important;
    padding-bottom: 8px !important;
    margin-bottom: 0.5rem !important; /* space after this "subtitle" gold line before the following h3 (author on numbered book pages) */
    font-size: 1.25rem !important; /* medium for 2nd line (Book X) */
}

/* Book # h2 keeps only font-size (medium); borders removed here.
   Upper gold for Book X comes from preceding h1's border-bottom (spaced).
   Lower gold comes from the h1 + h2 adjacent rule's border-bottom.
   This prevents 2 lines above the h2 + ensures correct 1 above / 1 beneath for books. */
.content.position-relative h2.hero-book-num {
    font-size: 1.25rem !important; /* medium for 2nd line (Book X) */
}

/* small for author h3 on book pages (3rd line) */
.content.position-relative h3 {
    font-size: 1rem !important;
}

/* (hero sizes for h2/h3 enforced here; h1 uses natural larger size) */

/* Hero glow */
.hero-glow {
    position: relative;
    z-index: 1;
}

/* (unused .hero-video-container rules removed previously; .hero-glow direct) */

/* Hero glow strong */
.dark-mode .hero-glow {
    text-shadow: var(--highlight-glow-strong) !important;
    animation: var(--highlight-pulse);
}

/* Book 1 h3 gold underline (1px consistency) */
.block-content h3 {
    border-bottom: 1px solid var(--gold) !important;
    padding-bottom: 12px !important;
}

/* Hero flush */
#page-container,
#main-container,
.hero-video-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.hero-video-container .content {
    opacity: 1 !important;
    transition: opacity 1s ease;
}

/* ============================================= */
/* 3. Main Text Block */
.block.block-rounded {
    border: 2px solid #333 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    background: var(--void) !important;
}
.block.block-rounded:hover {
    transform: none !important;
}

/* Lead text */
.lead {
    font-style: italic !important;
    color: var(--text-muted) !important;
}

/* Text spans */
#main-container .block-content #textContent span.word {
    position: relative;
    display: inline-block;
    line-height: 1.5 !important;
    vertical-align: baseline !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    font-size: calc(1em * var(--text-scale)) !important;
}
.lead span {
    display: inline !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    padding: 0 !important;
    margin: 0 !important;
}
.lead span.highlight {
    position: relative;
    z-index: 1;
}

/* Strong highlight glow */
.dark-mode #textContent span.highlight,
#bookmarkSidebar .bookmark-passage span.highlight {
    color: var(--text) !important;
    text-shadow: var(--highlight-glow-strong) !important;
    animation: var(--highlight-pulse);
}

@keyframes pulseGlowDark {
    0%, 100% { text-shadow: 0 0 6px var(--gold), 0 0 12px var(--gold); }
    50%      { text-shadow: 0 0 12px var(--gold), 0 0 24px var(--gold), 0 0 36px var(--gold); }
}

/* Reduced glow (50% intensity) specifically for the term in the grok definition offcanvas */
@keyframes pulseGlowDef {
    0%, 100% { text-shadow: 0 0 0.5px var(--gold), 0 0 0.75px var(--gold); }
    50%      { text-shadow: 0 0 0.75px var(--gold), 0 0 1.5px var(--gold), 0 0 2.25px var(--gold); }
}

/* Soft pulsing glow for the 3 large FA icons in Study Hub (turned down ~50% as requested) */
@keyframes pulseGlowSoft {
    0%, 100% { text-shadow: 0 0 3px #d4a373, 0 0 6px #d4a373; }
    50%      { text-shadow: 0 0 5px #d4a373, 0 0 10px #d4a373; }
}

/* Stronger shape-hugging glow for the large Grok logo icon (using filter: drop-shadow so it follows the actual logo shape instead of a box) */
@keyframes pulseGlowGrok {
    0%, 100% { 
      filter: drop-shadow(0 0 30px #d4a373) drop-shadow(0 0 60px #d4a373) drop-shadow(0 0 90px #d4a373); 
      box-shadow: 0 0 30px #d4a373, 0 0 60px #d4a373, 0 0 90px #d4a373;
    }
    50%      { 
      filter: drop-shadow(0 0 45px #d4a373) drop-shadow(0 0 90px #d4a373) drop-shadow(0 0 135px #d4a373); 
      box-shadow: 0 0 45px #d4a373, 0 0 90px #d4a373, 0 0 135px #d4a373;
    }
}

/* Hover brightness & slower pulse */
#main-container .block-content:hover span.highlight::after,
#main-container .block-content #textContent span:hover::after {
    opacity: 0.22 !important;
}
@keyframes glowInOut {
    0%, 100% { opacity: 0.70; }
    50%      { opacity: 0.92; }
}
#main-container .block-content #textContent span.highlight::after {
    animation: glowInOut 2.2s ease-in-out infinite;
}

/* Grok-This */
.grok-link {
    border-bottom: 1px solid var(--gold);
    cursor: pointer;
    color: inherit;
    transition: all 0.2s ease;
}
.grok-link:hover {
    border-bottom-color: var(--gold-dark);
    text-shadow: 0 0 10px var(--gold);
}
.grok-first {
    border-bottom: 2px solid var(--text-muted) !important;
    padding-bottom: 1px !important;
    background: linear-gradient(to top, #d4a37322 0%, transparent 100%) !important;
    transition: all 0.3s ease !important;
}
.grok-first:hover {
    border-bottom-color: var(--gold) !important;
    background: linear-gradient(to top, #d4a37355 0%, transparent 100%) !important;
    color: var(--gold) !important;
}

/* ============================================= */
/* 4. Sidebar — 1px right border */
#sidebar,
.dark-mode #sidebar {
    background: var(--void) !important;
    color: var(--text) !important;
    border-right: .5px solid #999999 !important;
}
.dark-mode #sidebar .nav-main-link,
.dark-mode #sidebar .nav-main-heading {
    color: var(--text) !important;
}
.nav-main-link-icon {
    color: var(--gold) !important;
}
.nav-main-link:hover {
    background: rgba(212, 163, 115, 0.3) !important;
    color: var(--gold) !important;
    border-radius: 4px !important;
}
.nav-main-link-name {
    font-weight: 500 !important;
}
.nav-main-submenu .nav-main-link {
    padding-left: 20px !important;
    padding-top: 2px !important;      /* bring "Book X" text closer to top of active/hover bg */
    padding-bottom: 0 !important;     /* almost no gap — bar sits tight under Book X */
}
/* Sidebar active book highlight (gold on void) */
.nav-main-link.active {
    color: var(--gold) !important;
    background: rgba(212, 163, 115, 0.2) !important;  /* Subtle gold tint */
    font-weight: 600 !important;
    border-radius: 4px !important;
}
.nav-main-link.active:hover {
    background: rgba(212, 163, 115, 0.4) !important;
}

/* Sidebar reading progress bars (Phase 1) — placed as sibling after each Book N <a> so they sit cleanly underneath */
.book-progress-mini {
    margin-left: 1.35rem;   /* align under the indented "Book N" text in the submenu */
    margin-top: 1px;        /* very tight gap under Book X text */
    margin-bottom: 8px;     /* breathing room after the time clocks (space to next Book) */
    padding-bottom: 6px;    /* breathing room below the time numbers inside the active/hover bg */
    pointer-events: none;   /* never block clicks on the nav link itself */
}

/* Make the entire book row (title + progress bar + times) feel like one big clickable target */
.dark-mode #sidebar .nav-main-submenu .nav-main-item:has(a[href*="gallic-wars-book"]) {
  cursor: pointer;
}

/* Podcast-style elapsed / remaining timers under the mini progress bar */
.book-progress-times {
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* Burning candle / flame effect at the head of the live progress bar — ONLY for the active book */
.nav-main-item:has(> .nav-main-link.active) .book-progress-bar-fill {
    position: relative;
}

.nav-main-item:has(> .nav-main-link.active) .book-progress-bar-fill::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background: #fff8d1;
    border-radius: 50% 30% 50% 30%;
    box-shadow:
        0 0 3px #f4d9a8,
        0 0 7px #d4a373,
        0 0 14px rgba(212, 163, 115, 0.55);
    animation: candleFlicker 720ms infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 1;
}

/* Let the flame glow extend slightly beyond the thin track */
.book-progress-bar-container {
    overflow: visible !important;
}

@keyframes candleFlicker {
    0% {
        opacity: 0.65;
        transform: translateY(-50%) scale(0.75);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1.25);
    }
}

/* Extra breathing room above the percentage so the active book's candle flame doesn't overlap it */
.book-progress-label {
    margin-top: 5px !important;
}

/* Mobile sidebar */
@media (max-width: 991.98px) {
    #sidebar {
        z-index: 1040 !important;
        opacity: 1 !important;
        background: var(--void) !important;
    }
    .offcanvas-backdrop,
    .page-overlay {
        z-index: 1030 !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
    }
}

/* Desktop no dim */
@media (min-width: 992px) {
    .offcanvas-backdrop,
    .page-overlay {
        display: none !important;
    }
    body {
        overflow: auto !important;
        padding-right: 0 !important;
    }
    #sidebar {
        position: fixed !important;
        transition: none !important;
    }
}

/* ============================================= */
/* 5. Header Elements */
#page-header .btn-alt-secondary {
    background: var(--void) !important;
    border: 1px solid var(--gold) !important;
    color: #999999 !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: .375rem !important;
    font-family: 'Atkinson Hyperlegible', serif !important;
    transition: all 0.2s ease !important;
}
#page-header .btn-alt-secondary:hover,
#page-header .btn-alt-secondary:focus-visible {
    background: var(--void) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}
#page-header .btn-alt-secondary i {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #999999 !important;
}
#page-header .btn-alt-secondary:hover i,
#page-header .btn-alt-secondary:focus-visible i {
    color: #ffffff !important;
}

/* Search bar */
#page-header .input-group {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid var(--gold) !important;
    border-radius: .375rem !important;
    overflow: hidden !important;
}
#page-header .input-group .form-control {
    background: transparent !important;
    color: var(--text) !important;
    padding: .375rem .75rem !important;
    font-family: 'Georgia', serif !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#page-header .input-group .input-group-text {
    background: transparent !important;
    color: var(--gold) !important;
    padding: .375rem .75rem !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#page-header .input-group:hover,
#page-header .input-group:focus-within {
    border-color: var(--gold-dark) !important;
    box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}
#page-header .input-group i {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Ensure the inner input never shows its own border or thick focus ring — wrapper provides the single 1px gold outline */
#page-header .input-group .form-control:focus,
#page-header .input-group .form-control:focus-visible,
#page-header-search-input2:focus,
#page-header-search-input2:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================= */
/* 6. Fixed Footer Controls */
#page-footer {
    background: transparent !important;
    backdrop-filter: none !important;
    border-top: none !important;
    z-index: 1030;
}
#page-footer .content {
    padding: 0.25rem 0.5rem !important;
    background: transparent !important;
}

/* Tiny copyright footer (the one with "The Voice Is History © 2026" below bottom hero video in index/teasers) - glass effect same as header */
#page-footer.bg-parchment {
    background: rgba(212, 163, 115, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(212, 163, 115, 0.4) !important;
}
#page-footer.bg-parchment .content {
    background: transparent !important;
}
#page-footer .row { margin: 0 !important; }
#page-footer .col-sm-12 { padding: 0 !important; text-align: center; }
#page-footer .d-flex.justify-content-center { gap: 0 !important; }
#page-footer .d-flex.justify-content-center.align-items-center.flex-nowrap {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

.footer-controls-group {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border: 1px solid var(--gold) !important;
    border-radius: 0.375rem !important;
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 0.125rem !important;
}

.footer-controls-group .btn,
.footer-controls-group .btn-gold-inner {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    color: #999999 !important;
    background: transparent !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    position: relative;
    min-width: 2.5rem;
}
.footer-controls-group .btn:first-child {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}
.footer-controls-group .btn:last-child {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.btn-gold-inner:hover,
.btn-gold-inner:active,
.btn-gold-inner:focus {
    background-color: var(--void) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 0.25rem !important;
}

/* Play no stick */
.footer-controls-group .btn-gold-inner#playBtn:active {
    background: transparent !important;
}

/* Play button icon — enlarged 50% bigger than other footer controls icons (for visual emphasis) */
.footer-controls-group .btn-gold-inner i.fa-play,
.footer-controls-group .btn-gold-inner i.fa-pause {
    font-size: 1.7rem !important;
    /* ensure the large icon has breathing room inside the button */
    vertical-align: middle;
}

/* Default gray text/icons for footer buttons, white on hover */
.footer-controls-group .btn-gold-inner i {
    color: #999999 !important;
}
.footer-controls-group .btn-gold-inner:hover i {
    color: #ffffff !important;
}

/* Carets */
.btn-gold-inner.dropdown-toggle::after {
    border-top-color: #999999 !important;
    position: absolute !important;
    right: 0.375rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.btn-gold-inner:hover.dropdown-toggle::after,
.btn-gold-inner:focus-visible.dropdown-toggle::after {
    border-top-color: #ffffff !important;
}

/* Toggle sizes */
.voice-toggle {
    padding-left: 0.35rem !important;
    padding-right: 0.7rem !important;
    justify-content: center !important;
    min-width: auto !important;
}
.voice-toggle::after { right: 0.3rem !important; }

.speed-toggle {
    padding-left: 0.4rem !important;
    padding-right: 0.85rem !important;
    min-width: 3rem;
    justify-content: center !important;
}

.music-toggle {
    padding-left: 0.5rem !important;
    padding-right: 1.5rem !important;
    min-width: 2.75rem;
    justify-content: center !important;
}

.text-size-toggle {
    /* Symmetric treatment so the icon centers like all other footer icons (music, sun, step, etc).
       The HTML already carries "px-2" + the group flex centering does the rest. */
    min-width: 2.5rem;
}

/* Separators */
.footer-controls-group .btn-separator:not(:last-child)::after,
.footer-controls-group .btn-separator-group:not(:first-child)::before,
.footer-controls-group .voice-speed-divider {
    content: '';
    position: absolute;
    width: 1px;
    background: var(--gold);
    opacity: 0.5;
    z-index: 1;
}
.footer-controls-group .btn-separator:not(:last-child)::after {
    right: -1px;
    top: 10%;
    bottom: 10%;
}
.footer-controls-group .btn-separator-group:not(:first-child)::before {
    left: -1px;
    top: 10%;
    bottom: 10%;
}
.footer-controls-group .voice-speed-divider {
    height: 100%;
    margin: 0;
    flex-shrink: 0;
}
.footer-controls-group .btn-group .btn {
    border-left: none !important;
}

/* Dropdown menus */
.footer-controls-group .dropdown-menu,
.footer-controls-group.dropup .dropdown-menu {
    z-index: 10650 !important;   /* Must sit above the audio scrubber (z=9999) when open */
    border: 1px solid var(--gold) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(139, 69, 19, 0.15) !important;
    background: var(--void) !important;
    color: var(--text) !important;
}
/* Legacy specific rules kept for other footer dropdowns if needed, but voice items now handled by stronger rules below */

/* Sliders */
#musicVolumeSlider::-webkit-slider-thumb,
#musicVolumeSlider::-moz-range-thumb {
    background-color: #28a745 !important;
}
#textSizeSlider::-webkit-slider-thumb,
#textSizeSlider::-moz-range-thumb {
    background-color: #28a745 !important;
    border: 1px solid #20c997 !important;
}

/* Desktop enlargement */
@media (min-width: 992px) {
    .footer-controls-group .btn-gold-inner {
        padding: 0.35rem 0.5rem !important;
        font-size: 1.1rem !important;
        min-width: 3rem !important;
        line-height: 1.2 !important;
    }
    /* Extra vertical breathing room for the large play icon (desktop) */
    .footer-controls-group .btn-gold-inner#playBtn {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .footer-controls-group .voice-toggle,
    .footer-controls-group .speed-toggle,
    .footer-controls-group .music-toggle,
    .footer-controls-group .text-size-toggle {
        min-width: 3.5rem !important;
    }
    /* Ensure voice/speed icons centered with space for caret (overrides general padding) */
    .footer-controls-group .voice-toggle {
        padding-left: 0.5rem !important;
        padding-right: 0.9rem !important;
    }
    .footer-controls-group .voice-toggle::after {
        right: 0.35rem !important;
    }
    .footer-controls-group .speed-toggle {
        padding-left: 0.5rem !important;
        padding-right: 1rem !important;
    }
    .footer-controls-group .btn-gold-inner i {
        font-size: 1.125rem !important;
        color: #999999 !important;
    }
.footer-controls-group .btn-gold-inner:hover i {
        color: #ffffff !important;
    }
    .footer-controls-group {
        padding: 0.0625rem !important;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    .footer-controls-group .btn {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.875rem !important;
        min-width: 3rem !important;
    }
    /* Extra vertical padding for the large play icon on tablets/mobile */
    .footer-controls-group .btn-gold-inner#playBtn {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .voice-toggle { width: 2.5rem !important; }
    .speed-toggle { min-width: 3.25rem !important; }
    .music-toggle { min-width: 3rem !important; }
    .footer-controls-group .btn-separator::after,
    .footer-controls-group .btn-separator-group::before,
    .footer-controls-group .voice-speed-divider {
        width: 0.5px !important;
        opacity: 0.3 !important;
    }
}
@media (max-width: 575.98px) {
    .voice-toggle { width: 2.25rem !important; }
    .footer-controls-group .btn-separator::after,
    .footer-controls-group .btn-separator-group::before,
    .footer-controls-group .voice-speed-divider {
        width: 0.3px !important;
        opacity: 0.2 !important;
    }
}

/* ============================================= */
/* 7. Study Hub & Modals */
#bookmarkSidebar .accordion,
#bookmarkSidebar .accordion-item,
#bookmarkSidebar .accordion-header,
#bookmarkSidebar .accordion-button {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 6px !important;
}

/* Force each bookmark accordion item to create its own stacking context.
   This prevents expanded body content from previous items from covering
   the headers of items below it (the root cause of the "can't click lower BMs" bug). */
#bookmarkSidebar .accordion-item {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
#bookmarkSidebar .accordion-button {
    background: var(--void) !important;
    position: relative;
    z-index: 2; /* Ensure headers sit above any content from previous expanded items */
    pointer-events: auto !important;
}
#bookmarkSidebar .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22%23d4a373%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%22/%3E%3C/svg%3E") !important;
}
#bookmarkSidebar .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22%23d4a373%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M1.646 8.646a.5.5 0 0 1 .708 0L8 14.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%22/%3E%3C/svg%3E") !important;
}
#bookmarkSidebar .play-bookmark {
    min-width: 3.5rem;
    padding: 0.75rem;
}

/* SweetAlert2 & Rename Modal — universal glass + 1px gold outline */
.swal2-popup,
#renameBookmarkModal .modal-content,
.modal-content {
  background: rgba(0, 0, 0, 0.62) !important;
  color: var(--text) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Glass for offcanvases too (Study Hub, Grok sidebar) — slightly more opaque for side panels */
.offcanvas {
  background: rgba(0, 0, 0, 0.65) !important;
  border-left: 1px solid var(--gold) !important;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Grok underline defs sidebar: solid black, no glass / transparency (bookmark sidebar keeps glass) */
#grokSidebar {
  background: var(--void) !important; /* solid #000000 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.swal2-resume-dialog {
  border: 1px solid var(--gold) !important;
}

/* Resume dialog text styling */
.swal2-resume-dialog .swal2-html-container p {
  color: #999 !important;
}

.swal2-resume-dialog .swal2-html-container strong {
  color: var(--text) !important;
  text-shadow: var(--highlight-glow-strong) !important;
  animation: var(--highlight-pulse);
}

.swal2-resume-dialog .swal2-resume-body {
  margin-top: 6px;
  margin-bottom: 0;
}

/* Gold divider below the time sentence — modest, normal-dialog separation */
.swal2-resume-dialog .swal2-resume-divider {
  height: 1px;
  background-color: var(--gold);
  margin-top: 14px;
  margin-bottom: 14px;
}

/* Resume dialog header with logo above title */
.swal2-resume-dialog .swal2-resume-header {
  text-align: center;
}
.swal2-resume-dialog .swal2-resume-logo {
  height: 138px;
  max-width: 100%;
  margin-bottom: 8px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.swal2-resume-dialog .swal2-resume-title {
  font-family: 'Georgia', serif !important;
  font-size: 1.5rem !important;
  color: var(--text) !important;
  margin: 0 0 4px 0 !important;
  padding-bottom: 0;
  line-height: 1.2;
}
.swal2-title {
    color: var(--text) !important;
    font-family: 'Georgia', serif !important;
    font-size: 1.5rem !important;
}
.swal2-html-container {
    color: #ddd !important;
}
.swal2-input {
    background: rgba(245, 232, 199, 0.1) !important;
    border: 1px solid var(--gold) !important;
    color: var(--text) !important;
    padding: 0.875rem 1rem !important;
    border-radius: 0.375rem !important;
    font-family: 'Georgia', serif !important;
}
.swal2-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}
.swal2-input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 0.25rem rgba(212, 163, 115, 0.3) !important;
    background: rgba(245, 232, 199, 0.15) !important;
}
/* Universal transparent gold buttons for all Swal dialogs (and modals) — 1px gold outline, void bg, gold hover fill */
.swal2-actions .swal2-confirm.swal2-styled,
.swal2-actions .swal2-cancel.swal2-styled,
.swal2-actions .swal2-styled,
.modal-content .btn-primary,
.modal-content .btn-secondary,
.modal-content .btn-gold-inner,
.modal-content .btn {
  background: var(--void) !important;
  background-color: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  padding: 0.5rem 1.25rem !important;
}

.swal2-actions .swal2-confirm.swal2-styled:hover,
.swal2-actions .swal2-confirm.swal2-styled:focus-visible,
.swal2-actions .swal2-cancel.swal2-styled:hover,
.swal2-actions .swal2-cancel.swal2-styled:focus-visible,
.modal-content .btn-primary:hover,
.modal-content .btn-secondary:hover,
.modal-content .btn:hover {
  background: var(--void) !important;
  background-color: var(--void) !important;
  color: #ffffff !important;
  border-color: var(--gold) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}

/* Keep the resume-specific ones for any extra resume styling, but they now inherit the universal transparent */
.swal2-resume-dialog .swal2-actions .swal2-confirm.swal2-styled,
.swal2-resume-dialog .swal2-actions .swal2-cancel.swal2-styled {
  /* inherits the universal transparent gold above */
}

/* Gentle fade instead of dramatic pop-in for the resume "Welcome back" dialog */
.swal2-resume-dialog.swal2-resume-show {
  animation: swal2-resume-fade-in 380ms ease-out forwards !important;
  /* ensure no default scale/transform bleed */
  transform: none !important;
}
.swal2-resume-dialog.swal2-resume-hide {
  animation: swal2-resume-fade-out 220ms ease-in forwards !important;
}

@keyframes swal2-resume-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes swal2-resume-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.swal2-container {
    z-index: 1060 !important;
}

/* Glass toasts (used by player.js showTVIHToast / showToast and fallbacks) */
.toast.glass-toast,
.toast-container .toast {
  background: rgba(0, 0, 0, 0.68) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.toast.glass-toast .toast-body,
.toast-container .toast .toast-body {
  color: var(--text) !important;
}
.toast.glass-toast .btn-close,
.toast-container .toast .btn-close {
  filter: invert(1) brightness(0.8);
}

/* Top-center toasts: sit just below the fixed #page-header (OneUI header is 4rem).
   Horizontal centering via start-50 + translate-middle-x; stacks downward from below the header. */
.toast-container.tvih-toast-stack {
  top: calc(4rem + 0.75rem) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: min(92vw, 420px);
  pointer-events: none;
}
.toast-container.tvih-toast-stack .toast {
  pointer-events: auto;
}

/* Ensure modal footers / headers play nice with glass */
.modal-content .modal-header,
.modal-content .modal-footer {
  border-color: rgba(212, 163, 115, 0.3) !important;
}
#renameBookmarkModal .form-control-alt:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 0.25rem rgba(212, 163, 115, 0.3) !important;
}
#renameBookmarkModal .btn-gold-inner {
    background: var(--gold) !important;
    color: var(--gold-dark) !important;
}

#bookmarkSidebar .accordion-body .px-4.mb-3 {
  margin-top: 1rem;
  width: 100%;
}
/* Light Reading Mode — Force scoped to prose block */
body.light-reading-mode .block.block-rounded,
.light-reading-mode .block.block-rounded {
    background: #fffb !important;
    color: #000 !important;
    border-color: #666 !important;
}
body.light-reading-mode .block.block-rounded .lead,
.light-reading-mode .block.block-rounded .lead {
    color: #222 !important;
}
body.light-reading-mode .block.block-rounded h3,
.light-reading-mode .block.block-rounded h3 {
    color: #000 !important;
}

/* Highlights — white text + soft gold glow */
body.light-reading-mode #textContent span.highlight,
.light-reading-mode #textContent span.highlight,
body.light-reading-mode #bookmarkSidebar .bookmark-passage span.highlight,
.light-reading-mode #bookmarkSidebar .bookmark-passage span.highlight {
    color: #fff !important;
    text-shadow: 0 0 8px #d4a373, 0 0 16px #d4a373 !important;
    animation: pulseGlowDark 1.5s ease-in-out infinite !important;
}
/* Light Reading Mode — Grok-This: Gold underline + subtle bg */
.light-reading-mode .grok-first {
    border-bottom: 2px solid !important;
    background: linear-gradient(to top, rgba(212, 163, 115, 0.15) 0%, transparent 100%) !important;
}
.light-reading-mode .grok-first:hover {
    border-bottom-color: var(--gold-dark) !important;
    background: linear-gradient(to top, rgba(212, 163, 115, 0.35) 0%, transparent 100%) !important;
    color: #fff !important;
    text-shadow: 0 0 5px var(--gold) !important;
}
:root {
    --body-font: '"Atkinson Hyperlegible", sans-serif';
}
body {
    font-family: var(--body-font) !important;
}

/* Light mode font adjust (slightly bolder for contrast) */
.light-reading-mode body {
    font-family: var(--body-font) !important;
}
/* Slider thumbs — Success green (#28a745) for text size & music volume */
#textSizeSlider::-webkit-slider-thumb,
#musicVolumeSlider::-webkit-slider-thumb {
    background-color: #28a745 !important;
    border: 2px solid #20c997 !important;  /* Slight teal border for depth (matches previous) */
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6) !important;  /* Soft green glow */
}

#textSizeSlider::-moz-range-thumb,
#musicVolumeSlider::-moz-range-thumb {
    background-color: #28a745 !important;
    border: 2px solid #20c997 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6) !important;
}

/* Light reading mode — keep green thumb (stands out on gray) */
.light-reading-mode #textSizeSlider::-webkit-slider-thumb,
.light-reading-mode #musicVolumeSlider::-webkit-slider-thumb,
.light-reading-mode #textSizeSlider::-moz-range-thumb,
.light-reading-mode #musicVolumeSlider::-moz-range-thumb {
    background-color: #28a745 !important;
    border-color: #20c997 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6) !important;
}

/* Optional: Track color subtle match (dark void gray) */
#textSizeSlider::-webkit-slider-runnable-track,
#musicVolumeSlider::-webkit-slider-runnable-track {
    background: #333 !important;
}
#textSizeSlider::-moz-range-track,
#musicVolumeSlider::-moz-range-track {
    background: #333 !important;
}
/* Sidebar Nav Text — Muted gray (#999999) to match main .lead text */
.dark-mode #sidebar .nav-main-link,
.dark-mode #sidebar .nav-main-heading,
.dark-mode #sidebar .nav-main-link-name {
    color: #999999 !important;
}

/* Sidebar active link — Gold for highlight */
.dark-mode #sidebar .nav-main-link.active {
    color: var(--gold) !important;
    background: #000 !important;
    font-weight: 600 !important;
}

/* Hover — Brighter gold */
.dark-mode #sidebar .nav-main-link:hover {
    color: var(--gold) !important;
    background: rgba(212, 163, 115, 0.2) !important;
}

/* Icons stay gold */
.dark-mode #sidebar .nav-main-link-icon {
    color: var(--gold) !important;
}

/* Light reading mode — Keep sidebar void (no change) */
.light-reading-mode #sidebar .nav-main-link,
.light-reading-mode #sidebar .nav-main-heading,
.light-reading-mode #sidebar .nav-main-link-name {
    color: #999999 !important;
}
.light-reading-mode #sidebar .nav-main: active,
.light-reading-mode #sidebar .nav-main-link:hover {
    color: var(--gold) !important;
}
/* Placeholder text style */
#noAudioPlaceholder {
    color: #999 !important; /* Gold */
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
}

/* Light mode adjustment */
.light-reading-mode #noAudioPlaceholder {
    color: #8b4513 !important; /* Darker gold on gray */
}
/* Subscribe button mobile size */
.desktop-fs-xl { font-size: 1.1rem !important; }
.mobile-fs-base { font-size: 0.9rem !important; }
@media (max-width: 991.98px) {
  .desktop-fs-xl { font-size: 0.9rem !important; }
}

/* Divider visible only on read-only */
#noAudioDivider {
  display: none !important;
}
.light-reading-mode #noAudioDivider,
body:not(.light-reading-mode) #noAudioDivider.d-block {
  display: block !important;
}
/* Read-only placeholder button height match */
#noAudioPlaceholder .btn-gold-inner {
    height: 100% !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Divider visible on read-only */
#noAudioDivider {
    display: none !important;
}
#noAudioPlaceholder:not(.d-none) ~ #noAudioDivider {
    display: flex !important;
}

/* Mobile subscribe text smaller */
@media (max-width: 991.98px) {
    #noAudioPlaceholder .btn-gold-inner {
        font-size: 0.9rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}
/* Subscribe button — gold text, size control */
#noAudioPlaceholder .btn-gold-inner {
    height: 100% !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
#noAudioPlaceholder .btn-gold-inner .text-gold {
    color: #999 !important;  /* Gold */
}
#noAudioPlaceholder .btn-gold-inner:hover .text-gold {
    color: #3b2f2f !important;  /* Dark text on gold hover */
}

/* Size classes */
.fs-md { font-size: 1rem !important; }
.desktop-fs-lg { font-size: 1.1rem !important; }
.mobile-fs-sm { font-size: 0.85rem !important; }
@media (max-width: 991.98px) {
  .desktop-fs-lg { font-size: 0.9rem !important; }
}
/* Subscribe button — tighter, size control */
#noAudioPlaceholder .btn-gold-inner {
    height: 100% !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 1rem !important;  /* Desktop */
}
#noAudioPlaceholder .btn-gold-inner .text-gold {
    color: #999 !important;
    font-size: inherit !important;
}
#noAudioPlaceholder .btn-gold-inner:hover .text-gold {
    color: #3b2f2f !important;
}

/* Mobile smaller */
@media (max-width: 991.98px) {
  #noAudioPlaceholder .btn-gold-inner {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.85rem !important;
  }
}

/* Divider height match other separators */
#noAudioDivider .voice-speed-divider {
    height: 70% !important;  /* Matches other btn-separator height */
    top: 15% !important;
}
/* Add this to the end of custom.css — ETERNAL NAV GLOW */
/* Active chain glows with hero breathing gold (book + work name) */
/* Author heading glow optional (hard without JS class) — current: work + book perfect */

.dark-mode .nav-main-link.active,
.dark-mode .nav-main-link-submenu[aria-expanded="true"] {
    text-shadow: var(--highlight-glow-strong) !important;
    animation: var(--highlight-pulse) !important;
}

/* Optional: Stronger pulse for nav (matches hero exactly) */
.dark-mode .nav-main-link.active::after,
.dark-mode .nav-main-link-submenu[aria-expanded="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(212, 163, 115, 0.15) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.6;
    animation: glowInOut 2.2s ease-in-out infinite;
}

/* Keep existing active styles (color, bg, weight) */
.dark-mode .nav-main-link.active {
    color: var(--gold) !important;
    background: #000 !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.dark-mode .nav-main-link-submenu[aria-expanded="true"] {
    color: var(--gold) !important;
    background: #000 !important;
    font-weight: 600 !important;
}

/* === Strict per-book-row hover/active (no leakage to parents) === */

/* Hover only on actual book rows — the <li> that directly contains Book X + progress bar + % */
.dark-mode #sidebar .nav-main-submenu .nav-main-item:hover {
    background: rgba(212, 163, 115, 0.28) !important;
    border-radius: 6px !important;
}

/* Active book row gets the same background */
.dark-mode #sidebar .nav-main-submenu .nav-main-item:has(> .nav-main-link.active) {
    background: rgba(212, 163, 115, 0.28) !important;
    border-radius: 6px !important;
}

/* Slightly stronger when hovering an already-active book */
.dark-mode #sidebar .nav-main-submenu .nav-main-item:has(> .nav-main-link.active):hover {
    background: rgba(212, 163, 115, 0.35) !important;
}

/* Force children transparent so the <li> background is the single unified block */
.dark-mode #sidebar .nav-main-submenu .nav-main-item:hover .nav-main-link,
.dark-mode #sidebar .nav-main-submenu .nav-main-item:hover .book-progress-mini,
.dark-mode #sidebar .nav-main-submenu .nav-main-item:has(> .nav-main-link.active) .nav-main-link,
.dark-mode #sidebar .nav-main-submenu .nav-main-item:has(> .nav-main-link.active) .book-progress-mini {
    background: transparent !important;
}

/* Nuclear suppression — kill background on any ancestor submenu link 
   (The Gallic Wars, Julius Caesar, etc.) when hovering or activating any book row below it */
.dark-mode #sidebar .nav-main-link-submenu:has(.nav-main-item:hover),
.dark-mode #sidebar .nav-main-link-submenu:has(.nav-main-item .nav-main-link.active),
.dark-mode #sidebar .nav-main-submenu .nav-main-item:hover .nav-main-link-submenu,
.dark-mode #sidebar .nav-main-submenu .nav-main-item .nav-main-link.active ~ * .nav-main-link-submenu {
    background: transparent !important;
}

/* Extra targeted kill for the immediate parent submenu link ("The Gallic Wars")
   when any of its direct Book children are hovered or active.
   This uses :has() to detect when the following submenu contains a hovered book row. */
.dark-mode #sidebar .nav-main-link-submenu:has(+ .nav-main-submenu .nav-main-item:hover),
.dark-mode #sidebar .nav-main-link-submenu:has(+ .nav-main-submenu .nav-main-item .nav-main-link:hover),
.dark-mode #sidebar .nav-main-link-submenu:has(+ .nav-main-submenu .nav-main-item .nav-main-link.active) {
    background: transparent !important;
}

/* Additional aggressive kill: any submenu link that is an ancestor of a hovered/active book row */
.dark-mode #sidebar .nav-main-submenu .nav-main-item:hover ~ * .nav-main-link-submenu,
.dark-mode #sidebar .nav-main-submenu .nav-main-item .nav-main-link.active ~ * .nav-main-link-submenu,
.dark-mode #sidebar .nav-main-item:hover .nav-main-link-submenu,
.dark-mode #sidebar .nav-main-item .nav-main-link.active ~ .nav-main-item .nav-main-link-submenu {
    background: transparent !important;
}

/* Floating snap controls — cinematic auto-scroll by default, free on user scroll */
/* Buttons fixed to viewport bottom-right, raised high above footer */
/* Jump to top always visible, snap to highlight during playback */

.block-content {
  position: relative !important; /* Contain if needed */
  overflow: visible !important;
  padding-bottom: 5px !important; /* Extra space for buttons */
}

#snapControls {
  position: fixed !important; /* Fixed to viewport */
  bottom: 80px !important; /* Raised high — adjust if needed (higher = more space from footer) */
  right: 30px !important;
  z-index: 1050 !important; /* Above footer (OneUI footer z=1030) */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#snapControls.show {
  opacity: 1;
  pointer-events: auto;
}

/* Jump to top — always visible during playback */
#snapToTopBtn {
  opacity: 0.7;
  transition: all 0.3s ease;
}

#snapControls.show #snapToTopBtn {
  opacity: 0.8;
}

/* Snap to highlight — visible during playback */
#snapToHighlightBtn {
  opacity: 0;
  transition: all 0.3s ease;
}

#snapControls.show #snapToHighlightBtn {
  opacity: 0.8;
}

/* Button style */
#snapControls .btn {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  width: 50px !important;
  height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#snapControls .btn:hover {
  background: var(--void) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.15);
  box-shadow: 0 0 25px rgba(212, 163, 115, 0.9);
}
/* Read-only footer perfection — seamless toggle */
#audioControls.d-none + #noAudioPlaceholder {
  display: flex !important; /* Override d-none when shown */
}

#noAudioPlaceholder {
  display: none; /* Default hidden */
  align-items: center;
  justify-content: center;
  min-width: 220px; /* Approx width of voice + play + speed group — adjust if needed */
  height: 100%;
}

#noAudioPlaceholder .btn-gold-inner {
  height: 38px; /* Match typical button height in group */
  padding: 0.25rem 1.5rem !important; /* Wider for "Subscribe..." text */
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#noAudioPlaceholder .text-gold {
  color: var(--gold) !important;
  font-weight: 600;
}

/* Hover polish */
#noAudioPlaceholder .btn-gold-inner:hover {
  background: var(--void) !important;
  color: #ffffff !important;
}

/* Divider polish — subtle gold */
#noAudioDivider .voice-speed-divider {
  background: var(--gold);
  opacity: 0.4;
  width: 1px;
  height: 70%;
}

/* Mobile smaller subscribe button */
@media (max-width: 991.98px) {
  #noAudioPlaceholder {
    min-width: 180px;
  }
  #noAudioPlaceholder .btn-gold-inner {
    padding: 0.25rem 1rem !important;
    font-size: 0.9rem;
  }
}
/* Study Hub bookmark controls — use the standard tight footer-controls-group treatment
   (gap:0 + nowrap from general rule + ::after separators) for a single gold outline frame.
   Parent .d-flex.justify-content-center handles centering. Wider min-widths for touch. */
#bookmarkSidebar .footer-controls-group {
  min-height: 44px;
  align-items: center;
}

#bookmarkSidebar .footer-controls-group .btn {
  flex: 0 1 auto;
  min-width: 44px;
}

/* Full width notes + passage in bookmark bodies */
#bookmarkSidebar .accordion-body .px-4.mb-3 {
  width: 100%;
  margin-top: 1rem;
}

#bookmarkSidebar .bookmark-passage {
  width: 100%;
  max-height: 45vh;
  overflow-y: auto;
}

/* Study Hub fixes — full width sub-accordions */
#bookmarkSidebar .accordion-body .accordion {
  margin: 0 -1rem; /* Counter parent padding */
}

#bookmarkSidebar .accordion-body .accordion .accordion-item {
  margin: 0 1rem;
}

/* Notes full width (deduped) */
#bookmarkSidebar .accordion-body .px-4.mb-3 {
  width: 100%;
  margin-top: 1rem;
}
/* Raise offcanvases above floating snap buttons (1050) */
#bookmarkSidebar,
#grokSidebar,  /* if Grok-This offcanvas exists on your pages */
.offcanvas#sidebar {  /* mobile sidebar when offcanvas mode */
  z-index: 1060 !important;
}

/* Grok-This sidebar header: glowing term on left, X close btn on right. Term is spaced with margin-right. */
#grokSidebar .offcanvas-header {
  background: var(--void) !important;
  border-bottom: none !important;
  padding: 0.75rem 1rem !important; /* equal top/bottom around the close "X" */
  font-family: 'Georgia', serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* The term in header (inside #grokTerm / .offcanvas-title h5) gets the glowing treatment.
   Spaced from the X with margin-right on the title. */
#grokSidebar .offcanvas-title {
  display: block !important;
  margin: 0;
  margin-right: 0.75rem; /* proper spacing in relation to the X close btn */
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  /* exact same font size as the SH header (graduation-cap + "Study Hub") by not overriding */
  line-height: 1.5 !important;
}

/* Grok icon preceding the term in grok sidebar header, styled gold like the SH graduation cap */
#grokSidebar .offcanvas-title .grok-icon {
  width: 0.9em !important;
  height: 0.9em !important;
  background-color: var(--gold) !important;
  -webkit-mask: url(../images/grok-logo.svg) no-repeat center / contain !important;
  mask: url(../images/grok-logo.svg) no-repeat center / contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0.4rem !important;
  position: relative !important;
  top: -1px !important;
  line-height: 1 !important;
}

#grokSidebar .offcanvas-title strong {
  border-bottom: 2px solid var(--gold) !important;
  padding-bottom: 1px !important;
  background: linear-gradient(to top, #d4a37333 0%, transparent 100%) !important;
  color: var(--text) !important;
  text-shadow: 0 0 0.75px var(--gold), 0 0 1.5px var(--gold) !important;
}

.light-reading-mode #grokSidebar .offcanvas-title strong {
  border-bottom-color: var(--gold-dark) !important;
  background: linear-gradient(to top, rgba(212, 163, 115, 0.25) 0%, transparent 100%) !important;
  color: #111 !important;
  text-shadow: 0 0 0.5px var(--gold), 0 0 0.75px var(--gold) !important;
}

#grokSidebarLabel {
  font-size: 1.05rem;
  font-weight: 500;
  font-style: normal;
}

/* The term lives in the (previously hidden) offcanvas-title / #grokTerm h5 in header.
   Glowing styles applied to the <strong> inside it (see below). */
#grokTerm {
  display: block !important; /* shown for the term */
}

#grokContent {
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#grokContent .p-3 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#grokContent .bookmark-passage p,
#grokContent .bookmark-passage .lead {
  font-family: var(--body-font, 'Atkinson Hyperlegible', serif) !important;
  font-size: 1.07rem !important;
  line-height: 1.5 !important;
}

#grokContent h5 {
  font-size: 1rem;
  font-style: normal;
}

#grokContent .p-3 small.text-muted:last-child {
  text-align: center;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* 10px padding between all elements below the "Ask Grok about X" input field.
   Elements: Suggested Research label, button row, response area, then (outside notes) hr + footer.
   The label + buttons are clustered with a small internal gap; 10px before/after the cluster and to response. */
#grokSidebar .bookmark-notes > div + div,
#grokSidebar .bookmark-notes + hr,
#grokSidebar hr + small {
  margin-top: 10px !important;
}

/* Fallback for any files still using old p-3 structure without bookmark-notes wrapper */
#grokSidebar .p-3 > div + div,
#grokSidebar .p-3 > div + #grokSidebarResponse,
#grokSidebar .p-3 > #grokSidebarResponse + hr,
#grokSidebar .p-3 hr + small {
  margin-top: 10px !important;
}

/* More breathing room (top + bottom) for the Suggested Research label + button row cluster.
   ~10px+ added vertically vs previous. Label-to-buttons ~13px; extra bottom margin before response/hr. */
#grokSidebar .bookmark-notes .small.text-muted + .d-flex {
  margin-top: 13px !important;
}
#grokSidebar .bookmark-notes .d-flex {
  margin-bottom: 8px !important;
}

/* Copy bookmark tab styles for consistency in Grok-This */
#grokSidebar .bookmark-passage,
#grokSidebar .bookmark-notes {
  width: 100% !important;
  max-width: none !important;
}

#grokSidebar .bookmark-passage p,
#grokSidebar .bookmark-passage .lead {
  font-family: var(--body-font, 'Atkinson Hyperlegible', serif) !important;
  font-size: 1.07rem !important;
  line-height: 1.5 !important;
}

/* Glowing/highlighted term styles moved UP into the header (.offcanvas-title / #grokTerm).
   The body .bookmark-passage now starts directly with the pronunciation (no leading <strong>term</strong>).
   Old body strong:first-child glowing removed to prevent it applying to other bold text inside defs. */

#grokSidebar .bookmark-notes {
  margin-top: 0.5rem;
}

/* Match the search/grok input group from study hub for the ask bar */
#grokSidebar .input-group {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--gold) !important;
  border-radius: .375rem !important;
  overflow: hidden !important;
}

#grokSidebar .input-group .form-control {
  background: transparent !important;
  color: var(--text) !important;
  padding: .375rem .75rem !important;
  font-family: 'Georgia', serif !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
}

#grokSidebar .input-group .btn-gold-inner {
  background: #d4a373 !important;
  color: #111111 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.9rem !important; /* compact for input-group attachment, matches main grok study hub send button treatment */
}

#grokSidebar .input-group .btn-gold-inner:hover {
  background: var(--void) !important;
  color: #ffffff !important;
}

#grokSidebar .input-group:hover,
#grokSidebar .input-group:focus-within {
  border-color: var(--gold-dark) !important;
  box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}

/* Suggestions buttons match play-bookmark or footer controls from bookmark sidebar */
#grokSidebar .grok-suggestion-btn {
  min-width: 3.5rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  background: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
}

#grokSidebar .grok-suggestion-btn:hover {
  background: rgba(212, 163, 115, 0.1) !important;
}

/* (flex + glowing styles for .offcanvas-title and its strong are defined with the main #grokSidebar .offcanvas-header rule above) */

#grokSidebar .offcanvas-body {
  padding-top: 0.5rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#grokContent .text-gold {
  color: #d4a373;
}

/* Optional: ensure offcanvas backdrops are also above snap (though usually not needed) */
.offcanvas-backdrop {
  z-index: 1055 !important;
}
/* Mobile sidebar offcanvas above floating snap buttons */
@media (max-width: 991.98px) {
  #sidebar {
    z-index: 1060 !important;
  }
  .offcanvas-backdrop {
    z-index: 1055 !important;
  }
}
/* Remove lingering offcanvas backdrop on mobile after close */
@media (max-width: 991.98px) {
  .offcanvas-backdrop.fade {
    transition: opacity 0.15s linear !important;
  }
  .offcanvas-backdrop.show {
    opacity: 0.5 !important;
  }
}

/* Force cleanup on hide (extra safety) */
#sidebar.offcanvas-end + .offcanvas-backdrop {
  pointer-events: auto !important;
}

/* Ensure the search results offcanvas (right side) sits above the header */
#searchResultsOffcanvas {
  z-index: 1090 !important;
}

#searchResultsOffcanvas + .offcanvas-backdrop {
  z-index: 1085 !important;
}

/* Only the actual search <input> gets lifted on desktop when sidebar is open.
   We deliberately do NOT lift the .input-group wrapper so the dark background
   does not "expand left" and cover the sidebar logo. */
#page-header-search-input2 {
  position: relative;
  z-index: 1090 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.95) !important; /* solid dark so it reads clearly over the sidebar */
  /* Border is provided exclusively by the .input-group wrapper (1px gold) — do not set border here */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Study Hub Search tab input field (inside bookmarkSidebar) — entire input + attached btn gets clean 1px gold outline (wrapper provides it) */
#bookmarkSidebar #search-pane .input-group {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--gold) !important;
  border-radius: .375rem !important;
  overflow: hidden !important;
}
#bookmarkSidebar #search-pane .input-group .form-control {
  background: transparent !important;
  color: var(--text) !important;
  padding: .375rem .75rem !important;
  font-family: 'Georgia', serif !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#bookmarkSidebar #search-pane .input-group .btn-gold-inner {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#bookmarkSidebar #search-pane .input-group:hover,
#bookmarkSidebar #search-pane .input-group:focus-within {
  border-color: var(--gold-dark) !important;
  box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}
/* Nuclear: inner input never shows its own border — wrapper owns the 1px gold outline */
#bookmarkSidebar #search-pane .input-group .form-control:focus,
#bookmarkSidebar #search-pane .input-group .form-control:focus-visible,
#searchOffcanvasInput:focus,
#searchOffcanvasInput:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Keep the sidebar logo area above the normal header bar */
#sidebar .content-header {
  position: relative;
  z-index: 1065 !important;
}

/* Center the TVIH logo horizontally in the sidebar (x-axis alignment with nav items below) */
#sidebar .content-header a.text-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Center the TVIH logo banner horizontally on the login page (inside the signin card).
   max-width:100% keeps the black rect fully within the padded content area so it never
   overlaps/covers the gold border. Natural size at height=222 (~395px wide from the 2400x1350 asset)
   now fits inside the widened 520px box. */
.signin-box .text-center a {
  display: block;
}
.signin-box .text-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Give the logo banner a little extra horizontal inset inside the gold card
   (in addition to the box's p-md-5 padding) so the black rect has generous
   dark space on left/right and the gold outline is never obscured. */
.signin-box > .text-center {
  padding-left: 6px;
  padding-right: 6px;
}

/* Brief highlight on tap — no sticky active state */
.btn-gold-inner:active,
.btn-alt-secondary:active {
  background-color: var(--void) !important;
  color: #ffffff !important;
  transform: scale(0.98);
  transition: all 0.1s ease;
}

/* Remove any persistent .active from touch */
.btn-gold-inner.active,
.btn-alt-secondary.active {
  background: transparent !important;
  color: var(--text) !important;
}

/* Nuclear overrides for the two problematic header buttons.
   These must win over the general :focus / :focus-visible gold rules.
   Forces the buttons back to normal (void + gold border) the instant their panels close. */
#openBookmarkSidebar,
#openBookmarkSidebar:hover,
#openBookmarkSidebar:focus,
#openBookmarkSidebar:focus-visible,
#openBookmarkSidebar:active,
#openBookmarkSidebar.active {
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

[data-action="sidebar_toggle"],
[data-action="sidebar_toggle"]:hover,
[data-action="sidebar_toggle"]:focus,
[data-action="sidebar_toggle"]:focus-visible,
[data-action="sidebar_toggle"]:active,
[data-action="sidebar_toggle"].active {
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

/* CSS-only visual flip for the left sidebar toggle icon (no JS innerHTML, no risk of empty button).
   When OneUI adds the open classes (to #page-container which contains the header, and/or body), 
   the static right-bracket icon rotates 180° to become the left-bracket opposite.
   This is reliable, animates nicely, and can't disappear because we never mutate the <i> via JS. */
[data-action="sidebar_toggle"] i.fa {
  transition: transform 0.18s ease !important;
  display: inline-block; /* ensure it participates in transform */
}
#page-container.sidebar-o [data-action="sidebar_toggle"] i.fa,
#page-container.sidebar-o-xs [data-action="sidebar_toggle"] i.fa,
body.sidebar-o [data-action="sidebar_toggle"] i.fa,
body.sidebar-o-xs [data-action="sidebar_toggle"] i.fa,
.sidebar-o [data-action="sidebar_toggle"] i.fa,
.sidebar-o-xs [data-action="sidebar_toggle"] i.fa {
  transform: rotate(180deg) !important;
}

/* Larger touch area for sliders on mobile */
#musicVolumeSlider {
  height: 8px !important;
  -webkit-appearance: none;
}

/* ============================================= */
/* Force consistent black/gold for side info panels (e.g. "About this work") */
.dark-mode .block-header,
.dark-mode .block-header-default {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid var(--gold) !important;
}

.dark-mode .block-header .block-title,
.dark-mode .block-header-default .block-title {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* Darken tables and remove any navy/light stripes inside parchment blocks */
.dark-mode .bg-parchment .table,
.dark-mode .bg-parchment table {
  background: #000000 !important;
  color: #e8d9b8 !important;
  border-color: #333 !important;
}

.dark-mode .bg-parchment .table-striped > tbody > tr:nth-of-type(odd) > td,
.dark-mode .bg-parchment .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #111111 !important; /* align with SH #111111 stripes on detail pages */
}

.dark-mode .bg-parchment .table td,
.dark-mode .bg-parchment .table th {
  border-color: #333 !important;
  color: #e8d9b8 !important;
}
#musicVolumeSlider::-webkit-slider-thumb {
  height: 16px !important;
  width: 16px !important;
}
/* Full width sub-accordions + uniform content */
#bookmarkSidebar .accordion-body {
  padding: 0 1rem 10px !important;
}
#bookmarkSidebar .accordion-body .accordion-item {
  margin: 0 !important;
  width: 100% !important;
}
#bookmarkSidebar .bookmark-passage,
#bookmarkSidebar .bookmark-notes {
  width: 100% !important;
  max-width: none !important;
}

/* Gold line under parent header */
#bookmarkSidebar .accordion-button {
  border-bottom: 1px solid var(--gold) !important;
  padding-bottom: 0.75rem !important;
}
#bookmarkSidebar .accordion-button.collapsed {
  border-bottom: none !important;
}

/* Extra defense: make sure nothing in an expanded body can steal mouse events from later headers */
#bookmarkSidebar .accordion-body {
  pointer-events: auto;
}
/* ============================================= */
/* AUDIO SCRUBBER – GOLD CINEMATIC STYLE + FIXED */
/* ============================================= */
.audio-progress-container {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 9999 !important;           /* very high priority */
  display: block !important;          /* Force visible even if d-none is present in HTML */
  visibility: visible !important;
  opacity: 1 !important;
}

.progress-wrapper {
  position: relative;
  height: 8px;
  cursor: pointer;
  background: #000 !important;           /* black background for the scrubber track */
  border: 1px solid #d4a373 !important;  /* 1px gold outline */
  border-radius: 9999px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.audio-progress-bar {
  position: relative;
  height: 100%;
  width: 100%;
}

.audio-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to right, #d4a373, #f4d9a8);
  box-shadow: 0 0 12px #d4a373,
              0 0 24px #d4a373;
  transition: width 0.1s linear;
  border-radius: 9999px;
}

.audio-scrubber-thumb {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #d4a373;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(212, 163, 115, 0.5),
              0 0 20px #d4a373;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.audio-scrubber-thumb:hover,
.audio-progress-bar:hover .audio-scrubber-thumb {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 7px rgba(212, 163, 115, 0.7),
              0 0 30px #d4a373;
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
  .audio-progress-container {
    padding: 0 0.75rem;
  }
  .progress-wrapper {
    height: 7px;
  }
  .audio-scrubber-thumb {
    width: 18px;
    height: 18px;
  }
}

/* Glow pulse */
#audioScrubberThumb.playing,
.audio-scrubber-thumb.playing {
  animation: scrubberPulse 2s ease-in-out infinite;
}

@keyframes scrubberPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(212, 163, 115, 0.5), 0 0 20px #d4a373; }
  50%      { box-shadow: 0 0 0 8px rgba(212, 163, 115, 0.8), 0 0 35px #d4a373; }
}

/* Disabled state */
.audio-progress-container.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.audio-progress-container.disabled .progress-wrapper,
.audio-progress-container.disabled .audio-progress-fill,
.audio-progress-container.disabled .audio-scrubber-thumb {
  background: #555 !important;
  border-color: #777 !important;
  box-shadow: none !important;
}

/* Mobile volume slider fix */
.dropdown-menu .form-range {
  pointer-events: auto !important;
  touch-action: none;
}
/* Volume slider in footer – iPhone Safari friendly */
#musicVolumeSlider {
  width: 120px;
  accent-color: #d4a373;
}
/* Floating Reading Mode Toggle – Strong visibility in dark mode */
#readingModeFloat button {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6),
              0 0 20px rgba(212, 163, 115, 0.6) !important;
  transition: all 0.2s ease;
  border: 2px solid #d4a373 !important;
}

#readingModeFloat button:hover {
  transform: scale(1.12);
  box-shadow: 0 0 30px rgba(212, 163, 115, 0.8),
              0 4px 20px rgba(212, 163, 115, 0.8) !important;
}

#readingModeFloat i {
  color: #fff !important; /* Bright white icon in dark mode */
}
/* Video Render Modal - 1px gold border */
#videoRenderModal .modal-content {
    border: 1px solid #d4a373 !important;
    box-shadow: 0 0 30px rgba(212, 163, 115, 0.4) !important;
}

/* Progress Bar - our gold + subtle grey */
#renderProgressBar {
    background: linear-gradient(to right, #d4a373, #f4d9a8) !important;
    box-shadow: 0 0 12px #d4a373 !important;
}
/* Video Render Progress Bar - Barber Pole Striped Gold/Grey */
#renderProgressBar {
    background: repeating-linear-gradient(
        45deg,
        #d4a373,
        #d4a373 10px,
        #f4d9a8 10px,
        #f4d9a8 20px
    ) !important;
    background-size: 28px 28px !important;
    animation: barberPole 0.8s linear infinite !important;
}

@keyframes barberPole {
    0%   { background-position: 0 0; }
    100% { background-position: 28px 0; }
}
/* === INLINE ICONS — EXACT TEXT HEIGHT + GOLD HOVER === */
#textContent p.lead .para-inline-icons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6em !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
  font-size: calc(1em * var(--text-scale)) !important; /* scale the container so child icons match text height */
  line-height: inherit !important; /* match the paragraph line box height */
}

#textContent p.lead .para-icon {
  font-size: 1em !important;     /* 1em of the scaled container = matches chapter text height, scales with toggle */
  color: #999999 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1 !important;
}

#textContent p.lead .para-icon:hover {
  color: #999 !important;
  transform: scale(1.25);
}
/* Accordion gold line: visible when CLOSED, gone when OPEN */
#bookmarkSidebar .accordion-button {
  border-bottom: 2px solid #d4a373 !important;
}
#bookmarkSidebar .accordion-button:not(.collapsed) {
  border-bottom: none !important;
}

/* Same for child accordions */
#bookmarkSidebar .accordion-body .accordion-button {
  border-bottom: 2px solid #d4a373 !important;
}
#bookmarkSidebar .accordion-body .accordion-button:not(.collapsed) {
  border-bottom: none !important;
}
/* === ACCORDION GOLD LINE FIX — VISIBLE WHEN CLOSED, GONE WHEN OPEN === */
#bookmarkAccordion .accordion-button,
#bookmarkSidebar .accordion-button {
  border-bottom: 0px solid #d4a373 !important;
}

#bookmarkAccordion .accordion-button:not(.collapsed),
#bookmarkSidebar .accordion-button:not(.collapsed) {
  border-bottom: none !important;
}

/* Child accordions (individual bookmarks) */
#bookmarkAccordion .accordion-body .accordion-button,
#bookmarkSidebar .accordion-body .accordion-button {
  border-bottom: 0px solid #d4a373 !important;
}

#bookmarkAccordion .accordion-body .accordion-button:not(.collapsed),
#bookmarkSidebar .accordion-body .accordion-button:not(.collapsed) {
  border-bottom: none !important;
}
/* === FORCE TAP FLASH + SWEETALERT ABOVE ALL ONEUI LAYERS === */
#tap-flash-overlay {
  z-index: 9999999 !important;
}

.swal2-container {
  z-index: 9999999 !important;
}

.swal2-popup {
  z-index: 9999999 !important;
}

.swal-gold-outline {
  border: 1px solid #d4a373 !important;
}

.swal2-html-container .highlight {
    color: var(--text) !important;
    text-shadow: var(--highlight-glow-strong) !important;
    animation: var(--highlight-pulse);
}

.swal-benefits {
  width: 100%;
  font-size: 0.82em;
  border-collapse: collapse;
  margin: 6px 0 4px;
  color: #ccc;
}
.swal-benefits td {
  padding: 2px 3px;
  vertical-align: top;
  line-height: 1.25;
}
.swal-benefits td:first-child {
  color: #d4a373;
  width: 15px;
  text-align: left;
  padding-right: 4px;
}

.swal2-container.swal2-backdrop {
  z-index: 9999998 !important;
}

/* Unified treatment for the book list tables on teaser pages.
   All columns now share parchment bg (icon column included), consistent padding,
   vertical centering, and the row feels like one cohesive unit.
   Icon column gets icon + Book # (two-line but compact), buttons sized to match row height,
   duration right-aligned and centered vertically. */
.table.table-vcenter td {
  padding: 0.375rem 0.5rem;
  vertical-align: middle;
  line-height: 1.2;
}

.table.table-vcenter td.bg-parchment {
  /* background handled by existing .bg-parchment rules (including dark mode) */
}

/* Ensure the first (icon) column blends with the rest */
.table.table-vcenter td:first-child {
  text-align: center;
  white-space: nowrap;
}

/* Buttons fill the vertical space of the row for consistency */
.table.table-vcenter td.bg-parchment .btn.btn-sm {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  line-height: 1.2;
  min-height: 2.4em; /* approximate match to icon+book content height */
}

/* Duration column */
.table.table-vcenter td.text-end {
  white-space: nowrap;
  font-size: 0.8em;
}

/* ============================================= */
/* FOCUS MODE — ULTRA-SPECIFIC OVERRIDES (beats OneUI !important) */
#focusModeModal h1#focusHeaderLine1 {
    color: #999 !important;
    text-shadow: none !important;
}

#focusModeModal h2#focusHeaderLine2 {
    color: #999 !important;
    text-shadow: none !important;
}

/* Remove all glow from RSVP words and brackets in focus mode; brackets #999, words use same gray as video renderer RSVP (#aaaaaa) */
#rsvpContainer,
#rsvpContainer * {
    text-shadow: none !important;
}

/* Gray out focus mode buttons (icons/text) except play which stays green */
#focusModeModal .footer-controls-group .btn-gold-inner {
    color: #999 !important;
    border: none !important;
    outline: none !important;
}
#focusModeModal .footer-controls-group .btn-gold-inner:hover,
#focusModeModal .footer-controls-group .btn-gold-inner:active,
#focusModeModal .footer-controls-group .btn-gold-inner:focus {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
}
#focusModeModal .footer-controls-group .btn-gold-inner i {
    color: #999 !important;
}
#focusModeModal .footer-controls-group .btn-gold-inner i.text-success {
    color: #28a745 !important; /* keep play btn green */
}

/* Gray out the gold line and controls border in focus */
#focusModeModal #focusGoldLine {
    background: #999 !important;
    box-shadow: 0 0 18px #999 !important;
}
#focusModeModal .footer-controls-group {
    border: 1px solid #999 !important;
}

/* Force inner control buttons to be borderless inside the focus group (prevents modal-content .btn-gold-inner gold borders from creating double/segmented outlines). The group's gray border + gray separators provide the single clean outline. */
#focusModeModal .footer-controls-group .btn-gold-inner,
#focusModeModal .footer-controls-group .btn {
    border: none !important;
    outline: none !important;
}

/* Remove gold border from the Focus Mode modal content itself (it uses border-0 in HTML but general .modal-content rule was overriding) */
#focusModeModal .modal-content {
  border: 0 !important;
}

/* Gray the internal separator lines (the thin gold dividers between buttons) so the whole control group is a single gray frame without gold accents */
#focusModeModal .footer-controls-group .btn-separator::after,
#focusModeModal .footer-controls-group .btn-separator-group::before,
#focusModeModal .footer-controls-group .voice-speed-divider {
    background: #999 !important;
}

/* Gray out dropdown items in focus mode controls */
#focusModeModal .footer-controls-group .dropdown-menu a.dropdown-item {
    color: #999 !important;
}
#focusModeModal .footer-controls-group .dropdown-menu a.dropdown-item.active {
    color: #fff !important;
    background-color: #000 !important;
}

/* Gold underline between headers — grayed in focus mode */
#focusGoldLine {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #999 !important;
    box-shadow: 0 0 18px #999 !important;
    z-index: 10 !important;
}

/* Unified "Exit X" button: small circle with X (fa-times), hovers to square (like old floating reading mode toggle).
   Used in Focus Mode, all offcanvases (#grokSidebar, #bookmarkSidebar, main sidebar), Study Hub, and similar close spots.
   Always top-right, gray on dark panels, no text label. Hover transitions border-radius 50% -> 6px and lightens slightly. */
.exit-x,
.focus-exit-x {
  position: absolute !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid #999 !important;
  color: #999 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  z-index: 1070 !important;
  transition: border-radius 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  padding: 0 !important;
}

/* Center .exit-x (used in offcanvas headers like grok/bookmark sidebars) vertically on the y-axis of the header.
   .focus-exit-x (focus mode) keeps fixed top:16px as before. */
.exit-x {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.focus-exit-x {
  top: 16px !important;
}

/* Ensure headers are positioning context for the absolute exit btn inside them */
/* Make .offcanvas-header a positioning context so .exit-x (appended inside it by JS) can be absolutely centered on the y-axis */
.offcanvas-header {
  position: relative !important;
}

/* Dev free-tier lock visual for main play button on non-Book1 pages.
   When locked we replace innerHTML with lock icon; this provides fallback opacity + no extra icons on siblings. */
.footer-controls-group .btn-gold-inner.free-locked {
  opacity: 0.6 !important;
}
.exit-x:hover,
.focus-exit-x:hover {
  border-radius: 6px !important;
  border-color: #ccc !important;
  color: #ccc !important;
  background: rgba(0, 0, 0, 0.45) !important;
}
.exit-x i,
.focus-exit-x i {
  pointer-events: none;
  display: block;
  color: inherit !important;
}



/* =====================================================
   MAIN PAGE PARAGRAPH NAVIGATOR (right edge dots)
   Fully viewport-aware, no more magic numbers in markup
   ===================================================== */

#mainParaNavigator {
  position: fixed;
  right: 28px;
  width: 52px;
  display: none;
  flex-direction: column;
  gap: 9px;
  align-items: flex-end;
  z-index: 9999;
  overflow-y: auto;
  padding-right: 4px;
  pointer-events: none;
  transition: opacity 280ms ease;
  /* JS will control top/bottom/opacity/display */
}

#mainParaNavigator div {
  width: 52px;
  height: 7px;
  display: flex;
  justify-content: flex-end;
}

.main-nav-line {
  height: 5px;
  width: 28px;
  background: linear-gradient(90deg, #d4a373 50%, #d4a373 50%);
  background-size: 200% 100%;
  background-position: right;
  opacity: 0.35;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.25s ease;
  pointer-events: auto;
}

.main-nav-line:hover {
  opacity: 1;
  background-position: left;
}

.main-nav-line.active {
  background: #ffffff;
  box-shadow: 0 0 12px #d4a373, 0 0 24px #d4a373;
  opacity: 1;
}

/* Preview bubble - smart positioning handled in JS */
.main-preview-bubble {
  position: fixed;
  background: rgba(20, 20, 20, 0.97);
  color: #ddd;
  padding: 9px 13px;
  border-radius: 7px;
  font-size: 13.5px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 99999;
  max-width: 420px;
  border: 1px solid rgba(212, 163, 115, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  #mainParaNavigator {
    right: 18px;
    width: 46px;
  }
  .main-nav-line {
    width: 24px;
  }
}

@media (max-width: 991px) {
  #mainParaNavigator {
    right: 12px;
    width: 42px;
  }
}

/* Hide on mobile and small tablets */
@media (max-width: 767px) {
  #mainParaNavigator,
  #focusParaNavigator,
  .main-preview-bubble {
    display: none !important;
  }
}
  /* ====================== CUSTOM SUCCESS TOASTS ====================== */
.swal2-toast.swal2-success {
    background: #111111 !important;
    border: 1px solid #d4a373 !important;
    color: #cccccc !important;
}

.swal2-toast.swal2-success .swal2-title {
    color: #cccccc !important;
}

.swal2-toast.swal2-success .swal2-html-container {
    color: #cccccc !important;
}

.swal2-toast.swal2-success .swal2-timer-progress-bar {
    background: #d4a373 !important;   /* gold progress bar */
}

.swal2-toast.swal2-success .swal2-icon.swal2-success {
    border-color: #d4a373 !important;
}

.swal2-toast.swal2-success .swal2-success-circular-line-left,
.swal2-toast.swal2-success .swal2-success-circular-line-right {
    background: #111111 !important;
}

.swal2-toast.swal2-success .swal2-success-fix {
    background: #111111 !important;
}

/* SweetAlert2 toasts (if used): top-center below fixed header */
body.swal2-toast-shown .swal2-container.swal2-top,
body.swal2-toast-shown .swal2-container.swal2-top-start,
body.swal2-toast-shown .swal2-container.swal2-top-end {
  top: calc(4rem + 0.75rem) !important;
}
/* ====================== AUDIO SCRUBBER – GOLD GLOW + BIGGER THUMB ====================== */
/* OLD restrictive rules from previous timer attempt — neutralized so side counters can breathe */
#audioProgressContainer {
  /* height: 8px; */           /* removed — was clipping the side timers */
  /* overflow: hidden; */      /* removed — was hiding the grid children */
  /* These old rules (from your previous timer attempt) were the main reason the side counters were being obscured or squeezed out */
  /* background moved to .progress-wrapper for black track + gold outline */
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  /* Let the inner grid row control the height */
  min-height: 24px; /* reduced */
}

#audioProgressContainer .progress-wrapper {
  /* position: absolute; */
  /* inset: 0; */
  /* Now a normal grid child instead of absolute overlay */
}

#audioProgressFill {
  height: 100%;
  background: linear-gradient(90deg, #d4a373, #f5d8b0);
  box-shadow: 0 0 12px #d4a373,
              0 0 24px #d4a373;
  transition: width 0.05s linear;
}

#audioScrubberThumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;           /* ← bigger grab area (was probably ~12px) */
  height: 18px;
  background: #d4a373;
  border-radius: 50%;
  box-shadow: 0 0 12px #d4a373,
              0 0 24px #d4a373,
              0 0 0 3px rgba(0,0,0,.4);
  cursor: grab;
  transition: all 0.1s ease;
  z-index: 10;
}

#audioScrubberThumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Optional: make the whole bar glow slightly when hovering */
#audioProgressContainer:hover #audioProgressFill {
  box-shadow: 0 0 16px #d4a373,
              0 0 32px #d4a373;
}
/* Fix scrubber being cut off by footer buttons */
#page-footer .content {
  padding-bottom: 8px; /* slightly reduced */
}

/* Reduce padding above the audio scrubber (the py-1 top on the footer content col) by ~50% */
.col-sm-12.order-sm-1.py-1.text-center {
  padding-top: 0.125rem !important;
}

/* Reduce space immediately below the audio scrubber (i.e. the mt-* on the following controls group) */
.audio-progress-container + .d-flex {
  margin-top: 0.125rem !important;
}

.audio-progress-container {
  margin-bottom: 0.125rem !important; /* reduced by 50% */
  min-height: 24px; /* slightly tighter overall height for the scrubber row */
  height: auto !important;
  overflow: visible !important;
  padding-top: 1px; /* reduced by 50% */
  padding-bottom: 1px; /* reduced by 50% */
}

/* Extra insurance on stacking order.
   NOTE: Footer dropdown/dropup menus are set to z-index 10650 to sit on top of this
   when open (voice, speed, etc.). Do not raise this higher without also raising the menus. */
.audio-progress-container,
.audio-progress-bar,
.audio-scrubber-thumb {
  z-index: 9999 !important;
  position: relative;
}
/* Fix time labels being squished / cut off */
.audio-progress-container .d-flex {
  align-items: center;
  min-height: 20px; /* reduced for tighter vertical padding/height of scrubber (core row now more compact) */
  display: grid !important;
  grid-template-columns: 48px 1fr 48px !important;
  gap: 4px !important;
  /* Force three columns so timers always have space on left and right of the scrubber */
  height: 100%;
}

#timeElapsed,
#timeTotal {
  font-size: 13px !important;
  line-height: 1.1;
  min-width: 42px;
  text-align: center;
  white-space: nowrap;
  color: #999 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  padding: 0 3px;
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

/* Optional: make the progress bar itself a little taller and centered */
.progress-wrapper {
  height: 6px !important;
  margin-top: 1px;
  margin-bottom: 1px;
  background: rgba(0,0,0,0.15) !important;
  border: 1px solid #d4a373 !important;
}

/* Ensure the middle scrubber column in the grid takes the space properly */
.audio-progress-container .progress-wrapper {
  grid-column: 2;
}

/* Compact the main audio scrubber + book timers on smaller screens */
@media (max-width: 576px) {
  .audio-progress-container .d-flex {
    min-height: 18px; /* reduced */
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    gap: 3px !important;
    height: 100%;
  }
  #timeElapsed,
  #timeTotal {
    font-size: 11px !important;
    min-width: 36px;
    color: #999 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    padding: 0 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
  }
  .progress-wrapper {
    height: 5px !important;
    margin-top: 0;
    margin-bottom: 0;
    background: rgba(0,0,0,0.1) !important;
    border: 1px solid #d4a373 !important;
  }
  .audio-progress-container {
    margin-bottom: 0.0625rem !important; /* further reduced */
    padding: 1px 0.25rem; /* reduced vertical padding (1px top/bottom) */
  }
}
}
/* ====================== RESPONSIVE FONT & READING MODE - iPHONE SE ULTRA-TIGHT ====================== */
:root {
  --text-scale: 1.25;           /* desktop default */
}

/* Default: show the new footer reading toggle */
#readingModeFooterToggle {
  display: inline-flex !important;
}

/* ====================== MOBILE (iPhone SE portrait) ====================== */
@media (max-width: 768px) {
  :root {
    --text-scale: 1.0 !important;
  }
  
  /* Hide old font-size toggle + old floating reading toggle */
  #textSizeToggleBtn,
  #readingModeFloat,
  #readingModeToggle {
    display: none !important;
  }
  
  /* === EXTREME MOBILE FOOTER COMPRESSION === */
  .footer-controls-group {
    gap: 1px !important;
    padding: 1px 2px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .footer-controls-group .btn {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.8rem !important;
  }
  /* Extra vertical padding for the large play icon on mobile (don't be shy) */
  .footer-controls-group .btn-gold-inner#playBtn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  /* Voice & Speed dropups */
  .voice-toggle,
  .speed-toggle {
    padding-left: 3px !important;
    padding-right: 6px !important;
  }
  
  /* Reading mode button — minimal */
  #readingModeFooterToggle {
    display: inline-flex !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  
  /* Force the whole footer container to never overflow */
  #page-footer .content,
  #page-footer .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ====================== DESKTOP ====================== */
@media (min-width: 769px) {
  #readingModeFooterToggle {
    display: none !important;
  }
}

/* ============================================= */
/* HERO TEXT CENTERING ON MOBILE                 */
/* Center the hero title text (h1 + h2) both     */
/* horizontally and vertically on small screens  */
/* so it matches the desktop "centered" look.    */
/* Desktop uses large pt-10 offset for visual    */
/* placement; mobile 80vh + 18rem pt makes text  */
/* sit too low + may lose horiz center.          */
/* We only affect main title heroes (pt-10).     */
/* ============================================= */
@media (max-width: 767.98px) {
  /* Target only the main hero text containers (the ones using pt-10 pb-8).
     Make them absolutely centered in their 80vh parent for true vertical center
     + guaranteed horizontal center. Desktop appearance (pt-10 placement) unchanged. */
  .position-relative.overflow-hidden .content.content-full.text-center.pt-10.pb-8.position-relative {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Light side padding so text never touches viewport edges on tiny phones */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  /* Force horizontal centering of the actual text (h1 title + h2 book/subtitle).
     text-center on parent should suffice but this beats any OneUI/mobile resets. */
  .position-relative.overflow-hidden .content.content-full.text-center.pt-10.pb-8.position-relative h1,
  .position-relative.overflow-hidden .content.content-full.text-center.pt-10.pb-8.position-relative h2 {
    text-align: center !important;
  }
}

/* ============================================= */
/* STUDY HUB TABS — GOLD ONLY (no blue ever)     */
/* ============================================= */
#studyHubTabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  width: 100% !important;
  /* Inset the entire tab bar (left + right) so the outer sides of the leftmost (Bookmarks)
     and rightmost (Quiz) tabs line up exactly with the left/right edges of the off-black
     (#111111) nested content backgrounds below (margin:12px on the panes / grokChat).
     This gives the two outer tabs more side padding/space and creates a smooth vertical
     alignment on the y-axis for the whole Study Hub. */
  padding-left: 12px !important;
  padding-right: 12px !important;
  border-bottom: none !important;
}

#studyHubTabs .nav-item {
  flex: 1 1 auto !important;
  text-align: center !important;
  min-width: 0 !important;
}

#studyHubTabs .nav-link {
    color: #999999 !important;           /* inactive = gray */
    transition: all 0.2s ease;
    font-size: 0.95rem !important;       /* maximized for prominent 4-tab layout (no more tabs will be added) */
    padding: 0.65rem 0.6rem !important;  /* taller + prominent vertical size; horizontal keeps even fill */
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    min-height: 46px !important;         /* ensures taller tab bar height for prominence */
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* Targeted extra padding on the *outer* side of the leftmost (Bookmarks) and rightmost (Quiz) tabs only.
   This gives those two tabs more breathing room/padding on their sides (relative to the tab bar inset),
   while the 12px on the #studyHubTabs container ensures the actual sides/edges of the two tabs
   line up exactly (on the y-axis) with the edges of the off-black #111111 content areas below. */
#studyHubTabs .nav-item:first-child .nav-link {
  padding-left: calc(0.6rem + 8px) !important;
}
#studyHubTabs .nav-item:last-child .nav-link {
  padding-right: calc(0.6rem + 8px) !important;
}

#studyHubTabs .nav-link i {
    color: #999999 !important;           /* icon also gray when inactive */
}

#studyHubTabs .nav-link:hover,
#studyHubTabs .nav-link:focus {
    color: #d4a373 !important;           /* hover = gold (prominent) */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#studyHubTabs .nav-link:hover i,
#studyHubTabs .nav-link:focus i {
    color: #d4a373 !important;           /* icon also gold on hover */
}

#studyHubTabs .nav-link.active,
#studyHubTabs .nav-link.active:hover {
    color: #ffffff !important;
    text-shadow: 0 0 12px #d4a373,
                 0 0 24px #d4a373,
                 0 0 36px #d4a373 !important;
    border: none !important;
    border-bottom: 4px solid #d4a373 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

#studyHubTabs .nav-link.active i {
    color: #ffffff !important;
}

#studyHubTabs .nav-link .grok-icon {
    background-color: #999999 !important;
    width: 1em !important;
    height: 1em !important;
}

#studyHubTabs .nav-link:hover .grok-icon,
#studyHubTabs .nav-link:focus .grok-icon {
    background-color: #d4a373 !important;
}

#studyHubTabs .nav-link.active .grok-icon {
    background-color: #ffffff !important;
    box-shadow: 0 0 12px #d4a373,
                 0 0 24px #d4a373,
                 0 0 36px #d4a373 !important;
}

/* Optional subtle background on active tab (matches your gold theme) */
#studyHubTabs .nav-link.active {
    background: rgba(212, 163, 115, 0.08) !important;
}

/* ============================================= */
/* Featured Works nav tabs — EXACT visual match to #studyHubTabs (SH) */
/* These live on the 4 main cards in index.html Featured Works row */
/* Uses .featured-nav class on the <ul> for the 4 cards */
/* Clean underline style: NO outlines/borders on individual tabs except the gold bottom on active */
/* ============================================= */
.featured-nav {
    border-bottom: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.featured-nav .nav-link {
    color: #999999 !important;           /* inactive text gray exactly like SH */
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}
.featured-nav .nav-link i {
    color: #999999 !important;           /* inactive icon gray */
}

.featured-nav .nav-link:hover,
.featured-nav .nav-link:focus {
    color: #d4a373 !important;           /* hover = gold */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.featured-nav .nav-link:hover i,
.featured-nav .nav-link:focus i {
    color: #d4a373 !important;           /* icon gold on hover */
}

.featured-nav .nav-link:focus,
.featured-nav .nav-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.featured-nav .nav-link.active,
.featured-nav .nav-link.active:hover {
    color: #ffffff !important;
    text-shadow: 0 0 12px #d4a373,
                 0 0 24px #d4a373,
                 0 0 36px #d4a373 !important;
    border: none !important;
    border-bottom: 4px solid #999999 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.featured-nav .nav-link.active i {
    color: #ffffff !important;
}

/* Optional subtle background on active tab (matches SH) */
.featured-nav .nav-link.active {
    background: rgba(212, 163, 115, 0.08) !important;
}

/* Summary preview highlight inside Featured cards (match main + teaser style) */
#caesar-summaryContent span.highlight,
#josephus-summaryContent span.highlight,
#plutarch-summaryContent span.highlight,
#caesar-cw-summaryContent span.highlight {
  color: var(--text) !important;
  text-shadow: var(--highlight-glow-strong) !important;
  animation: var(--highlight-pulse);
}

/* Featured preview header bar behind the 2 buttons: solid black, no glass */
[id$="-summaryPlayHeader"] {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(212, 163, 115, 0.4) !important;
  /* ensure it stays above content when stuck */
}

/* Preview play/mic buttons: gold outline / black bg / gray text (default), white on hover/active. No gold bg on hover. */
[id$="-summaryPlayHeader"] .btn,
[id$="-summaryPlayHeader"] .dropdown .btn {
  background: #000 !important;
  border: 1px solid #d4a373 !important;
  color: #999999 !important;
  outline: none !important;
}
[id$="-summaryPlayHeader"] .btn i,
[id$="-summaryPlayHeader"] .dropdown .btn i {
  color: #999999 !important;
}
[id$="-summaryPlayHeader"] .btn:hover,
[id$="-summaryPlayHeader"] .btn:focus,
[id$="-summaryPlayHeader"] .btn:active,
[id$="-summaryPlayHeader"] .dropdown .btn:hover,
[id$="-summaryPlayHeader"] .dropdown .btn:focus,
[id$="-summaryPlayHeader"] .dropdown .btn:active,
[id$="-summaryPlayHeader"] .dropdown .btn.show {
  color: #ffffff !important;
  background: #000 !important;
  border-color: #d4a373 !important;
}
[id$="-summaryPlayHeader"] .btn:hover i,
[id$="-summaryPlayHeader"] .btn:focus i,
[id$="-summaryPlayHeader"] .btn:active i,
[id$="-summaryPlayHeader"] .dropdown .btn:hover i,
[id$="-summaryPlayHeader"] .dropdown .btn:focus i,
[id$="-summaryPlayHeader"] .dropdown .btn:active i,
[id$="-summaryPlayHeader"] .dropdown .btn.show i {
  color: #ffffff !important;
}

/* Keep dropdown menus black */
[id$="-summaryPlayHeader"] .dropdown-menu,
[id$="-summaryPlayHeader"] .dropdown .dropdown-menu {
  background: #000 !important;
  border: 1px solid #d4a373 !important;
}
[id$="-summaryPlayHeader"] .dropdown-item {
  color: #fff !important;
  background: transparent !important;
}
[id$="-summaryPlayHeader"] .dropdown-item:hover,
[id$="-summaryPlayHeader"] .dropdown-item:focus,
[id$="-summaryPlayHeader"] .dropdown-item.active {
  background: #222 !important;
  color: #d4a373 !important;
}

/* Padding on the button row (header bar with Play + mic buttons) */
[id$="-summaryPlayHeader"] {
  padding: 25px 8px 15px 8px !important;  /* 25px top (+10px more above Play/Mic buttons), 15px bottom, ~8px sides */
}

/* Explore Voices label (gray, small, next to mic) */
[id$="-summaryPlayHeader"] .explore-voices {
  font-size: 0.8rem;
  color: #999999;
  opacity: 0.85;
  white-space: nowrap;
}

@keyframes voice-explore-arrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Full width "Read Book 1 Free" button below preview text: black bg, gold outline, gray text default (#999), white on hover. No gold bg on hover. */
[id$="-freeBook1Btn"] {
  background: #000 !important;
  border: 1px solid #d4a373 !important;
  color: #999999 !important;
  font-size: 0.85rem;
}
[id$="-freeBook1Btn"]:hover,
[id$="-freeBook1Btn"]:focus,
[id$="-freeBook1Btn"]:active {
  color: #ffffff !important;
  background: #000 !important;
  border-color: #d4a373 !important;
}

[id$="-freeBook1Btn"].pulsing-gold-glow {
  animation: pulse-gold-glow 2s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(212, 163, 115, 0.8);
}

[id$="-playSummaryBtn"].pulsing-gold-glow {
  animation: pulse-gold-glow 2s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(212, 163, 115, 0.8);
}

/* Also support on the inline styled buttons if needed */
#caesar-playSummaryBtn.pulsing-gold-glow,
#josephus-playSummaryBtn.pulsing-gold-glow,
#plutarch-playSummaryBtn.pulsing-gold-glow,
#caesar-cw-playSummaryBtn.pulsing-gold-glow {
  animation: pulse-gold-glow 2s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(212, 163, 115, 0.8);
}

@keyframes pulse-gold-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(212, 163, 115, 0.8); }
  50% { box-shadow: 0 0 40px rgba(212, 163, 115, 1); }
}

/* Styling for book buttons in Details tabs - standard black bg */

/* ============================================= */
/* FORCE INLINE PARAGRAPH ICONS TO SHOW (fixes recent tabbed Study Hub override) */
/* ============================================= */
#textContent p.lead .para-inline-icons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6em !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    font-size: calc(1em * var(--text-scale)) !important; /* scale the container so child icons match text height */
    line-height: inherit !important; /* match the paragraph line box height */
}

#textContent p.lead .para-icon {
    font-size: 1em !important; /* 1em of the scaled container = matches chapter text height, scales with toggle */
    color: #999999 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#textContent p.lead .para-icon:hover {
    color: #999 !important;
    transform: scale(1.25) !important;
}

/* Grok logo icon (replaces brain) — uses external SVG as mask for easy color control.
   Sized to match chapter text height using --text-scale (visually matches the other FA para-icons).
   Center-aligned vertically with text via flex; no manual top shift.
   Always #999 (like the other para icons); no gold on hover. */
#textContent p.lead .para-icon.grok-icon {
  display: inline-block !important;
  width: 1.15em !important;
  height: 1.15em !important;
  background-color: #999999 !important;
  -webkit-mask: url(../images/grok-logo.svg) no-repeat center / contain !important;
  mask: url(../images/grok-logo.svg) no-repeat center / contain !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important; /* no shift needed with center alignment; optical tweak if desired */
}

/* Extra insurance against any other rules */
#textContent .para-inline-icons,
#textContent .para-inline-icons * {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* FIX INLINE PARAGRAPH DROPDOWN */
.para-inline-dropdown .dropdown-menu {
  margin-top: 4px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.para-inline-dropdown .dropdown-toggle::after {
  display: none !important; /* hides the default caret */
}

.para-inline-icons {
  position: relative;
  z-index: 10;
}
/* INLINE PARAGRAPH DROPDOWN — MATCHES FOOTER CONTROLS */
.para-inline-icons .btn-group.dropup .dropdown-toggle {
  border-radius: 4px !important;
}

.para-inline-icons .dropdown-menu {
  margin-top: 2px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.para-inline-icons .dropdown-toggle::after {
  display: none !important; /* hides the default caret */
}
/* INLINE PARAGRAPH DROPDOWN — FORCE CLOSED + MATCH FOOTER */
.para-inline-icons .dropdown-menu {
  display: none !important; /* force closed until clicked */
}

.para-inline-icons .dropdown-menu.show {
  display: block !important;
}

.para-inline-icons .btn-group.dropup .dropdown-toggle {
  border-radius: 4px !important;
}

.para-inline-icons .dropdown-toggle::after {
  display: none !important; /* hide default caret */
}
/* FORCE INLINE DROPDOWN CLOSED — STRONG OVERRIDE */
.para-inline-icons .dropdown-menu {
  display: none !important;
}

.para-inline-icons .dropdown-menu.show {
  display: block !important;
}

.para-inline-icons .dropdown-toggle::after {
  display: none !important;
}
/* INLINE SHARE DROPDOWN — CLEAN HOVER + CLOSED */
.para-inline-icons .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.para-inline-icons .dropdown-toggle:hover {
  color: #999 !important;
  transform: scale(1.25) !important;
}

.para-inline-icons .dropdown-menu {
  display: none !important;
}

.para-inline-icons .dropdown-menu.show {
  display: block !important;
}
/* 4 ICONS — CLEAN HOVER (gold glow, no box) */
.para-inline-icons .para-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.para-inline-icons .para-icon:hover {
  color: #999 !important;
  transform: scale(1.25) !important;
}

/* Grok logo icon (replaces brain) — uses external SVG as mask for easy color control.
   Sized to match chapter text height using --text-scale (visually matches the other FA para-icons).
   Center-aligned vertically with text via flex; no manual top shift.
   Always #999 (like the other para icons); no gold on hover. The other icons stay gray on hover too. */
#textContent p.lead .para-icon.grok-icon,
.para-inline-icons .para-icon.grok-icon,
.grok-icon {
  display: inline-block !important;
  width: 1.15em !important;
  height: 1.15em !important;
  background-color: #999999 !important;
  -webkit-mask: url(../images/grok-logo.svg) no-repeat center / contain !important;
  mask: url(../images/grok-logo.svg) no-repeat center / contain !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important; /* no shift needed with center alignment; optical tweak if desired */
}

/* Large Grok icon for the empty-state invitation in the Grok tab (#grokChat)
   of the Study Hub. Sized to visually match the fa-4x bookmark icon and
   fa-4x search/quiz icons. White fill + golden pulsing glow for consistency
   with the other 3 large tab icons. */
#grokChat .grok-invitation .grok-icon-large,
.grok-invitation .grok-icon-large {
  width: 4em !important;
  height: 4em !important;
  background-color: #ffffff !important;   /* white icon body */
  margin-bottom: 1rem;
  top: 0 !important;
  display: inline-block !important;
  /* Extremely strong glow for the SVG mask icon (large empty state only).
     Using BOTH filter:drop-shadow (shape-hugging the actual logo) AND box-shadow (extra bloom).
     Values made very large + dedicated .grok-icon-large class so it clearly obeys its own rule
     and matches/exceeds the glow intensity of the other three icons. */
  filter: drop-shadow(0 0 30px #d4a373) drop-shadow(0 0 60px #d4a373) drop-shadow(0 0 90px #d4a373) !important;
  box-shadow: 0 0 30px #d4a373, 0 0 60px #d4a373, 0 0 90px #d4a373 !important;
  animation: pulseGlowGrok 1.5s ease-in-out infinite !important;
}

/* ============================================================
   LARGE ICONS IN STUDY HUB TAB CONTENT AREAS (empty/initial states)
   - All 4 tabs now use white icons + golden pulsing glow
   - Standardized to fa-4x (or 4em for grok mask) for identical height
   - Bookmark, Search (initial + no-results), Quiz question-mark, Grok logo
   ============================================================ */
#bookmarkSidebar #bookmarks-pane .fa-bookmark,
#bookmarkSidebar #search-pane .fa-search,
#bookmarkSidebar #searchResultsContainer .fa-search,
#bookmarkSidebar #quiz-pane .fa-question {
  color: #ffffff !important;
  text-shadow: 0 0 5px #d4a373, 0 0 10px #d4a373 !important;
  animation: pulseGlowSoft 1.5s ease-in-out infinite !important;
}

/* CUSTOM POPOVERS — Gold icon + White title + Black bg */
.popover {
    background-color: #000000 !important;
    border: 1px solid #d4a373 !important;
    box-shadow: 0 4px 20px rgba(212, 163, 115, 0.4) !important;
}

.popover .popover-header {
    background-color: #000000 !important;
    color: #ffffff !important;           /* White title */
    font-weight: 600;
    border-bottom: 1px solid #d4a373 !important;
    padding: 10px 14px !important;
}

.popover .popover-header i {
    color: #999 !important;           /* Gold icon */
}

/* Grok icon in paragraph icon popovers: match vertical alignment of FA icons.
   Adjusted to sit at same height so vertical padding (space above/below) matches the header text exactly. */
.popover .popover-header .grok-icon {
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;  /* fine-tune to match text baseline/center like FA icons */
  margin-right: 0.5rem !important;  /* match Bootstrap me-2 on FA icons */
}

.popover .popover-body {
    background-color: #000000 !important;
    color: #999999 !important;
    padding: 10px 14px !important;
}

/* Gold arrow */
.popover .popover-arrow {
    border-color: #d4a373 !important;
}
/* ====================== GROK TAB — FINAL POLISH ====================== */

/* Send button — force gold style everywhere (was inheriting gray) */
#grok-pane .btn-gold-inner {
    background: #d4a373 !important;
    color: #111111 !important;
    border: 1px solid #d4a373 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
}

#grok-pane .btn-gold-inner:hover {
    background: var(--void) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Tighten ALL message spacing in Grok chat */
#grokChat {
    padding: 1.25rem !important;
}

#grokChat .text-end,
#grokChat .text-start {
    margin-bottom: 0.75rem !important;   /* much tighter than before */
}

#grokChat .bg-black.px-3.py-3 {
    margin-bottom: 0.5rem !important;
    padding: 1rem 1.25rem !important;
}

/* User message padding */
#grokChat .text-end .bg-gold {
    padding: 10px 16px !important;
}

/* Scroll behavior */
#grokChat {
    scroll-behavior: smooth !important;
}
/* ====================== GROK CHAT — FORUM-STYLE CLEAN LAYOUT ====================== */
#grokChat {
    padding: 1.25rem !important;
    margin: 0 !important;
    background: #111111 !important;
    border: none !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
}

/* No more black void */
#grok-pane {
    padding-top: 0 !important;
}

/* Tight, clean spacing */
#grokChat > div {
    margin-bottom: 1rem !important;
}
/* Restore glows + fix landing */
#grokChat {
    padding-top: 138px !important;
}

#grokChat .btn-outline-gold:hover {
    color: #999 !important;
    transform: scale(1.05);
    box-shadow: 0 0 12px #d4a373,
                0 0 24px #d4a373 !important;
}

/* (active tab rules consolidated above in main #studyHubTabs block for even 4-tab layout + glow) */
/* ====================== GROK CHAT — FINAL POLISH (brain icon fixes) ====================== */
#grokChat .bg-gold {
  border: 3px solid #d4a373 !important;
  box-shadow: 0 0 15px #d4a373 !important;
}

.grok-suggestion-btn {
  transition: all 0.2s ease !important;
}
.grok-suggestion-btn:hover {
  color: #999 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 0 7px #d4a373, 0 0 12px #d4a373 !important;
}

/* (duplicate active tab glow consolidated above; removed to avoid conflicts with 4-tab even layout rules) */

/* Perfect first-response positioning */
#grokChat {
  padding-top: 20px !important;
  scroll-behavior: smooth !important;
}
/* ====================== GROK INPUT PINNED TO BOTTOM ====================== */
#grok-pane,
#bookmarkSidebar .offcanvas-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#grokChat {
  flex: 1 !important;
  overflow-y: auto !important;
  padding-bottom: 20px !important;
  scroll-behavior: smooth !important;
}

#grok-input-container,
#grokInput-form,
#grok-pane form {
  position: sticky !important;
  bottom: 0 !important;
  background: #111111 !important;
  border-top: 1px solid #d4a373 !important;
  padding: 16px 20px 20px !important;
  margin: 0 !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}
/* GROK INPUT PINNED TO BOTTOM */
#grok-pane,
#bookmarkSidebar .offcanvas-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#grokChat {
  flex: 1 !important;
  overflow-y: auto !important;
  padding-bottom: 30px !important;
}

#grok-input-container,
#grokInput-form,
form:has(#grokInput),
#grok-pane .sticky-bottom {
  position: sticky !important;
  bottom: 0 !important;
  background: #111111 !important;
  border-top: 2px solid #d4a373 !important;
  padding: 16px 20px 24px !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
}
/* ====================== GROK INPUT PINNED TO BOTTOM — EXACT MATCH TO YOUR HTML ====================== */
#grok-pane {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
}

#grokChat {
  flex: 1 1 auto !important;           /* takes all available space */
  overflow-y: auto !important;
  margin: 12px 12px 0 12px !important; /* clean spacing */
  max-height: none !important;         /* kills the inline calc that was fighting flex */
  padding-bottom: 20px !important;
}

#grok-pane > div:last-child {          /* the div that holds the input group */
  margin-top: auto !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #111111 !important;
  border-top: 2px solid #d4a373 !important;
  padding: 16px 20px 24px !important;
  z-index: 10 !important;
  width: 100% !important;
}

#grok-pane .input-group {
  background: #111111 !important;
  border: 1px solid var(--gold) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Better support for tabbed Study Hub layout (Search + Grok panes inside tab-content) */
#bookmarkSidebar .offcanvas-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
#bookmarkSidebar .tab-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;           /* make it a flex container so active pane children can use flex:1 for proper height */
  flex-direction: column !important;
}
#bookmarkSidebar .tab-pane {
  min-height: 0 !important;
  display: none !important;
  width: 100% !important;
}
#bookmarkSidebar .tab-pane.active {
  display: block !important;
  flex: 1 1 auto !important;          /* active pane fills the tab-content (which is now flex) */
  min-height: 0 !important;
  height: auto !important;            /* prevent old height:100% rules on #grok-pane etc. from collapsing the layout */
}
#bookmarkSidebar .tab-pane.active.d-flex {
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure bookmarks content (and root accordion) always full width inside the tab pane */
#bookmarkSidebar #bookmarks-pane,
#bookmarkSidebar #bookmarks-pane #bookmarkContent,
#bookmarkSidebar #bookmarkAccordion,
#bookmarkSidebar .accordion {
  width: 100% !important;
}
#bookmarkSidebar .accordion-item {
  width: 100% !important;
}

/* Bookmarks tab specific: when active, make the pane a flex column so its #bookmarkContent can scroll.
   (Bookmarks pane HTML does not include d-flex, unlike search/grok.) */
#bookmarkSidebar #bookmarks-pane.active {
  display: flex !important;
  flex-direction: column !important;
}

#bookmarkSidebar #bookmarks-pane.active #bookmarkContent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Apply the same nested background (#111111) and tighter inset margin from the Grok tab's #grokChat content area
   to the main content sections of the other 3 tabs. This creates the "nested tighter" card-like effect the user prefers
   over plain black/void, while keeping the tab structure. */
#bookmarkSidebar #bookmarks-pane #bookmarkContent,
#bookmarkSidebar #search-pane #searchResultsContainer,
#bookmarkSidebar #quiz-pane .quiz-view {
  background: #111111 !important;
  margin: 12px 12px 0 12px !important;
  border: none !important;
}

/* Also ensure the search input header area uses a compatible dark bg for the overall nesting feel (optional but helps consistency) */
#bookmarkSidebar #search-pane > .p-4.border-bottom {
  background: #111111 !important;
}

/* ============================================= */
/* QUIZ TAB (4th tab in Study Hub) — viewport views + fades */
/* ============================================= */
#quiz-pane {
  background: transparent;
}

.quiz-view {
  color: #ddd;
}

.quiz-choice-btn {
  transition: all 0.15s ease;
  border: 1px solid #d4a373 !important;
  background: rgba(0,0,0,0.25);
  color: #999 !important;
  text-align: left;
}

.quiz-choice-btn:hover:not(:disabled) {
  background: rgba(212, 163, 115, 0.15) !important;
  border-color: #d4a373 !important;
  color: #fff !important;
}

.quiz-choice-btn:disabled {
  opacity: 0.95;
  cursor: default;
}

.quiz-choice-correct {
  border-color: #28a745 !important;
  background: rgba(40, 167, 69, 0.12) !important;
}

.quiz-choice-incorrect {
  border-color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.12) !important;
}

.quiz-feedback {
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Simple fade helper used by quiz.js for "messages fade in and out" */
.quiz-view.fade-out {
  opacity: 0;
  transition: opacity 0.22s ease;
}

.quiz-view {
  transition: opacity 0.22s ease;
}

/* Mobile tightening inside the tab */
@media (max-width: 576px) {
  #quiz-pane .quiz-question {
    font-size: 1.0rem !important;
    line-height: 1.35;
  }
  .quiz-choice-btn {
    font-size: 0.95rem;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }
}
#grok-pane .input-group:hover,
#grok-pane .input-group:focus-within {
  border-color: var(--gold-dark) !important;
}

#grokInput {
  background: #1a1a1a !important;
  border: none !important;
}

/* Ensure grok send button does not draw its own border inside the wrapper's 1px gold outline */
#grok-pane .input-group .btn-gold-inner {
  border: none !important;
}

/* Extra safety for mobile / offcanvas */
@media (max-width: 991.98px) {
  #grokChat {
    margin: 8px 8px 0 8px !important;
  }
  #grok-pane > div:last-child {
    padding: 12px 16px 20px !important;
  }
  /* Match the tighter 8px inset used by grok (and content panels) on mobile so the
     outer sides of the leftmost/rightmost Study Hub tabs continue to line up smoothly. */
  #studyHubTabs {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Keep the off-black (#111111) content areas aligned with the tabs on mobile too */
  #bookmarkSidebar #bookmarks-pane #bookmarkContent,
  #bookmarkSidebar #search-pane #searchResultsContainer,
  #bookmarkSidebar #quiz-pane .quiz-view,
  #bookmarkSidebar #search-pane > .p-4.border-bottom {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ============================================= */
/* NEXT CHAPTER / BOOK CTA BUTTONS               */
/* Full-width gold progression buttons at end of each work */
.next-chapter-btn {
  background-color: #d4a373 !important;
  color: #111 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 15px 24px !important;
  border-radius: 6px !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.next-chapter-btn:hover {
  background-color: var(--void) !important;
  color: #d4a373 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4);
}

.next-chapter-btn:active {
  transform: translateY(0);
}
/* ============================================= */
/* End — Template ready for lock */

/* Nuclear override for "About This Work" / side info panels
   OneUI's .block-header-default often carries a navy/dark-blue tint in dark mode.
   Force pure black + gold text no matter what. */
.dark-mode .block .block-header.block-header-default,
.dark-mode .block.block-rounded .block-header-default,
.dark-mode .block-header-default {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border-bottom: 1px solid #d4a373 !important;
  box-shadow: none !important;
}

.dark-mode .block .block-header.block-header-default .block-title,
.dark-mode .block-header-default .block-title {
  color: #999 !important;
  font-weight: 600 !important;
}

/* Force the table and its container under "About This Work" to pure black */
.dark-mode .block-content.bg-parchment,
.dark-mode .block-content.bg-parchment .table,
.dark-mode .block-content.bg-parchment table {
  background: #000000 !important;
  background-color: #000000 !important;
}

.dark-mode .block-content.bg-parchment .table-striped > tbody > tr > td,
.dark-mode .block-content.bg-parchment .table-striped > tbody > tr > th {
  background-color: #000000 !important;
}

.dark-mode .block-content.bg-parchment .table-striped > tbody > tr:nth-of-type(odd) > td,
.dark-mode .block-content.bg-parchment .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #111111 !important; /* Study Hub off-black for stripes on detail/landing pages */
}

.dark-mode .block-content.bg-parchment .table td,
.dark-mode .block-content.bg-parchment .table th {
  border-color: #222 !important;
  color: #e8d9b8 !important;
}

/* Extra nuclear for the "About This Work" block header on all detail/landing pages
   (in case OneUI injects navy via more complex selectors or variables) */
.caesar-the-gallic-wars .block-header-default,
.caesar-the-gallic-wars .block.block-rounded > .block-header-default,
.caesar-the-civil-wars .block-header-default,
.caesar-the-civil-wars .block.block-rounded > .block-header-default,
.josephus-the-jewish-war .block-header-default,
.josephus-the-jewish-war .block.block-rounded > .block-header-default,
.plutarchs-lives .block-header-default,
.plutarchs-lives .block.block-rounded > .block-header-default {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom-color: #d4a373 !important;
}

.caesar-the-gallic-wars .block-header-default .block-title,
.caesar-the-civil-wars .block-header-default .block-title,
.josephus-the-jewish-war .block-header-default .block-title,
.plutarchs-lives .block-header-default .block-title {
  color: #999 !important;
}

/* Nuclear override for the striped table in "About This Work" on all detail pages.
   OneUI/Bootstrap .table-striped is very stubborn with navy-ish colors via variables and long selectors.
   This uses maximum specificity + the page class to win. */
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped,
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody,
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr,
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > td,
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > th,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > td,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > th,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > td,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > th,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > td,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr > th {
  background-color: #000000 !important;
  background-image: none !important;
  --bs-table-bg: #000000 !important;
  --bs-table-striped-bg: #111111 !important;
  --bs-table-accent-bg: #111111 !important;
}

/* SH #111111 stripe on odd rows for the About This Work table on all detail/landing pages */
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > td,
.caesar-the-gallic-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > th,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > td,
.caesar-the-civil-wars .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > th,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > td,
.josephus-the-jewish-war .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > th,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > td,
.plutarchs-lives .block.block-rounded .block-content.bg-parchment .table.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #111111 !important;
  --bs-table-striped-bg: #111111 !important;
}

/* ============================================= */
/* Make all content buttons match the header style (black bg + gold outline) */
/* Scoped to this page for maximum specificity over OneUI */
body.caesar-the-gallic-wars .btn-primary,
body.caesar-the-gallic-wars .btn.btn-primary,
body.caesar-the-gallic-wars .btn-alt-primary,
body.caesar-the-gallic-wars .btn-success,
body.caesar-the-gallic-wars .btn-info,
body.caesar-the-gallic-wars .btn-warning {
  background: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
}

body.caesar-the-gallic-wars .btn-primary:hover,
body.caesar-the-gallic-wars .btn.btn-primary:hover,
body.caesar-the-gallic-wars .btn-alt-primary:hover,
body.caesar-the-gallic-wars .btn-success:hover,
body.caesar-the-gallic-wars .btn-info:hover,
body.caesar-the-gallic-wars .btn-warning:hover {
  background: var(--void) !important;
  color: #ffffff !important;
  border-color: var(--gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}

/* Also force btn-alt-secondary (in case any are used in content) */
body.caesar-the-gallic-wars .btn-alt-secondary {
  background: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
}

body.caesar-the-gallic-wars .btn-alt-secondary:hover {
  background: var(--void) !important;
  color: #ffffff !important;
}

/* Footer copyright - force gold instead of OneUI blue */
#page-footer,
#page-footer a,
#page-footer .text-gold,
#page-footer .fw-semibold {
  color: #999 !important;  /* our gold */
}

#page-footer a:hover {
  color: #e8c9a3 !important;  /* lighter gold on hover */
}

/* ============================================= */
/* Site-wide consistent button styling: black background + gold outline */
/* Matches the treatment used for header .btn-alt-secondary buttons */
/* This ensures ALL buttons (including future ones) follow the same visual language */

/* Make .btn-alt-secondary work consistently everywhere (not just inside #page-header) */
.btn-alt-secondary {
  background: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
}

.btn-alt-secondary:hover,
.btn-alt-secondary:focus-visible {
  background: var(--void) !important;
  color: #ffffff !important;
  border-color: var(--gold) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(212, 163, 115, 0.25) !important;
}

/* Force common button classes (btn-primary etc.) used in content to the same black + gold outline style */
.btn-primary,
.btn.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  background: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
  background: var(--void) !important;
  color: #ffffff !important;
  border-color: var(--gold) !important;
  transform: translateY(-1px) !important;
}

/* Specifically style .btn-gold-inner when used for secondary actions (e.g. Save note, search Jump buttons) */
#bookmarkSidebar .btn-gold-inner,
#bookmarkSidebar .search-jump-btn,
#bookmarkSidebar .btn-alt-secondary {
  background: var(--void) !important;
  border: 1px solid var(--gold) !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
}

#bookmarkSidebar .btn-gold-inner:hover,
#bookmarkSidebar .search-jump-btn:hover,
#bookmarkSidebar .btn-alt-secondary:hover {
  background: var(--void) !important;
  color: #ffffff !important;
  border-color: var(--gold) !important;
}

/* Exception for the compact per-bookmark controls group: single outer gold outline only.
   Children must stay borderless (like main footer) so the group's border + ::after separators
   produce one clean gold frame, not double outlines around each btn. */
#bookmarkSidebar .footer-controls-group .btn,
#bookmarkSidebar .footer-controls-group .btn-gold-inner {
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
}

#bookmarkSidebar .footer-controls-group .btn:hover,
#bookmarkSidebar .footer-controls-group .btn-gold-inner:hover {
  background: var(--void) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Extra visibility boost for search offcanvas Jump buttons */
.search-jump-btn {
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Search results in offcanvas */
.search-result-item {
  color: #999999 !important; /* muted gray for preview text */
}

.search-result-item strong {
  color: #cccccc !important;
  font-weight: 600 !important;
}

/* The matched search term — glow + pulse exactly like main player highlights */
.search-result-item .search-match {
  color: var(--text) !important;
  background: rgba(212, 163, 115, 0.12) !important;
  text-shadow: var(--highlight-glow-strong) !important;
  animation: var(--highlight-pulse);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

/* "Show more results" link in search */
.search-show-more {
  color: var(--gold) !important;
  transition: opacity 0.15s ease;
}

.search-show-more:hover {
  opacity: 0.85;
  text-decoration: underline !important;
}

/* Resume toast "Resume" button — extra vertical breathing room
   so the gold border doesn't visually merge with the toast's gold border.
   "Just a touch more" than the previous my-2 (8px). */
.toast[id^="resume-toast-"] .btn-gold-inner {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* (Resume prompt is now handled via SweetAlert2 dialog — see player.js) */

/* Force colors + background on the voice dropup items in the footer controls.
   Must beat OneUI/Bootstrap theme defaults (navy active bg, gold text) and any earlier rules.
   Active: white text on solid black bg.
   Inactive: gray text. */
.footer-controls-group .btn-group.dropup .dropdown-menu a.dropdown-item[data-voice] {
    color: #999999 !important;
}
.footer-controls-group .btn-group.dropup .dropdown-menu a.dropdown-item[data-voice].active {
    color: #fff !important;
    background-color: #000 !important;
    background: #000 !important;
}

/* Ultra-specific fallback using the voice toggle ID (high specificity from ID selector) */
#voiceDropdown ~ .dropdown-menu a.dropdown-item[data-voice] {
    color: #999999 !important;
}
#voiceDropdown ~ .dropdown-menu a.dropdown-item[data-voice].active {
    color: #fff !important;
    background-color: #000 !important;
}