/* Brick Sans Font Integration */
@font-face {
    font-family: 'Brick Sans';
    src: local('Brick Sans'), local('BrickSans');
    /* You can add a url('fonts/BrickSans.woff2') format('woff2') here if you host the font file locally */
}

:root { 
    --bg-color: #ffffff; 
    --text-color: #333333; 
    --header-bg: #f8f9fa; 
    --sidebar-bg: #f1f3f5; 
    --border-color: #dee2e6; 
    --btn-bg: #4da3ff; 
    --btn-text: #ffffff; 
    --correct-light: #d4edda; 
    --incorrect-light: #f8d7da; 
    --correct-underline: #28a745; 
    --explanation-text: #6c757d; 
    --option-hover: #f8f9fa; 
    --card-bg: #ffffff; 
    --alpha-search-glow-border: rgba(0, 0, 0, 0.55);
    --alpha-search-glow-soft: rgba(0, 0, 0, 0.22);
    --alpha-search-miss-ring: rgba(0, 0, 0, 0.78);
    --alpha-search-miss-glow: rgba(0, 0, 0, 0.95);
    --alpha-search-miss-border: #000000;
    --alpha-search-hit-ring: rgba(0, 0, 0, 0.5);
    --alpha-search-hit-glow: rgba(0, 0, 0, 0.7);
    --alpha-search-hit-border: #000000;
}

[data-theme="dark"] { 
    --bg-color: #212529; 
    --text-color: #f8f9fa; 
    --header-bg: #2b3035; /* matches --sidebar-bg so the bar and sidebar read as one chrome surface */
    --sidebar-bg: #2b3035; 
    --border-color: #495057; 
    --btn-bg: #4da3ff; 
    --btn-text: #ffffff; 
    --correct-light: #143521; 
    --incorrect-light: #3b171a; 
    --correct-underline: #28a745; 
    --explanation-text: #adb5bd; 
    --option-hover: #343a40; 
    --card-bg: #2c3034; 
    --alpha-search-glow-border: rgba(255, 255, 255, 0.55);
    --alpha-search-glow-soft: rgba(255, 255, 255, 0.22);
    --alpha-search-miss-ring: rgba(255, 255, 255, 0.78);
    --alpha-search-miss-glow: rgba(255, 255, 255, 0.95);
    --alpha-search-miss-border: #ffffff;
    --alpha-search-hit-ring: rgba(77, 163, 255, 0.5);
    --alpha-search-hit-glow: rgba(77, 163, 255, 0.7);
    --alpha-search-hit-border: var(--btn-bg);
}

* { 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    -webkit-tap-highlight-color: transparent; 
}

body { 
    margin: 0; 
    padding: 0; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s; 
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    /* The bar's paint color. Normally --header-bg; while the header is pinned
       compact it switches to the page background, which makes the bar itself
       invisible (indistinguishable from the page) while the very same gradient
       — and the ::after veil below, which also paints in this color — keeps
       dissolving content that scrolls up beneath the floating title/buttons.
       Light mode already looks this way because its header color nearly matches
       the page; this makes dark mode behave identically when compact. */
    --header-surface: var(--header-bg);
    /* Solid to ~65%, then an eased fade to transparent (no border/shadow) — the
       extra color-mix stops approximate a smoothstep so no gradient corner shows
       at the fade boundaries. Content scrolls under the lower part
       (#main-content spans the full viewport height); the #header::after veil
       handles making it disappear. */
    background: linear-gradient(to bottom, var(--header-surface) 0%, var(--header-surface) 65%, transparent 100%); /* fallback for pre-color-mix browsers */
    background: linear-gradient(to bottom,
        var(--header-surface) 0%,
        var(--header-surface) 60%,
        color-mix(in srgb, var(--header-surface) 94%, transparent) 70%,
        color-mix(in srgb, var(--header-surface) 76%, transparent) 80%,
        color-mix(in srgb, var(--header-surface) 42%, transparent) 90%,
        color-mix(in srgb, var(--header-surface) 14%, transparent) 96%,
        transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 1000;
    transition: background-color 0.3s, height 0.25s ease;
}

/* Dissolve veil for content scrolling under the header. Two layers over the
   header's lower 45%: the bottom layer is the page-background curtain whose
   FULLY OPAQUE band (its first 45%) extinguishes content by ~75% of the header
   height — an opaque band is essential, because a gradient that only approaches
   full cover lets bright/glowing content (the blue home headings) bleed through
   at 5-10% all the way up the bar. The top layer re-paints the header color
   fading out, so the bar's body melts gradually across the whole zone instead
   of ending where the curtain starts. Anchored to the fixed header itself (an
   earlier position:sticky attempt inside #main-content got clamped below the
   scroller's top padding and floated 40px under the bar). z-index -1 paints it
   above page content but behind the header's own children. */
#header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 65%;
    bottom: 0;
    /* Both layers eased with intermediate stops so the curtain's borders fade as
       gradients instead of showing corners: the header-color layer S-curves out,
       and the page-color curtain keeps its fully opaque core (still load-bearing
       — see below) but rounds off into its fade instead of kinking at 45%. */
    background: /* fallback for pre-color-mix browsers */
        linear-gradient(to bottom, var(--header-surface) 0%, transparent 100%),
        linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color) 45%, transparent 100%);
    background:
        linear-gradient(to bottom,
            var(--header-surface) 0%,
            color-mix(in srgb, var(--header-surface) 88%, transparent) 25%,
            color-mix(in srgb, var(--header-surface) 60%, transparent) 50%,
            color-mix(in srgb, var(--header-surface) 26%, transparent) 75%,
            color-mix(in srgb, var(--header-surface) 8%, transparent) 90%,
            transparent 100%),
        linear-gradient(to bottom,
            var(--bg-color) 0%,
            var(--bg-color) 40%,
            color-mix(in srgb, var(--bg-color) 92%, transparent) 55%,
            color-mix(in srgb, var(--bg-color) 65%, transparent) 70%,
            color-mix(in srgb, var(--bg-color) 30%, transparent) 85%,
            color-mix(in srgb, var(--bg-color) 9%, transparent) 94%,
            transparent 100%);
    pointer-events: none;
    z-index: -1;
    transition: left 0.3s ease; /* tracks the sidebar sliding in/out */
}
/* With the sidebar visible, the dissolve veil starts at its right edge: over the
   sidebar column the header fades onto the sidebar's own background instead of
   painting the page-background curtain across it. */
body:not(.sidebar-collapsed) #header::after { left: 320px; }

/* Pinned-compact header: the bar melts into the page (see --header-surface above)
   — no distinct band, just the wordmark/buttons floating over the page with the
   dissolve gradient still extinguishing content that scrolls beneath them. */
body.header-compact #header { --header-surface: var(--bg-color); }

/* Fixed nav button styling (back and scroll-to-top) */
.fixed-nav-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    display: none; /* JS will toggle */
    opacity: 0;
    transition: opacity 240ms ease, transform 120ms ease;
    z-index: 2000;
}
.fixed-nav-btn:hover { transform: translateY(-3px); }

/* Simplified bold arrow style (applies to both fixed nav and back arrow buttons)
   - clean, bold glyphs with minimal decoration
*/
.fixed-nav-btn {
    /* retained base properties defined earlier; override specifics here */
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 2px solid var(--btn-bg);
    font-weight: 800;
    font-size: 1.05rem;
    display: none; /* JS toggles display */
    opacity: 0;
    transition: opacity 200ms ease, transform 120ms ease, background-color 160ms ease, color 160ms ease;
}
.fixed-nav-btn:hover { background-color: var(--btn-bg); color: var(--btn-text); }

.back-arrow-btn {
    background: transparent;
    border: none;
    color: var(--btn-bg);
    font-weight: 900;
    font-size: 1.3rem;
    padding: 0 6px;
    line-height: 1;
    transition: color 160ms ease, transform 120ms ease;
}
.back-arrow-btn:hover { color: var(--btn-bg); transform: translateY(-2px); }


.header-left { display: flex; align-items: center; gap: 15px; }
.header-right { 
    display: flex; 
    align-items: center; 
    gap: 10px;
}

#header-center-container { 
    position: absolute; 
    left: calc(50% + 160px); 
    transform: translateX(-50%); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    transition: left 0.3s ease; 
}

body.sidebar-collapsed #header-center-container { 
    left: 50%; 
}

#btn-mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
    transition: transform 0.2s;
}

/* SVG hamburger: a graphic (not a font glyph) so its visible bars are dead-centered in the
   button box on every platform — matching the image icon, which is also box-centered. */
#btn-mobile-menu svg { display: block; }
body.hide-menu-btn #btn-mobile-menu { display: none !important; }

/* Score is the only text among header-left graphics; its caps sit above the box center (cap-height
   bias), so nudge down ~1.5px to optically center the numerals/caps with the SVG + icon. */
.score-board { font-size: 1.2rem; font-weight: bold; width: auto; min-width: 140px; line-height: 34px; transform: translateY(1.5px); transition: font-size 0.25s ease; }
body.hide-scoreboard .score-board { display: none !important; }

/* ---- Compact header on scroll ----
   body.header-compact is toggled by app.js once the content scrolls away from the
   very top (with hysteresis, so the class never flutters at the boundary). The bar,
   the ASTROCRAM wordmark, and the right-side buttons compress toward the height of
   the header-left icon buttons (hamburger + theme toggle, 34px boxes), which keep
   their normal size. The bar height is only forced on desktop layouts — the stacked
   mobile header keeps height:auto and tightens naturally as its children shrink. */
@media (min-width: 951px) {
    body.header-compact #header { height: 46px; }
}
body.header-compact .logo-text {
    font-size: 1.6rem;
    letter-spacing: 1px;
}
/* The inline-styled trademark superscript keeps pace with the shrunken wordmark. */
body.header-compact #header-logo span { font-size: 0.62rem !important; }
body.header-compact .header-right button {
    padding: 4px 10px;
    font-size: 0.8rem;
}
body.header-compact .score-board { font-size: 1rem; }
/* Same stock transitions as the generic button rule, plus the two size properties
   the compact mode animates. */
.header-right button {
    transition: transform 0.2s ease-out, background-color 0.2s, border-color 0.2s,
        color 0.3s, opacity 0.2s, box-shadow 0.3s, padding 0.25s ease, font-size 0.25s ease;
}

/* ASTROCRAM Text Logo Styling */
.logo-text {
    font-family: 'Brick Sans', 'Segoe UI', Tahoma, sans-serif;
    font-size: 3.2rem;
    font-weight: 900;
    margin: 0;
    color: #ffffff !important;
    -webkit-text-stroke: 0.5px #000000;
    cursor: pointer;
    transition: transform 0.3s ease, text-shadow 0.3s ease, font-size 0.25s ease, letter-spacing 0.25s ease;
    user-select: none;
    letter-spacing: 2px;
}

[data-theme="dark"] .logo-text {
    -webkit-text-stroke: 0px transparent; 
}

.constant-glow-text {
    text-shadow: 0 0 15px var(--btn-bg), 0 0 5px var(--btn-bg);
}
.logo-text:active { transform: scale(0.96) !important; transition: transform 0.1s ease-out; }

button, .topic-card, .history-list li, .color-btn, .alpha-btn { 
    touch-action: manipulation; 
    user-select: none; 
    -webkit-user-select: none; 
    transition: transform 0.2s ease-out, background-color 0.2s, border-color 0.2s, color 0.3s, opacity 0.2s, box-shadow 0.3s;
}

button { 
    cursor: pointer; 
    padding: 8px 16px; 
    border: none;
    border-radius: 6px;
    background-color: var(--btn-bg);
    color: var(--btn-text); 
    font-size: 1rem; 
}
button:disabled { cursor: not-allowed; opacity: 0.6; }

.btn-secondary { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    border: 1px solid var(--border-color); 
}

/* Constant Glow for specific buttons */
.constant-glow {
    box-shadow: 0 0 12px var(--btn-bg);
    border: 1px solid var(--btn-bg) !important;
}

/* Inline text hover animations */
.hover-color-text {
    display: inline-block;
    transition: color 0.3s ease;
    cursor: default;
}
.glow-text-hover {
    display: inline-block;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

button:active:not(:disabled),
.topic-card:active:not(.disabled-card),
.color-btn:active:not(:disabled),
.history-list li:active,
#btn-mobile-menu:active,
.alpha-btn:active:not(:disabled) {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out;
}

.option-btn:active:not(:disabled) {
    transform: scale(0.985) !important;
    transition: transform 0.1s ease-out;
}

.back-arrow-btn:active {
    transform: scale(0.75) !important;
    transition: transform 0.1s ease-out;
}

.home-hover-title {
    transition: color 0.4s ease;
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    button:hover:not(:disabled) { opacity: 0.9; transform: scale(1.03); }
    
    .logo-text:hover {
        transform: scale(1.05);
        text-shadow: 0 0 20px var(--btn-bg), 0 0 10px var(--btn-bg);
    }
    
    .option-btn:hover:not(:disabled) { 
        background-color: var(--dynamic-hover-bg, var(--option-hover)); 
        border-color: var(--dynamic-hover-border, var(--btn-bg)); 
        transform: scale(1.008); 
    }
    .question-action-trigger:hover {
        background-color: var(--btn-bg);
        color: var(--btn-text);
        border-color: var(--btn-bg);
        transform: scale(1.08);
    }
    .question-action-item:hover {
        background-color: var(--option-hover);
        border-color: var(--btn-bg);
        color: var(--btn-bg);
        transform: none !important;
    }
    
    .history-list li:hover { background-color: var(--option-hover); transform: scale(1.02); }
    .topic-card:hover:not(.disabled-card) { transform: translateY(-3px) scale(1.02); border-color: var(--btn-bg); }
    #week-view .topic-card:hover:not(.disabled-card) .topic-title { color: var(--btn-bg); }
    #topic-view .week-topic-category-title:hover { color: var(--btn-bg); transform: scale(1.03); }
    .color-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.1); border-color: var(--text-color); }
    .alpha-btn:hover:not(:disabled) { background-color: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); transform: scale(1.1); }
    
    .back-arrow-btn:hover { color: var(--btn-text) !important; background-color: var(--btn-bg); transform: translateX(-2px); opacity: 1; }
    
    .view-header-center h1:hover, .view-title:hover, .content-box h2:hover, .content-box h3:hover, .home-hover-title:hover { 
        color: var(--btn-bg) !important; 
    }
    
    .hover-color-text:hover {
        color: var(--dynamic-text-color, var(--text-color)) !important;
    }
    
    .glow-text-hover:hover {
        color: var(--btn-bg) !important;
        text-shadow: 0 0 10px var(--btn-bg);
    }
    
    .glow-hover:hover {
        border-color: var(--btn-bg) !important;
        box-shadow: 0 0 12px var(--btn-bg);
    }
    
    #btn-mobile-menu:hover { opacity: 0.7; transform: scale(1.1); }

    .footer-brand:hover {
        transform: none !important;
    }
}

/* Keep inline premium price text static on hover */
@media (hover: hover) and (pointer: fine) {
    #home-view #unlock-premium-heading + h3 .hover-color-text,
    #home-view #unlock-premium-heading + h3 .hover-color-text:hover {
        color: inherit !important;
        text-shadow: none !important;
        transform: none !important;
        transition: none !important;
        cursor: default;
    }
}

#sidebar {
    position: fixed;
    /* Runs from the very top of the page, UNDER the fixed header (z 900 vs 1000): the
       sidebar's solid background shows through the header's transparent fade zone and
       fills the band the header vacates when it compresses. The former 70px offset
       moved into padding-top (70 + the original 20), so the content starts where it
       always did while the panel itself reaches the top edge. */
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    padding: 90px 20px 20px;
    /* Scrolls as a whole when the sections don't fit the viewport — see the rules below. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    transition: background-color 0.3s, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 900;
}

#main-content {
    margin-left: 320px;
    margin-top: 0;
    width: calc(100% - 320px);
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Top padding = 70px header + the previous 40px gap: content starts in the
       same place as before, but the scrollport now extends up under the header
       so scrolling content can dissolve across its lower half. */
    padding: 110px 40px 40px;
    scroll-behavior: smooth; 
    transition: background-color 0.3s, margin-left 0.3s ease, width 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    overflow-x: hidden;
}

body.sidebar-collapsed #sidebar { transform: translateX(-100%); }
body.sidebar-collapsed #main-content { margin-left: 0; width: 100%; }

body.marketing-mode .app-only { display: none !important; }
body:not(.marketing-mode) .marketing-only { display: none !important; }

/* Startup guard: keep auth-sensitive CTAs hidden until check_login resolves. */
body.auth-pending #btn-login,
body.auth-pending #btn-subscribe,
body.auth-pending #btn-logout,
body.auth-pending #btn-account,
body.auth-pending #btn-settings,
body.auth-pending #btn-header-upgrade {
    display: none !important;
    visibility: hidden !important;
}

.config-section { margin-bottom: 25px; flex-shrink: 0; }

.history-section {
    flex: 1 1 auto !important;
    /* Floor so the attempt list stays usable instead of collapsing to nothing on a short
       window; past this point the sidebar itself scrolls (see #sidebar overflow-y). */
    min-height: 150px;
}

/* On short windows and mobile the sidebar's sections used to be clipped at the bottom —
   the Generate button, attempt history, or Bling My Quiz could sit off-screen with no way
   to reach them. Sections now keep their natural height and the sidebar scrolls as a whole.
   The history list still shrinks first (down to its min-height above) and keeps its own
   inner scroll, so the common desktop layout is unchanged. */
#sidebar > .title-buffer,
#sidebar > .config-section:not(.history-section) {
    flex-shrink: 0;
}

.title-buffer { min-height: 60px; display: flex; align-items: flex-start; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; padding-bottom: 5px; }
#sidebar-topic-title { margin-top: 0; font-size: 1.1rem; margin-bottom: 0; line-height: 1.3;}

.input-container { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
input[type="number"] { width: 70px; padding: 6px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--card-bg); color: var(--text-color); }
.checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ==========================================
   SIDEBAR DESIGN SYSTEM
   One visual language shared by the Quizzes sidebar and the Flashcards sidebar
   (both live inside #sidebar): a quiet uppercase title per section, hairline
   rules between sections, label/value stat rows, and one button scale.
   ========================================== */

/* Section rhythm — a hairline above every section after the first, so the
   sidebar reads as a stack of groups instead of a run-on column. */
#sidebar .config-section { margin-bottom: 16px; }
#sidebar .config-section + .config-section,
#flashcards-sidebar .config-section + .config-section {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}
/* Bling keeps its own header treatment and sits flush at the bottom. */
#sidebar #bling-container + .config-section,
#sidebar #bling-container { border-top: 1px solid var(--border-color); padding-top: 16px; }
/* Breathing room after the last section, so scrolling to the bottom of the
   flashcards sidebar doesn't butt Advanced Settings against the Bling palette
   pinned below the scroll area. */
body.flashcards-mode #flashcards-sidebar { padding-bottom: 30px; }
body.flashcards-mode #bling-container { margin-top: 14px; padding-top: 18px; }

/* Two title ranks. A section heading must always outrank anything nested
   inside it, so the disclosure rows and section titles share one size and the
   headings *inside* a disclosure panel step down. */
/* Small, heavy and widely tracked: at this size the extra letter-spacing is
   what makes an all-caps label legible, and it lets the titles shrink without
   turning to mush — the sidebar reads as labelled machinery, not paragraphs. */
.sidebar-section-title {
    margin: 0 0 10px 0;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--btn-bg);
}
.sidebar-subsection-title {
    margin: 0 0 8px 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--explanation-text);
}

/* ---- Hero: the one number that matters, centred at the top of each sidebar ---- */
.sidebar-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 16px 16px;
    margin-bottom: 20px;
}
/* A hairline of accent along the top edge instead of a left bar, so the card
   stays symmetrical around the centred figure. */
.sidebar-hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--btn-bg);
}
.sidebar-hero-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sidebar-hero-number {
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--btn-bg);
    font-variant-numeric: tabular-nums;
}
.sidebar-hero-caption {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--explanation-text);
    line-height: 1.3;
}
.sidebar-hero-sub {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--explanation-text);
}
/* Nothing due reads as calm rather than as an error. */
.sidebar-hero.is-empty::before { background: var(--border-color); }
.sidebar-hero.is-empty .sidebar-hero-number { color: var(--explanation-text); opacity: 0.65; }

/* Label/value rows. Tabular figures keep the numbers from jittering as they
   update, which they do on every selection change. */
/* Dotted leader between label and value: the eye tracks across to the number
   without needing a heavier rule, and rows stay readable at this density. */
.sidebar-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.8rem;
}
.sidebar-stat::after {
    content: '';
    order: 1;
    flex: 1 1 auto;
    height: 0;
    margin-bottom: 0.22em;
    border-bottom: 1px dotted var(--border-color);
}
.sidebar-stat .sidebar-stat-value { order: 2; }
.sidebar-stat-label { color: var(--explanation-text); flex: 0 1 auto; }
.sidebar-stat-value {
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sidebar-stat-sep { opacity: 0.5; margin: 0 1px; font-weight: 600; }

/* Disclosure rows ("Selected Decks", "Selected Topics", "Advanced Settings")
   read as section titles that happen to be clickable. */
/* Disclosure rows read as section titles that happen to be clickable, so they
   share the section-title rank. */
.sidebar-disclosure {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 2px 0;
    cursor: pointer;
    color: var(--btn-bg);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sidebar-disclosure:hover { color: var(--text-color); transform: none !important; filter: none !important; }
.sidebar-disclosure .flash-settings-caret { font-size: 0.9rem; letter-spacing: 0; color: var(--explanation-text); }

/* ---- Buttons: one scale, three weights ---- */
#sidebar .sidebar-btn {
    width: 100%;
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
#sidebar .sidebar-btn:hover:not(:disabled) { transform: translateY(-1px); filter: none; }
#sidebar .sidebar-btn:active:not(:disabled) { transform: translateY(0); }
#sidebar .sidebar-btn:disabled { opacity: 0.45; box-shadow: none; transform: none; }

#sidebar .sidebar-btn-primary { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
#sidebar .sidebar-btn-primary:hover:not(:disabled) { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); }

#sidebar .sidebar-btn-outline {
    background: transparent;
    border-color: var(--btn-bg);
    color: var(--btn-bg);
}
#sidebar .sidebar-btn-outline:hover:not(:disabled) { background: var(--btn-bg); color: var(--btn-text); }

/* Quiet tertiary: reads as a control, not an invitation. */
#sidebar .sidebar-btn-sm {
    margin-top: 12px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: none;
}

/* Inputs sit right-aligned against their label, matching the stat rows. */
#sidebar .input-container { justify-content: space-between; gap: 12px; margin-bottom: 0; }
#sidebar .input-container label { font-size: 0.8rem; font-weight: 600; }
#sidebar input[type="number"] {
    border-radius: 7px;
    padding: 5px 8px;
    width: 62px;
    text-align: center;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
#sidebar .checkbox-group { gap: 6px; margin-top: 10px; }
#sidebar .checkbox-group label { font-size: 0.8rem; font-weight: 600; }
#sidebar-topic-title { font-size: 1rem; letter-spacing: -0.01em; }
.title-buffer { min-height: 48px; margin-bottom: 12px; }
#sidebar .flash-selected-panel li { font-size: 0.78rem; padding: 2px 0 2px 14px; }
#sidebar .flash-settings-note { font-size: 0.72rem; line-height: 1.35; }

/* "Highest Yield Questions" filter — an ordinary checkbox in the filter group on
   both the quiz and flashcards sidebars, distinguished by white text to signal
   it carries a hover description (.hy-tip). No border, no icon. */
/* #sidebar-scoped so it outranks `#sidebar label { color: var(--text-color) }`. */
#sidebar label.hy-check { position: relative; color: #fff; }
/* The light theme's sidebar is near-white, so keep the label legible there. */
body:not([data-theme="dark"]) #sidebar label.hy-check { color: var(--btn-bg); }
.hy-check .hy-tip {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 60;
    max-width: 240px;
    width: max-content;
    padding: 8px 10px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--btn-bg);
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.hy-check:hover .hy-tip { display: block; }

.history-scroll-window { flex: 1 1 auto; overflow-y: auto; margin-top: 10px; min-height: 0; max-height: 100%; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.history-scroll-window::-webkit-scrollbar { display: none; }

#bling-container {
    flex-shrink: 0;
}

.history-list { list-style: none; padding: 0; margin: 0; }
.history-list li { background-color: var(--card-bg); padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--border-color); font-size: 0.9rem; cursor: pointer; }
.history-list li.active-history { border-color: var(--btn-bg); border-width: 2px; }
.stats-text { font-size: 0.95rem; margin-bottom: 5px; color: var(--text-color); }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.view-section {
    display: none;
    flex: 1 0 auto;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.34s ease-in-out;
}

.view-section.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.34s ease-in-out;
}

.view-section.fade-out {
    opacity: 0;
    animation: fadeOut 0.34s ease-in-out;
}

/* The home/marketing view is uncapped (unlike the standard 1000px view cap) so the marketing
   rows can scale with the viewport and let the image boxes grow. The hero text and strategy
   section keep their own narrower max-widths and stay centered; the marketing rows use a fluid
   soft cap (see .marketing-row) and the images grow only up to their native resolution
   (see .marketing-video max-width), so wider screens get larger — but never blurry — images. */
#home-view { max-width: none; }

#account-view .account-body-fade,
#setup-view .setup-body-fade {
    opacity: 1;
    transition: none;
}

.view-header-center { text-align: center; margin-bottom: 30px; }
.view-header-center h1 { margin-top: 0; margin-bottom: 10px; color: var(--text-color); font-size: 2rem; transition: color 0.45s ease, opacity 0.45s ease, transform 0.45s ease; cursor: default; }
.view-header-center p { margin: 0; color: var(--explanation-text); font-size: 1.1rem; pointer-events: none; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; }

.marketing-row { display: flex; align-items: center; justify-content: center; gap: 72px; max-width: 1205px; margin: 160px auto; padding: 0 20px; flex-wrap: wrap; }
/* Image rows take priority and grow fluidly with the viewport (soft cap: 1615px, or 81vw so the
   media keeps side margin) — this is the dynamic "soft limit" that sizes the images. Demo rows
   keep the tighter width above so their flashcard/quiz cards stay well-framed. (The cap here and
   the .marketing-video ceiling below were dialed back ~15% from the earlier 1900px/94vw & 1180px.) */
.marketing-row:has(img) { max-width: min(1615px, 81vw); }
.marketing-row.reverse { flex-direction: row-reverse; }
.marketing-text { flex: 1; min-width: 300px; text-align: left; }
.marketing-text h2 { font-size: 2rem; color: var(--text-color); margin-top: 0; margin-bottom: 15px; }
.marketing-text p { font-size: 1.1rem; color: var(--explanation-text); line-height: 1.6; }
/* Images grow with the row but cap at ~1003px (≈85% of the ~1180px native PNG width) — a
   deliberate size ceiling ~15% below the earlier native-resolution cap. Still under native
   width, so images never upscale/blur. */
.marketing-video { flex: 2.0592; min-width: 0; width: 100%; max-width: 1003px; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: visible; }
.marketing-video video, .marketing-video img { width: 100%; height: auto; display: block; outline: none; border: none; }
.marketing-video .theme-dark-image { display: none; }
body[data-theme="dark"] .marketing-video .theme-light-image { display: none; }
body[data-theme="dark"] .marketing-video .theme-dark-image { display: block; }

/* ===== Home: auto-scrolling "Every Topic We Cover" marquee ===== */
.home-topics-section {
    max-width: 1000px;
    margin: 120px auto 40px;
    padding: 0 20px;
    text-align: center;
}
.home-topics-section h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin: 0 0 14px;
}
.home-topics-intro {
    max-width: 860px;
    margin: 0 auto 24px;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--explanation-text);
}
.home-topics-marquee {
    position: relative;
    height: 352px;                 /* shows a maximum of 8 topics at once (44px each) */
    overflow: hidden;
    max-width: 560px;
    margin: 0 auto;
    /* Fade the top and bottom edges so topics emerge and leave the view smoothly. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.home-topics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    animation-name: home-topics-scroll;
    animation-duration: 74s;       /* per-item pace set in JS (renderHomeTopicsMarquee) */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
.home-topics-item {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    font-size: 1.05rem;
    color: var(--text-color);
    text-align: left;
}
.home-topics-item::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 14px;
    border-radius: 50%;
    background: var(--btn-bg);      /* blue bullet */
}
.home-topics-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@keyframes home-topics-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .home-topics-list { animation: none; }
    .home-topics-marquee { overflow-y: auto; }
}

.home-strategy-section {
    max-width: 1000px;
    margin: 120px auto 40px;
    padding: 0 20px;
    text-align: center;
}

.home-strategy-section h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin: 0 0 14px;
}

.home-strategy-intro {
    max-width: 860px;
    margin: 0 auto 24px;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--explanation-text);
}

.home-strategy-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--card-bg);
}

.home-strategy-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.home-strategy-table th,
.home-strategy-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.home-strategy-table th {
    font-size: 1rem;
    color: var(--text-color);
    background: rgba(127, 127, 127, 0.08);
}

.home-strategy-table td {
    color: var(--explanation-text);
    line-height: 1.5;
}

.home-strategy-table tbody tr:last-child td {
    border-bottom: none;
}

.home-strategy-table td:first-child {
    width: 28%;
    color: var(--text-color);
    font-weight: 700;
}

@media (max-width: 780px) {
    .home-strategy-table th,
    .home-strategy-table td {
        padding: 12px;
        font-size: 0.95rem;
    }
}

/* Portrait-screenshot showcase rows — the analytics dashboard and the backlog
   scheduler captures beside their descriptions. Narrower image column + tighter
   row width so the tall portrait screenshot stays readable next to the copy
   instead of dominating the row. */
.marketing-row.home-analytics-row,
.marketing-row.home-scheduler-row {
    max-width: 1160px;
    align-items: center;
}
.home-analytics-row .marketing-video {
    flex: 0 1 430px;
    max-width: 430px;
}
.home-scheduler-row .marketing-video {
    flex: 0 1 380px;
    max-width: 380px;
}
.home-analytics-row .marketing-video img,
.home-scheduler-row .marketing-video img {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.home-analytics-row .marketing-text {
    flex: 1 1 340px;
}
.home-scheduler-row .marketing-text {
    flex: 1 1 340px;
    max-width: 580px;
}

.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; text-align: left; }
.quadrant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 650px; margin: 0 auto; text-align: left; }

#week-view .topic-grid, #setup-view .topic-grid { margin-top: 55px; }
#week-view .topic-grid { margin-top: 20px; }

#alphabetical-topic-view .view-header-center,
#week-view .view-header-center {
    margin-top: 0;
}

#alphabetical-topic-view .view-header-center h1,
#week-view .view-header-center h1 {
    margin-top: 0;
    transform: none;
}

.topic-card { background-color: var(--card-bg); border: 2px solid var(--border-color); border-radius: 8px; padding: 20px; cursor: pointer; }

/* Compact Topic Viewing (Curriculum Setup parameter, off by default). Shrinks the topic
   selectors to title-only so more fit on screen. Deliberately scoped to the three Quizzes /
   Flashcards grids so the Weeks page cards and the Curriculum Setup year cards keep their
   descriptions. Purely presentational: unchecking restores every card with no re-render. */
body.compact-topics #topic-grid,
body.compact-topics #alphabetical-topic-grid,
body.compact-topics #builtin-deck-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
body.compact-topics #topic-grid .topic-card,
body.compact-topics #alphabetical-topic-grid .topic-card,
body.compact-topics #builtin-deck-grid .topic-card { padding: 12px 14px; }
body.compact-topics #topic-grid .topic-card .topic-desc,
body.compact-topics #alphabetical-topic-grid .topic-card .topic-desc,
body.compact-topics #builtin-deck-grid .topic-card .topic-desc,
body.compact-topics #builtin-deck-grid .topic-card .flash-deck-footer { display: none; }
body.compact-topics #topic-grid .topic-card .topic-title,
body.compact-topics #alphabetical-topic-grid .topic-card .topic-title,
body.compact-topics #builtin-deck-grid .topic-card .topic-title {
    font-size: 1.05rem;
    margin-bottom: 0;
}
.topic-card.active-topic { border-color: var(--btn-bg); border-width: 2px;}
.topic-title { font-size: 1.2rem; font-weight: bold; margin-top: 0; margin-bottom: 10px; pointer-events: none; transition: color 0.35s ease; }
.topic-desc { font-size: 0.9rem; color: var(--explanation-text); margin: 0; pointer-events: none; }

#topic-view .week-topic-category-title {
    transition: color 0.3s ease, transform 0.3s ease;
    transform-origin: center;
}

#week-view .topic-title {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 8px;
}

.year-card,
.sort-card {
    position: relative;
    overflow: hidden;
}

.disabled-card { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(100%); }

#week-view .topic-card.week-locked-card {
    opacity: 0.45;
    filter: grayscale(100%);
    border-color: var(--border-color);
    pointer-events: none;
}

.back-arrow-container { width: 100%; display: flex; justify-content: flex-start; margin-bottom: 15px; margin-top: -15px; margin-left: -15px; }
.back-arrow-btn { background: transparent; color: #8b929a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1.65rem; line-height: 1; padding: 2px 8px; border: 2px solid #8b929a; border-radius: 8px; font-weight: 900; cursor: pointer; opacity: 0.88; transition: color 0.25s ease, background-color 0.25s ease, transform 0.2s ease, opacity 0.7s ease, border-color 0.25s ease; }

/* Keep page title baselines visually aligned between Setup, Week, and Study by Topic views. */
#setup-view .view-header-center,
#week-view .view-header-center,
#alphabetical-topic-view .view-header-center {
    margin-top: 0;
}

#week-view .back-arrow-container,
#topic-view .back-arrow-container,
#alphabetical-topic-view .back-arrow-container {
    margin-top: 0;
    margin-bottom: 0;
}

.view-title { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 25px; transition: color 0.4s ease; color: var(--dynamic-text-color, var(--text-color)); cursor: default; }

.quiz-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.quiz-title-row .view-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.feedback-mode-badge {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    color: var(--explanation-text);
    background-color: transparent;
}

.feedback-mode-badge.visible {
    display: inline-flex;
}

.feedback-mode-badge.mode-instant {
    border-color: transparent;
    color: var(--explanation-text);
    background-color: transparent;
}

.feedback-mode-badge.mode-classic {
    border-color: transparent;
    color: var(--explanation-text);
    background-color: transparent;
}

.content-box { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 35px; max-width: 800px; margin: 0 auto; line-height: 1.6; color: var(--text-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.content-box h2 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; transition: color 0.4s ease; cursor: default; }
.content-box h3 { margin-top: 25px; margin-bottom: 10px; font-size: 1.25rem; transition: color 0.4s ease; cursor: default; }
.content-box p, .content-box ul { margin-bottom: 15px; }
.content-box ul { padding-left: 20px; }
.content-box li { margin-bottom: 8px; color: var(--explanation-text); }

.contact-input { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); font-family: inherit; font-size: 1rem; transition: border-color 0.2s; }
.contact-input:focus { outline: none; border-color: var(--btn-bg); }
.contact-input.error-border { border-color: #dc3545 !important; }

.question-card { background-color: var(--dynamic-card-bg, var(--card-bg)); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; margin-bottom: 30px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: background-color 0.3s; }
.question-card { position: relative; }
.question-action-menu { position: absolute; top: 14px; right: 14px; z-index: 5; padding-bottom: 10px; }
.question-action-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 40px;
    height: 10px;
}
.question-action-trigger {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #b8c0c8;
    background-color: var(--dynamic-card-bg, var(--card-bg));
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.question-action-trigger.is-favorite {
    color: var(--btn-bg);
    border-color: var(--btn-bg);
}
.question-action-trigger.is-removed {
    color: #dc3545;
    border-color: #dc3545;
}
.question-action-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--card-bg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 6px;
}
.question-action-menu:hover .question-action-dropdown,
.question-action-menu:focus-within .question-action-dropdown {
    display: block;
}
.question-action-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-color);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
}
.question-action-label { pointer-events: none; }
.question-action-indicator {
    min-width: 12px;
    text-align: right;
    color: var(--btn-bg);
}
.question-action-indicator.is-bold { font-weight: 800; }
.question-action-item.is-removed-active .question-action-label,
.question-action-item.is-removed-active .question-action-indicator {
    color: #dc3545;
    font-weight: 700;
}
.question-action-item:focus-visible {
    outline: none;
    background-color: var(--option-hover);
    border-color: var(--btn-bg);
    color: var(--btn-bg);
}
.question-text { font-size: 1.15rem; font-weight: 600; margin-bottom: 20px; margin-top: 0; line-height: 1.4; user-select: text; -webkit-user-select: text; color: var(--dynamic-text-color, var(--text-color)); transition: color 0.3s; padding-right: 56px; }
.question-number { color: var(--btn-bg); font-weight: 700; }
.question-topic-meta { font-size: 0.82rem; color: var(--explanation-text); margin-top: -12px; margin-bottom: 14px; user-select: text; -webkit-user-select: text; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.question-topic-meta-left, .question-topic-meta-right { color: var(--explanation-text); }
.question-topic-name { font-weight: 700; }
.question-id-value { font-weight: 700; }
#main-content.bling-active .question-topic-meta,
#main-content.bling-active .question-topic-meta-left,
#main-content.bling-active .question-topic-meta-right,
#main-content.bling-active .question-topic-name,
#main-content.bling-active .question-id-value,
#main-content.bling-active .feedback-mode-badge,
#main-content.bling-active .feedback-mode-badge.mode-instant,
#main-content.bling-active .feedback-mode-badge.mode-classic {
    color: #555d66;
}

body[data-theme="dark"] #main-content.bling-active .question-topic-meta,
body[data-theme="dark"] #main-content.bling-active .question-topic-meta-left,
body[data-theme="dark"] #main-content.bling-active .question-topic-meta-right,
body[data-theme="dark"] #main-content.bling-active .question-topic-name,
body[data-theme="dark"] #main-content.bling-active .question-id-value,
body[data-theme="dark"] #main-content.bling-active .feedback-mode-badge,
body[data-theme="dark"] #main-content.bling-active .feedback-mode-badge.mode-instant,
body[data-theme="dark"] #main-content.bling-active .feedback-mode-badge.mode-classic {
    color: #88909a;
}
.options-list { display: flex; flex-direction: column; gap: 10px; }

.option-btn { 
    background-color: transparent; 
    border: 1px solid var(--border-color); 
    color: var(--dynamic-text-color, var(--text-color)); 
    padding: 12px 15px; text-align: left; border-radius: 6px; font-size: 1rem; position: relative; 
    transition: transform 0.2s ease-out, background-color 0.2s, border-color 0.2s, color 0.3s;
}

.option-btn.selected-option {
    background-color: var(--dynamic-hover-bg, var(--option-hover));
    border-color: var(--dynamic-hover-border, var(--btn-bg));
}

.explanation { font-size: 0.9rem; color: var(--dynamic-text-color, var(--explanation-text)); margin-top: 5px; display: none; padding-left: 5px; user-select: text; -webkit-user-select: text;}

.state-correct { background-color: var(--correct-light) !important; border-color: var(--correct-underline) !important; }
.state-incorrect { background-color: var(--incorrect-light) !important; border-color: #dc3545 !important; }

[data-theme="dark"] .state-correct,
[data-theme="dark"] .state-incorrect { color: #ffffff !important; }

.show-explanations .explanation { display: block; }

#submit-quiz-container { text-align: center; margin: 40px 0; border-top: 1px solid var(--border-color); padding-top: 30px; }
#btn-submit { font-size: 1.2rem; padding: 12px 30px; font-weight: bold; }

#generate-quiz:disabled { background-color: #6c757d !important; color: #e9ecef !important; opacity: 1; transform: none !important; }

#btn-clear-data { background-color: #6c757d; color: #e9ecef; }
#btn-clear-data.active-clear { background-color: #cd7b7b; color: #ffffff; }
#btn-clear-data.active-clear:hover { background-color: #b86565; }

#bling-container { transition: opacity 0.3s ease, visibility 0.3s ease; margin-top: 15px; border-top: 1px solid var(--border-color); padding-top: 15px; }
/* Hidden Bling must also give its space back, or the sections above stop short
   of the bottom of the sidebar and leave a dead band. Collapsed to zero height
   rather than display:none so the opacity fade still plays on the way out. */
/* #sidebar-scoped so it outranks `#sidebar #bling-container` and
   `body.flashcards-mode #bling-container`, both of which set padding/margin. */
#sidebar #bling-container.hidden-bling {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-top-color: transparent;
    border-top-width: 0;
    height: 0;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.bling-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bling-title { font-size: 0.95rem; color: var(--explanation-text); border-bottom: none; margin: 0; }
.bling-reset-link {
    background: transparent;
    border: none;
    color: var(--explanation-text);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
.bling-reset-link:hover { color: var(--text-color); transform: none !important; }
.bling-reset-link:active { transform: none !important; }
.color-palette { display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 5px; }
.color-btn { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--border-color); cursor: pointer; padding: 0; flex: 0 0 auto; }
.color-btn:disabled { cursor: not-allowed; transform: none !important; }

.alpha-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.95rem;
}
.alpha-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: var(--header-bg);
}

.alpha-search-form {
    width: 50%;
    max-width: 400px;
    min-width: 220px;
    margin: -20px auto 28px auto;
}

.alpha-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--card-bg);
    color: var(--text-color);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    transition: box-shadow 1.25s ease, border-color 1.25s ease;
}

.alpha-search-input::placeholder {
    color: #8b929a;
    opacity: 1;
    text-align: center;
    font-weight: 700;
}

.alpha-search-input:focus {
    outline: none;
    border-color: var(--alpha-search-glow-border);
    box-shadow: 0 0 8px var(--alpha-search-glow-soft);
}

.alpha-search-input:hover {
    border-color: var(--alpha-search-glow-border);
    box-shadow: 0 0 8px var(--alpha-search-glow-soft);
}

@keyframes alphaSearchMissFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0);
        border-color: var(--border-color);
    }
    35% {
        box-shadow: 0 0 0 3px var(--alpha-search-miss-ring), 0 0 18px var(--alpha-search-miss-glow);
        border-color: var(--alpha-search-miss-border);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0);
        border-color: var(--border-color);
    }
}

@keyframes alphaSearchHitFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.0);
        border-color: var(--border-color);
    }
    35% {
        box-shadow: 0 0 0 2px var(--alpha-search-hit-ring), 0 0 16px var(--alpha-search-hit-glow);
        border-color: var(--alpha-search-hit-border);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.0);
        border-color: var(--border-color);
    }
}

@keyframes studyTitleTextFlash {
    0% {
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    35% {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.82), 0 0 14px rgba(255, 255, 255, 0.95);
    }
    100% {
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes studyTitleTextFlashLight {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    35% {
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.82), 0 0 14px rgba(0, 0, 0, 0.95);
    }
    100% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

.alpha-search-input.search-miss-flash {
    animation: alphaSearchMissFlash 450ms ease-out;
}

.page-nav-link-inline.study-mode-selected-flash {
    animation: studyTitleTextFlash 450ms ease-out;
}

body:not([data-theme="dark"]) .page-nav-link-inline.study-mode-selected-flash {
    animation: studyTitleTextFlashLight 450ms ease-out;
}

.alpha-search-input.search-hit-flash {
    animation: alphaSearchHitFlash 500ms ease-out;
}

.highlight-topic {
    border-color: var(--btn-bg) !important;
    box-shadow: 0 0 12px var(--btn-bg);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.footer-brand {
    cursor: default;
}

/* Legal pages: use a single default color and unbold text content */
#privacy-view .content-box,
#terms-view .content-box {
    color: var(--text-color);
}

#privacy-view .content-box *,
#terms-view .content-box * {
    color: var(--text-color) !important;
    font-weight: 400 !important;
}

#privacy-view .content-box h1,
#privacy-view .content-box h2,
#privacy-view .content-box h3,
#privacy-view .content-box h4,
#privacy-view .content-box h5,
#privacy-view .content-box h6,
#terms-view .content-box h1,
#terms-view .content-box h2,
#terms-view .content-box h3,
#terms-view .content-box h4,
#terms-view .content-box h5,
#terms-view .content-box h6 {
    font-weight: 700 !important;
}

/* Fixed navigation arrows */
.fixed-nav-btn {
    display: none;
    position: fixed;
    background-color: var(--card-bg);
    color: var(--btn-bg);
    width: 46px;
    height: 46px;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    border: 2px solid var(--btn-bg);
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    z-index: 950;
    transition: color 0.3s ease, background-color 0.3s ease, opacity 0.7s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#fixed-back-btn  { top: 85px;    left: 360px; transition: color 0.3s ease, background-color 0.3s ease, opacity 0.7s ease, transform 0.2s ease, left 0.3s ease; }
#scroll-top-btn  { bottom: 40px; left: 360px; transition: color 0.3s ease, background-color 0.3s ease, opacity 0.7s ease, transform 0.2s ease, left 0.3s ease; }
#scroll-top-btn { transform: rotate(90deg); }
body.sidebar-collapsed #fixed-back-btn { left: 40px; }
body.sidebar-collapsed #scroll-top-btn { left: 40px; }
#fixed-back-btn {
    color: #8b929a;
    border-color: #8b929a;
}
#scroll-top-btn {
    color: #8b929a;
    border-color: #8b929a;
}
.fixed-nav-btn:active {
    transform: scale(0.9) !important;
    transition: transform 0.1s ease-out;
}
#scroll-top-btn:active {
    transform: rotate(90deg) scale(0.9) !important;
}
@media (hover: hover) and (pointer: fine) {
    .fixed-nav-btn:hover { background-color: var(--btn-bg); color: var(--btn-text) !important; transform: translateY(-2px); }
    #scroll-top-btn:hover { transform: rotate(90deg) translateY(-2px); }
}
/* Hide the in-page back arrows on views that use the fixed arrow */
#topic-view .back-arrow-container,
#alphabetical-topic-view .back-arrow-container,
#setup-view .back-arrow-container,
#week-view .back-arrow-container,
#quiz-view .back-arrow-container,
#history-view .back-arrow-container { visibility: hidden; }

/* Header button styling and visibility */
#header-right button {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.3s, color 0.3s;
}

#btn-login, 
#btn-subscribe {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#btn-login {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--btn-bg) !important;
}

#btn-logout {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--btn-bg) !important;
}

#btn-login:hover {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transform: scale(1.05);
    text-shadow: 0 0 10px var(--btn-bg), 0 0 5px var(--btn-bg);
    box-shadow: 0 0 15px rgba(77, 163, 255, 0.4), inset 0 0 10px rgba(77, 163, 255, 0.2);
}

#btn-logout:hover {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transform: scale(1.05);
    text-shadow: 0 0 10px var(--btn-bg), 0 0 5px var(--btn-bg);
    box-shadow: 0 0 15px rgba(77, 163, 255, 0.4), inset 0 0 10px rgba(77, 163, 255, 0.2);
}

#btn-login:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out;
}

#btn-logout:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out;
}

#btn-subscribe,
#btn-settings {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#btn-subscribe:hover,
#btn-settings:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Theme toggle is an icon button: dark-mode.php shows in Light mode (tap to go dark),
   light-mode.php shows in Dark mode (tap to go light). CSS drives which icon is visible so
   the JS handler only flips data-theme. #header prefix wins over "#header-right button" when
   the button relocates to the right group on mobile. */
#header #toggle-theme {
    height: 34px;
    padding: 0 4px;
    background: transparent;
    border: none;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#toggle-theme img { display: block; height: 26px; width: auto; pointer-events: none; }
#toggle-theme .theme-icon-when-dark { display: none; }
body[data-theme="dark"] #toggle-theme .theme-icon-when-light { display: none; }
body[data-theme="dark"] #toggle-theme .theme-icon-when-dark { display: block; }

#toggle-theme:hover {
    transform: scale(1.05);
}

/* Hide app-only buttons by default */
#btn-settings,
#btn-logout,
#btn-account,
#btn-header-upgrade {
    display: none !important;
    visibility: hidden !important;
}

/* When logged in: show Logout, hide Login (Logout replaces Login) */
body.user-logged-in #btn-logout {
    display: inline-block !important;
    visibility: visible !important;
}
body.user-logged-in #btn-account {
    display: inline-block !important;
    visibility: visible !important;
}
body.user-logged-in #btn-login {
    display: none !important;
}

/* Never show marketing CTAs to authenticated users (prevents startup flash
   where Subscribe appears beside Account/Logout before JS inline styles land). */
body.user-logged-in .marketing-only {
    display: none !important;
    visibility: hidden !important;
}

/* Header "Upgrade" CTA: only visible for a logged-in user who does NOT
   yet have premium access. Managed by JS toggling body.user-premium. */
body.user-logged-in.payment-status-known:not(.user-premium) #btn-header-upgrade {
    display: inline-block !important;
    visibility: visible !important;
}

@media (max-width: 950px) {
    #fixed-back-btn  { top: 170px; left: 15px; }
    #scroll-top-btn  { bottom: 80px; left: 15px; }
    body.sidebar-collapsed #fixed-back-btn { left: 15px; }
    body.sidebar-collapsed #scroll-top-btn { left: 15px; }
}

#footer { margin-top: auto; padding-top: 40px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; font-size: 0.85rem; width: 100%; transition: color 0.3s; }
#footer a { color: var(--dynamic-text-color, var(--text-color)); text-decoration: none; cursor: pointer; transition: color 0.3s, text-shadow 0.3s, transform 0.3s; font-weight: 500;}
#footer a:hover { text-decoration: underline; color: var(--btn-bg) !important;}

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 3000; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-box { background: var(--card-bg); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); width: 90%; max-width: 420px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.2s; }
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-box p { font-size: 1.15rem; margin-top: 0; margin-bottom: 25px; color: var(--text-color); line-height: 1.4; }
.modal-buttons { display: flex; gap: 15px; justify-content: center; }
.modal-btn { padding: 10px 25px; font-weight: bold; font-size: 1.05rem; }
.cancel-btn { background-color: #6c757d; }
.cancel-btn:hover { background-color: #5a6268; }
.ok-btn { background-color: var(--btn-bg); }
.danger-btn { background-color: #c0392b; }
.danger-btn:hover { background-color: #a93226; }

.delete-account-modal-box { max-width: 460px; }
.delete-account-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-color);
    font-size: 1.4rem;
}
.delete-account-text {
    font-size: 1rem !important;
    margin-bottom: 16px !important;
    color: var(--explanation-text) !important;
}
.delete-account-label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--text-color);
}

.report-question-modal-box { max-width: 520px; }
#report-question-input {
    resize: vertical;
    min-height: 90px;
    max-height: 220px;
}
.report-question-counter {
    margin-top: 6px;
    text-align: right;
    font-size: 0.8rem;
    color: var(--explanation-text);
}

.payments-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.payments-summary-item {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
}

.payments-summary-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--explanation-text);
    margin-bottom: 5px;
}

.payments-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.payments-note {
    color: var(--explanation-text);
    margin: 14px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.payments-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.admin-alert-monitor {
    border-left: 4px solid var(--btn-bg);
}

.admin-alert-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.admin-alert-stat {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-alert-stat span {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--explanation-text);
}

.admin-alert-stat strong {
    font-size: 1.2rem;
    color: var(--text-color);
}

.admin-alert-actions {
    margin-bottom: 10px;
}

.admin-alert-empty {
    color: var(--explanation-text);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.admin-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-alert-list-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--dynamic-card-bg, var(--card-bg));
    font-size: 0.88rem;
}

.admin-alert-list-item .status {
    font-weight: 700;
    text-transform: uppercase;
}

.admin-alert-list-item .status.status-pending { color: #b58900; }
.admin-alert-list-item .status.status-failed { color: #dc3545; }
.admin-alert-list-item .status.status-sent { color: #28a745; }

@media (max-width: 700px) {
    .admin-alert-stats {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 700px) {
    .payments-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Parameter Toggle Styling */
.parameter-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--btn-bg);
    flex-shrink: 0;
}

.parameter-checkbox:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.parameter-toggle-container {
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease;
}

.parameter-toggle-container:hover {
    opacity: 0.95;
}

@media (max-width: 950px) {
    #header { height: auto; flex-direction: column; align-items: stretch; padding: 15px; gap: 15px; }
    .header-left { flex-wrap: wrap; justify-content: center; width: 100%; gap: 10px; }
    .header-right { flex-wrap: nowrap; justify-content: center; width: 100%; gap: 8px; }
    .header-right > button {
        font-size: 0.85rem;
        padding: 8px 10px;
        white-space: nowrap;
    }
    
    #header-center-container { position: static; transform: none; display: flex; align-items: center; justify-content: center; width: 100%; }

    .logo-text {
        font-size: clamp(1.85rem, 7.2vw, 2.4rem);
        letter-spacing: 1px;
        max-width: 100%;
        line-height: 1.05;
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }
    
    /* The mobile drawer overlays the header (z 2000), so the desktop under-header
       padding does not apply — restore the plain 20px all around. */
    #sidebar { transform: translateX(-100%); z-index: 2000; top: 0; height: 100vh; width: 85%; max-width: 320px; box-shadow: 2px 0 15px rgba(0,0,0,0.5); padding: 20px; }
    #sidebar.open { transform: translateX(0); }
    body.sidebar-collapsed #sidebar.open { transform: translateX(0); }
    
    #main-content { margin-left: 0 !important; margin-top: 150px; width: 100% !important; height: calc(100vh - 150px); padding: 30px 15px; padding-bottom: 70px; overflow-x: hidden; }
    /* The stacked mobile header is height:auto and content clips below it, so
       the desktop dissolve can't apply — keep the mobile bar solid instead. */
    #header { background: var(--header-surface); }
    #header::after { display: none; }
    .back-arrow-container { margin-left: 0; margin-top: -10px; }
    
    .topic-grid { grid-template-columns: 1fr; }

    .marketing-row {
        margin: 80px auto;
        gap: 20px;
        padding: 0 10px;
        flex-direction: column;
    }


    .marketing-row.reverse {
        flex-direction: column;
    }

    .marketing-text {
        min-width: 0;
        order: 1;
    }

    .marketing-video {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        order: 2;
    }

    #setup-view .setup-top-nav,
    #account-view .account-top-nav {
        width: 100%;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 8px;
    }

    #setup-view .setup-top-nav .page-nav-link-inline,
    #account-view .account-top-nav .page-nav-link-inline {
        font-size: 1.05rem;
        line-height: 1.15;
        white-space: normal;
    }

    #setup-view .setup-top-nav .page-nav-link-inline.active,
    #account-view .account-top-nav .page-nav-link-inline.active {
        font-size: 1.35rem;
    }

    #setup-view .setup-top-nav .nav-my-account,
    #setup-view .setup-top-nav .nav-study,
    #account-view .account-top-nav .nav-study,
    #account-view .account-top-nav .nav-curriculum {
        transform: none !important;
    }

    #setup-view .setup-top-nav .nav-study,
    #account-view .account-top-nav .nav-study {
        display: block !important;
        visibility: visible !important;
    }
}

@media (max-width: 600px) {
    .quadrant-grid { grid-template-columns: 1fr; } 
}

/* Sidebar collapse logic for quizzes */
@media (min-width: 951px) {
    body.sidebar-collapsed #quiz-view,
    body.sidebar-collapsed #history-view {
        padding-left: 160px !important;
        padding-right: 160px !important;
        width: 100% !important;
        max-width: 1120px !important;
        margin: 0 auto !important;
    }
}

#quiz-view,
#history-view {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    transition: max-width 0.3s ease, padding 0.3s ease;
}






/* ==========================================
   PAGE NAV INLINE (Account + Setup pages)
   ========================================== */
.page-nav-sidebar-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    width: 240px;
    z-index: 900;
}

.page-nav-link-inline {
    display: block;
    background: transparent;
    border: none;
    color: var(--explanation-text);
    cursor: pointer;
    text-align: left;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: inherit;
    transition: color 0.35s ease, transform 0.35s ease, opacity 0.35s ease, text-shadow 0.35s ease;
    line-height: 1.3;
    padding: 4px 0;
    white-space: nowrap;
}

.page-nav-link-inline:hover {
    color: var(--btn-bg);
    transform: scale(1.05);
}

.page-nav-link-inline:active {
    transform: scale(0.9);
}

/* Active page: white text, unclickable */
.page-nav-link-inline.active {
    color: var(--text-color);
    font-size: 1.45rem;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    transform: none;
    text-shadow: none;
}

.page-nav-link-inline.active:hover {
    color: var(--text-color);
    transform: none;
}

.page-top-toolbar {
    border-bottom: 2px solid var(--btn-bg);
    padding-bottom: 10px;
    margin-bottom: 64px;
}

/* Shared study pages: each intro line has a quiz and a flashcards variant, toggled
   by body.flashcards-mode (set per studyMode in app.js). */
.study-intro-flash { display: none; }
body.flashcards-mode .study-intro-quiz { display: none; }
body.flashcards-mode .study-intro-flash { display: block; }

/* Constant toolbar geometry across pages: every link permanently reserves the width
   of its own enlarged (1.75rem) form via a hidden zero-height copy of its label
   (data-label), so enlarging the active link on one page never reflows its
   neighbours — the five links sit at identical positions on every page. */
.page-top-toolbar .page-nav-link-inline { text-align: center; }
.page-top-toolbar .page-nav-link-inline::after {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    font-size: 1.75rem;
    font-weight: 700;
    white-space: nowrap;
}

#setup-view .setup-top-nav,
#account-view .account-top-nav,
#week-view .week-top-nav,
#topic-view .topic-top-nav,
#alphabetical-topic-view .alpha-top-nav {
    width: min(980px, 100%);
    margin: 0 auto 12px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px 20px;
    /* A fifth toolbar link (Analytics) can exceed the row on mid widths; wrap
       to a centered second line instead of clipping. */
    flex-wrap: wrap;
}

#setup-view .setup-top-nav .page-nav-link-inline,
#account-view .account-top-nav .page-nav-link-inline,
#week-view .week-top-nav .page-nav-link-inline,
#topic-view .topic-top-nav .page-nav-link-inline,
#alphabetical-topic-view .alpha-top-nav .page-nav-link-inline {
    white-space: nowrap;
    line-height: 1;
    font-size: 1.45rem;
}

#setup-view .setup-top-nav .nav-curriculum,
#account-view .account-top-nav .nav-my-account {
    font-size: 1.75rem;
}

/* The "you are here" link is enlarged on every study-side toolbar. The study pages
   are shared between quiz and flashcards modes, so the enlargement follows the
   .active class (set per mode by updatePageNavLinks) rather than a fixed link; the
   data-label width reservation on every link keeps the bar geometry identical
   either way. */
#alphabetical-topic-view .alpha-top-nav .page-nav-link-inline.active,
#week-view .week-top-nav .page-nav-link-inline.active,
#topic-view .topic-top-nav .page-nav-link-inline.active {
    font-size: 1.75rem;
}

#setup-view .view-header-center p {
    margin-top: 5%;
}

#alphabetical-topic-view .view-header-center h1,
#week-view .view-header-center h1 {
    margin-top: 0;
    transform: none;
}

#week-view .back-arrow-container,
#topic-view .back-arrow-container,
#alphabetical-topic-view .back-arrow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    margin: 0;
    z-index: 2;
}

#setup-view .setup-top-nav .page-nav-link-inline:hover,
#account-view .account-top-nav .page-nav-link-inline:hover {
    color: var(--btn-bg);
    transform: scale(1.05);
}

#setup-view .setup-top-nav .page-nav-link-inline.active:hover,
#account-view .account-top-nav .page-nav-link-inline.active:hover {
    color: var(--btn-bg);
    transform: scale(1.03);
}

@media (max-width: 1200px) {
    .page-nav-sidebar-inline {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: auto;
        margin: 0 auto 30px;
        padding: 0 20px;
    }
    
    .page-nav-link-inline {
        font-size: 1.4rem;
    }

    .page-nav-link-inline.active {
        font-size: 1.55rem;
    }

    #setup-view .setup-top-nav,
    #account-view .account-top-nav,
    #week-view .week-top-nav,
#topic-view .topic-top-nav,
    #alphabetical-topic-view .alpha-top-nav {
        width: min(100%, 900px);
        gap: 16px;
    }

    #setup-view .setup-top-nav .page-nav-link-inline,
    #account-view .account-top-nav .page-nav-link-inline,
    #week-view .week-top-nav .page-nav-link-inline,
#topic-view .topic-top-nav .page-nav-link-inline,
    #alphabetical-topic-view .alpha-top-nav .page-nav-link-inline {
        font-size: 1.75rem;
    }

    #setup-view .setup-top-nav .nav-curriculum,
    #account-view .account-top-nav .nav-my-account {
        font-size: 2.05rem;
    }

    #alphabetical-topic-view .alpha-top-nav .nav-study-topics {
        font-size: 2.05rem;
    }
}

@media (max-width: 700px) {
    #setup-view .setup-top-nav,
    #account-view .account-top-nav,
    #week-view .week-top-nav,
    #topic-view .topic-top-nav,
    #alphabetical-topic-view .alpha-top-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    #setup-view .setup-top-nav .page-nav-link-inline,
    #account-view .account-top-nav .page-nav-link-inline,
    #week-view .week-top-nav .page-nav-link-inline,
    #topic-view .topic-top-nav .page-nav-link-inline,
    #alphabetical-topic-view .alpha-top-nav .page-nav-link-inline {
        transform: none !important;
        text-align: center;
        width: auto;
    }

    #setup-view .setup-top-nav .page-nav-link-inline.active,
    #account-view .account-top-nav .page-nav-link-inline.active,
    #week-view .week-top-nav .page-nav-link-inline.active,
    #topic-view .topic-top-nav .page-nav-link-inline.active,
    #alphabetical-topic-view .alpha-top-nav .page-nav-link-inline.active {
        font-size: 1.6rem;
    }
}
/* ==========================================
   FLASHCARDS
   ========================================== */
.flashcard-section-heading {
    text-align: center;
    font-size: 1.8rem;
    margin: 30px auto 18px auto;
    max-width: 900px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-color);
}
.flashcard-deck-grid { margin-bottom: 20px; }
.flashcard-grid-empty {
    text-align: center;
    color: var(--explanation-text);
    max-width: 700px;
    margin: 0 auto 20px auto;
    font-size: 0.95rem;
}
.flashcard-session-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    max-width: 900px;
    margin: 0 auto 26px auto;
}
.flashcard-session-controls .input-container { gap: 10px; }
.flashcard-session-controls label { color: var(--text-color); font-weight: 600; }
#flash-session-size {
    width: 72px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    text-align: center;
}
.flash-due-only-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.flash-due-only-label input { width: 16px; height: 16px; }

/* Study view */
#flashcard-study-view .flashcard-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: var(--fc-w, 640px);
    margin: 10px auto 24px auto;
    color: var(--explanation-text);
    font-size: 0.9rem;
}
.flashcard-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}
.flashcard-progress-fill {
    height: 100%;
    width: 0;
    background: var(--btn-bg);
    transition: width 0.25s ease;
}
/* --fc-w / --fc-h / --fc-scale are set on #flashcard-study-view by the resize handle
   (initFlashcardResize in app.js); they fall back to the default card size below. */
#flashcard-stage { max-width: var(--fc-w, 640px); margin: 0 auto; position: relative; }
.flashcard-scene {
    position: relative;
    perspective: 1400px;
    margin: 0 auto 22px auto;
    cursor: pointer;
    /* No text selection while reviewing a card. */
    user-select: none;
    -webkit-user-select: none;
}
.flashcard-inner {
    position: relative;
    width: 100%;
    min-height: var(--fc-h, 320px);
    transform-style: preserve-3d;
    transition: transform 0.18s ease;
}
.flashcard-inner.flipped { transform: rotateY(180deg); }
.flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 28px;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    /* Two-tone accessory gradient only when a bling color is active; none by default. */
    background-color: var(--dynamic-card-bg, var(--card-bg));
    background-image: var(--dynamic-gradient, none);
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    overflow-y: auto;
    transition: background-color 0.3s;
}
.flashcard-back { transform: rotateY(180deg); }
.flashcard-face-label {
    position: absolute;
    top: 14px;
    left: 18px;
    font-size: calc(0.75rem * var(--fc-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dynamic-text-color, var(--explanation-text));
    opacity: 0.75;
    font-weight: 700;
}
.flashcard-text {
    font-size: calc(1.45rem * var(--fc-scale, 1));
    line-height: 1.5;
    color: var(--dynamic-text-color, var(--text-color));
    white-space: pre-wrap;
}
/* Correct answer matches the (enlarged) question size; the explanation is smaller + gray. */
.flashcard-answer-text { font-weight: 600; }
.flashcard-expl-text {
    margin-top: 16px;
    font-size: calc(0.9rem * var(--fc-scale, 1));
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--dynamic-text-color, var(--explanation-text));
    opacity: 0.72;
}
.flashcard-expl-text:empty { display: none; }
/* Topic + question ID on the question side (mirrors active-quiz question meta). */
.flashcard-front-meta {
    position: absolute;
    bottom: 14px;
    left: 18px;
    /* Extra right inset clears the resize handle in the bottom-right corner. */
    right: 46px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    font-size: calc(0.8rem * var(--fc-scale, 1));
    color: var(--dynamic-text-color, var(--explanation-text));
    opacity: 0.82;
}
.flashcard-front-meta:empty { display: none; }
.flashcard-front-meta strong { font-weight: 700; }
/* Topic bottom-left, ID bottom-right. */
.flashcard-front-meta .flashcard-meta-item:first-child { text-align: left; }
.flashcard-front-meta .flashcard-meta-item:last-child { text-align: right; }
/* The hint and the meta row are both absolutely positioned, so neither reserves any space of
   its own. Reserve it here: the question face gets bottom padding covering the hint's offset
   plus its own line box, which shrinks the content box and lifts the vertically-centred
   question text clear of both. (An absolute `bottom` resolves against the padding box, so
   this moves the text without moving the hint.) The answer face has no hint and keeps the
   default padding. */
.flashcard-front { padding-bottom: calc(96px * var(--fc-scale, 1)); }
.flashcard-hint {
    position: absolute;
    /* Sits well clear of the topic/ID meta row pinned at bottom: 14px. Scales with the card
       so the gap stays proportional when the card is resized by the corner grip. */
    bottom: calc(66px * var(--fc-scale, 1));
    left: 0;
    right: 0;
    text-align: center;
    font-size: calc(0.82rem * var(--fc-scale, 1));
    color: var(--dynamic-text-color, var(--explanation-text));
    opacity: 0.7;
}
/* Resize grip in the flashcard's bottom-right corner: drag to size, click to reset. */
.flashcard-resize-handle {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--explanation-text);
    opacity: 0.65;
    cursor: nwse-resize;
    z-index: 10;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.flashcard-resize-handle:hover,
.flashcard-resize-handle:focus-visible,
.flashcard-resize-handle.dragging {
    opacity: 1;
    color: var(--btn-bg);
    border-color: var(--btn-bg);
    outline: none;
}
.flashcard-resize-handle.dragging { transform: scale(0.92); }
.flashcard-resize-handle svg { display: block; pointer-events: none; }
/* In Dark mode the arrows use the light --explanation-text, which vanishes on a pastel bling
   card. When a bling color is active it sets --dynamic-text-color (a dark, high-contrast color,
   the same one the "press Space to reveal" hint uses), so prefer it; with no bling active the var
   is unset and this falls back to the usual color. Light mode arrows are already legible and are
   left untouched. The dark-scoped hover rule below restores the accent color on hover/focus/drag,
   which the base override would otherwise outrank. */
body[data-theme="dark"] .flashcard-resize-handle {
    color: var(--dynamic-text-color, var(--explanation-text));
}
body[data-theme="dark"] .flashcard-resize-handle:hover,
body[data-theme="dark"] .flashcard-resize-handle:focus-visible,
body[data-theme="dark"] .flashcard-resize-handle.dragging {
    color: var(--btn-bg);
}
/* Center the deck title during a review (the shared .quiz-title-row uses space-between). */
#flashcard-study-view .quiz-title-row { justify-content: center; }
/* Both the "Show Answer" row and the (taller) 4-button grade row use this class and swap on flip.
   Reserve a constant height and vertically center the buttons so flipping the card doesn't shove
   the shortcut hints and "Finish Up" up or down. */
.flashcard-grade-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 58px;
    margin-bottom: 14px;
}
/* Grade buttons use the app's "Bling My Quiz" pastel palette with the same dark
   text convention as bling-colored topic cards (title #333, sub-text #555). */
.flash-grade-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 92px;
    padding: 10px 16px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    color: #333333;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.flash-grade-btn .grade-hint { font-size: 0.72rem; font-weight: 500; color: #555555; }
.grade-again { background: #ffc9c9; }
.grade-hard  { background: #ffe2c9; }
.grade-good  { background: #c9e4ff; }
.grade-easy  { background: #c9ffce; }
.flash-grade-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
#btn-show-answer {
    min-width: 200px;
    padding: 12px 20px;
    font-size: 1.05rem;
}
.flashcard-key-help {
    text-align: center;
    color: var(--explanation-text);
    font-size: 0.85rem;
    margin-top: 6px;
}
.flashcard-summary { max-width: 640px; margin: 0 auto; text-align: center; }
.flashcard-summary-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}
.flashcard-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--sidebar-bg);
}
.flashcard-summary-stat span { font-size: 0.85rem; color: var(--explanation-text); }
.flashcard-summary-stat strong { font-size: 1.5rem; color: var(--text-color); }

/* ==========================================
   FLASHCARDS SIDEBAR MODE
   On the Flashcards deck page (body.flashcards-mode) the standard quiz-building
   sidebar sections and the header score are hidden, and a dedicated flashcards
   sidebar block is shown in their place.
   ========================================== */
#flashcards-sidebar { display: none; }
/* No horizontal play. The expanded disclosure caret is rotated 90deg, and a
   rotated glyph's box reaches ~5px past the content edge, which was enough to
   make both sidebars scroll sideways. Clip it, and reserve a little room so
   nothing is visually cut. */
#sidebar, #flashcards-sidebar { overflow-x: hidden; overscroll-behavior-x: none; }
/* 6px clears the ~5px the rotated caret reaches past its layout box, so the
   overflow never exists rather than merely being clipped. */
#sidebar .sidebar-disclosure { padding-right: 6px; }
body.flashcards-mode .score-board { display: none !important; }
/* Hide the standard quiz-building sections, but KEEP the Bling palette (which now
   applies to flashcard decks) and show the dedicated flashcards sidebar. */
body.flashcards-mode #sidebar > .config-section:not(#bling-container) { display: none !important; }
/* flex: 1 1 auto — grow into whatever height Bling isn't using, so the
   flashcard controls run to the bottom of the sidebar when it is hidden and
   yield that space back when a selection brings it out again. */
body.flashcards-mode #flashcards-sidebar { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* In flashcards mode there is no growing history list to push the Bling palette down (as in
   quiz mode), so pin it to the bottom of the sidebar with an auto top margin. */
body.flashcards-mode #bling-container { margin-top: auto; }
/* Invisible scrolling (scope of settings can overflow the sidebar). */
#flashcards-sidebar { scrollbar-width: none; -ms-overflow-style: none; }
#flashcards-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

#flashcards-sidebar .config-section { margin-bottom: 0; }
#flashcards-sidebar .input-container { margin-bottom: 0; flex-wrap: wrap; }
/* Shared with the quizzes sidebar (#sidebar wraps both) so labels match in weight. */
#sidebar label { color: var(--text-color); font-weight: 600; }
/* The due counter and its Review button now live in .sidebar-hero at the top of
   the sidebar; only the selection-scoped colour rule below is still in use. */
.flash-due-selection-count {
    color: var(--btn-bg);
}
#flashcards-sidebar .checkbox-group { margin: 12px 0 0 0; }
.flash-review-cards-btn { width: 100%; padding: 12px; margin-top: 14px; font-size: 1.05rem; font-weight: 700; }

/* Dual-handle range: two stacked range inputs sharing one rail, with only the
   thumbs taking pointer events so both remain grabbable. */
.flash-range { margin: 4px 0 2px 0; }

/* "Default" reset under the slider. Greys out once the window already is the
   default, so it reports state as well as offering the action. */
.flash-range-reset {
    display: block;
    margin: 7px 0 0 auto;
    padding: 2px 0;
    background: none;
    border: none;
    color: var(--btn-bg);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.flash-range-reset:hover:not(:disabled) {
    text-decoration: underline;
    transform: none !important;
    filter: none !important;
}
.flash-range-reset:disabled {
    color: var(--explanation-text);
    opacity: 0.4;
    cursor: default;
    text-decoration: none;
}

.flash-range-note { margin: 0 0 8px 0; }
.flash-range-controls { margin: 10px 0 0 0; }
.flash-qty-controls {
    margin: 0 0 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.flash-qty-controls.is-disabled { opacity: 0.45; }
.flash-qty-note { margin: 2px 0 0 0; }
/* The quantity rail fills from the left, so no separate left offset is set. */
#flash-qty-fill { left: 0; }
.flash-range-controls[hidden] { display: none; }
.flash-range-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--explanation-text);
}
.flash-range-head strong { color: var(--btn-bg); font-variant-numeric: tabular-nums; }
.flash-range-track { position: relative; height: 26px; margin-top: 2px; }
.flash-range-rail,
.flash-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}
.flash-range-rail { left: 0; right: 0; background: var(--border-color); }
.flash-range-fill { background: var(--btn-bg); }
.flash-range-track input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.flash-range-track input[type="range"]:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
.flash-range-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: none; height: 26px; }
.flash-range-track input[type="range"]::-moz-range-track { background: transparent; border: none; height: 26px; }
.flash-range-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--btn-bg);
    border: 2px solid var(--sidebar-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: grab;
    margin-top: 5.5px;
}
.flash-range-track input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--btn-bg);
    border: 2px solid var(--sidebar-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: grab;
}
.flash-range-track input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.flash-range-track input[type="range"]::-moz-range-thumb:active { cursor: grabbing; }

/* Collapsible scheduling settings. The toggle button itself is styled by
   .sidebar-disclosure in the sidebar design system above. */
.flash-settings-caret { transition: transform 0.2s ease; display: inline-block; }
.sidebar-disclosure[aria-expanded="true"] .flash-settings-caret { transform: rotate(90deg); }
.flash-settings-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.flash-settings-panel[hidden] { display: none; }
.flash-settings-note { font-size: 0.75rem; color: var(--explanation-text); margin: 0 0 4px 0; line-height: 1.3; }
.flash-settings-panel .input-container { justify-content: space-between; }
.flash-settings-panel input[type="number"] {
    width: 68px;
    padding: 5px 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    text-align: center;
}

/* Head row above the preview: scope on the left, view toggle on the right. */
.flash-advanced-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.flash-advanced-head .flash-advanced-scope {
    border-bottom: none;
    padding-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flash-advanced-head .flash-range-reset { margin: 0; flex: 0 0 auto; }

/* Miniature month calendar — the same projection as the table, by day. */
.flash-cal { margin-top: 10px; }
.flash-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}
.flash-cal-month {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.02em;
}
.flash-cal-arrow {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    font-size: 0.9rem;
    cursor: pointer;
}
.flash-cal-arrow:hover { border-color: var(--btn-bg); color: var(--btn-bg); transform: none !important; filter: none !important; }
.flash-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.flash-cal-dow {
    text-align: center;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--explanation-text);
    padding-bottom: 2px;
}
.flash-cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.flash-cal-day.is-blank { border-color: transparent; }
.flash-cal-day.is-today { border-color: var(--btn-bg); }
/* Heat layer: the theme accent at an opacity set inline from the day's share. */
.flash-cal-fill {
    position: absolute;
    inset: 0;
    background: var(--btn-bg);
    pointer-events: none;
}
/* Date tucked into the top-right corner; the count owns the centre. */
.flash-cal-num {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.54rem;
    font-weight: 600;
    color: var(--explanation-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.85;
}
.flash-cal-count {
    position: relative;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* Once the fill is saturated, force light text so the numbers survive in the
   light theme as well as the dark one. */
.flash-cal-day.is-hot .flash-cal-count { color: #fff; }
.flash-cal-day.is-hot .flash-cal-num { color: rgba(255, 255, 255, 0.85); }
.flash-cal-foot {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--explanation-text);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.flash-cal-foot-row { display: flex; justify-content: space-between; gap: 8px; }
.flash-cal-foot strong { color: var(--btn-bg); font-variant-numeric: tabular-nums; }
.flash-cal-hint { margin: 5px 0 0 0; font-size: 0.66rem; line-height: 1.45; opacity: 0.85; }

/* Advanced Settings — bulk reschedule preview table.
   Scoped to its own classes so it can't reach the Desired Retention row. */
.flash-advanced-scope {
    font-size: 0.85rem;
    color: var(--text-color);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
.flash-advanced-scope strong { color: var(--btn-bg); }
.flash-advanced-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.8rem;
    table-layout: fixed;
}
.flash-advanced-grid th,
.flash-advanced-grid td {
    text-align: left;
    padding: 4px 6px 4px 0;
    font-weight: 500;
    color: var(--text-color);
}
.flash-advanced-grid thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--explanation-text);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}
.flash-advanced-grid tbody tr + tr th,
.flash-advanced-grid tbody tr + tr td { border-top: 1px solid var(--border-color); }
.flash-advanced-grid tbody th { white-space: nowrap; }
.flash-advanced-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.flash-advanced-grid tr.is-empty th,
.flash-advanced-grid tr.is-empty td { opacity: 0.45; }
/* Share cell: a proportional bar with the percentage sitting on top of it. */
.flash-advanced-share { position: relative; width: 42%; }
.flash-advanced-bar {
    display: block;
    height: 14px;
    min-width: 2px;
    border-radius: 3px;
    background: var(--btn-bg);
    opacity: 0.35;
}
.flash-advanced-share em {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}
.flash-advanced-empty { margin-top: 8px; }
#btn-flash-advanced-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================
   HOME PAGE — strategy method names + flashcard illustration
   ========================================== */
.home-strategy-table td.home-strategy-method {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--btn-bg);
    letter-spacing: 0.01em;
    vertical-align: middle;
}

/* Method labels: a darker, readable hue of each associated color in light mode;
   reverts to the original pastel in dark mode (where the pastels read well). */
.home-strategy-table td.home-strategy-method.method-recall     { color: #ff9999; }
.home-strategy-table td.home-strategy-method.method-interleave { color: #ffe699; }
.home-strategy-table td.home-strategy-method.method-exam       { color: #99ffa6; }
.home-strategy-table td.home-strategy-method.method-spaced     { color: #cc99ff; }
body[data-theme="dark"] .home-strategy-table td.home-strategy-method.method-recall     { color: #ffc9c9; }
body[data-theme="dark"] .home-strategy-table td.home-strategy-method.method-interleave { color: #fff5c9; }
body[data-theme="dark"] .home-strategy-table td.home-strategy-method.method-exam       { color: #c9ffce; }
body[data-theme="dark"] .home-strategy-table td.home-strategy-method.method-spaced     { color: #e2c9ff; }

.home-flashcard-demo { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 475px; margin: 0 auto; }
.home-fc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    min-height: 210px;
    padding: 34px 26px 26px;
    border-radius: 16px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(155deg, #c9e4ff 0%, #e2c9ff 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
.home-fc-label {
    position: absolute;
    top: 13px;
    left: 18px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(31, 41, 55, 0.55);
}
.home-fc-q { font-size: 1.15rem; font-weight: 700; color: #1f2937; line-height: 1.45; }
.home-fc-hint { font-size: 0.76rem; color: rgba(31, 41, 55, 0.6); }
.home-fc-grades { display: flex; gap: 8px; justify-content: center; }
.home-fc-grade {
    flex: 1 1 0;
    text-align: center;
    padding: 10px 4px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.home-fc-grade:hover { filter: brightness(1.05); transform: translateY(-2px); }
.home-fc-grade:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
.home-fc-grade.g-again { background: #ffc9c9; }
.home-fc-grade.g-hard  { background: #ffe2c9; }
.home-fc-grade.g-good  { background: #c9e4ff; }
.home-fc-grade.g-easy  { background: #c9ffce; }

/* Favorite-cards inline count. */
.flash-inline-count { color: var(--explanation-text); font-weight: 600; }

/* ==========================================
   FLASHCARDS v3 — dropdowns, deck footer, curriculum settings, home flip
   ========================================== */
/* Selected Decks dropdown (reuses the .sidebar-disclosure button). */
.flash-selected-panel { list-style: none; margin: 8px 0 0 0; padding: 0; max-height: 170px; overflow-y: auto; scrollbar-width: none; }
.flash-selected-panel::-webkit-scrollbar { display: none; }
.flash-selected-panel li { font-size: 0.85rem; color: var(--text-color); padding: 3px 0 3px 16px; position: relative; }
.flash-selected-panel li::before { content: '\2022'; position: absolute; left: 2px; color: var(--btn-bg); }
.flash-selected-empty { color: var(--explanation-text); font-style: italic; }
.flash-selected-empty::before { content: '' !important; }
/* "Select by Week" control on the Quizzes and Flashcards pages (relocated from the sidebar). */
.page-week-select { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 28px auto; max-width: 800px; }
.page-week-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.page-week-btn { min-width: 200px; }

/* On-hover dropdown: hovering (or keyboard-focusing) the "Select by Week" button reveals a
   floating panel of week options. The weeks lay out horizontally, wrapping to a new row after
   a maximum of 4 per row (5 per row on desktop — see the min-width: 951px rule below). */
.page-week-dropdown { position: relative; display: inline-flex; }
.page-week-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 8px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: max-content;
    /* 4 chips (110px) + 3 gaps (8px) + padding (2 x 12px) + border = 490px → the 5th wraps. */
    max-width: min(90vw, 490px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Transparent bridge over the button→panel gap so the pointer can cross without closing it. */
.page-week-panel::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
/* Visibility is purely hover-driven: the panel appears while the pointer is over the dropdown
   and disappears the moment it leaves. (No :focus-within, which would otherwise keep the panel
   open after a click retained focus on a week chip.) */
.page-week-dropdown:hover .page-week-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.page-week-panel .page-week-chip { width: 110px; min-width: 0; margin: 0; }
/* Additive week selection: a chip fills with the accent blue while every accessible
   topic of its week is in the current selection (kept in sync by syncWeekChipStates).
   Clicking a lit chip removes just that week from the selection. */
.page-week-panel .page-week-chip.is-week-active {
    background-color: var(--btn-bg);
    border-color: var(--btn-bg);
    color: #fff;
}
/* Desktop only: widen to 608px so five weeks sit on one row (5 x 110 + 4 x 8 + 24 + 2).
   The panel is centred on its own button rather than on the viewport, and the Flashcards
   button sits right of centre, so below this breakpoint a 608px panel runs off the right
   edge — there it stays at 490px and the fifth chip wraps. */
@media (min-width: 951px) {
    .page-week-panel { max-width: min(90vw, 608px); }
}

/* Per-deck footer on flashcard deck cards. */
.flash-deck-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--explanation-text);
}
/* Counters match the topic-description color (footer color) in every theme, rather than
   standing out in the brighter --text-color. Blinged cards set the color inline in JS. */
.flash-deck-footer strong { color: inherit; }

/* Flashcard Settings grid on the Curriculum Setup page. */
.flash-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 22px; }
.flash-settings-grid .input-container { justify-content: space-between; margin-bottom: 0; }
.flash-settings-grid label { color: var(--text-color); font-weight: 600; }
.flash-settings-grid input[type="number"] {
    width: 82px; padding: 6px 8px; border: 1px solid var(--border-color);
    border-radius: 6px; background: var(--card-bg); color: var(--text-color); text-align: center;
}

/* FSRS desired-retention slider (Curriculum Setup) */
.flash-retention-row label { color: var(--text-color); display: block; margin-bottom: 8px; }
.flash-retention-row input[type="range"] {
    width: 100%; max-width: 420px; display: block;
    accent-color: var(--btn-bg); cursor: pointer;
}
#flash-retention-label { font-variant-numeric: tabular-nums; }

/* Anki remote / clicker button mapping (Curriculum Setup) */
.remote-map-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.remote-map-row:last-child { border-bottom: none; }
.remote-map-action { flex: 1 1 200px; color: var(--text-color); font-weight: 600; }
.remote-map-controls { display: flex; align-items: center; gap: 8px; }
.remote-map-defaults { display: block; font-weight: 500; font-size: 0.8rem; color: var(--explanation-text); }
.remote-key-chip {
    min-width: 110px;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
}
.remote-key-chip-empty { color: var(--explanation-text); font-weight: 500; }
.remote-key-chip.capturing {
    border-color: var(--btn-bg);
    color: var(--btn-bg);
    animation: remote-capture-pulse 1.1s ease-in-out infinite;
}
@keyframes remote-capture-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(77, 163, 255, 0); }
}
.remote-set-btn, .remote-clear-btn { padding: 6px 14px; }
.remote-clear-btn:disabled { opacity: 0.45; cursor: default; }

/* Home hero callout: native Anki-remote support, points at the demo card below.
   Sits low in the hero→flashcards gap (near the demo card it talks about): the
   row's usual 160px top margin moves onto the callout and the flashcard row keeps
   only 40px, so the total hero→row distance is unchanged. */
.home-remote-callout {
    text-align: center;
    max-width: 800px;
    margin: 48px auto 0;
    padding: 0 20px;
    font-size: 1.15rem;
    color: var(--text-color);
    line-height: 1.5;
}
.marketing-row.home-fc-row { margin-top: 32px; }
/* Pulled the flashcard section up toward the fold so it's in view on first load:
   trimmed the callout's top margin (was 160px) and the fc-row's top gap. */
@media (max-width: 950px) {
    .home-remote-callout { margin-top: 40px; }
}

/* Home example flashcard — clickable 3D flip. */
.home-fc-scene { perspective: 1300px; cursor: pointer; }
.home-fc-inner { position: relative; transform-style: preserve-3d; transition: transform 0.5s; min-height: 275px; }
.home-fc-inner.flipped { transform: rotateY(180deg); }
.home-fc-scene .home-fc-card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 0; margin: 0; }
.home-fc-back { transform: rotateY(180deg); }

/* Larger home content on wide screens. */
@media (min-width: 951px) {
    .home-flashcard-demo { max-width: 550px; }
    .home-fc-inner { min-height: 313px; }
    .marketing-text h2, .home-topics-section h2, .home-strategy-section h2 { font-size: 2.35rem; }
    .marketing-text p { font-size: 1.18rem; line-height: 1.62; }
    .home-strategy-table td, .home-strategy-table th { font-size: 1.06rem; }
    .home-strategy-table td.home-strategy-method { font-size: 1.5rem; }
}

/* Flashcards sidebar / standard sidebar spacing parity. */
body.flashcards-mode #flashcards-sidebar { gap: 22px; }

/* No hover size changes for any sidebar button. */
#sidebar button:hover:not(:disabled) { transform: none !important; }
#sidebar .color-btn:hover:not(:disabled) { transform: none !important; }

/* "Finish Up" plain-text link on the active review page. */
.flashcard-finish-link {
    display: inline-block;
    margin-top: 6px;
    background: none;
    border: none;
    color: var(--btn-bg);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: underline;
}
.flashcard-finish-link:hover { color: var(--text-color); }
/* Alphabet nav + search on the Flashcards page reuse the Study-by-Topic styles. */

/* ==========================================
   HOME "Modular Quizzes" multiple-choice demo
   ========================================== */
.home-quiz-demo { width: 100%; max-width: 640px; margin: 0 auto; }
.home-quiz-card {
    position: relative;
    padding: 32px 30px 28px;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.home-quiz-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; opacity: 0.55; }
.home-quiz-q { font-size: 1.2rem; font-weight: 700; line-height: 1.45; margin: 0 0 8px; }
.home-quiz-number { color: var(--btn-bg); }
.home-quiz-meta { font-size: 0.82rem; color: var(--explanation-text); margin: 0 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-quiz-options { display: flex; flex-direction: column; gap: 9px; }
.home-quiz-opt {
    text-align: left;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(127, 127, 127, 0.10);
    color: inherit;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.home-quiz-opt:hover:not(.is-correct):not(.is-incorrect) { border-color: var(--btn-bg); }
.home-quiz-opt.is-correct { background: #c9ffce; color: #14532d; border-color: #28a745; }
.home-quiz-opt.is-incorrect { background: #ffc9c9; color: #7f1d1d; border-color: #d9534f; }
.home-quiz-hint { display: block; margin-top: 16px; text-align: center; font-size: 0.8rem; opacity: 0.65; }

/* ===================== Analytics page ===================== */
/* Chart palette. Status trio (correct/incorrect/unattempted) is pastel by
   design; green/red lightness is deliberately separated so the pair stays
   distinct under red-green color blindness (validated), and every chart
   also carries labels + legend, so color never works alone. */
:root {
    --an-good: #3f9e6e;      /* correct */
    --an-bad: #f0aaaa;       /* incorrect */
    --an-neutral: #a6adb7;   /* unattempted / new */
    --an-hard: #dfa254;      /* grade: hard */
    --an-easy: #6e9bd8;      /* grade: easy / young cards */
    --an-quiz: #3d87d6;      /* questions-per-day series */
    --an-cards: #9d86d9;     /* cards-per-day series */
}
[data-theme="dark"] {
    --an-good: #a8e6c0;
    --an-bad: #d98890;
    --an-neutral: #82898f;
    --an-hard: #f2c98a;
    --an-easy: #9fc0f0;
    --an-quiz: #4da3ff;
    --an-cards: #c5b3f0;
}

.analytics-wrap { max-width: 1180px; margin: 0 auto; padding: 6px 8px 70px; }
/* Contextual toolbar — mirrors the setup/account/flashcards top-nav layout, but
   flex-wraps since it carries a fifth link. */
#analytics-view .analytics-top-nav {
    width: min(980px, 100%);
    margin: 0 auto 22px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px 20px;
    flex-wrap: wrap;
}
#analytics-view .analytics-top-nav .page-nav-link-inline { white-space: nowrap; line-height: 1; font-size: 1.45rem; }
#analytics-view .analytics-top-nav .nav-analytics.active { font-size: 1.75rem; }
.analytics-subtitle { margin: 0 auto 24px; color: var(--explanation-text); font-size: 0.95rem; text-align: center; max-width: 640px; }

.an-section-title {
    font-size: 1.25rem;
    margin: 34px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

/* Stat tiles */
.an-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.an-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
}
.an-tile-label { font-size: 0.76rem; color: var(--explanation-text); letter-spacing: 0.01em; }
.an-tile-value { font-size: 1.7rem; font-weight: 650; color: var(--text-color); margin-top: 2px; line-height: 1.15; }
.an-tile-sub { font-size: 0.74rem; color: var(--explanation-text); margin-top: 3px; }

/* Chart cards */
.an-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.an-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
    min-width: 0;
}
.an-full { margin-top: 12px; }
.an-card h3 { margin: 0 0 3px; font-size: 1rem; color: var(--text-color); }
.an-card-sub { margin: 0 0 14px; font-size: 0.78rem; color: var(--explanation-text); }
.an-empty { padding: 22px 8px; text-align: center; color: var(--explanation-text); font-size: 0.88rem; }

/* ---- Analytics: Review Calendar ---- */
.an-cal-card { grid-column: 1 / -1; }
.an-cal-flag { color: var(--an-hard); }
.an-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.an-cal-month {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 9.5em;
}
.an-cal-arrow {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-color);
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.an-cal-arrow:hover { border-color: var(--btn-bg); color: var(--btn-bg); transform: none !important; filter: none !important; }
.an-cal-today {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--explanation-text);
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.an-cal-today:hover { border-color: var(--btn-bg); color: var(--btn-bg); transform: none !important; filter: none !important; }

.an-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.an-cal-dow {
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--explanation-text);
    padding-bottom: 4px;
}
.an-cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    /* Square cells: each day's height tracks its grid-column width, so the whole
       calendar scales up with the card instead of flattening into rectangles. */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    overflow: hidden;
}
.an-cal-day.is-blank { border-color: transparent; }
.an-cal-day.is-quiet { opacity: 0.55; }
.an-cal-day.is-today { border-color: var(--btn-bg); border-width: 2px; }
.an-cal-fill { position: absolute; inset: 0; background: var(--an-cards); pointer-events: none; }
.an-cal-day.is-overdue .an-cal-fill { background: var(--an-hard); }
.an-cal-num {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--explanation-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.85;
}
.an-cal-count {
    position: relative;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.an-cal-day.is-hot .an-cal-count { color: #fff; }
.an-cal-day.is-hot .an-cal-num { color: rgba(255, 255, 255, 0.85); }
/* Per-day deck breakdown, tucked under the card count. */
.an-cal-decks {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    color: var(--explanation-text);
    opacity: 0.85;
    pointer-events: none;
}
.an-cal-day.is-hot .an-cal-decks { color: rgba(255, 255, 255, 0.8); }
/* Small screens: the squares shrink enough that the deck line no longer fits. */
@media (max-width: 700px) {
    .an-cal-decks { display: none; }
}
.an-cal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.an-cal-stat { display: flex; flex-direction: column; gap: 2px; }
.an-cal-stat span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--explanation-text); }
.an-cal-stat strong { font-size: 1rem; color: var(--text-color); font-variant-numeric: tabular-nums; }

/* Donuts */
.an-donut-layout { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.an-donut { flex: 0 0 auto; }
.an-donut svg { display: block; overflow: visible; }
.an-seg { transition: opacity 0.15s ease; cursor: default; }
.an-donut:hover .an-seg { opacity: 0.45; }
.an-donut .an-seg:hover { opacity: 1; }
.an-donut-hero { font-size: 30px; font-weight: 700; fill: var(--text-color); }
.an-donut-hero-sub { font-size: 11px; fill: var(--explanation-text); }

.an-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 150px; }
.an-legend li { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; color: var(--text-color); }
.an-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; align-self: center; }
.an-legend .lg-label { flex: 1 1 auto; }
.an-legend .lg-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.an-legend .lg-pct { color: var(--explanation-text); font-size: 0.76rem; font-variant-numeric: tabular-nums; }

/* Stacked status tracks (per subject / per topic) */
.an-track-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 84px; align-items: center; gap: 12px; padding: 5px 0; }
.an-track-name { font-size: 0.84rem; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-track { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.an-track .tseg { min-width: 3px; }
.an-track-val { font-size: 0.78rem; color: var(--explanation-text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mini column charts (attempt trend, daily activity) */
.an-cols { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding-top: 6px; }
.an-col { flex: 1 1 0; border-radius: 4px 4px 0 0; min-width: 4px; position: relative; }
.an-col:hover { opacity: 0.8; }
.an-cols-axis { display: flex; gap: 4px; margin-top: 4px; border-top: 1px solid var(--border-color); padding-top: 4px; }
.an-cols-axis span { flex: 1 1 0; text-align: center; font-size: 0.62rem; color: var(--explanation-text); overflow: hidden; white-space: nowrap; }
.an-activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.an-mini-title { font-size: 0.8rem; color: var(--text-color); margin: 0 0 2px; display: flex; align-items: center; gap: 7px; }
.an-mini-title .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Table views (the no-hover, screen-reader-friendly twin of each chart) */
details.an-table { margin-top: 14px; }
details.an-table summary { cursor: pointer; font-size: 0.8rem; color: var(--explanation-text); user-select: none; }
details.an-table summary:hover { color: var(--text-color); }
.an-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.82rem; }
.an-table th { text-align: left; color: var(--explanation-text); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--border-color); }
.an-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-color); }
.an-table td.num, .an-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Shared tooltip */
.an-tooltip {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.12s ease;
    max-width: 260px;
    white-space: pre-line;
}
.an-tooltip.visible { opacity: 1; }
.an-tooltip .tt-title { font-weight: 650; margin-bottom: 2px; }

@media (max-width: 640px) {
    .an-track-row { grid-template-columns: minmax(90px, 130px) 1fr 70px; gap: 8px; }
    .an-donut-layout { justify-content: center; }
}