/* 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-study-cta,
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,
#decks-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 (Settings 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 Settings 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-study-cta,
#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-study-cta {
    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, 860px); 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, 520px);
    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 Settings 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 (Settings) */
.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 (Settings) */
.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; }
}


/* ==========================================================================
   SCHEDULER (scheduler.js) — optional terms/weeks organizational layer.
   ========================================================================== */

/* Week-navigation visibility: hidden until a schedule is active and the
   "Show week navigation" checkbox is on (body class set by scheduler.js). */
body.no-week-nav .page-week-dropdown { display: none; }
body.no-week-nav #go-weeks-btn { display: none; }

.sched-section-heading { font-size: 1.5rem; text-align: center; margin: 30px 0 25px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.sched-term-heading { text-align: center; font-size: 2rem; color: var(--btn-bg); border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin: 10px 0 6px 0; pointer-events: none; }
.sched-unplaced-note { text-align: center; opacity: 0.8; font-size: 0.95rem; cursor: pointer; text-decoration: underline; margin: 14px 0 0 0; }
.sched-chip-empty { font-size: 0.85rem; opacity: 0.8; margin: 6px; max-width: 240px; }

.sched-mode-grid { grid-template-columns: repeat(3, 1fr); max-width: 950px; }
.sched-step-copy { text-align: center; opacity: 0.85; margin: 0 0 20px 0; }

.sched-toggle-row { max-width: 650px; margin: 0 auto 30px auto; padding: 20px; background-color: var(--sidebar-bg); border-radius: 8px; }
.sched-toggle-inner { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.sched-toggle-inner label { font-size: 1.1rem; font-weight: 600; color: var(--text-color); cursor: pointer; margin: 0; }
.sched-toggle-desc { color: var(--text-color); opacity: 0.8; margin: 0 0 0 35px; font-size: 0.95rem; }

.sched-overview { max-width: 650px; margin: 0 auto 30px auto; padding: 20px; background-color: var(--sidebar-bg); border-radius: 8px; }
.sched-overview-row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--border-color); }
.sched-overview-row:last-of-type { border-bottom: none; }
.sched-overview-term { font-weight: 600; }
.sched-overview-meta { opacity: 0.8; }
.sched-overview .sched-toggle-desc { margin: 12px 0 0 0; }

.sched-input { background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.95rem; }
.sched-input:focus { outline: 2px solid var(--btn-bg); outline-offset: 1px; }

.sched-shape-list { max-width: 520px; margin: 0 auto 10px auto; display: flex; flex-direction: column; gap: 12px; }
.sched-shape-row { display: flex; align-items: center; gap: 12px; }
.sched-term-name-input { flex: 1; min-width: 0; font-weight: 600; }
.sched-shape-label { opacity: 0.8; }
.sched-weeks-input { width: 74px; }
.sched-wizard-nav { display: flex; justify-content: center; gap: 14px; margin: 24px 0 10px 0; }
.sched-primary-btn { border-color: var(--btn-bg); color: var(--btn-bg); font-weight: 700; }

.sched-editor-toolbar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px 0; }
.sched-tool-btn { padding: 8px 14px; }
.sched-delete-warn { font-weight: 700; color: #e05252; }

.sched-columns { display: flex; gap: 22px; align-items: flex-start; }
.sched-tray { flex: 0 0 340px; position: sticky; top: 84px; max-height: 74vh; overflow-y: auto; padding: 14px; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.sched-search { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.sched-tray-heading { font-size: 0.95rem; margin: 12px 0 4px 0; opacity: 0.85; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; }
.sched-tray-heading-new { color: var(--btn-bg); opacity: 1; }
.sched-tray-dropzone { border: 1px dashed var(--border-color); border-radius: 6px; padding: 8px; text-align: center; font-size: 0.82rem; opacity: 0.75; }

.sched-pill { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 6px; background-color: var(--bg-color); cursor: grab; user-select: none; }
.sched-pill:hover { border-color: var(--btn-bg); }
.sched-pill-placed { opacity: 0.72; }
.sched-pill-armed { outline: 2px solid var(--btn-bg); outline-offset: 1px; opacity: 1; }
.sched-pill-title { flex: 1; min-width: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-pill-meta { font-size: 0.72rem; opacity: 0.65; white-space: nowrap; }
.sched-pill-btn { border: none; background: none; color: var(--text-color); opacity: 0.7; cursor: pointer; font-size: 0.9rem; padding: 0 2px; }
.sched-pill-btn:hover { opacity: 1; color: var(--btn-bg); }

.sched-rename-box { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sched-rename-input { width: 100%; box-sizing: border-box; }
.sched-rename-original { font-size: 0.78rem; opacity: 0.65; }
.sched-rename-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sched-board { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sched-term-block { background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; }
.sched-term-name-row { margin-bottom: 12px; }
.sched-term-name-row .sched-term-name-input { font-size: 1.05rem; width: 240px; max-width: 100%; }
.sched-week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sched-week-bucket { border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--bg-color); padding: 8px; min-height: 74px; display: flex; flex-direction: column; gap: 5px; }
.sched-bucket-ready { border-style: dashed; border-color: var(--btn-bg); cursor: pointer; }
.sched-drop-hover { border-color: var(--btn-bg); box-shadow: 0 0 0 2px var(--btn-bg) inset; }
.sched-bucket-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.92rem; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; }
.sched-bucket-count { font-size: 0.78rem; opacity: 0.65; font-weight: 400; }
.sched-bucket-pill { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-color); border-radius: 5px; padding: 4px 6px; font-size: 0.8rem; background-color: var(--sidebar-bg); cursor: grab; }
.sched-bucket-pill:hover { border-color: var(--btn-bg); }
.sched-bucket-pill-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 950px) {
    .sched-mode-grid { grid-template-columns: 1fr; }
    .sched-columns { flex-direction: column; }
    .sched-tray { flex: 1 1 auto; width: 100%; box-sizing: border-box; max-height: 45vh; }
}


/* Scheduler view toolbar — mirrors the Settings/Account toolbar geometry. */
#scheduler-view .scheduler-top-nav { width: min(980px, 100%); margin: 0 auto 12px; display: flex; justify-content: center; align-items: baseline; gap: 12px 20px; flex-wrap: wrap; }
#scheduler-view .scheduler-top-nav .page-nav-link-inline { white-space: nowrap; line-height: 1; font-size: 1.45rem; }
#scheduler-view .scheduler-top-nav .nav-curriculum { font-size: 1.75rem; }
#scheduler-view .scheduler-top-nav .page-nav-link-inline:hover { color: var(--btn-bg); transform: scale(1.05); }
#scheduler-view .scheduler-top-nav .page-nav-link-inline.active:hover { color: var(--btn-bg); transform: scale(1.03); }
@media (max-width: 1200px) {
    #scheduler-view .scheduler-top-nav { width: min(100%, 900px); gap: 16px; }
    #scheduler-view .scheduler-top-nav .page-nav-link-inline { font-size: 1.75rem; }
    #scheduler-view .scheduler-top-nav .nav-curriculum { font-size: 2.05rem; }
}
@media (max-width: 700px) {
    #scheduler-view .scheduler-top-nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
    #scheduler-view .scheduler-top-nav .page-nav-link-inline { transform: none !important; text-align: center; width: auto; }
    #scheduler-view .scheduler-top-nav .page-nav-link-inline.active { font-size: 1.6rem; }
}



/* ===================== SCHEDULER v2 additions ===================== */

/* Larger selector cards (year, schedule mode, wizard choices). */
.sched-select-grid { grid-template-columns: repeat(2, 1fr); max-width: 800px; gap: 24px; }
.sched-select-card { position: relative; cursor: pointer; padding: 30px 26px; min-height: 120px; transition: transform 0.12s ease, border-color 0.12s ease; }
.sched-select-card .topic-title { font-size: 1.5rem; margin-bottom: 8px; }
.sched-select-card .topic-desc { font-size: 1.02rem; line-height: 1.45; }
.sched-select-card:not(.disabled-card):hover { transform: translateY(-2px); border-color: var(--btn-bg); }
.sched-select-card.disabled-card { cursor: not-allowed; }
.sched-active-badge { position: absolute; top: 12px; right: 12px; background-color: var(--btn-bg); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }

.sched-step-indicator { text-align: center; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; margin: -16px 0 18px 0; }

/* Osteopathic filter row in the editor tray (mirrors the Settings toggle). */
.sched-om-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background-color: var(--bg-color); }
.sched-om-row label { font-size: 0.9rem; font-weight: 600; cursor: pointer; margin: 0; }

/* Tap-to-place helper bar. */
.sched-armed-bar { max-width: 760px; margin: 0 auto 16px auto; padding: 10px 16px; border: 1px solid var(--btn-bg); border-radius: 8px; background-color: var(--sidebar-bg); text-align: center; font-size: 0.95rem; }

/* Drag/tap feedback: the moved topic glows, its origin keeps a colorful shadow. */
.sched-pill-flash { border-color: var(--btn-bg) !important; box-shadow: 0 0 0 2px var(--btn-bg), 0 0 14px 2px rgba(77, 171, 247, 0.45); }
.sched-bucket-origin { border-color: var(--btn-bg); border-style: dashed; box-shadow: inset 0 0 18px 2px rgba(77, 171, 247, 0.22); }
.sched-origin-label { font-size: 0.74rem; color: var(--btn-bg); font-weight: 700; opacity: 0.9; }
.sched-dragging { opacity: 0.5; box-shadow: 0 0 0 2px var(--btn-bg); }

/* Year tag beside a term name in the custom board. */
.sched-year-tag { display: inline-block; background-color: var(--btn-bg); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-right: 10px; vertical-align: middle; }
.sched-term-name-row { display: flex; align-items: center; }

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


/* Collapsible Settings sections (collapsed by default). */
.setup-section { margin-bottom: 26px; }
.setup-section-summary { font-size: 1.5rem; font-weight: 700; text-align: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 0; cursor: pointer; list-style: none; position: relative; user-select: none; }
.setup-section-summary::-webkit-details-marker { display: none; }
.setup-section-summary::after { content: '\25B8'; position: absolute; right: 8px; top: 0; font-size: 1.2rem; opacity: 0.7; transition: transform 0.15s ease; }
.setup-section[open] .setup-section-summary::after { transform: rotate(90deg); }
.setup-section-summary:hover { color: var(--btn-bg); }
.setup-section-body { padding-top: 25px; }



/* ===================== SCHEDULER v3 additions ===================== */

/* Settings-page Scheduler hero (prime focus, not a collapsible). */
.sched-hero { text-align: center; padding: 30px 26px 26px 26px; margin: 0 0 34px 0; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 10px; }
.sched-hero-title { font-size: 1.9rem; margin: 0 0 12px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.sched-hero-desc { max-width: 640px; margin: 0 auto 20px auto; opacity: 0.85; line-height: 1.55; }
.sched-open-btn { display: inline-block; padding: 14px 46px; font-size: 1.25rem; font-weight: 700; font-family: inherit; color: #fff; background-color: var(--btn-bg); border: none; border-radius: 8px; cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease; }
.sched-open-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.sched-hero-status { margin: 14px 0 0 0; font-size: 0.92rem; opacity: 0.75; }

/* Sticky confirm bar — edits apply only on Confirm Changes. */
.sched-confirm-bar { display: none; }
.sched-confirm-bar-visible { display: flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 1200; align-items: center; gap: 14px; padding: 12px 20px; background-color: var(--sidebar-bg); border: 1px solid var(--btn-bg); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); max-width: min(92vw, 760px); }
.sched-confirm-label { font-size: 0.95rem; font-weight: 600; }
.sched-confirm-btn { border-width: 2px; }

/* Per-topic pastel color controls. */
.sched-color-dot { width: 16px; height: 16px; min-width: 16px; border-radius: 50%; border: 1px solid var(--border-color); background-color: transparent; cursor: pointer; padding: 0; }
.sched-color-dot:hover { border-color: var(--btn-bg); }
.sched-color-dot-empty { background-image: linear-gradient(135deg, transparent 44%, var(--border-color) 46%, var(--border-color) 54%, transparent 56%); }
.sched-color-box { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; padding-top: 6px; }
.sched-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-color); cursor: pointer; padding: 0; font-size: 0.7rem; line-height: 1; color: var(--text-color); }
.sched-color-swatch:hover { border-color: var(--btn-bg); transform: scale(1.12); }
.sched-color-swatch-clear { background-color: var(--bg-color); }

/* Week-bucket Default button. */
.sched-bucket-head-right { display: flex; align-items: center; gap: 8px; }
.sched-default-btn { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-color); background-color: var(--sidebar-bg); color: var(--text-color); cursor: pointer; }
.sched-default-btn:hover { border-color: var(--btn-bg); color: var(--btn-bg); }



/* ===================== STUDY HUB + GUIDES + ANKI (study.js, v4) ===================== */

/* Study/Guides toolbars mirror the settings toolbar geometry. */
#study-view .study-top-nav, #guides-view .guides-top-nav { width: min(980px, 100%); margin: 0 auto 12px; display: flex; justify-content: center; align-items: baseline; gap: 12px 20px; flex-wrap: wrap; }
#study-view .study-top-nav .page-nav-link-inline, #guides-view .guides-top-nav .page-nav-link-inline { white-space: nowrap; line-height: 1; font-size: 1.45rem; }
#study-view .study-top-nav .nav-study-hub, #guides-view .guides-top-nav .nav-study-hub { font-size: 1.75rem; }
#study-view .study-top-nav .page-nav-link-inline:hover, #guides-view .guides-top-nav .page-nav-link-inline:hover { color: var(--btn-bg); transform: scale(1.05); }

/* Study sub-toolbar: Calendar · Quizzes · Flashcards · Guides. */
.study-sub-nav { display: flex; justify-content: center; align-items: baseline; gap: 10px 26px; flex-wrap: wrap; margin: 2px auto 14px auto; }
.study-sub-link { font-size: 1.05rem; font-weight: 600; opacity: 0.72; cursor: pointer; white-space: nowrap; padding: 2px 2px 4px 2px; border-bottom: 2px solid transparent; }
.study-sub-link:hover { opacity: 1; color: var(--btn-bg); }
.study-sub-link.active { opacity: 1; font-size: 1.2rem; color: var(--btn-bg); border-bottom-color: var(--btn-bg); }

.study-body { max-width: 980px; margin: 0 auto; padding: 6px 16px 40px 16px; }
.study-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.study-tile { background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 18px; text-align: center; }
.study-tile-value { font-size: 2rem; font-weight: 800; color: var(--btn-bg); font-variant-numeric: tabular-nums; }
.study-tile-label { font-weight: 700; margin-top: 2px; }
.study-tile-sub { font-size: 0.82rem; opacity: 0.65; margin-top: 2px; }
.study-calendar-wrap .an-card { width: 100%; box-sizing: border-box; }

/* Guides: vertical file-system arrangement. */
.guides-body { max-width: 860px; margin: 0 auto; padding: 6px 16px 40px 16px; }
.guides-list { display: flex; flex-direction: column; gap: 10px; }
.guides-folder-row { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65; border-bottom: 1px solid var(--border-color); padding: 0 4px 8px 4px; }
.guides-file-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 10px; text-decoration: none; color: var(--text-color); transition: transform 0.12s ease, border-color 0.12s ease; }
.guides-file-row:hover { border-color: var(--btn-bg); transform: translateY(-1px); }
.guides-file-icon { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 44px; min-width: 44px; height: 56px; border: 1px solid var(--border-color); border-radius: 6px 12px 6px 6px; background-color: var(--bg-color); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; color: var(--btn-bg); padding-bottom: 6px; }
.guides-file-fold { position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; background-color: var(--sidebar-bg); border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); border-radius: 0 12px 0 6px; }
.guides-file-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.guides-file-name { font-weight: 700; font-size: 1.05rem; }
.guides-file-desc { font-size: 0.88rem; opacity: 0.7; }
.guides-file-open { font-size: 0.85rem; font-weight: 700; color: var(--btn-bg); white-space: nowrap; }

/* Anki deck uploads (Settings). */
.anki-upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anki-file-name { font-size: 0.9rem; opacity: 0.75; flex: 1; min-width: 140px; }
.anki-progress { position: relative; height: 22px; margin-top: 14px; border: 1px solid var(--border-color); border-radius: 999px; overflow: hidden; background-color: var(--bg-color); }
.anki-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background-color: var(--btn-bg); opacity: 0.55; transition: width 0.2s ease; }
.anki-progress-text { position: relative; display: block; text-align: center; font-size: 0.78rem; line-height: 22px; font-weight: 700; }
.anki-deck-list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.anki-empty { font-size: 0.9rem; opacity: 0.7; margin: 14px 0 0 0; }
.anki-deck-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; padding: 14px 10px 12px 10px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; }
.anki-deck-icon { color: var(--btn-bg); }
.anki-deck-name { font-size: 0.82rem; font-weight: 600; text-align: center; word-break: break-word; }
.anki-deck-meta { font-size: 0.74rem; opacity: 0.6; }
.anki-deck-x { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; line-height: 18px; border-radius: 50%; border: 1px solid var(--border-color); background-color: var(--sidebar-bg); color: var(--text-color); font-size: 0.7rem; cursor: pointer; padding: 0; }
.anki-deck-x:hover { border-color: #e05252; color: #e05252; }

/* ===================== SCHEDULER v4 ===================== */

/* One unifying selection box around adjacent selected topics. */
.sched-sel-group { display: flex; flex-direction: column; gap: 6px; padding: 4px; border: 2px solid var(--btn-bg); border-radius: 9px; box-shadow: 0 0 10px 1px rgba(77, 171, 247, 0.35); }
.sched-sel-group .sched-pill-armed, .sched-sel-group .sched-bucket-pill.sched-pill-armed { outline: none; }
.sched-week-bucket .sched-sel-group { gap: 5px; }

/* Confirm pinned to the bottom of the scheduler sidebar. */
.sched-tray-confirm { position: sticky; bottom: -14px; margin: 10px -14px -14px -14px; padding: 12px 14px; background-color: var(--sidebar-bg); border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; z-index: 5; }
.sched-tray-confirm .sched-confirm-btn { flex: 1; padding: 10px 0; font-size: 1.05rem; }
.sched-confirm-btn:disabled { opacity: 0.45; cursor: default; }
.sched-discard-link { border: none; background: none; color: var(--text-color); opacity: 0.7; cursor: pointer; font-size: 0.9rem; text-decoration: underline; padding: 0; }
.sched-discard-link:hover { opacity: 1; color: #e05252; }
.sched-confirm-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 10px 0 20px 0; }
.sched-confirm-row:empty { display: none; }

/* Collapsible sidebar section titles. */
.sched-tray-heading { cursor: pointer; position: relative; padding-right: 18px; user-select: none; }
.sched-tray-heading::after { content: '\25BE'; position: absolute; right: 2px; top: 50%; transform: translateY(-55%); font-size: 0.8rem; opacity: 0.65; transition: transform 0.12s ease; }
.sched-tray-heading-collapsed::after { transform: translateY(-55%) rotate(-90deg); }
.sched-tray-heading:hover { color: var(--btn-bg); }



/* ===================== v5: Settings alignment + big calendar + guides v2 ===================== */

/* Settings section titles left-oriented (chevron stays right). */
.setup-section-summary { text-align: left; padding-left: 4px; }
.sched-hero { text-align: left; }
.sched-hero-desc { margin-left: 0; }
.sched-start-input { padding: 6px 8px; }

/* Full-page calendar (Study > Calendar). */
.bigcal { width: 100%; }
.bigcal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.bigcal-title { font-size: 1.6rem; margin: 0; }
.bigcal-today { padding: 6px 14px; }
.bigcal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; opacity: 0.6; text-align: center; }
.bigcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bigcal-cell { position: relative; min-height: 112px; padding: 26px 6px 6px 6px; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: border-color 0.12s ease; }
.bigcal-cell:hover { border-color: var(--btn-bg); }
.bigcal-empty { background: none; border: none; cursor: default; min-height: 0; }
.bigcal-day { position: absolute; top: 5px; right: 8px; font-size: 0.82rem; font-weight: 700; opacity: 0.7; }
.bigcal-today-cell { border-color: var(--btn-bg); box-shadow: inset 0 0 0 1px var(--btn-bg); }
.bigcal-selected { border-color: var(--btn-bg); box-shadow: 0 0 0 2px var(--btn-bg); }
.bigcal-in-term { background-image: linear-gradient(rgba(77, 171, 247, 0.05), rgba(77, 171, 247, 0.05)); }
.bigcal-week-chip { font-size: 0.68rem; font-weight: 700; color: #fff; background-color: var(--btn-bg); border-radius: 999px; padding: 2px 7px; align-self: flex-start; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bigcal-week-chip:hover { filter: brightness(1.12); }
.bigcal-term-marker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--btn-bg); }
.bigcal-term-end { color: #e08b52; }
.bigcal-due { font-size: 0.68rem; font-weight: 700; color: var(--btn-bg); opacity: 0.85; }
.bigcal-ev { display: block; font-size: 0.7rem; border-radius: 5px; padding: 1px 6px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bigcal-ev-event { background-color: #c9e4ff; }
.bigcal-ev-reminder { background-color: #ffe2c9; }
.bigcal-ev-note { background-color: #fff5c9; }
.bigcal-more { font-size: 0.66rem; opacity: 0.65; }
.bigcal-detail { margin-top: 16px; padding: 18px; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 10px; }
.bigcal-detail-title { margin: 0 0 10px 0; font-size: 1.2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.bigcal-detail-line { margin: 6px 0; font-size: 0.95rem; }
.bigcal-muted { opacity: 0.6; }
.bigcal-open-week { padding: 3px 10px; font-size: 0.8rem; margin-left: 8px; }
.bigcal-events { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.bigcal-event-row { display: flex; align-items: center; gap: 10px; }
.bigcal-event-row .bigcal-ev { flex: 0 0 auto; }
.bigcal-event-text { flex: 1; min-width: 0; font-size: 0.92rem; }
.bigcal-ev-x { position: static; }
.bigcal-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.bigcal-add-title { flex: 1; min-width: 200px; }

/* Guides v2: drag-reorder + custom guide outline rows. */
.guides-grip { font-size: 1rem; opacity: 0.5; cursor: grab; letter-spacing: -2px; }
.guides-draggable.sched-drop-hover { border-color: var(--btn-bg); box-shadow: inset 0 0 0 2px var(--btn-bg); }
.guides-plus-row { cursor: pointer; border-style: dashed; }
.guides-plus-icon { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 56px; border: 2px dashed var(--btn-bg); border-radius: 8px; font-size: 2rem; font-weight: 700; color: var(--btn-bg); }
.guides-plus-row:hover .guides-plus-icon { background-color: rgba(77, 171, 247, 0.12); }
.guides-custom-row { display: flex; align-items: center; gap: 12px; margin-left: 44px; padding: 8px 12px; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 8px; }
.guides-custom-arrow { font-size: 1.2rem; color: var(--btn-bg); font-weight: 700; }
.guides-custom-icon { width: 32px; min-width: 32px; height: 40px; font-size: 0.5rem; padding-bottom: 4px; }
.guides-custom-name { flex: 1; min-width: 0; font-weight: 600; }
.guides-custom-x { position: static; }



/* ===================== v6 ===================== */

/* Scheduler: conspicuous paint-drop color icon. */
.sched-color-drop { border: none; background: none; width: 20px; min-width: 20px; height: 20px; padding: 0; cursor: pointer; color: var(--text-color); opacity: 0.75; }
.sched-color-drop svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.sched-color-drop-set svg { fill: currentColor; stroke: none; }
.sched-color-drop:hover { opacity: 1; transform: scale(1.15); }
/* Colored pills: darken their controls so icons stay visible on pastels. */
.sched-pill-colored .sched-pill-btn { color: #333333; opacity: 0.8; }
.sched-pill-colored .sched-pill-btn:hover { color: #111111; opacity: 1; }
.sched-pill-colored .sched-color-drop { color: #333333 !important; opacity: 0.85; }

/* Cursor selection box. */
.sched-marquee { position: fixed; z-index: 3000; border: 1.5px solid var(--btn-bg); background-color: rgba(77, 171, 247, 0.12); pointer-events: none; border-radius: 3px; }
.sched-marquee-hit { outline: 2px dashed var(--btn-bg); outline-offset: 1px; }

/* Confirm pinned to the TOP of the scheduler sidebar. */
.sched-tray-confirm { position: sticky; top: -14px; bottom: auto; margin: -14px -14px 10px -14px; padding: 12px 14px; border-top: none; border-bottom: 1px solid var(--border-color); }

/* Calendar: full page width, larger days, theme-neutral selection ring. */
#study-view .study-body { max-width: none; padding: 6px 22px 40px 22px; }
#study-view .study-tile-grid { max-width: 1100px; margin-left: auto; margin-right: auto; }
.bigcal-cell { min-height: 152px; padding-top: 28px; }
.bigcal-selected { border-color: var(--text-color); box-shadow: 0 0 0 2px var(--text-color); }
.bigcal-note-colors { display: flex; gap: 6px; align-items: center; }
.bigcal-note-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-color); cursor: pointer; padding: 0; }
.bigcal-note-swatch.active { outline: 2px solid var(--text-color); outline-offset: 1px; }
.bigcal-note-swatch:hover { transform: scale(1.15); }

/* Guides: folder tiles + filed-guide indentation. */
.guides-plus-wrap { display: flex; flex-direction: row; align-items: stretch; gap: 10px; }
.guides-plus-icon-folder { border-radius: 4px 10px 10px 10px; }
.guides-folder-item { background-color: var(--bg-color); border-style: dashed; }
.guides-folder-icon { position: relative; width: 34px; min-width: 34px; height: 26px; background-color: var(--sidebar-bg); border: 1px solid var(--btn-bg); border-radius: 3px 6px 6px 6px; }
.guides-folder-tab { position: absolute; top: -7px; left: 0; width: 14px; height: 7px; background-color: var(--sidebar-bg); border: 1px solid var(--btn-bg); border-bottom: none; border-radius: 3px 3px 0 0; }
.guides-custom-filed { margin-left: 88px; }
.guides-custom-row.sched-dragging { opacity: 0.5; }

/* ---- v7: full-page Study calendar + always-clickable toolbar links ---- */
/* Toolbar text buttons (Account / Settings / Analytics / Study) stay clickable on
   their own sub-pages so a user deep in Quizzes, Guides or the Scheduler can jump
   back to the hub root with one click. */
.page-nav-link-inline.active { pointer-events: auto; cursor: pointer; }
.page-nav-link-inline.active:hover { color: var(--btn-bg); }
/* The Study page escapes the standard 1000px view column so the calendar can use
   the whole width of the content area. */
#study-view.view-section { max-width: none; }
#study-view .view-header-center p { max-width: 980px; margin-left: auto; margin-right: auto; }
#study-view .study-body { max-width: none; padding: 4px 8px 48px 8px; }
.bigcal { width: 100%; }
.bigcal-head { margin-bottom: 6px; }
.bigcal-title { font-size: 1.9rem; }
.bigcal-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 12px 0; font-size: 0.9rem; opacity: 0.85; }
.bigcal-sum-item strong { color: var(--btn-bg); font-size: 1.05rem; }
.bigcal-sum-overdue strong { color: #e08b52; }
.bigcal-sum-term { font-weight: 700; color: var(--btn-bg); }
.bigcal-sum-hint { opacity: 0.7; font-style: italic; }
.bigcal-dows { font-size: 0.8rem; gap: 8px; margin-bottom: 8px; }
.bigcal-grid { gap: 8px; }
.bigcal-cell { min-height: 172px; padding: 8px 9px 8px 9px; gap: 4px; border-radius: 10px; }
.bigcal-cell-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; min-height: 22px; }
.bigcal-day { position: static; font-size: 1.05rem; font-weight: 800; opacity: 0.85; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.bigcal-day-today { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background-color: var(--btn-bg); border-radius: 999px; padding: 2px 7px; }
.bigcal-today-cell { background-image: linear-gradient(rgba(77, 171, 247, 0.12), rgba(77, 171, 247, 0.12)); }
.bigcal-week-tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: var(--btn-bg); opacity: 0.75; border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.bigcal-week-chip { font-size: 0.72rem; padding: 3px 9px; }
.bigcal-due { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 800; color: var(--text-color); opacity: 1; margin-top: 2px; }
.bigcal-due em { font-style: normal; font-weight: 700; color: #e08b52; font-size: 0.74rem; }
.bigcal-due-dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--btn-bg); flex: 0 0 auto; }
.bigcal-decks { font-size: 0.74rem; opacity: 0.75; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bigcal-free { font-size: 0.72rem; opacity: 0.45; }
.bigcal-past:not(.bigcal-today-cell) { opacity: 0.72; }
.bigcal-ev { font-size: 0.76rem; padding: 2px 7px; }
.bigcal-detail { margin-top: 18px; padding: 20px 22px; }
.bigcal-detail-title { font-size: 1.35rem; }
.bigcal-detail-line { font-size: 1rem; }
@media (max-width: 1100px) { .bigcal-cell { min-height: 140px; } }
@media (max-width: 760px) {
    .bigcal-cell { min-height: 96px; padding: 6px; }
    .bigcal-decks, .bigcal-free { display: none; }
    .bigcal-due { font-size: 0.74rem; }
    .bigcal-week-tag { display: none; }
    #study-view .study-body { padding: 4px 4px 40px 4px; }
}
.bigcal-overdue { font-size: 0.72rem; font-weight: 700; color: #e08b52; }

/* ---- v8: "Select By…" panel, My Year page ---- */
.page-week-btn.sel-toggle { font-size: 1.25rem; padding: 14px 34px; min-width: 280px; font-weight: 700; letter-spacing: 0.01em; }
body.no-week-nav .page-week-dropdown { display: inline-flex; }
.page-week-panel.sel-panel {
    display: block; width: max-content; max-width: min(94vw, 820px); padding: 14px 16px 16px;
    flex-wrap: nowrap; justify-content: flex-start; gap: 0;
}
@media (min-width: 951px) { .page-week-panel.sel-panel { max-width: min(94vw, 820px); } }
.sel-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sel-panel-btn { min-width: 0; padding: 7px 14px; font-size: 0.88rem; white-space: nowrap; }
.sel-panel-year::after { content: ' \2197'; font-size: 0.8em; opacity: 0.8; }
.sel-panel-note { margin: 4px 0 0; max-width: 360px; font-size: 0.9rem; line-height: 1.45; color: var(--explanation-text); cursor: pointer; }
.sel-panel-note strong { color: var(--text-color); }
.sel-panel-terms { display: flex; align-items: stretch; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.sel-panel-term { flex: 1 1 0; min-width: 0; padding: 12px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sel-panel-term + .sel-panel-term { border-left: 1px solid var(--border-color); }
.sel-panel-term-btn { width: 100%; min-width: 0; font-weight: 700; font-size: 0.95rem; padding: 9px 12px; }
.sel-panel-term-btn::after { content: ' \203A'; opacity: 0.8; }
.sel-panel-weeks { display: grid; grid-template-columns: repeat(2, 104px); gap: 8px; justify-content: center; }
.sel-panel-weeks .page-week-chip { width: 104px; min-width: 0; margin: 0; padding: 7px 6px; font-size: 0.86rem; }
.sel-panel-empty { grid-column: 1 / -1; font-size: 0.82rem; opacity: 0.6; font-style: italic; padding: 6px 0; }
@media (max-width: 760px) {
    .page-week-panel.sel-panel { max-width: 94vw; }
    .sel-panel-terms { flex-direction: column; }
    .sel-panel-term + .sel-panel-term { border-left: none; border-top: 1px solid var(--border-color); }
    .page-week-btn.sel-toggle { min-width: 220px; font-size: 1.1rem; padding: 12px 24px; }
}
.year-page-title { margin: 0 0 6px; font-size: 2.4rem; color: var(--btn-bg); letter-spacing: 0.01em; }
.year-term-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.year-term-tab { min-width: 0; padding: 8px 18px; font-weight: 700; }
.year-term-tab.is-active { background-color: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }

/* ---- v8: calendar top bar with inline tiles, compose popup, day panel ---- */
.bigcal-topbar { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin: 0 0 12px; flex-wrap: wrap; }
.bigcal-monthblock { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 300px; }
.bigcal-monthblock .bigcal-head { justify-content: flex-start; margin: 0; }
.bigcal-monthblock .bigcal-summary { justify-content: flex-start; margin: 0; font-size: 0.86rem; gap: 6px 16px; }
.bigcal-sum-hint { cursor: pointer; }
.bigcal-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 2px; }
.bigcal-tool { padding: 5px 12px; font-size: 0.8rem; min-width: 0; cursor: pointer; display: inline-block; }
.bigcal-tool input { display: none; }
.bigcal-tool-hint { font-size: 0.8rem; opacity: 0.6; }
#study-view .study-tile-grid.bigcal-tiles { flex: 1 1 520px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; margin: 0; max-width: 760px; margin-left: auto; align-self: center; }
.bigcal-tiles .study-tile { padding: 10px 12px; border-radius: 10px; }
.bigcal-tiles .study-tile-value { font-size: 1.55rem; line-height: 1.1; }
.bigcal-tiles .study-tile-label { font-size: 0.86rem; margin-top: 1px; }
.bigcal-tiles .study-tile-sub { font-size: 0.72rem; margin-top: 0; }
@media (max-width: 1180px) { #study-view .study-tile-grid.bigcal-tiles { grid-template-columns: repeat(2, 1fr); max-width: 420px; } }
@media (max-width: 760px) { .bigcal-topbar { flex-direction: column; } #study-view .study-tile-grid.bigcal-tiles { max-width: none; margin-left: 0; width: 100%; } }
.bigcal-upcoming { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--border-color); border-radius: 10px; }
.bigcal-upcoming-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-right: 4px; }
.bigcal-upcoming-item { background: var(--sidebar-bg); color: var(--text-color); border: 1px solid var(--border-color); border-left-width: 5px; border-radius: 8px; padding: 5px 10px; font-size: 0.84rem; cursor: pointer; }
.bigcal-upcoming-item:hover { border-color: var(--btn-bg); }
.bigcal-upcoming-when { font-weight: 800; margin-right: 6px; color: var(--btn-bg); }
.bigcal-upcoming-more { font-size: 0.8rem; opacity: 0.6; }
.bigcal-ev { display: flex; align-items: center; gap: 4px; }
.bigcal-ev strong { font-weight: 800; }
.bigcal-ev-kind-event { border-left: 3px solid rgba(0, 0, 0, 0.35); }
.bigcal-ev-mark { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); flex: 0 0 auto; }
.bigcal-ev-gcal { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 8px); }
/* Selected-day panel: narrower, rail + content */
.bigcal-detail { display: flex; gap: 0; max-width: 780px; margin: 18px auto 0; padding: 0; overflow: hidden; border-radius: 14px; }
.bigcal-detail-rail { flex: 0 0 84px; background: var(--rail); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 18px 6px; gap: 2px; }
.bigcal-detail-daynum { font-size: 2.3rem; font-weight: 900; line-height: 1; }
.bigcal-detail-dow { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.bigcal-detail-main { flex: 1; min-width: 0; padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.bigcal-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bigcal-detail-title { margin: 0; padding: 0; border: none; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.bigcal-detail-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--btn-bg); border-radius: 999px; padding: 2px 8px; }
.bigcal-detail-sub { font-size: 0.86rem; opacity: 0.65; }
.bigcal-detail-actions { display: flex; align-items: center; gap: 8px; }
.bigcal-detail-x { position: static; }
.bigcal-mini-btn { padding: 4px 12px; font-size: 0.8rem; min-width: 0; }
.bigcal-detail-block { border-top: 1px solid var(--border-color); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bigcal-detail-block-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bigcal-detail-kicker { font-weight: 800; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.bigcal-detail-range { font-size: 0.8rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.bigcal-detail-block-head .bigcal-mini-btn { margin-left: auto; }
.bigcal-detail-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.bigcal-topic-pill { font-size: 0.78rem; padding: 3px 9px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-color); }
.bigcal-deck-pill { border-color: var(--btn-bg); }
.bigcal-topic-more { opacity: 0.65; }
.bigcal-detail-muted { font-size: 0.88rem; opacity: 0.65; }
.bigcal-detail-muted a { color: var(--btn-bg); }
.bigcal-events { margin: 0; }
.bigcal-event-row { display: grid; grid-template-columns: 12px 56px 1fr auto; align-items: center; gap: 10px; padding: 4px 0; }
.bigcal-ev-swatch { width: 12px; height: 12px; border-radius: 50%; }
.bigcal-event-kind { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.bigcal-add-row { margin-top: 2px; }
.bigcal-add-row .bigcal-add-title { min-width: 160px; }
@media (max-width: 760px) { .bigcal-detail-rail { flex-basis: 60px; } .bigcal-detail-daynum { font-size: 1.7rem; } .bigcal-event-row { grid-template-columns: 12px 1fr auto; } .bigcal-event-kind { display: none; } }

/* ---- v8b: Select By… sits beside the search bar ---- */
.alpha-search-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: -20px auto 28px; max-width: 800px; }
.alpha-search-row .alpha-search-form { margin: 0; width: auto; flex: 0 1 400px; min-width: 220px; }
.alpha-search-row .page-week-dropdown { flex: 0 0 auto; }
.page-week-btn.sel-toggle { font-size: 1.05rem; padding: 10px 26px; min-width: 0; border-radius: 999px; }
.alpha-search-row .page-week-panel.sel-panel { left: 0; transform: translateX(0) translateY(4px); }
.page-week-dropdown:hover .alpha-search-row .page-week-panel.sel-panel, .alpha-search-row .page-week-dropdown:hover .page-week-panel.sel-panel { transform: translateX(0) translateY(0); }
@media (max-width: 760px) { .alpha-search-row .page-week-panel.sel-panel { left: 50%; transform: translateX(-50%) translateY(4px); } .alpha-search-row .page-week-dropdown:hover .page-week-panel.sel-panel { transform: translateX(-50%) translateY(0); } }

/* ---- v9: centered calendar top bar, anchored day popover, event countdowns ---- */
.bigcal-topbar { justify-content: center; align-items: center; gap: 28px; }
.bigcal-monthblock { flex: 0 1 auto; align-items: flex-start; }
#study-view .study-tile-grid.bigcal-tiles { flex: 0 1 auto; margin-left: 0; max-width: 700px; }
@media (max-width: 1180px) { #study-view .study-tile-grid.bigcal-tiles { max-width: 420px; } }
.bigcal-gridwrap { position: relative; }
.bigcal-detail { position: absolute; z-index: 40; width: 560px; max-width: calc(100% - 8px); margin: 0; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4); border: 1px solid var(--btn-bg); animation: calpop-in 0.14s ease-out; }
@keyframes calpop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bigcal-detail-rail { flex-basis: 72px; padding: 14px 6px; }
.bigcal-detail-daynum { font-size: 2rem; }
.bigcal-detail-main { padding: 12px 14px 14px; gap: 10px; }
.bigcal-detail-title { font-size: 1.15rem; }
.bigcal-detail-block { padding-top: 8px; gap: 6px; }
.bigcal-topic-pill { font-size: 0.74rem; padding: 2px 8px; }
.bigcal-add-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bigcal-add-row .bigcal-add-title { flex: 1 1 140px; min-width: 120px; }
.bigcal-add-time { width: 112px; }
.bigcal-kind-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; padding: 2px; }
.bigcal-kind-btn { background: none; border: none; color: var(--text-color); opacity: 0.7; padding: 4px 11px; border-radius: 999px; font-weight: 700; cursor: pointer; font-size: 0.8rem; }
.bigcal-kind-btn.is-active { background: var(--btn-bg); color: #fff; opacity: 1; }
.bigcal-add-row .bigcal-note-colors { flex-basis: 100%; }
.bigcal-ev { flex-wrap: nowrap; }
.bigcal-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bigcal-ev-cd { margin-left: auto; flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; color: rgba(0, 0, 0, 0.6); background: rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 0 6px; }
.bigcal-ev-cd[hidden] { display: none; }
@media (max-width: 760px) { .bigcal-detail { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 70vh; overflow: auto; } }

/* ---- v9: Analytics large activity bar chart ---- */
.an-bigbars-card { margin-top: 18px; }
.an-bb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.an-bb-controls { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; padding: 2px; }
.an-range-btn { background: none; border: none; color: var(--text-color); opacity: 0.7; padding: 5px 12px; border-radius: 999px; font-weight: 700; cursor: pointer; font-size: 0.8rem; }
.an-range-btn.is-active { background: var(--btn-bg); color: #fff; opacity: 1; }
.an-bb-legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.85rem; margin: 6px 0 4px; }
.an-bb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.an-bb-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.an-bigbars { width: 100%; height: auto; display: block; }
.an-bb-grid { stroke: var(--border-color); stroke-width: 1; }
.an-bb-axis { stroke: var(--explanation-text); stroke-width: 1; opacity: 0.6; }
.an-bb-ytick, .an-bb-xtick { fill: var(--explanation-text); font-size: 12px; }
.an-bb-q { fill: var(--an-quiz); }
.an-bb-c { fill: var(--an-cards); }
.an-bb-q:hover, .an-bb-c:hover { opacity: 0.8; }

/* ---- v9: Decks page, deck editor, Pathways/Sketches placeholders ---- */
.decks-body { max-width: 900px; }
.decks-upload { border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 18px 18px; margin-bottom: 22px; background-color: var(--sidebar-bg); }
.decks-section-title { margin: 0 0 6px; font-size: 1.15rem; }
.decks-upload-help { margin: 0 0 14px; font-size: 0.92rem; opacity: 0.85; line-height: 1.5; }
.decks-count { font-size: 0.72rem; background: var(--btn-bg); color: #fff; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.decks-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background-color: var(--card-bg); }
.decks-row:hover { border-color: var(--btn-bg); }
.decks-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.decks-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decks-meta { font-size: 0.8rem; opacity: 0.7; }
.decks-error { color: #e08b52; opacity: 1; }
.decks-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.decks-btn { padding: 6px 14px; font-size: 0.85rem; min-width: 0; }
.decks-btn.is-disabled { opacity: 0.45; }
.decks-x { position: static; }
.decks-empty { padding: 6px 4px; }
.guides-coming-row { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--border-color); border-radius: 10px; opacity: 0.8; }
.guides-coming-text { font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 760px) { .decks-row { flex-wrap: wrap; } }

/* New Study sub-pages share the Guides toolbar styling */
#decks-view .guides-top-nav, #deck-editor-view .guides-top-nav, #pathways-view .guides-top-nav, #anatomy-view .guides-top-nav { width: min(980px, 100%); margin: 0 auto 12px; display: flex; justify-content: center; align-items: baseline; gap: 12px 20px; flex-wrap: wrap; }
#decks-view .guides-top-nav .page-nav-link-inline, #deck-editor-view .guides-top-nav .page-nav-link-inline, #pathways-view .guides-top-nav .page-nav-link-inline, #anatomy-view .guides-top-nav .page-nav-link-inline { white-space: nowrap; line-height: 1; font-size: 1.45rem; }
#decks-view .guides-top-nav .nav-study-hub, #deck-editor-view .guides-top-nav .nav-study-hub, #pathways-view .guides-top-nav .nav-study-hub, #anatomy-view .guides-top-nav .nav-study-hub { font-size: 1.75rem; }
#decks-view .guides-top-nav .page-nav-link-inline:hover, #deck-editor-view .guides-top-nav .page-nav-link-inline:hover, #pathways-view .guides-top-nav .page-nav-link-inline:hover, #anatomy-view .guides-top-nav .page-nav-link-inline:hover { color: var(--btn-bg); transform: scale(1.05); }

/* ---- v9b: concise-large action buttons; Deck Manager (ported from the study guides' Flashcards manager) ---- */
.anki-upload-row { justify-content: flex-start; gap: 14px; }
.anki-upload-row .btn-secondary, .decks-btn, .bigcal-tool, .dm-btn { min-width: 0; width: auto; padding: 10px 22px; font-size: 1rem; font-weight: 700; border-radius: 10px; white-space: nowrap; }
.anki-upload-row #anki-upload-btn { margin-left: 0; }
.anki-file-name { flex: 0 1 auto; }
.decks-btn { padding: 9px 18px; font-size: 0.95rem; }
.bigcal-tool { padding: 7px 16px; font-size: 0.85rem; }
.decks-edit.is-on { background-color: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.dm-host { border: 1px solid var(--btn-bg); border-radius: 14px; background-color: var(--card-bg); overflow: hidden; display: flex; flex-direction: column; margin: -2px 0 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); animation: calpop-in 0.14s ease-out; }
.dm-host .bld-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); background-color: var(--sidebar-bg); }
.dm-host .mgr-mark { font-size: 22px; line-height: 1; color: var(--btn-bg); margin-right: 2px; }
.dm-host .bld-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.dm-host .bld-sub { font-size: 0.78rem; opacity: 0.65; }
.dm-top-btn { margin-left: auto; padding: 7px 16px; font-size: 0.88rem; }
.dm-x { background: none; border: none; color: var(--text-color); opacity: 0.6; cursor: pointer; font-size: 1rem; padding: 4px 8px; }
.dm-x:hover { opacity: 1; }
.dm-host .bld-body { display: flex; min-height: 440px; max-height: 70vh; }
.dm-host .bld-side { width: 300px; flex: none; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; min-height: 0; background-color: var(--sidebar-bg); }
.dm-host .bld-sidehead { padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border-color); flex: none; }
.dm-host .bld-find { font: inherit; font-size: 0.85rem; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-color); outline: none; background-color: var(--card-bg); color: var(--text-color); }
.dm-host .bld-find:focus { border-color: var(--btn-bg); }
.dm-host .bld-sidebtns { display: flex; gap: 6px; flex-wrap: wrap; }
.dm-host .bld-sidebtns .dm-btn { flex: 1; padding: 7px 10px; font-size: 0.82rem; }
.dm-host .bld-sidebtns .dm-btn:first-child { flex: 1 1 100%; }
.dm-host .bld-list { flex: 1; overflow-y: auto; padding: 8px; }
.dm-host .tnode { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; color: var(--text-color); }
.dm-host .tnode:hover { background-color: var(--card-bg); }
.dm-host .tnode .tcar { flex: none; width: 11px; font-size: 9px; opacity: 0.6; transition: transform 0.16s ease; }
.dm-host .tnode.open .tcar { transform: rotate(90deg); }
.dm-host .tnode b { flex: 1; min-width: 0; font-weight: 700; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-host .tnode em { flex: none; font-style: normal; font-size: 0.7rem; font-weight: 700; opacity: 0.8; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 1px 7px; }
.dm-host .tkids { display: none; }
.dm-host .tkids.open { display: block; }
.dm-host .bld-item { display: block; width: calc(100% - 22px); margin-left: 22px; text-align: left; font: inherit; font-size: 0.8rem; line-height: 1.45; cursor: pointer; border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 9px; margin-bottom: 3px; color: var(--text-color); }
.dm-host .bld-item:hover { background-color: var(--card-bg); }
.dm-host .bld-item.on { background-color: var(--card-bg); border-color: var(--btn-bg); color: var(--btn-bg); }
.dm-host .bld-item b { display: block; font-weight: 700; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-host .bld-item i { font-style: normal; opacity: 0.55; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.dm-host .bld-item.custom b::after { content: ' •'; color: var(--btn-bg); }
.dm-host .bld-main { flex: 1; overflow-y: auto; padding: 18px 22px; min-width: 0; }
.dm-host .bld-empty { opacity: 0.65; font-size: 0.9rem; line-height: 1.7; padding: 26px 4px; }
.dm-host .bld-f { display: block; margin-bottom: 13px; }
.dm-host .bld-f > span { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.6; margin-bottom: 4px; }
.dm-host .bld-f textarea, .dm-host .bld-in { font: inherit; font-size: 0.92rem; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-color); outline: none; background-color: var(--card-bg); color: var(--text-color); }
.dm-host .bld-f textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.dm-host .bld-f textarea:focus, .dm-host .bld-in:focus { border-color: var(--btn-bg); }
.dm-host .bld-row { display: flex; gap: 10px; align-items: flex-end; }
.dm-host .bld-row > * { flex: 1; }
.dm-host .bld-prev { border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; background-color: var(--sidebar-bg); margin-top: 6px; }
.dm-host .bld-prev h4 { margin: 0 0 8px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.6; border: 0; padding: 0; }
.dm-host .fc-txt { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.55; }
.dm-host .bld-acts { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.dm-host .bld-acts .dm-btn { padding: 8px 18px; font-size: 0.9rem; }
.dm-del { color: #e08b52; border-color: #e08b52; }
.dm-host .bld-note { font-size: 0.78rem; opacity: 0.7; margin-left: 6px; }
@media (max-width: 760px) { .dm-host .bld-body { flex-direction: column; max-height: none; } .dm-host .bld-side { width: auto; border-right: none; border-bottom: 1px solid var(--border-color); max-height: 260px; } }
\r\n
/* ---- v9c: per-account deck storage meter ---- */
.decks-quota { display: flex; align-items: center; gap: 12px; padding: 4px 4px 2px; }
.decks-quota-bar { flex: 1; height: 8px; border-radius: 999px; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); overflow: hidden; }
.decks-quota-fill { height: 100%; background-color: var(--btn-bg); border-radius: 999px; transition: width 0.3s ease; }
.decks-quota-fill.is-full { background-color: #e08b52; }
.decks-quota-text { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; }

/* ---- v10: deck images from the user's computer; tier caps ---- */
.anki-img { display: block; max-width: 100%; max-height: 360px; margin: 8px auto; border-radius: 8px; }
.has-anki-media { white-space: pre-wrap; }
.anki-img-missing { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; opacity: 0.8; border: 1px dashed var(--border-color); border-radius: 8px; padding: 4px 10px; margin: 4px 0; }
.anki-img-missing span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anki-img-connect { background: none; border: none; color: var(--btn-bg); font-weight: 700; cursor: pointer; padding: 0; font-size: 0.8rem; text-decoration: underline; }
.decks-media-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; margin-top: 2px; flex-wrap: wrap; }
.decks-media { opacity: 0.7; }
.decks-media.is-on { opacity: 1; color: var(--btn-bg); }
.decks-media-btn { background: none; border: 1px solid var(--border-color); color: var(--text-color); border-radius: 999px; padding: 2px 10px; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.decks-media-btn:hover { border-color: var(--btn-bg); color: var(--btn-bg); }
.decks-tier-note { float: right; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.9; }
.decks-tier-note a { color: var(--btn-bg); }
.decks-upload.is-capped .anki-upload-row { opacity: 0.55; }
.decks-cap-note { margin: 12px 0 0; font-size: 0.9rem; color: #e08b52; }
.decks-cap-note a { color: var(--btn-bg); font-weight: 700; }

/* ---- v11: Pathways shelf ---- */
.pw-row { cursor: pointer; }
.pw-row.is-open { border-color: var(--btn-bg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pw-caret { font-size: 1.1rem; opacity: 0.6; padding: 0 6px; margin-left: auto; }
.pw-row-wrap { display: flex; flex-direction: column; }
.pw-drop { border: 1px solid var(--btn-bg); border-top: none; border-radius: 0 0 12px 12px; background-color: var(--card-bg); padding: 12px 14px 16px; margin-bottom: 4px; animation: calpop-in 0.14s ease-out; overflow-x: auto; }
.pw-drop-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pw-tool { min-width: 0; padding: 6px 14px; font-size: 0.85rem; border-radius: 999px; }
.pw-drop-hint { font-size: 0.8rem; opacity: 0.6; margin-left: 4px; }
.pwv { --accent: var(--c-acc); --ink: var(--c-ink); --ring: var(--c-ink4); --tint: var(--c-tkey); color: var(--c-ink); font-size: 14px; line-height: 1.5; background-color: var(--c-surf); border-radius: 10px; padding: 6px 10px; }
.pwv .pw { margin: 6px 0 4px; }
.pwv .pw-head { border-bottom: 1px solid var(--c-line); }
.pwv figure { margin: 0; }

/* ---- v11b: pathway flashcards pop-up (guide-style, no scheduling) ---- */
.pw-tool-fc { border-color: var(--btn-bg); }
.pwfc-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(8, 12, 20, 0.62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pwfc-overlay[hidden] { display: none; }
.pwfc-modal { --pwfc-bg: ; background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 16px; width: min(1040px, 96vw); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); animation: calpop-in 0.14s ease-out; }
.pwfc-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.pwfc-title { font-weight: 800; font-size: 1.05rem; }
.pwfc-crumb { font-size: 0.85rem; opacity: 0.75; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwfc-count { font-size: 0.8rem; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; }
.pwfc-progress { height: 6px; background-color: var(--sidebar-bg); }
.pwfc-progress-fill { height: 100%; background-color: var(--btn-bg); transition: width 0.2s ease; }
.pwfc-card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 14px 18px 6px; border: 2px solid var(--border-color); border-radius: 14px; background-color: var(--pwfc-bg, var(--card-bg)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); overflow: hidden; transition: background-color 0.3s; }
.pwfc-modal.is-blinged .pwfc-card { color: #1f2430; border-color: rgba(0, 0, 0, 0.15); }
.pwfc-face-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; padding: 10px 16px 0; }
.pwfc-face { flex: 1; min-height: 0; overflow: auto; padding: 10px 18px 14px; cursor: pointer; }
.pwfc-face .fc-pw { display: flex; flex-direction: column; align-items: center; }
.pwfc-face .fc-pw .pw-bigtitle { font-size: 23px; padding: 0 0 8px; line-height: 1.2; align-self: stretch; }
.pwfc-hint-line { text-align: center; font-size: 0.85rem; opacity: 0.65; padding: 6px 12px 10px; border-top: 1px dashed var(--border-color); }
.pwv .k.fc-ans { box-shadow: 0 0 0 2px var(--c-ok); border-radius: 4px; background: rgba(15, 122, 74, 0.12); color: var(--ink); }
.pwfc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px 12px; }
.pwfc-flip { min-width: 150px; }
.pwfc-again[hidden] { display: none; }
.pwfc-colors { display: inline-flex; gap: 5px; margin-left: 6px; }
.pwfc-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-color); cursor: pointer; padding: 0; }
.pwfc-swatch.active { outline: 2px solid var(--text-color); outline-offset: 1px; }
.pwfc-hint { margin-left: auto; font-size: 0.78rem; opacity: 0.55; }
body.pwfc-open { overflow: hidden; }
.decks-name-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.decks-rename { background: none; border: none; color: var(--text-color); opacity: 0.45; cursor: pointer; font-size: 0.95rem; padding: 0 4px; }
.decks-rename:hover { opacity: 1; color: var(--btn-bg); }
.decks-name-input { max-width: 360px; font-weight: 700; }
.decks-plus-row { border-style: dashed; cursor: pointer; }
.decks-plus-row:hover { border-color: var(--btn-bg); }
.decks-plus-row.is-naming { border-style: solid; border-color: var(--btn-bg); cursor: default; }
.decks-plus-row .guides-plus-icon { width: 44px; min-width: 44px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: var(--btn-bg); border: 1px dashed var(--border-color); border-radius: 6px 12px 6px 6px; }
.decks-row-custom .anki-deck-icon { color: #0f7a4a; }
.guides-custom-link { text-decoration: none; color: inherit; flex: 1; min-width: 0; cursor: pointer; }
.guides-custom-link:hover .guides-file-name { color: var(--btn-bg); }
.guides-custom-static:hover { border-color: var(--btn-bg); }
.guides-rename { font-size: 1rem; }

/* ---- v13: decks sidebar, deck folders, pop-up deck faces, pathway toggles, pathway search ---- */
#decks-sidebar { display: none; }
body.decks-mode .score-board { display: none !important; }
body.decks-mode #sidebar > .config-section:not(#bling-container) { display: none !important; }
body.decks-mode #flashcards-sidebar { display: none !important; }
body.decks-mode #decks-sidebar { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-bottom: 30px; scrollbar-width: none; -ms-overflow-style: none; }
body.decks-mode #decks-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
#decks-sidebar .config-section { margin-bottom: 0; }
#decks-sidebar .input-container { margin-bottom: 0; flex-wrap: wrap; }
.decks-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.decks-side-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--card-bg); color: var(--text-color); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.decks-side-item:hover { border-color: var(--btn-bg); }
.decks-side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decks-side-due { font-size: 0.72rem; font-weight: 800; color: #fff; background-color: var(--btn-bg); border-radius: 999px; padding: 1px 8px; }
.decks-side-n { font-size: 0.72rem; font-weight: 700; opacity: 0.55; }
.decks-side-mode { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.decks-side-mode-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.decks-side-mode label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.decks-side-mode label small { font-weight: 500; opacity: 0.6; }
.decks-side-actions { display: flex; flex-direction: column; gap: 8px; }
.decks-side-actions .sidebar-btn { margin: 0; }
.decks-grip { cursor: grab; }
.decks-row.sched-dragging { opacity: 0.45; }
.decks-row.sched-drop-hover, .decks-folder-row.sched-drop-hover { outline: 2px dashed var(--btn-bg); outline-offset: -2px; }
.decks-head-row.sched-drop-hover { outline: 2px dashed var(--btn-bg); outline-offset: 2px; border-radius: 6px; }
.decks-row-filed { margin-left: 26px; }
.decks-folder-row { cursor: default; }
.decks-folder-row .guides-file-main { flex: 1; min-width: 0; }
.decks-plus-folder .guides-plus-icon-folder { }
.pwfc-face-text { min-height: 38vh; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.35rem; line-height: 1.5; padding: 28px 24px; white-space: pre-wrap; word-break: break-word; }
.pwfc-face-text img.anki-img { display: block; max-width: 100%; max-height: 52vh; margin: 10px auto; }
.pw-tool.is-on { background-color: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }
.pathways-search-form { margin: 0 auto 22px auto; }
.pw-row.highlight-topic { border-radius: 8px; }

/* ---- v14: calendar top bar = month + tiles (left) and a permanent day panel (right); double-click compose pop-up ---- */
.bigcal-topbar { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(400px, 600px); align-items: stretch; justify-content: center; gap: 22px; margin: 0 0 14px; }
.bigcal-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bigcal-monthblock { min-width: 0; }
#study-view .study-tile-grid.bigcal-tiles { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; max-width: none; width: 100%; margin: 0; align-self: stretch; }
.bigcal-tiles .study-tile { display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; }
.bigcal-tiles .study-tile-value { font-size: 1.8rem; }
.bigcal-topbar .bigcal-detail { position: static; width: auto; max-width: none; margin: 0; box-shadow: none; animation: none; border: 1px solid var(--border-color); align-self: stretch; }
.bigcal-topbar .bigcal-detail.bigcal-detail-today { border-color: var(--btn-bg); }
.bigcal-topbar .bigcal-detail-main { padding: 12px 16px 14px; }
.bigcal-detail-x { display: none; }
.bigcal-cell { cursor: pointer; }
.calpop { position: absolute; z-index: 45; width: 360px; max-width: calc(100% - 8px); background-color: var(--card-bg); border: 1px solid var(--btn-bg); border-radius: 12px; padding: 12px; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4); animation: calpop-in 0.14s ease-out; display: flex; flex-direction: column; gap: 8px; }
.calpop-head { display: flex; align-items: center; gap: 10px; }
.calpop-head strong { font-size: 0.95rem; }
.calpop-head .bigcal-kind-toggle { margin-left: auto; }
.calpop-x { position: static; }
.calpop-title { width: 100%; }
.calpop-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calpop-colors { display: inline-flex; gap: 5px; flex: 1; }
.calpop-save { margin-left: auto; padding: 6px 16px; min-width: 0; }
@media (max-width: 1180px) { .bigcal-topbar { grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr); } #study-view .study-tile-grid.bigcal-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 760px) { .bigcal-topbar { display: flex; flex-direction: column; } .bigcal-topbar .bigcal-detail { position: static !important; left: auto !important; right: auto; bottom: auto; max-height: none; } .calpop { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; } }

/* ---- v14: deck folders contain their decks; deck-session sidebar ---- */
#anki-deck-list .decks-folder-row { margin-left: 0; padding: 10px 12px; border-radius: 10px; }
#anki-deck-list .decks-row-filed { margin-left: 48px; }
.decks-side-note { font-size: 0.82rem; opacity: 0.7; margin: 0 0 4px; }
.decks-side-now-name { font-weight: 800; font-size: 1rem; }
.decks-side-now-sub { font-size: 0.8rem; opacity: 0.65; margin: 2px 0 10px; }
.decks-side-now .sidebar-btn { margin: 0; }
.decks-side-item.is-current { border-color: var(--btn-bg); background-color: var(--sidebar-bg); }
.pw-row-wrap[hidden] { display: none !important; }

/* ---- v14: home sections for the calendar, decks and pathways ---- */
.home-calendar-row .marketing-video, .home-decks-row .marketing-video, .home-guides-row .marketing-video { flex: 0 1 780px; max-width: 780px; }
.home-pathways-row .marketing-video { flex: 0 1 600px; max-width: 600px; }
.home-calendar-row .marketing-video img, .home-decks-row .marketing-video img, .home-guides-row .marketing-video img, .home-pathways-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-calendar-row { margin-top: 190px; }
@media (max-width: 900px) { .home-calendar-row { margin-top: 110px; } }

/* ---- v15: the Decks sidebar shares the Flashcards sidebar's formatting exactly ---- */
body.decks-mode #decks-sidebar { gap: 22px; padding-bottom: 30px; }
body.decks-mode #bling-container { margin-top: auto; padding-top: 18px; }
#decks-sidebar .config-section { margin-bottom: 0; }
#decks-sidebar .input-container { margin-bottom: 0; flex-wrap: wrap; }

/* ---- v15: nested folders, row colours, calendar source split ---- */
/* Depth: every level of folder indents its rows, so a nested item is visibly
   narrower than the folder that holds it. */
#anki-deck-list .decks-row,
#anki-deck-list .decks-folder-row,
#guides-list .guides-custom-row { margin-left: calc(var(--dep, 0) * 40px); transition: margin-left 0.15s ease; }
/* A deck and a sub-folder filed in the same folder are siblings: they share
   one left edge, so the folder's contents read as one column. */
#anki-deck-list .decks-row-filed { margin-left: calc(var(--dep, 0) * 40px); }
#guides-list .guides-custom-row { margin-left: calc(44px + var(--dep, 0) * 40px); }
#guides-list .guides-folder-item { margin-left: calc(44px + var(--dep, 0) * 40px); }
#guides-list .guides-custom-filed { margin-left: calc(44px + var(--dep, 0) * 40px); }
#anki-deck-list .decks-row[data-dep="0"] .guides-custom-arrow,
#guides-list .guides-custom-row[data-dep="0"] .guides-custom-arrow { visibility: hidden; }
/* A chosen colour shows as an inset bar plus a faint wash, in both themes. */
.has-rowc { box-shadow: inset 4px 0 0 var(--rowc, transparent); }
.has-rowc .guides-file-name, .has-rowc .decks-name { text-shadow: none; }
.row-color { width: 20px; height: 20px; min-width: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--border-color); background: var(--card-bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0.75; transition: opacity 0.15s, border-color 0.15s; }
.row-color:hover { opacity: 1; border-color: var(--btn-bg); }
.row-color span { width: 11px; height: 11px; border-radius: 50%; background: var(--rowc, transparent); border: 1px solid var(--border-color); display: block; }
.row-color.is-set { opacity: 1; }
.row-color.is-set span { border-color: rgba(0, 0, 0, 0.2); }
.rowcolor-pop { position: fixed; z-index: 1400; display: flex; gap: 6px; padding: 8px 10px; background-color: var(--card-bg); border: 1px solid var(--btn-bg); border-radius: 999px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); animation: calpop-in 0.12s ease-out; }
.rowcolor-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-color); cursor: pointer; padding: 0; }
.rowcolor-swatch.active { outline: 2px solid var(--text-color); outline-offset: 1px; }
.rowcolor-none { background-color: transparent; color: var(--text-color); font-size: 0.7rem; font-weight: 800; line-height: 1; }
/* Calendar: Astrocram topic banks vs the student's own decks. */
.bigcal-split { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bigcal-src { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-color); }
.bigcal-src.is-topic { color: var(--btn-bg); border-color: var(--btn-bg); }
.bigcal-src.is-deck { color: var(--c-ok, #2f9e6a); border-color: var(--c-ok, #2f9e6a); }
.bigcal-decks { display: flex; flex-wrap: wrap; gap: 3px; }
.bigcal-deckname { font-size: 0.7rem; opacity: 0.72; }
.bigcal-deckname + .bigcal-deckname::before { content: '·'; margin-right: 3px; opacity: 0.6; }
.bigcal-deckname.is-deck::after { content: ' ▤'; font-size: 0.62rem; opacity: 0.8; }
.bigcal-srcrow { display: flex; flex-direction: column; gap: 4px; }
.bigcal-srclab { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.bigcal-topic-src { border-color: var(--btn-bg); }
/* Re-rendering a list must not move the page: no scroll anchoring here. */
#anki-deck-list, #guides-list, #pathways-list { overflow-anchor: none; }

/* ---- v16: calendar month centred over its tiles; compact header lifts the page ---- */
.bigcal-left { align-items: center; }
.bigcal-monthblock { align-items: center; width: 100%; }
.bigcal-monthblock .bigcal-head { justify-content: center; }
.bigcal-monthblock .bigcal-summary { justify-content: center; text-align: center; }
.bigcal-monthblock .bigcal-tools { justify-content: center; flex-wrap: wrap; }
/* The compact header (46px) is now how every app page looks, so the page sits
   close under it: 18px of air instead of the 40px the full header used to get.
   The home page keeps the full header and the base padding above. */
@media (min-width: 951px) {
    body.header-compact #main-content { padding-top: 64px; }
    body.header-compact #sidebar { padding-top: 58px; }
    body.header-compact #fixed-back-btn { top: 56px; }
}

/* ---- v16: the search bar and Select By… read as one control ----
   The search pill keeps its full rounded shape and sits on top of the button's
   left edge, so the pill's curve appears cut out of the button's border. */
.alpha-search-row { gap: 0; }
.alpha-search-row .alpha-search-form { position: relative; z-index: 2; flex: 0 1 380px; }
.alpha-search-row .alpha-search-input { border-radius: 999px; position: relative; height: 42px; padding-top: 0; padding-bottom: 0; }
.alpha-search-row .page-week-btn.sel-toggle { height: 42px; display: inline-flex; align-items: center; }
.alpha-search-row .page-week-dropdown { position: relative; z-index: 1; margin-left: -26px; }
.alpha-search-row .page-week-btn.sel-toggle {
    border-radius: 0 999px 999px 0;
    padding-left: 40px;
    border-left: 1px solid var(--border-color);
}
.alpha-search-row .page-week-btn.sel-toggle:hover { border-left-color: var(--btn-bg); }
/* The panel now hangs off the button's right edge. */
.alpha-search-row .page-week-panel.sel-panel { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.alpha-search-row .page-week-dropdown:hover .page-week-panel.sel-panel { transform: translateX(0) translateY(0); }
@media (max-width: 760px) {
    .alpha-search-row { gap: 10px; flex-wrap: wrap; }
    .alpha-search-row .page-week-dropdown { margin-left: 0; }
    .alpha-search-row .page-week-btn.sel-toggle { border-radius: 999px; padding-left: 26px; }
    .alpha-search-row .page-week-panel.sel-panel { left: 50%; right: auto; transform: translateX(-50%) translateY(4px); }
    .alpha-search-row .page-week-dropdown:hover .page-week-panel.sel-panel { transform: translateX(-50%) translateY(0); }
}

/* ---- v16: nothing on a flashcard is cut off — fit first, then the reader's zoom ---- */
.pwfc-face { overflow: auto; }
.pwfc-cardtext { display: block; max-width: 100%; }
.pwfc-cardhead { display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; }
.pwfc-cardhead .pwfc-face-label { padding: 0; }
.pwfc-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.pwfc-zbtn { font: inherit; font-size: 0.72rem; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 6px;
    border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); cursor: pointer; opacity: 0.8; }
.pwfc-zbtn:hover { opacity: 1; border-color: var(--btn-bg); }
.pwfc-zlab { min-width: 46px; font-variant-numeric: tabular-nums; }
.pwfc-modal.is-blinged .pwfc-zbtn { color: #1f2430; background-color: rgba(255, 255, 255, 0.7); }
/* Deck cards on the Flashcards study page. */
body.deck-session #flashcard-stage .flashcard-text { zoom: calc(var(--fc-fit, 1) * var(--fc-zoom, 1)); }
body.deck-session #flashcard-stage .flashcard-face { overflow: auto; }
.flashcard-text img.anki-img { max-height: 42vh; object-fit: contain; }
#flashcard-stage { position: relative; }
.fcz { position: absolute; right: 14px; top: 10px; z-index: 6; display: none; align-items: center; gap: 2px; }
body.deck-session .fcz { display: inline-flex; }
.fcz-btn { font-size: 0.72rem; font-weight: 800; line-height: 1; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); cursor: pointer; opacity: 0.85; }
.fcz-btn:hover { opacity: 1; border-color: var(--btn-bg); }
.fcz-lab { min-width: 48px; font-variant-numeric: tabular-nums; }
/* ---- v16: free tier keeps one custom study guide ---- */

.guides-plus-row.is-capped { opacity: 0.6; }

.guides-plus-row.is-capped .guides-file-name::after { content: " — Premium for more"; font-weight: 600; opacity: 0.75; font-size: 0.85em; }

.guides-custom-header .decks-count { margin-left: 10px; }

/* ---- v1x45: calendar — tiles left-bound, big month + day panels, carded grid ---- */
#study-view .study-body { padding: 4px 26px 48px 26px; }
.bigcal-topbar { display: grid; grid-template-columns: minmax(210px, 240px) minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; justify-content: stretch; gap: 16px; margin: 0 0 14px; }
/* Six compact tiles in one left-bound column. */
#study-view .study-tile-grid.bigcal-tiles { display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 8px; width: 100%; max-width: none; margin: 0; align-self: stretch; }
.bigcal-tiles .study-tile { padding: 8px 12px; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.bigcal-tiles .study-tile-value { font-size: 1.5rem; }
.bigcal-tiles .study-tile-label { font-size: 0.82rem; margin-top: 0; }
.bigcal-tiles .study-tile-sub { font-size: 0.7rem; }
/* The month block is a card of its own, matching the day panel beside it. */
.bigcal-monthblock { align-items: stretch; width: auto; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 18px; gap: 10px; justify-content: center; }
.bigcal-monthblock .bigcal-title { font-size: 2.1rem; }
.bigcal-monthblock .bigcal-summary { font-size: 0.9rem; }
.bigcal-topbar .bigcal-detail { height: 100%; }
.bigcal-topbar .bigcal-detail-main { padding: 14px 18px 16px; }
.bigcal-topbar .bigcal-detail-title { font-size: 1.35rem; }
.bigcal-topbar .bigcal-detail-rail { flex-basis: 84px; }
.bigcal-topbar .bigcal-detail-daynum { font-size: 2.4rem; }
/* The grid itself sits on a surface, like the panels above it. */
.bigcal-gridwrap { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 10px; }
.bigcal-dows { padding: 0 10px; }
@media (max-width: 1500px) {
    .bigcal-topbar { grid-template-columns: minmax(190px, 210px) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .bigcal-monthblock .bigcal-title { font-size: 1.8rem; }
}
@media (max-width: 1180px) {
    .bigcal-topbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #study-view .study-tile-grid.bigcal-tiles { grid-template-columns: repeat(3, 1fr); grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .bigcal-topbar { display: flex; flex-direction: column; }
    #study-view .study-tile-grid.bigcal-tiles { grid-template-columns: repeat(2, 1fr); }
    #study-view .study-body { padding: 4px 10px 40px 10px; }
}

/* ---- v1x45: Review Due joins its count the way Select By… joins the search bar ---- */
.review-due-combo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.review-due-btn { position: relative; z-index: 2; height: 42px; border-radius: 999px; padding: 0 22px; font-size: 1.05rem; min-width: 0; display: inline-flex; align-items: center; }
.review-due-count { position: relative; z-index: 1; margin-left: -26px; padding: 0 16px 0 34px; height: 42px; display: inline-flex; align-items: center;
    border: 1px solid var(--border-color); border-left: 1px solid var(--border-color); border-radius: 0 999px 999px 0;
    background-color: var(--card-bg); color: var(--btn-bg); font-weight: 800; font-variant-numeric: tabular-nums; }
.review-due-combo.is-empty .review-due-count { color: var(--explanation-text); opacity: 0.8; }
.review-due-combo.is-empty .review-due-btn { opacity: 0.85; }
/* The Select By… button no longer grows on hover. */
.alpha-search-row .page-week-btn.sel-toggle:hover,
.alpha-search-row .page-week-btn.sel-toggle:focus-visible { transform: none !important; }
.page-week-btn.sel-toggle { transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
/* The Decks page carries the same control with no search bar beside it. */
.decks-search-row { justify-content: flex-start; margin: 0 0 12px; max-width: none; }
@media (max-width: 760px) {
    .alpha-search-row .review-due-combo { order: -1; }
}
/* A row colour now fills the whole item, not just its left edge. */
.has-rowc { box-shadow: none; background-color: var(--rowc, transparent) !important; border-color: var(--rowc, var(--border-color)); }
.has-rowc, .has-rowc .guides-file-name, .has-rowc .decks-name, .has-rowc .guides-file-desc, .has-rowc .decks-meta { color: #1f2430; }
.has-rowc .guides-file-desc, .has-rowc .decks-meta { opacity: 0.75; }
.has-rowc .btn-secondary, .has-rowc .decks-rename, .has-rowc .anki-deck-x, .has-rowc .row-color, .has-rowc .guides-grip, .has-rowc .guides-custom-arrow { color: #1f2430; border-color: rgba(0, 0, 0, 0.28); }
.has-rowc .btn-secondary { background-color: rgba(255, 255, 255, 0.55); }
.has-rowc .guides-file-icon, .has-rowc .guides-folder-icon { color: #1f2430; border-color: rgba(0, 0, 0, 0.3); }
.has-rowc .guides-custom-link .guides-file-name { text-decoration-color: rgba(0, 0, 0, 0.4); }
/* Pathways are grouped by the guide they came from. */

.pw-srchead { margin-top: 18px; font-size: 0.95rem; }

#pathways-list .pw-srchead:first-of-type { margin-top: 10px; }

/* ---- v1x45: the card is one standard size and its content never runs into the
   label at the top or the topic/ID row at the bottom ---- */
.flashcard-face { padding: 46px 30px 44px; }
.flashcard-face > .flashcard-text,
.flashcard-face > .flashcard-answer-wrap { max-width: 100%; max-height: 100%; overflow: auto; }
#flashcard-stage .flashcard-text { zoom: calc(var(--fc-fit, 1) * var(--fc-zoom, 1)); }
#flashcard-stage .flashcard-face { overflow: hidden; }
.flashcard-text img { max-width: 100%; height: auto; }
.flashcard-text img.anki-img { max-height: 34vh; }
/* The zoom control sits left of the card's ? button. */
.fcz { right: 58px; top: 12px; }

/* ---- v1x45: the sidebar's "stay hidden" pin ---- */
.title-buffer { justify-content: space-between; gap: 10px; }
.sidebar-autohide { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; margin-left: auto; display: inline-flex;
    align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; border-radius: 8px;
    border: 1px solid var(--border-color); background-color: transparent; color: var(--explanation-text);
    cursor: pointer; opacity: 0.75; transition: opacity 0.15s, border-color 0.15s, color 0.15s, background-color 0.15s; }
.sidebar-autohide:hover { opacity: 1; border-color: var(--btn-bg); color: var(--btn-bg); background-color: transparent; }
/* Switched on, the pin reads as a plain grey control rather than an accent. */
.sidebar-autohide.is-on { color: var(--text-color); background-color: rgba(128, 138, 150, 0.30);
    border-color: rgba(128, 138, 150, 0.75); opacity: 1; }
.sidebar-autohide.is-on:hover { color: var(--text-color); border-color: rgba(128, 138, 150, 0.95);
    background-color: rgba(128, 138, 150, 0.42); }

/* ---- v1x45b: readable colours, spacing, column control, balanced alphabet ---- */
/* A coloured row keeps EVERY glyph readable — including the delete ✕, which used
   to inherit a light colour and vanish against a pastel. */
.has-rowc { --rowink: #1f2430; }
.has-rowc, .has-rowc * { color: var(--rowink) !important; }
.has-rowc .anki-deck-x, .has-rowc .decks-rename, .has-rowc .row-color, .has-rowc .btn-secondary {
    background-color: rgba(255, 255, 255, 0.62) !important; border-color: rgba(0, 0, 0, 0.32) !important; opacity: 1; }
.has-rowc .anki-deck-x:hover, .has-rowc .decks-rename:hover, .has-rowc .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.85) !important; }
.has-rowc .row-color span { border-color: rgba(0, 0, 0, 0.35) !important; }
.has-rowc .guides-file-icon, .has-rowc .guides-folder-icon { border-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(255, 255, 255, 0.5) !important; }
.has-rowc .guides-file-desc, .has-rowc .decks-meta { opacity: 0.8; }
.has-rowc .sched-input { background-color: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.3) !important; }

/* Review Due keeps its distance from the search bar. */
.alpha-search-row .review-due-combo { margin-right: 14px; }

/* Two balanced rows of letters. */
#alpha-nav { flex-direction: column; gap: 8px; }
.alpha-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* Columns control: hover the icon, pick 3 / 4 / 5. */
.grid-cols-dropdown { position: relative; flex: 0 0 auto; margin-left: 12px; }
/* A round button, clear of the Select By… border beside it. */
.grid-cols-toggle { height: 42px; width: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; min-width: 0; }
.grid-cols-toggle:hover, .grid-cols-toggle:focus-visible { transform: none !important; }
.gc-ico { display: inline-flex; align-items: stretch; gap: 2px; height: 15px; }
.gc-ico i { display: block; width: 4px; border: 1px solid currentColor; border-radius: 1.5px; background-color: currentColor; opacity: 0.9; }
.gc-ico-3 i { width: 5px; }
.gc-ico-5 i { width: 3px; }
.grid-cols-panel { position: absolute; z-index: 60; top: 100%; right: 0; margin-top: 6px; display: flex; gap: 6px; padding: 7px 9px;
    background-color: var(--card-bg); border: 1px solid var(--btn-bg); border-radius: 999px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; }
.grid-cols-dropdown:hover .grid-cols-panel, .grid-cols-dropdown:focus-within .grid-cols-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.grid-cols-opt { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; padding: 0; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 9px; background-color: transparent; color: var(--text-color); opacity: 0.8; transition: opacity 0.15s, border-color 0.15s, background-color 0.15s; }
.grid-cols-opt:hover { opacity: 1; border-color: var(--btn-bg); }
.grid-cols-opt.is-on { opacity: 1; color: #fff; background-color: var(--btn-bg); border-color: var(--btn-bg); }
/* The column count is a variable set on the root before the first paint (see the
   boot script in index.html), so the grid draws in the reader's own layout from
   the start instead of settling into it a moment later. */
#alphabetical-topic-grid { grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)); }
#alphabetical-topic-grid.has-grid-cols { transition: grid-template-columns 0.35s ease; }
#alphabetical-topic-grid.is-recolumning .topic-card { animation: gridSettle 0.38s ease; }
@keyframes gridSettle { from { opacity: 0.35; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { #alphabetical-topic-grid, #alphabetical-topic-grid.has-grid-cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }

/* The topics grid uses the page's full width once a column count is in play;
   the header, alphabet and search row stay centred at their own width. */
#alphabetical-topic-view.view-section { max-width: none; }
#alphabetical-topic-view .view-header-center,
#alphabetical-topic-view #alpha-nav,
#alphabetical-topic-view .alpha-search-row { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* One card size in every view: the grid is exactly as wide as its columns need,
   so three columns keep the page's original margin and each extra column eats
   into that margin instead of stretching the cards to the screen edge. */
#alphabetical-topic-grid { padding: 0 6px; --gc-card: 287px; --gc-gap: 20px;
    max-width: min(100%, calc(var(--grid-cols, 4) * var(--gc-card) + (var(--grid-cols, 4) - 1) * var(--gc-gap) + 12px));
    margin-left: auto; margin-right: auto; }

/* ---- v1x45c: the Decks page has no sidebar, and the card manager is a
   full-width browser with Anki's sub-deck tree ---- */
#decks-view.view-section { max-width: none; }
#decks-view .view-header-center, #decks-view .decks-upload, #decks-view .decks-search-row { max-width: 1000px; margin-left: auto; margin-right: auto; }
#decks-view #anki-deck-list { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* Only the manager breaks out of that column: everything above it — the upload
   box, the quota bar, every deck and folder row — keeps the exact width and
   position it had before the manager opened. */
#anki-deck-list .dm-host { max-width: none; width: 100%; }
/* ---- v1x46: image-occlusion cards ----
   The picture sets the size; every mask is laid over it edge to edge, the way
   Anki draws them. Stacked in sequence they read as an empty canvas. */
.anki-io { position: relative; display: block; width: fit-content; max-width: 100%; margin: 10px auto; line-height: 0; }
.anki-io > .anki-io-base { display: block; max-width: 100%; height: auto; border-radius: 6px; }
/* The mask fills the picture exactly — it must not pick up the general image
   sizing rules, or it lands at its own scale and the boxes drift off the anatomy. */
.anki-io > .anki-io-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    max-width: none; max-height: none; pointer-events: none; }
.dm-host .bld-prev .anki-io > .anki-io-base { max-height: 320px; width: auto; }

/* ---- v1x45j: images in the card editor ----
   The preview shows the picture with the file name the card refers to, so an
   image card can be read and its <img src> checked in one place. */
.anki-fig { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
    margin: 6px 10px 6px 0; vertical-align: top; max-width: 100%; }
.anki-fig .anki-img { display: block; max-width: 100%; border-radius: 8px; border: 1px solid var(--border-color); }
.anki-figname { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; opacity: 0.7;
    word-break: break-all; max-width: 260px; }
.dm-host .bld-prev .fc-txt.has-anki-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.dm-host .bld-prev .anki-img { max-height: 240px; width: auto; }

/* ---- v1x45i: one-press start on a topic card ----
   Top right of every card: a quiz of ten questions, or the whole deck as
   flashcards, without touching the sidebar's settings first. */
.topic-quick { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 50%; background-color: var(--card-bg);
    color: var(--text-color); font-size: 0.72rem; line-height: 1; opacity: 0; transform: scale(0.9);
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.topic-card:hover .topic-quick, .topic-quick:focus-visible { opacity: 1; transform: none; }
.topic-quick:hover { background-color: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.topic-quick:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
.topic-card.selected .topic-quick, .topic-card.is-selected .topic-quick { opacity: 1; transform: none; }
@media (hover: none) { .topic-quick { opacity: 1; transform: none; } }

/* ---- v1x45i: the standardized guides collapse to the first one ---- */
.guides-std-head { display: flex; align-items: center; gap: 8px; }
.guides-std-toggle { font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
    text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; }
.guides-std-toggle:hover { color: var(--btn-bg); opacity: 1; }
.guides-std-caret { display: inline-block; font-size: 1.05rem; line-height: 1; transition: transform 0.18s ease; }
.guides-std-caret.is-open { transform: rotate(90deg); }
.guides-std-count { opacity: 0.9; }

/* ---- v1x45i: dropping between two rows ----
   Near a row's top or bottom edge the drop lands between rows and a line shows
   exactly where; the middle of a row keeps its old meaning (file into a folder). */
.decks-row, .decks-folder-row, .guides-file-row, .guides-custom-row, .guides-folder-item { position: relative; }
.drop-before::before, .drop-after::after {
    content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px;
    background-color: var(--btn-bg); box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.25); z-index: 3;
}
.drop-before::before { top: -6px; }
.drop-after::after { bottom: -6px; }

/* ---- v1x45h: the Upload panel's cut-away corner ----
   The bottom-right corner of the panel is painted out in the page's own
   background, so the panel reads as if that corner were removed, and Review Due
   sits in the gap: level with the Upload button, but plainly outside the box. */
#decks-view .decks-upload { position: relative; --notch-w: 208px; --notch-h: 58px; padding-bottom: 8px; }
/* Air between the description and the cut, so the panel's right side sits lower
   than its text rather than crowding it. */
#decks-view .decks-upload-help { margin-bottom: 40px; }
/* The cut is drawn as one outline so every corner of it is rounded: the two the
   panel keeps (where its bottom and right edges stop) curve outward, and the
   corner of the cut itself curves inward, all at the panel's own 12px radius. */
.decks-upload-notch { position: absolute; right: -1px; bottom: -1px; overflow: visible; pointer-events: none; }
.decks-upload-notch .notch-fill { fill: var(--bg-color); }
.decks-upload-notch .notch-line { fill: none; stroke: var(--border-color); stroke-width: 1; stroke-linecap: round; }
.decks-due-slot { position: absolute; right: 0; bottom: 8px; z-index: 2; }
#decks-view .anki-upload-row { padding-right: var(--notch-w); }
#decks-view .anki-progress { margin-right: var(--notch-w); }
@media (max-width: 760px) {
    #decks-view .decks-upload { --notch-w: 0px; --notch-h: 0px; }
    .decks-upload-notch { display: none; }
    .decks-due-slot { position: static; margin-top: 12px; }
}

/* The description is one sentence until it is hovered (or focused), then the
   panel grows to the whole thing and holds for six seconds after you leave. */
/* The open and close are eased over three quarters of a second, so the panel
   grows and settles rather than jumping between its two sizes. */
.decks-upload-help { overflow: hidden; }
/* Opening and closing take the same 0.75s, and the closing curve is the exact
   mirror of the opening one (x,y swapped end for end), so the panel shuts at
   the same pace it opened rather than snapping shut at the end. */
.decks-upload-help.is-animating { transition: max-height 0.75s cubic-bezier(0.32, 0.06, 0.24, 1); }
.decks-upload-help.is-animating.is-closing { transition-timing-function: cubic-bezier(0.76, 0, 0.68, 0.94); }
.decks-upload-help .duh-rest { display: none; }
.decks-upload-help.is-open .duh-rest, .decks-upload-help.is-animating .duh-rest { display: inline; }
.decks-upload-help .duh-dots { transition: opacity 0.35s ease; }
.decks-upload-help.is-open .duh-dots { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .decks-upload-help.is-animating { transition: none; } }
.decks-upload-help:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 3px; border-radius: 6px; }

/* ---- v1x45h: an event that runs across days ----
   The event is stored on its first day and drawn on every day it covers: the
   later days read as a continuation, with the day count on the chip. */
.bigcal-ev-span { border-left: 3px solid rgba(0, 0, 0, 0.35); }
.bigcal-ev-span.is-cont { border-left-style: dashed; }
.bigcal-ev-span.is-last { border-right: 3px solid rgba(0, 0, 0, 0.35); }
.bigcal-ev-span-tag { margin-left: auto; padding-left: 6px; font-size: 0.62rem; font-weight: 800; opacity: 0.65; }
.bigcal-span-note { display: block; font-size: 0.68rem; opacity: 0.7; margin-top: 1px; }
.bigcal-add-end { width: 130px; flex: 0 0 auto; }
.calpop-row .bigcal-add-end { width: 124px; }
@media (max-width: 900px) { .bigcal-add-end { width: 100%; } }

/* ---- v1x45h: a chosen row colour follows the theme ----
   In dark mode the pastel is mixed down into a deep hue of the same colour with
   light ink, the way a dark-themed card reads, instead of a bright block. Any
   hex works, including one the reader picks later. */
@supports (background: color-mix(in srgb, red 50%, blue)) {
    [data-theme="dark"] .has-rowc {
        --rowink: #eaf0f7;
        background-color: color-mix(in srgb, var(--rowc) 26%, #0f1319 74%) !important;
        border-color: color-mix(in srgb, var(--rowc) 46%, #0f1319 54%) !important;
    }
    [data-theme="dark"] .has-rowc .anki-deck-x,
    [data-theme="dark"] .has-rowc .decks-rename,
    [data-theme="dark"] .has-rowc .row-color,
    [data-theme="dark"] .has-rowc .btn-secondary {
        background-color: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(255, 255, 255, 0.30) !important;
    }
    [data-theme="dark"] .has-rowc .anki-deck-x:hover,
    [data-theme="dark"] .has-rowc .decks-rename:hover,
    [data-theme="dark"] .has-rowc .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.20) !important; }
    [data-theme="dark"] .has-rowc .row-color span { border-color: rgba(255, 255, 255, 0.45) !important; }
    [data-theme="dark"] .has-rowc .guides-file-icon,
    [data-theme="dark"] .has-rowc .guides-folder-icon {
        border-color: rgba(255, 255, 255, 0.32) !important; background-color: rgba(255, 255, 255, 0.08) !important; }
    [data-theme="dark"] .has-rowc .sched-input {
        background-color: rgba(0, 0, 0, 0.35) !important; border-color: rgba(255, 255, 255, 0.32) !important; }
    [data-theme="dark"] .has-rowc .guides-custom-link .guides-file-name { text-decoration-color: rgba(255, 255, 255, 0.45); }
    /* The swatches in the picker show the hue the reader will actually get. */
    [data-theme="dark"] .rowcolor-swatch[style*="--rowc"] {
        background-color: color-mix(in srgb, var(--rowc) 30%, #0f1319 70%) !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
    }
}

#decks-view.has-manager .dm-host {
    --dmw: min(calc(100vw - 64px), 1640px);
    width: var(--dmw); max-width: none; flex: none; align-self: flex-start;
    margin-left: calc((100% - var(--dmw)) / 2); min-height: 62vh;
}
.dm-host .bld-side { width: 340px; flex: 0 0 340px; }
.dm-host .bld-list.tree { padding: 6px 4px 14px; }
/* Tree rows indent per level, like Anki's deck list. */
.dm-host .tnode { padding-left: calc(6px + var(--tdep, 0) * 13px); }
.dm-host .tnode.t2 b { font-weight: 650; }
.dm-host .tkids .bld-item { padding-left: 22px; }
.dm-host .tkids > .tnode + .bld-item { margin-top: 2px; }
@media (max-width: 1100px) { .dm-host .bld-side { width: 260px; flex-basis: 260px; } }
@media (max-width: 820px) { .dm-host .bld-body { flex-direction: column; } .dm-host .bld-side { width: auto; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--border-color); } }
/* A deck study session still gets the deck rail; the Decks page does not. */
body.decks-mode #decks-sidebar { display: flex; }

/* The rows above the manager are deliberately left alone here: #anki-deck-list is
   a column flexbox, so auto side margins on its children make them shrink to their
   own content, which is what re-formatted the whole list when Edit was pressed. */

/* A deck session may use the page's width for its (larger) card. */
body.deck-session #flashcard-study-view.view-section { max-width: none; }
body.deck-session #flashcard-study-view .quiz-title-row,
body.deck-session #flashcard-study-view .flashcard-progress-row { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---- Pop-up flashcards: a panel that keeps its dimensions -------------------
   The card is one standard size, so moving between a picture card and a one-line
   card no longer resizes the panel. A grip in each corner drags it larger or
   smaller (the reader's size is held for the session and remembered for the next
   one); a plain click on a grip resets it, the same as the study page's grip. */
.pwfc-modal { position: relative; height: min(760px, 90vh); }
.pwfc-modal.is-sized { width: var(--pwfc-w); height: var(--pwfc-h); max-width: none; max-height: none; }
.pwfc-face-text { min-height: 0; }
.pwfc-top .fc-x { position: relative; z-index: 8; }
/* Keep the header and the button row clear of the corner grips. */
.pwfc-modal .pwfc-top { padding-left: 36px; padding-right: 36px; }
.pwfc-modal .pwfc-actions { padding-left: 36px; padding-right: 36px; }
.pwfc-grip {
    position: absolute; width: 22px; height: 22px; z-index: 6; touch-action: none;
    user-select: none; -webkit-user-select: none;
}
/* Only the bottom-right corner is drawn: the same arrows, the same drag-or-click
   behaviour, as the grip on the Flashcards study page. The other three corners
   are invisible hit zones that resize just the same. */
.pwfc-grip-se {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    border-radius: 7px; border: 1px solid var(--border-color); background-color: transparent;
    color: var(--explanation-text); opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.pwfc-grip-se:hover, .pwfc-grip-se:focus-visible, .pwfc-grip-se.dragging {
    opacity: 1; color: var(--btn-bg); border-color: var(--btn-bg); outline: none;
}
.pwfc-grip-se.dragging { transform: scale(0.92); }
.pwfc-grip svg { display: block; pointer-events: none; }
.pwfc-grip-nw { left: 4px; top: 4px; cursor: nwse-resize; }
.pwfc-grip-se { right: 5px; bottom: 5px; cursor: nwse-resize; }
.pwfc-grip-ne { right: 4px; top: 4px; cursor: nesw-resize; }
.pwfc-grip-sw { left: 4px; bottom: 4px; cursor: nesw-resize; }
.pwfc-modal.is-blinged .pwfc-grip-se { color: #1f2430; border-color: rgba(0, 0, 0, 0.25); }
/* Everything on a card stays inside it: a picture is capped by the height of the
   face it sits in (set by the fit pass), and the fit scales what is left. */
#pwfc .pwfc-face-text img.anki-img { max-width: 100%; max-height: var(--pwfc-imgmax, 52vh); }
#pwfc .anki-io > .anki-io-base { max-height: var(--pwfc-imgmax, 52vh); width: auto; }
#pwfc .anki-fig img.anki-img { max-height: var(--pwfc-imgmax, 52vh); }

/* ---- The two "+" boxes share one line -------------------------------------
   "+ Custom Deck" (or "+ New Custom Study Guide") keeps the bulk of the width
   and "+ Folder" sits beside it at 30%, inside the page's own width. They
   stretch to the same height so the pair reads as one control. */
.decks-plus-wrap { display: flex; flex-direction: row; align-items: stretch; gap: 10px; }
.decks-plus-wrap > .decks-plus-row, .guides-plus-wrap > .guides-plus-row { flex: 1 1 auto; min-width: 0; margin-left: 0; margin-right: 0; }
.decks-plus-wrap > .decks-plus-folder, .guides-plus-wrap > .guides-plus-folder { flex: 0 0 30%; max-width: 30%; }
.decks-plus-wrap .decks-row-main, .guides-plus-wrap .guides-file-main { min-width: 0; }
.decks-plus-wrap .decks-meta, .guides-plus-wrap .guides-file-desc { overflow-wrap: anywhere; }
/* Too narrow for two boxes: stack them again. */
@media (max-width: 700px) {
    .decks-plus-wrap, .guides-plus-wrap { flex-direction: column; }
    .decks-plus-wrap > .decks-plus-folder, .guides-plus-wrap > .guides-plus-folder { flex: 1 1 auto; max-width: none; }
}

/* ---- Zoom controls on a card ----------------------------------------------
   They sit on the card itself, so they carry no ground of their own: the text
   follows the theme, or the card's bling tint when one is set, and the border
   is drawn from the same colour so it stays visible on any card. */
.pwfc-zbtn, .fcz-btn { background-color: transparent; color: var(--dynamic-text-color, var(--text-color));
    border-color: color-mix(in srgb, currentColor 38%, transparent); }
.pwfc-zbtn:hover, .fcz-btn:hover { background-color: transparent; border-color: var(--btn-bg); color: var(--btn-bg); }
.pwfc-modal.is-blinged .pwfc-zbtn { background-color: transparent; color: #1f2430; }
.pwfc-modal.is-blinged .pwfc-zbtn:hover { color: #1f2430; border-color: rgba(0, 0, 0, 0.45); }

/* An occlusion stack is invisible until its picture and every mask have landed,
   so the unmasked picture — the answer — is never shown first. */
.anki-io:not(.is-ready) { visibility: hidden; }
/* Buttons that belong to the answer keep their place on the question side, so
   revealing an answer never changes the height of the row or the card above it. */
.pw-tool.is-ghost, .pwfc-grades.is-ghost { visibility: hidden; pointer-events: none; }

/* Grade buttons inside the pop-up: the study page's pastel palette, sized for a
   toolbar. The row keeps their space on the question side, so a card never
   changes height when its answer is revealed. */
.pwfc-grades { display: inline-flex; align-items: center; gap: 6px; }
.pwfc-grades .flash-grade-btn { min-width: 62px; padding: 7px 12px; font-size: 0.85rem; border-radius: 7px; }
.pwfc-grades .flash-grade-btn:hover { transform: none; filter: brightness(1.05); }
/* One line, always: a hint that wrapped would move the card's bottom edge. */
.pwfc-hint-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Simple review: no grades, so the grade row and its key hints stay out of the
   way and the summary counts only what was seen. */
body.deck-simple #flashcard-grade-row { display: none !important; }
body.deck-simple .flashcard-summary-stats .flashcard-summary-stat:not(:first-child) { display: none; }
#flashcard-next-row #btn-next-card { min-width: 160px; padding: 12px 20px; }

/* ---- Multi-day events: one bar across the days it covers --------------------
   Each week row assigns lanes; a day reserves every lane's height so a bar sits
   at the same offset in each cell, and the segments bleed into the grid's
   gutter so they meet with no seam. Only the first cell of a row is labelled. */
.bigcal-cell.has-spans { overflow: visible; }
.bigcal-spans { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; margin: 1px -9px 3px; }
.bigcal-span { height: 19px; line-height: 19px; font-size: 0.72rem; font-weight: 700; color: #333;
    padding: 0 7px; white-space: nowrap; overflow: hidden; }
.bigcal-span.is-empty { background: none !important; }
.bigcal-span-label { display: block; overflow: hidden; text-overflow: ellipsis; }
.bigcal-span.row-start { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.bigcal-span.row-end { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.bigcal-span:not(.row-start) { margin-left: -10px; padding-left: 0; }
.bigcal-span:not(.row-end) { margin-right: -10px; }
.bigcal-span.is-event { box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.32); }
.bigcal-span.is-event:not(.is-start) { box-shadow: none; }
@media (max-width: 760px) {
    .bigcal-span { height: 15px; line-height: 15px; font-size: 0.62rem; }
    .bigcal-spans { margin-left: -6px; margin-right: -6px; }
    .bigcal-span:not(.row-start) { margin-left: -8px; }
    .bigcal-span:not(.row-end) { margin-right: -8px; }
}

/* ---- Search-row controls: glow, never grow -------------------------------
   Review Due, Select By… and the columns button sit beside the search bar, so
   they take its glow on hover instead of the global scale(1.03) — a control
   that grows nudges the whole row. */
.review-due-btn, .review-due-count, .sel-toggle, #quiz-week-toggle, .grid-cols-toggle {
    transition: box-shadow 1.25s ease, border-color 1.25s ease;
}
.review-due-btn:hover, .review-due-btn:focus-visible,
.sel-toggle:hover, .sel-toggle:focus-visible,
#quiz-week-toggle:hover, #quiz-week-toggle:focus-visible,
.grid-cols-toggle:hover, .grid-cols-toggle:focus-visible,
.grid-cols-dropdown:hover .grid-cols-toggle, .grid-cols-dropdown:focus-within .grid-cols-toggle {
    transform: none !important;
    opacity: 1;
    border-color: var(--alpha-search-glow-border);
    box-shadow: 0 0 8px var(--alpha-search-glow-soft);
}
/* Review Due and its count read as one control, so they glow together. */
.review-due-combo:hover .review-due-count, .review-due-combo:focus-within .review-due-count {
    border-color: var(--alpha-search-glow-border);
    box-shadow: 0 0 8px var(--alpha-search-glow-soft);
}

/* ---- Card colour swatches on the study page ------------------------------ */
.fc-colors { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 4px; }   /* every flashcard session, under Finish Up */
.fc-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-color); cursor: pointer; padding: 0; }
.fc-swatch:hover { transform: none !important; filter: brightness(1.08); }
.fc-swatch.active { outline: 2px solid var(--dynamic-text-color, var(--text-color)); outline-offset: 1px; }
.fc-colors-lab { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    opacity: 0.6; margin-right: 4px; color: var(--dynamic-text-color, var(--text-color)); }

/* ---- A finished session wears the deck's colour --------------------------
   The page behind it already takes the bling tint, so a dark panel in the
   middle of a pastel page reads as a mistake. It takes the same accessory tone
   (and readable ink) the cards themselves use, in either theme. */
#main-content.bling-active #flashcard-summary {
    background-color: var(--dynamic-card-bg) !important;
    color: var(--dynamic-text-color, var(--text-color));
    border-color: color-mix(in srgb, var(--dynamic-text-color, #000000) 22%, transparent);
}
#main-content.bling-active #flashcard-summary h2,
#main-content.bling-active #flashcard-summary .flashcard-summary-stat span,
#main-content.bling-active #flashcard-summary .flashcard-summary-stat strong {
    color: var(--dynamic-text-color, var(--text-color));
}
#main-content.bling-active #flashcard-summary .flashcard-summary-stat {
    background-color: color-mix(in srgb, var(--dynamic-card-bg) 72%, #ffffff 28%);
    border-color: color-mix(in srgb, var(--dynamic-text-color, #000000) 18%, transparent);
}

/* Prose links inside Settings had no colour of their own, so they fell back to
   the browser's default navy — unreadable on a dark panel. They take the app's
   accent in both themes. */
.setup-section-body a, .parameter-toggle-container a, .decks-side-note a {
    color: var(--btn-bg); font-weight: 600; text-underline-offset: 2px;
}
.setup-section-body a:hover, .parameter-toggle-container a:hover, .decks-side-note a:hover { filter: brightness(1.15); }

/* ---- Pictures in your own cards -------------------------------------------
   The editor's images-folder row, and the one-time explainer that says why a
   folder is needed at all (nothing is uploaded, so the picture has to live
   somewhere on this computer). */
.dm-imgrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; font-size: 0.86rem; }
.dm-img-on { color: var(--text-color); }
.dm-img-on b { font-weight: 800; }
.dm-img-off { color: var(--explanation-text); }
#dm-img { white-space: nowrap; }

.imgintro-overlay { z-index: 1400; }
.imgintro { width: min(620px, 94vw); max-height: 92vh; overflow: auto; background-color: var(--card-bg);
    color: var(--text-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); animation: calpop-in 0.14s ease-out; }
.imgintro h3 { margin: 0 0 10px; font-size: 1.25rem; }
.imgintro-lede { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.55; color: var(--text-color); opacity: 0.9; }
.imgintro-fig { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 16px; }
.imgintro-fig .ii-box { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: center;
    text-align: center; padding: 12px 10px; border: 1px dashed var(--border-color); border-radius: 10px;
    background-color: var(--sidebar-bg); font-size: 0.8rem; }
.imgintro-fig .ii-box b { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; }
.imgintro-fig .ii-box span { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; }
.imgintro-fig .ii-folder { border-style: solid; border-color: var(--btn-bg); }
.imgintro-fig .ii-arrow { font-size: 1.4rem; color: var(--btn-bg); flex: 0 0 auto; }
.imgintro-steps { margin: 0 0 14px; padding-left: 22px; font-size: 0.92rem; line-height: 1.6; }
.imgintro-foot { margin: 0 0 18px; font-size: 0.84rem; color: var(--explanation-text); line-height: 1.5; }
.imgintro-acts { display: flex; justify-content: flex-end; gap: 10px; }

/* ===================== v1x46h ===================== */

/* The fixed back / scroll-top arrows sit outside #main-content, so when a study
   session is wearing one of the Bling colours they used to float as two dark
   plates on a coloured page. Drop their fill and let the page show through; the
   ink follows the colour's readable text so the arrow stays legible either way. */
body:has(#main-content.bling-active) .fixed-nav-btn,
body:has(#main-content.bling-active) #fixed-back-btn,
body:has(#main-content.bling-active) #scroll-top-btn {
    background-color: transparent;
    color: var(--dynamic-text-color, #8b929a);
    border-color: var(--dynamic-text-color, #8b929a);
    opacity: 0.85;
}
@media (hover: hover) and (pointer: fine) {
    body:has(#main-content.bling-active) .fixed-nav-btn:hover {
        background-color: var(--dynamic-hover-bg, var(--btn-bg));
        color: var(--btn-text) !important;
        border-color: var(--dynamic-hover-bg, var(--btn-bg));
        opacity: 1;
    }
}

/* Decks page: New Custom Deck and New Folder now carry the Guides page's blue
   dashed plus badge instead of a grey one, so the two pages read as one system. */
.decks-plus-row .guides-plus-icon {
    width: 44px; min-width: 44px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700;
    color: var(--btn-bg);
    border: 2px dashed var(--btn-bg);
    border-radius: 8px;
}
.decks-plus-row .guides-plus-icon-folder { border-radius: 4px 10px 10px 10px; }
.decks-plus-row:hover .guides-plus-icon { background-color: rgba(77, 171, 247, 0.12); }

/* The ▶ glyph is left-heavy inside its own box, so dead-centre reads as
   off-centre; nudge the glyph, not the button (the button animates). */
.topic-quick > span { display: block; margin-left: 2px; }

/* The calendar picture now carries the whole month, so it gets more room. */
.home-calendar-row .marketing-video { flex: 0 1 900px; max-width: 900px; }
@media (max-width: 1200px) { .home-calendar-row .marketing-video { flex: 0 1 780px; max-width: 780px; } }

/* The standardized shelves on Guides and Pathways. Height is NOT animated: a
   growing box relayouts everything inside it on every frame, and with a shelf
   of pathway diagrams that is what made collapsing lag. The rows fade and lift
   instead — compositor work only — and the box leaves the flow when the fade
   finishes, so the page reflows exactly once. */
.std-rest { transition: opacity 0.2s ease, transform 0.2s ease; }
.std-rest[hidden] { display: none; }
.std-rest > .std-rest-in { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.std-rest.is-shut { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.std-rest.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .std-rest { transition: none; } }
.pathways-std-head { display: flex; align-items: center; gap: 10px; }

/* Scheduler topic colours use the shared folder/deck colour button. The old
   paint-drop rules would fight it, so they are neutralised here. */
.sched-color-drop { width: 20px; min-width: 20px; height: 20px; opacity: 0.75; }
.sched-color-drop svg { display: none; }
.sched-color-drop:hover { transform: none; }
.sched-pill-colored .row-color.sched-color-drop { border-color: rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.75); opacity: 1; }

/* Settings › Uploading Images: one row per place this browser keeps pictures. */
.img-settings-list { display: flex; flex-direction: column; gap: 8px; }
.img-set-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; }
.img-set-icon { font-size: 1.1rem; flex: 0 0 auto; }
.img-set-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.img-set-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-set-sub { font-size: 0.82rem; opacity: 0.7; }

/* A folder that exists is an item like any other, so it gets a solid border —
   the dashed outline now belongs only to the "+ New Folder" row that makes one. */
.guides-folder-item { border-style: solid; }

/* ---- Custom user pathways: rows, and the step editor -------------------- */
.pwc-header { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.pwc-plus-wrap { margin-bottom: 4px; }
.pwc-empty { padding: 6px 4px; }
.pwc-wrap[data-dep] > .pwc-row { margin-left: calc(var(--dep, 0) * 40px); }
.pwc-folder { margin-left: calc(var(--dep, 0) * 40px); }
.pwc-row .decks-row-main, .pwc-row .pw-icon { cursor: pointer; }
.pwc-row .pw-caret { cursor: pointer; }
.pwmgr-host .bld-main { padding: 16px 18px 22px; }
.pwmgr-host .bld-prev { margin-top: 14px; }
.pwmgr-host .bld-prev .pwv { padding: 10px 4px; }
.pwe-add { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.pwe-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pwe-step { border: 1px solid var(--border-color); border-radius: 9px; padding: 9px 10px; background-color: var(--sidebar-bg); }
.pwe-step.node { border-left: 3px solid var(--btn-bg); }
.pwe-step.arrow { border-left: 3px solid #a8544a; }
.pwe-step.sep { border-left: 3px solid var(--border-color); }
.pwe-head { display: flex; align-items: center; gap: 8px; }
.pwe-kind { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.65; flex: none; width: 54px; }
.pwe-head .bld-in { flex: 1; min-width: 0; }
.pwe-mini { display: flex; gap: 5px; flex: none; }
.pwe-del { color: #e08b52; }
.pwe-more { display: none; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.pwe-step.open .pwe-more { display: flex; }
.pwe-more label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
.pwe-more .bld-in { text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
@media (max-width: 900px) { .pwe-more label { flex: 1 1 100%; } }

/* The pathway editor's own side list sits flush, unlike the deck tree's rows. */
.pwmgr-host .bld-item { width: 100%; margin-left: 0; }

/* A topic a free account can taste: the badge invites rather than blocks, and
   the count line says how much of it is free. */
.topic-preview-badge { position: absolute; top: 10px; left: 10px; background-color: var(--btn-bg); color: #fff;
    padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; z-index: 2; }
.topic-preview-line { color: var(--btn-bg); }
body.user-premium .topic-preview-badge { display: none; }

/* Highest Yield is Premium. On a free account the row is greyed and inert; the
   tooltip still opens so the reader learns what the feature is and why it is off. */
body.hy-locked #sidebar label.hy-check { color: var(--text-color); opacity: 0.45; cursor: not-allowed; }
body.hy-locked .hy-check input[type="checkbox"] { cursor: not-allowed; }
body.hy-locked .hy-check::after { content: " · Premium"; font-size: 0.78em; font-weight: 700; opacity: 0.9; }
body.hy-locked .hy-check .hy-tip { opacity: 1; }

/* ---- v1x46u: Analytics fills the page like the Calendar does ---- */
.analytics-wrap { max-width: none; padding: 6px 26px 70px; }
@media (max-width: 900px) { .analytics-wrap { padding: 6px 10px 60px; } }
.an-chart-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
#an-deck-charts { margin-top: 12px; }
.an-first { margin-top: 0; margin-bottom: 12px; }
.an-line { width: 100%; height: auto; display: block; }
.an-line-path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.an-line-path.is-dashed { stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .75; }
.an-line-dot { stroke: var(--card-bg); stroke-width: 1.5; cursor: default; }
.an-line-dot:hover { r: 5; }
.an-table-scroll { overflow-x: auto; }
.an-deck-tbl { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.an-deck-tbl th, .an-deck-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border-color); text-align: left; white-space: nowrap; }
.an-deck-tbl th.num, .an-deck-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-deck-tbl th { font-size: 0.72rem; color: var(--explanation-text); text-transform: uppercase; letter-spacing: 0.04em; }
.an-deck-tag { font-size: 0.68rem; color: var(--explanation-text); border: 1px solid var(--border-color); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }

/* ---- v1x46u: Review Due is a Flashcards control — never on the Quizzes page ---- */
body:not(.flashcards-mode) .alpha-search-row .review-due-combo { display: none; }

/* ---- v1x46u: the day panel splits due cards by source, each with its own Review now ---- */
.bigcal-srchead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; }
.bigcal-srchead .bigcal-srclab { margin: 0; }
.bigcal-srchead .bigcal-mini-btn { flex: 0 0 auto; }

#analytics-view.view-section { max-width: none; }
#analytics-view .analytics-top-nav, #analytics-view .analytics-subtitle { max-width: 980px; }

/* v1x46u: at full page width the review calendar's square cells grew to 180px; cap them and let the forecast sit beside the calendar */
.an-cal-day { aspect-ratio: auto; height: 74px; min-height: 0; }
#an-deck-charts .an-col { max-width: 140px; }

/* ---- v1x46v: home marketing rows. A picture row never wraps on its own any more (the picture
   shrinks beside its text instead — wrapping put the picture above the description), and
   below 1100px every row stacks deliberately: description first, picture second, whichever
   side the picture sits on at full width (windowed browser, tablet, phone). ---- */
.marketing-row:has(img) { flex-wrap: nowrap; }
@media (max-width: 1100px) {
    .marketing-row, .marketing-row.reverse, .marketing-row:has(img) { flex-direction: column; flex-wrap: nowrap; gap: 24px; }
    .marketing-row .marketing-text { order: 1; min-width: 0; width: 100%; max-width: 760px; text-align: center; }
    .marketing-row .marketing-video { order: 2; min-width: 0; width: 100%; max-width: 100%; flex: 0 0 auto; }
}

/* ---- v1x47: Anatomy — Gray's plates with the terms in the gutter beside them ---- */
.an-tabs { display: flex; justify-content: flex-start; align-items: center; gap: 14px; margin: 0 0 14px; flex-wrap: wrap; }
.an-shown { color: var(--explanation-text); font-size: 0.85rem; }
.an-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--border-color, #d8dbe0); background: var(--card-bg); color: inherit;
  font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: border-color 0.12s, background-color 0.12s; }
.an-tab:hover { border-color: var(--btn-bg); }
.an-tab.is-on { background-color: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.an-tab-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: color-mix(in srgb, var(--btn-bg) 14%, transparent); color: var(--btn-bg); }
.an-tab.is-on .an-tab-n { background: rgba(255,255,255,0.22); color: #fff; }
.an-tab-all { font-weight: 600; }
.an-ix-all { display: flex; width: 100%; justify-content: center; margin: 0 0 8px; padding: 7px 12px; font-size: 0.84rem; }
.an-ix-quiz { display: flex; width: 100%; justify-content: center; margin: 0 0 4px; padding: 7px 12px; font-size: 0.84rem; font-weight: 700; background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.an-ix-quiz .an-tab-n { background: rgba(255,255,255,0.22); color: #fff; }
.an-ix-quiz.is-zero { opacity: 0.45; cursor: default; }
.an-ix-quiznote { margin: 0 4px 10px; }
/* anatomy flashcards in the pop-up viewer: the figure fills the face, the answer strip sits under it */
.pwfc-face-anatomy { padding: 8px 12px 10px; }
.pwfc-face .fc-an { display: flex; flex-direction: column; align-items: center; height: 100%; min-height: 0; }
.fc-an-drop { width: 100%; flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; }
.fc-an-drop .an-stage { min-width: 0; }
.fc-an-answer { min-height: 36px; display: flex; align-items: center; justify-content: center; margin-top: 8px; font-size: 1.1rem; font-weight: 700; flex: 0 0 auto; }
.fc-an-ask { color: var(--explanation-text); font-weight: 500; }
.fc-an-term { --kt: #1d2126; color: var(--kt); padding: 3px 14px; border: 2px solid #2e9e4f; border-radius: 8px; background: color-mix(in srgb, #2e9e4f 12%, #fff); }
.fc-an-term.k-m { --kt: #c62828; } .fc-an-term.k-a { --kt: #7b3fa0; } .fc-an-term.k-n { --kt: #1f5fbf; } .fc-an-term.k-l { --kt: #2e8b57; } .fc-an-term.k-v { --kt: #0e8a8a; }
.fc-an-term.k-b { --kt: #8a5a2b; } .fc-an-term.k-f { --kt: #b2680a; } .fc-an-term.k-j { --kt: #b5179e; } .fc-an-term.k-h { --kt: #5c7a1f; }
.pwfc-anothers { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; margin-left: 4px; cursor: pointer; }
.pwfc-modal.is-blinged .fc-an-ask { color: #4b5563; }
.an-thumb { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 62px; height: 54px; margin-left: 12px; padding: 3px; border: 1px solid var(--border-color, #d8dbe0);
  border-radius: 6px; background: #fff; overflow: hidden; }
.an-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
@media (max-width: 640px) { .an-thumb { width: 46px; height: 40px; margin-left: 8px; } }
.an-row .decks-row-main { min-width: 0; }
.an-drop { overflow-x: auto; }
.an-stage { position: relative; margin: 0 auto; max-width: none; min-width: 620px; display: flex; justify-content: center; align-items: flex-start; user-select: none; }
/* the picture's width is set by anatomySize (study.js): a medium size that fits the screen whole,
   times the row's zoom; past the row's width the row scrolls sideways */
.an-img { width: 60%; max-width: none; height: auto; display: block; border-radius: 4px; background: #fff; }
.an-zoom { display: inline-flex; align-items: center; border: 1px solid var(--border-color, #d8dbe0); border-radius: 999px; overflow: hidden; margin-left: 2px; }
.an-zoom button { background: var(--card-bg); border: 0; color: inherit; font: inherit; cursor: pointer; padding: 5px 10px; line-height: 1.2; }
.an-zoom .an-zoom-b { font-size: 1rem; font-weight: 700; padding: 3px 11px; }
.an-zoom .an-zoom-n { font-size: 0.78rem; min-width: 52px; text-align: center; border-left: 1px solid var(--border-color, #d8dbe0); border-right: 1px solid var(--border-color, #d8dbe0); font-variant-numeric: tabular-nums; }
.an-zoom button:hover { background: color-mix(in srgb, var(--btn-bg) 12%, var(--card-bg)); color: var(--btn-bg); transform: none; }
.an-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
/* every leader is bold and blue (Artur, 2026-09-11) — a hovered one only grows */
.an-line { fill: none; stroke: var(--btn-bg); stroke-width: 2; stroke-linecap: round; }
.an-dot { fill: var(--btn-bg); }
.an-line.is-lit, .an-dot.is-lit { stroke: var(--btn-bg); fill: var(--btn-bg); stroke-width: 3; }
.an-line.is-ask, .an-dot.is-ask { stroke: #2e9e4f; fill: #2e9e4f; stroke-width: 2.6; }
/* a shown term is bare bold text in the colour of its kind, with a paper halo so it reads on the
   drawing — no border, no background (Artur, 2026-09-11). Hidden, asked, answered or excluded, it
   is the box with its kind-coloured border, always on white — the pictures are white in both themes. */
.an-k { position: absolute; top: 0; left: 0; box-sizing: border-box; --kc: #9aa3ad; --kt: #1d2126;
  background: transparent; color: var(--kt); border: 1.5px solid transparent; border-radius: 4px; padding: 2px 5px;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #fff;
  cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.an-stage.an-overlay .an-k { padding: 1px 4px; font-size: clamp(10px, 0.72vw, 13px); font-weight: 600; white-space: nowrap; }
.an-k:hover { border-color: var(--btn-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-bg) 22%, transparent); }
.an-k:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
.an-k.hid, .an-k.an-ask, .an-k.an-done, .an-k.is-out { background: #fff; border-color: var(--kc); text-shadow: none; }
.an-k.hid { color: transparent; border-style: dashed; }
/* the kind of structure a term names: the colour of its text when shown, of its border when boxed */
.an-k.k-m, .an-ix-kind.k-m .an-ix-box { --kc: #c62828; --kt: #c62828; }
.an-k.k-a, .an-ix-kind.k-a .an-ix-box { --kc: #7b3fa0; --kt: #7b3fa0; }
.an-k.k-n, .an-ix-kind.k-n .an-ix-box { --kc: #1f5fbf; --kt: #1f5fbf; }
.an-k.k-l, .an-ix-kind.k-l .an-ix-box { --kc: #2e8b57; --kt: #2e8b57; }
.an-k.k-v, .an-ix-kind.k-v .an-ix-box { --kc: #0e8a8a; --kt: #0e8a8a; }
.an-k.k-b, .an-ix-kind.k-b .an-ix-box { --kc: #8a5a2b; --kt: #8a5a2b; }
.an-k.k-f, .an-ix-kind.k-f .an-ix-box { --kc: #c4740f; --kt: #b2680a; }
.an-k.k-j, .an-ix-kind.k-j .an-ix-box { --kc: #b5179e; --kt: #b5179e; }
.an-k.k-h, .an-ix-kind.k-h .an-ix-box { --kc: #5c7a1f; --kt: #5c7a1f; }
.an-k.k-o, .an-ix-kind.k-o .an-ix-box { --kc: #6b7480; --kt: #3d434b; }
/* a term the Terms filter puts away takes no place on the figure */
.an-k.is-off { display: none; }
/* excluded from Quiz me: still on the page, but greyed and struck through */
.an-k.is-out { opacity: 0.5; background: #f1f3f5; color: #6b7480; text-decoration: line-through; border-style: dotted; border-color: #9aa3ad; }
.an-line.is-out, .an-dot.is-out { opacity: 0.3; }
.an-stage.is-excluding .an-k { cursor: pointer; padding-right: 20px; }
.an-stage.is-excluding .an-k::after { content: '\00d7'; position: absolute; top: -1px; right: 4px; font-size: 14px; line-height: 1.3; font-weight: 700; color: #c62828; }
.an-stage.is-excluding .an-k.is-out::after { content: '\21ba'; color: #2e8b57; }
.an-tool-excl.is-on { background-color: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }
.an-excl-n { font-weight: 400; opacity: 0.85; margin-left: 4px; }
.an-excl-restore { background: none; border: 0; color: var(--btn-bg); cursor: pointer; font-size: 0.82rem; padding: 4px 6px; text-decoration: underline; }
.an-meta-excl { color: #c62828; }
/* the index menu down the left */
#anatomy-view.view-section { max-width: none; }
#anatomy-view .anatomy-body { max-width: 1680px; padding-left: 40px; padding-right: 40px; }   /* the figures run across the page, with a margin either side */
@media (max-width: 900px) { #anatomy-view .anatomy-body { padding-left: 18px; padding-right: 18px; } }
#anatomy-view .anatomy-search-form { max-width: 860px; margin-left: auto; margin-right: auto; }
#anatomy-list.an-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
#anatomy-list.an-layout.ix-shut { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.an-ix-toggle { float: right; background: none; border: 1px solid var(--border-color, #d8dbe0); border-radius: 6px; color: var(--explanation-text); cursor: pointer; font-size: 0.78rem; padding: 2px 7px; margin: -2px 0 0 6px; }
.an-ix-toggle:hover { border-color: var(--btn-bg); color: var(--btn-bg); }
.an-index.is-shut { padding: 8px 4px; width: 40px; display: flex; justify-content: center; }
.an-index.is-shut .an-ix-toggle { float: none; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 4px; }
.an-main { min-width: 0; }
.an-row-wrap { scroll-margin-top: 72px; }   /* an opened row scrolls to sit just under the fixed header */
.an-index { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 14px 14px 18px;
  border: 1px solid var(--border-color, #d8dbe0); border-radius: 12px; background: var(--card-bg); font-size: 0.86rem; scrollbar-width: thin; }
.an-ix-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.an-ix-title { font-weight: 700; font-size: 0.95rem; }
.an-ix-shown { color: var(--explanation-text); font-size: 0.78rem; margin-left: auto; }
.an-ix-clear { background: none; border: 0; color: var(--btn-bg); cursor: pointer; font-size: 0.78rem; padding: 0; text-decoration: underline; }
.an-ix-sec { padding: 10px 0 4px; border-top: 1px solid var(--border-color, #d8dbe0); }
.an-ix-sec-t { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--explanation-text); margin-bottom: 6px; }
.an-ix-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 4px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.an-ix-item:hover { background: color-mix(in srgb, var(--btn-bg) 8%, transparent); }
.an-ix-item.is-zero:not(.is-on) { opacity: 0.45; }
.an-ix-box { width: 13px; height: 13px; border: 1.5px solid var(--kc, #9aa3ad); border-radius: 3px; flex: 0 0 auto; background: transparent; }
.an-ix-item.is-on .an-ix-box { background: var(--kc, var(--btn-bg)); border-color: var(--kc, var(--btn-bg)); box-shadow: inset 0 0 0 2px var(--card-bg); }
.an-ix-kind .an-ix-item:not(.is-on) .an-ix-box { background: transparent; }
.an-ix-label { flex: 1 1 auto; min-width: 0; }
.an-ix-n { color: var(--explanation-text); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.an-ix-note { font-size: 0.72rem; color: var(--explanation-text); margin: 6px 4px 0; line-height: 1.35; }
.an-ix-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.an-ix-sortb { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-color, #d8dbe0); background: var(--card-bg); color: inherit; font: inherit; font-size: 0.78rem; cursor: pointer; }
.an-ix-sortb.is-on { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.an-empty { padding: 30px 0; text-align: center; }
@media (max-width: 900px) {
  #anatomy-list.an-layout { grid-template-columns: 1fr; }
  .an-index { position: static; max-height: none; }
  .an-ix-sec { display: inline-block; vertical-align: top; width: 48%; border-top: 0; }
}
.an-k.hid::selection { background: transparent; }
/* the term Quiz me is asking is a green box and the one just answered a green flash — in both themes:
   the pictures are white whatever the page is, so these never follow the theme */
.an-k.an-ask, body[data-theme="dark"] .an-k.an-ask { background: color-mix(in srgb, #2e9e4f 18%, #fff); border: 2px solid #2e9e4f; animation: an-ask-pulse 1.2s ease-in-out infinite; }
.an-k.an-done, body[data-theme="dark"] .an-k.an-done { background: color-mix(in srgb, #2e9e4f 22%, #fff); border-color: #2e9e4f; color: #14532d; text-shadow: none; }
@keyframes an-ask-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, #2e9e4f 38%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, #2e9e4f 6%, transparent); } }
.an-credit { font-size: 0.72rem; opacity: 0.55; margin-top: 12px; line-height: 1.35; }
.an-tool-quiz.is-on { background-color: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }
body[data-theme="dark"] .an-img { background: #fff; }
body[data-theme="dark"] .an-k.hid, body[data-theme="dark"] .an-k.is-out { background: #fff; }