/* ══════════════════════════════════════════════════════════════════════
   /app · Signal Studio
   ----------------------------------------------------------------------
   The app's own look, layered last on templates/index.html (after ds.css,
   app.css and marking.css). app.css bridges the legacy tokens onto Signal;
   this layer gives the workspace its structure: a tinted canvas that cards
   sit on, a sidebar panel with a marker that slides to the open tool, one
   top bar, and motion that confirms what just happened (a screen rising
   in, a press giving way, a number counting to its value).

   Rules only restyle. Every id, class and data attribute app.js reads is
   where it was. static/ds/studio.js adds the moving parts and does nothing
   under reduced motion.
   ══════════════════════════════════════════════════════════════════════ */

body.student-workspace {
    --st-canvas: #f4f4f8;
    --st-panel: #fbfbfd;
    --st-card: #ffffff;
    --st-line: rgba(14, 18, 32, .08);
    --st-line-2: rgba(14, 18, 32, .13);
    --st-hover: rgba(14, 18, 32, .045);
    --st-ink: var(--ds-ink);
    --st-ink-2: var(--ds-ink-2);
    --st-ink-3: var(--ds-ink-3);
    --st-accent: #5035bc;
    /* Fills that carry white text keep the deep brand purple in both themes
       (white on #5940d6 is 6.7:1). */
    --st-accent-fill: var(--ds-accent);
    --st-accent-ink: var(--ds-accent-ink);
    --st-accent-soft: var(--ds-selected);
    --st-lift: 0 1px 2px rgba(14, 18, 32, .05), 0 1px 1px rgba(14, 18, 32, .03);
    --st-lift-2: 0 2px 4px rgba(14, 18, 32, .04), 0 12px 32px -12px rgba(14, 18, 32, .16);
    --st-ease: cubic-bezier(.2, .8, .2, 1);
    --st-spring: cubic-bezier(.3, 1.35, .45, 1);
    --st-radius-card: 16px;
    --st-radius-control: 10px;
}
/* Charcoal shell: page #111113, navigation #18181b, raised panels #222226. */
[data-dark] body.student-workspace {
    --st-canvas: #111113;
    --st-panel: #18181b;
    --st-card: #18181b;
    --st-line: #2a2a30;
    --st-line-2: #38383f;
    --st-hover: #222226;
    --st-accent: #b6a6ff;
    --st-accent-soft: #302747;
    --st-lift: 0 1px 2px rgba(0, 0, 0, .5);
    --st-lift-2: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .7);
}

/* ── Canvas ────────────────────────────────────────────────────────── */
/* One tinted ground under everything, so cards read as objects on it. */
html:has(> body.student-workspace),
body.student-workspace,
[data-dark] body.student-workspace,
body.student-workspace .section-page,
[data-dark] body.student-workspace .section-page {
    background-color: var(--st-canvas);
    background-image: none;
}

/* ── Top bar ───────────────────────────────────────────────────────── */
body.student-workspace .forge-topnav,
[data-dark] body.student-workspace .forge-topnav {
    background: color-mix(in srgb, var(--st-canvas) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--st-line);
    box-shadow: none;
}
body.student-workspace .forge-topnav .nav-dd-btn {
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

/* A reserved header control replaces the floating tutor on small screens. */
.nav-tutor-btn { display: none; }
@media (max-width: 860px) {
    body.student-workspace .tutor-launcher { display: none; }
    body.student-workspace .nav-right .nav-tutor-btn {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0;
        border: 1px solid var(--st-line-2); border-radius: var(--st-radius-control);
        background: var(--st-card); color: var(--st-accent-ink); cursor: pointer;
    }
    body.student-workspace .nav-tutor-btn:focus-visible {
        outline: 2px solid var(--ds-accent); outline-offset: 2px;
    }
    body.exam-active .nav-right .nav-tutor-btn,
    html[data-section="accountPage"] .nav-right .nav-tutor-btn,
    html[data-section="settingsPage"] .nav-right .nav-tutor-btn,
    body:has(#loading[style*="display: block"]) .nav-right .nav-tutor-btn { display: none; }
}
@media (max-width: 600px) {
    body.student-workspace #navPlanChip {
        justify-content: center; width: 36px; min-width: 36px; padding: 0;
    }
    body.student-workspace #navPlanChip :is(#navPlanChipLabel, #navPlanChipPrice) { display: none; }
}

/* Custom practice owns one main action; other study modes are opt-in. */
body.student-workspace:not(.quiz-active) #mainContent {
    grid-template-columns: minmax(0, 1fr) !important; max-width: 920px;
}
body.student-workspace:not(.quiz-active) #todayStrip { display: none !important; }
body.student-workspace .practice-options {
    grid-column: 1 / -1; margin: 8px 0 24px;
    border-top: 1px solid var(--st-line-2);
}
body.student-workspace .practice-options > summary {
    min-height: 48px; padding: 14px 4px; cursor: pointer;
    font-size: .875rem; font-weight: 650; color: var(--st-ink-2);
}
body.student-workspace .practice-options > summary:focus-visible,
body.student-workspace .menu-modes > summary:focus-visible {
    outline: 2px solid var(--ds-accent); outline-offset: 2px;
}
body.student-workspace .practice-options-intro {
    margin: 4px 0 16px; color: var(--st-ink-2); font-size: .875rem; line-height: 1.6;
}
body.student-workspace .practice-options .study-session { margin: 0; border-top: 0; }
body.student-workspace .menu-links { display: flex; flex-direction: column; gap: 4px; }
body.student-workspace .menu-group-title {
    margin: 20px 10px 6px; color: var(--st-ink-3);
    font: 650 .75rem/1.5 var(--ds-font-text);
}
body.student-workspace .menu-group-title:first-child { margin-top: 0; }
body.student-workspace .menu-modes { margin: 0 10px 8px; }
body.student-workspace .menu-modes > summary {
    min-height: 44px; padding: 12px 0; cursor: pointer;
    font-size: .875rem; color: var(--st-ink-2);
}
body.student-workspace .menu-modes .menu-item { padding-left: 16px; font-size: .875rem; }
body.student-workspace .forge-topnav .nav-dd-btn:hover { background: var(--st-hover); }

/* ── Sidebar ───────────────────────────────────────────────────────── */
@media (min-width: 1280px) and (min-height: 600px) and (hover: hover) {
    body.student-workspace.rail-left .study-rail,
    [data-dark] body.student-workspace.rail-left .study-rail {
        top: 64px; left: 0; bottom: 0;
        width: 248px;
        padding: 14px 12px 20px;
        border: 0;
        border-right: 1px solid var(--st-line);
        border-radius: 0;
        background: var(--st-panel);
        box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        gap: 1px;
        max-height: none;
    }
    /* The icon dock's hover tooltip lifts its label by half its height; in the
       sidebar the label is inline, so it stays put. */
    body.student-workspace.rail-left .study-rail-btn:is(:hover, :focus-visible) .study-rail-label { transform: none; }
    body.student-workspace.rail-left .study-rail-heading {
        padding: 18px 10px 8px;
        font: 500 .6875rem/1.2 var(--ds-font-mono);
        letter-spacing: 0;
        text-transform: none;
        color: var(--st-ink-3);
    }
    body.student-workspace.rail-left .study-rail-heading:first-child { padding-top: 4px; }
    body.student-workspace.rail-left .study-rail-btn {
        position: relative;
        z-index: 1;
        height: 44px;   /* the touch-target floor (tests/test_course_navigation_browser.py) */
        gap: 10px;
        padding: 0 10px;
        border-radius: 10px;
        background: transparent;
        color: var(--st-ink-2);
        font: 550 .875rem/1.2 var(--ds-font-text);
        word-spacing: .04em;
        transition: color .15s ease, background-color .15s ease;
    }
    body.student-workspace.rail-left .study-rail-btn svg {
        width: 17px; height: 17px;
        color: var(--st-ink-3);
        transition: color .15s ease, transform .3s var(--st-spring);
    }
    body.student-workspace.rail-left .study-rail-btn:hover,
    [data-dark] body.student-workspace.rail-left .study-rail-btn:hover { background: var(--st-hover); color: var(--st-ink); }
    body.student-workspace.rail-left .study-rail-btn:hover svg { color: var(--st-ink-2); transform: translateX(1px); }
    body.student-workspace.rail-left .study-rail-btn.is-active,
    [data-dark] body.student-workspace.rail-left .study-rail-btn.is-active {
        background: transparent;
        color: var(--st-ink);
        box-shadow: none;
    }
    body.student-workspace.rail-left .study-rail-btn.is-active svg { color: var(--st-accent-ink); }
    body.student-workspace.rail-left .study-rail-btn.is-active::before { display: none; }

    /* The marker (studio.js): one card that slides to whichever tool is open.
       Without script the active item keeps a plain tint instead. */
    body.student-workspace.rail-left .study-rail:not(.st-has-marker) .study-rail-btn.is-active { background: var(--st-card); box-shadow: var(--st-lift), inset 0 0 0 1px var(--st-line); }
    body.student-workspace .st-rail-marker {
        position: absolute; left: 12px; right: 12px; top: 0; z-index: 0;
        height: 44px;
        border-radius: 10px;
        background: var(--st-card);
        box-shadow: var(--st-lift), inset 0 0 0 1px var(--st-line);
        pointer-events: none;
        transition: transform .42s var(--st-spring), height .3s var(--st-ease), opacity .2s ease;
    }
    body.student-workspace .st-rail-marker::before {
        content: ''; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 2px;
        border-radius: 0 2px 2px 0;
        background: var(--st-accent);
    }
    body.student-workspace .st-rail-marker[hidden] { display: block !important; opacity: 0; }

    body.student-workspace.rail-left .container { margin-left: 248px; }
    body.student-workspace.rail-left .section-page { padding-left: 268px; }

    /* One left edge. Every tool starts on the 1080px column, whatever its own
       measure, so switching tools in the sidebar never moves the heading; the
       narrow tools (flashcards, timer, the estimator…) keep their width and
       align to that edge instead of centring. The :is() carries an id so it
       outranks the per-page `#timerPage > *` rules; it sets only the sides. */
    body.student-workspace.rail-left :is(.study-tool-page, #flashcardsPage) > :not(svg) {
        margin-left: max(0px, calc((100% - 1080px) / 2));
        margin-right: auto;
    }
    body.student-workspace.rail-left :is(.study-tool-page, #flashcardsPage) > .tool-hero { max-width: 1080px; }
    body.student-workspace.rail-left #essayFeedback > #essayText { margin-left: max(0px, calc((100% - 1080px) / 2)); }
}
/* Plan markers: a word, set like data. */
body.student-workspace .study-rail-pro {
    padding: 1px 5px;
    border: 0;
    border-radius: 5px;
    background: var(--st-accent-soft);
    color: var(--st-accent-ink);
    font: 500 .625rem/1.5 var(--ds-font-mono);
    letter-spacing: 0;
    text-transform: lowercase;
}
body.student-workspace .study-rail-pro::first-letter { text-transform: uppercase; }

/* ── Plan banner ───────────────────────────────────────────────────── */
/* renderPlanBanner (app.js) decides whether there is a plan to offer and
   what it says; this decides where it sits. At sidebar widths it is a card
   pinned to the foot of the sidebar, which stops above it; everywhere else
   it is a chip in the top bar. Either way it stays in view as tools change,
   and it is quiet: one card, one button, no motion of its own. */
.plan-banner { display: none; }
.plan-banner[hidden], .nav-plan-chip[hidden] { display: none !important; }
body.student-workspace .nav-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 1px solid color-mix(in srgb, var(--st-accent) 28%, transparent);
    border-radius: 999px;
    background: var(--st-accent-soft);
    color: var(--st-accent-ink);
    font: 600 .8125rem/1 var(--ds-font-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
body.student-workspace .nav-plan-chip svg { width: 12px; height: 12px; flex: none; }
body.student-workspace .nav-plan-chip-price { font: 500 .6875rem/1 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace .nav-plan-chip:hover { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); background: color-mix(in srgb, var(--st-accent) 15%, transparent); }
@media (max-width: 520px) { body.student-workspace .nav-plan-chip-price { display: none; } }

body.student-workspace .plan-banner-card {
    padding: 12px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--st-accent) 22%, var(--st-line));
    border-radius: 14px;
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--st-accent) 10%, transparent), transparent 62%),
        var(--st-card);
    box-shadow: var(--st-lift);
}
body.student-workspace .plan-banner-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    font: 500 .6875rem/1.2 var(--ds-font-mono);
    color: var(--st-ink-3);
}
body.student-workspace #planBannerPrice { color: var(--st-accent-ink); }
body.student-workspace .plan-banner-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font: 600 .9375rem/1.25 var(--ds-font-display);
    letter-spacing: -.015em;
    color: var(--st-ink);
}
body.student-workspace .plan-banner-title svg { width: 13px; height: 13px; flex: none; color: var(--st-accent); }
body.student-workspace .plan-banner-body { margin: 4px 0 10px; font: 400 .75rem/1.45 var(--ds-font-text); color: var(--st-ink-2); }
body.student-workspace .plan-banner-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    border-radius: 9px;
    background: var(--st-accent-fill);
    color: #fff;
    font: 600 .8125rem/1 var(--ds-font-text);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(14, 18, 32, .18);
    transition: background-color .15s ease, transform .12s ease;
}
body.student-workspace .plan-banner-cta svg { width: 14px; height: 14px; transition: transform .25s var(--st-spring); }
body.student-workspace .plan-banner-cta:hover { background: color-mix(in srgb, var(--st-accent-fill) 88%, #000); }
body.student-workspace .plan-banner-cta:hover svg { transform: translateX(3px); }
body.student-workspace .plan-banner-cta:active { transform: scale(.98); }

@media (min-width: 1280px) and (min-height: 600px) and (hover: hover) {
    body.student-workspace.rail-left .nav-plan-chip { display: none !important; }
    body.student-workspace.rail-left .plan-banner {
        display: block;
        position: fixed;
        left: 0; bottom: 0;
        z-index: 1004;   /* with the sidebar: above tool pages, below the nav */
        width: 248px;
        padding: 10px 12px 12px;
        border-top: 1px solid var(--st-line);
        border-right: 1px solid var(--st-line);
        background: var(--st-panel);
    }
    /* The sidebar's list scrolls above the card instead of under it. */
    body.student-workspace.rail-left.has-plan-banner .study-rail { bottom: var(--plan-banner-h, 160px); }
    /* While more of the list is below the card, its last rows fade out
       rather than end on a clipped item (studio.js sets .st-more). */
    body.student-workspace.rail-left .study-rail.st-more {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
    }
}
/* It arrives once the account is known; it settles in rather than popping. */
@media (prefers-reduced-motion: no-preference) {
    body.student-workspace .plan-banner-card,
    body.student-workspace .nav-plan-chip { animation: st-screen-in .5s var(--st-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
    body.student-workspace .plan-banner-cta:hover svg,
    body.student-workspace .plan-banner-cta:active { transform: none; }
}

/* ── Cards ─────────────────────────────────────────────────────────── */
body.student-workspace :is(.section-card, .input-card, .next-session__card, #quizSection .question-card, #quizSection #scoreCard, .review-panel) {
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-card);
    background: var(--st-card);
    box-shadow: var(--st-lift);
}
body.student-workspace #inputSection { border-radius: 18px; box-shadow: var(--st-lift); }
body.student-workspace :is(button.section-card, a.section-card, .features-list-item) {
    transition: border-color .2s ease, box-shadow .25s var(--st-ease), transform .25s var(--st-ease);
}
body.student-workspace :is(button.section-card, a.section-card, .features-list-item):hover {
    border-color: var(--st-line-2);
    box-shadow: var(--st-lift-2);
    transform: translateY(-1px);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
/* A press gives way a little; primaries carry a hairline highlight. */
body.student-workspace :is(.btn-generate, .tool-cta, .next-session button.next-session__start, .un-cta, #quizSection .btn-next, #quizSection .btn-grade) {
    border-radius: var(--st-radius-control);
    background: var(--st-accent-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(14, 18, 32, .18);
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
body.student-workspace :is(.btn-generate, .tool-cta, .next-session button.next-session__start, .un-cta, #quizSection .btn-next, #quizSection .btn-grade):hover:not(:disabled) {
    background: color-mix(in srgb, var(--st-accent-fill) 88%, #000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 12px -4px rgba(91, 80, 232, .45);
}
body.student-workspace :is(.btn-generate, .tool-cta, .next-session__start, .un-cta, #quizSection .btn-next, #quizSection .btn-grade, #quizSection .btn-prev, .preset-opt, .tab-btn, #quizSection .option, .fc-btn-ghost, .cq-btn-secondary, .study-rail-btn):active:not(:disabled) { transform: scale(.98); }

/* ── Focus ─────────────────────────────────────────────────────────── */
body.student-workspace :is(a, button, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 2px;
}

/* ── Tool screens ──────────────────────────────────────────────────── */
/* A screen rises into place when it opens (display: none → block restarts
   the animation, so no script is needed for it). */
body.student-workspace .section-page { animation: st-screen-in .42s var(--st-ease) both; }
@keyframes st-screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.student-workspace .study-tool-page .tool-hero h2,
body.student-workspace .tool-hero .dash-head h2 {
    font-size: clamp(1.875rem, 2.8vw, 2.5rem);
    letter-spacing: -.035em;
}
/* How-it-works steps: numbered like a spec sheet, on one hairline. */
body.student-workspace .study-tool-page .tool-steps .tool-step > i {
    width: auto;
    justify-content: flex-start;
    font: 500 .6875rem/1 var(--ds-font-mono);
    font-style: normal;
    color: var(--st-accent-ink);
}
body.student-workspace .study-tool-page .tool-steps .tool-step > i::before { content: '0'; }
body.student-workspace .study-tool-page .tool-steps .tool-step > b { font-weight: 650; }

/* One eyebrow on every screen: a mono label in accent ink, as on the
   homepage. (Some are the h2's ::before from --study-kicker, some are
   elements of their own.) */
body.student-workspace .study-tool-page .tool-hero h2::before,
body.student-workspace .study-tool-page > h2::before,
body.student-workspace .study-tool-page > .dash-head h2::before,
body.student-workspace .generator-kicker,
body.student-workspace .study-session__eyebrow,
body.student-workspace .next-session .next-session__top h2,
body.student-workspace .next-session .next-session__eyebrow {
    font: 500 .75rem/1.3 var(--ds-font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--st-accent-ink);
}

/* ── Dashboard: the study desk ─────────────────────────────────────── */
/* Same renderers, same order (tests/test_dashboard.py pins it); the page
   becomes a desk of instruments. Each measure is a card that carries its
   own small chart (drawn by studio.js from the numbers the page already
   shows), and every section sits on its own panel. */
body.student-workspace #statsPage .dash-date {
    padding: 6px 10px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-card);
    font: 500 .75rem/1.2 var(--ds-font-mono);
    color: var(--st-ink-3);
}
body.student-workspace #statsPage :is(.dash-links, .next-session__tools) { gap: 8px; }
body.student-workspace #statsPage .dash-link {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-card);
    color: var(--st-ink-2);
    font-size: .8125rem;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
body.student-workspace #statsPage .dash-link:hover { border-color: var(--st-line-2); color: var(--st-ink); }

/* The four measures */
body.student-workspace #statsPage #dashStanding .ds-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    border: 0;
}
body.student-workspace #statsPage #dashStanding .ds-cell,
body.student-workspace #statsPage #dashStanding .ds-cell:first-child {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 164px;
    padding: 16px 18px 18px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-card);
    background: var(--st-card);
    box-shadow: var(--st-lift);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s var(--st-ease), transform .25s var(--st-ease);
}
body.student-workspace #statsPage #dashStanding .ds-cell:hover {
    border-color: var(--st-line-2);
    box-shadow: var(--st-lift-2);
    transform: translateY(-2px);
}
body.student-workspace #statsPage #dashStanding .ds-label {
    order: -1;
    margin: 0;
    font: 500 .6875rem/1.2 var(--ds-font-mono);
    color: var(--st-ink-3);
}
body.student-workspace #statsPage #dashStanding .ds-val {
    margin-top: auto;
    font-size: clamp(2.25rem, 3.2vw, 2.875rem);
    line-height: .9;
    color: var(--st-ink);
}
body.student-workspace #statsPage #dashStanding .ds-delta {
    align-self: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--st-accent-soft);
    color: var(--st-accent-ink);
    font: 500 .6875rem/1.2 var(--ds-font-mono);
    letter-spacing: 0;
}
/* A cell's chart: a strip between the label and the number. */
body.student-workspace #statsPage .st-viz {
    position: absolute;
    left: 18px; right: 18px; top: 44px;
    height: 34px;
    color: var(--st-accent);
    pointer-events: none;
}
body.student-workspace #statsPage .st-viz svg { display: block; width: 100%; height: 100%; overflow: visible; }
body.student-workspace #statsPage .st-viz-area { fill: var(--st-accent-soft); }
body.student-workspace #statsPage .st-viz-line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
body.student-workspace #statsPage .st-viz-dot { fill: currentColor; }
body.student-workspace #statsPage .st-viz-bar { fill: var(--st-line-2); }
body.student-workspace #statsPage .st-viz-bar.is-on { fill: currentColor; }
body.student-workspace #statsPage .st-viz-seg { fill: var(--st-line-2); }
body.student-workspace #statsPage .st-viz-seg.is-weak { fill: var(--ds-amber); }
body.student-workspace #statsPage .st-viz-caption {
    position: absolute; right: 18px; top: 16px;
    font: 500 .6875rem/1.2 var(--ds-font-mono);
    color: var(--st-ink-3);
}

/* Coverage: one grouped list under the measures, each row with its bar. */
body.student-workspace #statsPage #dashStanding .ds-cov-row {
    gap: 16px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--st-line);
    border-top-width: 0;
    background: var(--st-card);
    transition: background-color .15s ease;
}
body.student-workspace #statsPage #dashStanding .ds-row + .ds-cov-row {
    margin-top: 12px;
    border-top-width: 1px;
    border-radius: var(--st-radius-card) var(--st-radius-card) 0 0;
}
body.student-workspace #statsPage #dashStanding .ds-cov-row:last-child { border-radius: 0 0 var(--st-radius-card) var(--st-radius-card); }
body.student-workspace #statsPage #dashStanding .ds-row + .ds-cov-row:last-child { border-radius: var(--st-radius-card); }
body.student-workspace #statsPage #dashStanding .ds-cov-row:hover { background: color-mix(in srgb, var(--st-card) 94%, var(--st-accent)); }
body.student-workspace #statsPage #dashStanding .ds-cov-subject { flex: 0 0 auto; min-width: 180px; font-weight: 650; }
body.student-workspace #statsPage #dashStanding .ds-cov-meta { margin-left: auto; font: 500 .75rem/1.2 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage .st-cov-bar {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
    height: 6px;
    border-radius: 99px;
    background: var(--st-hover);
    overflow: hidden;
}
body.student-workspace #statsPage .st-cov-bar > i {
    position: absolute; inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--st-accent);
    transform-origin: left center;
}
body.student-workspace #statsPage #dashStanding .ds-cov-arrow { transition: transform .25s var(--st-spring); }
body.student-workspace #statsPage #dashStanding .ds-cov-row:hover .ds-cov-arrow { transform: translateX(3px); }

/* Level: one quiet bar, not a banner. */
body.student-workspace #statsPage #dashLevel .level-card {
    margin: 12px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-card);
    background: var(--st-card);
    box-shadow: var(--st-lift);
    color: var(--st-ink);
}
body.student-workspace #statsPage #dashLevel .level-ring {
    width: 44px; height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--st-accent-soft);
    color: var(--st-accent-ink);
    font: 600 1.125rem/1 var(--ds-font-display);
}
body.student-workspace #statsPage #dashLevel .level-title { font: 650 .9375rem/1.3 var(--ds-font-text); }
body.student-workspace #statsPage #dashLevel .lt-sub { font: 500 .75rem/1.2 var(--ds-font-mono); color: var(--st-ink-3); opacity: 1; }
body.student-workspace #statsPage #dashLevel .level-bar { height: 6px; background: var(--st-hover); }
body.student-workspace #statsPage #dashLevel .level-bar-fill { background: var(--st-accent); box-shadow: none; transition: width .9s var(--st-ease); }
body.student-workspace #statsPage #dashLevel .level-xp { font: 500 .6875rem/1.3 var(--ds-font-mono); color: var(--st-ink-3); opacity: 1; }

/* Topics, trend, today and activity: each a panel on the canvas. */
body.student-workspace #statsPage .student-progress-columns {
    align-items: start;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
    border: 0;
}
body.student-workspace #statsPage :is(.student-progress-topics, .student-progress-trend, .dash-pair > div:last-child) {
    padding: 20px 22px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-card);
    background: var(--st-card);
    box-shadow: var(--st-lift);
}
body.student-workspace #statsPage :is(.student-progress-topics, .student-progress-trend, .dash-pair) .dash-sec-head {
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--st-line);
}
body.student-workspace #statsPage .dash-sec-title { font: 600 1.0625rem/1.3 var(--ds-font-display); letter-spacing: -.02em; color: var(--st-ink); }
body.student-workspace #statsPage .tm-legend { margin: 12px 0 6px; font: 500 .6875rem/1.3 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage #topicMasteryList .tm-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 76px 76px;
    gap: 8px 14px;
    margin: 0 -10px;
    padding: 10px;
    border-bottom: 0;
    border-radius: 10px;
    transition: background-color .15s ease;
}
body.student-workspace #statsPage #topicMasteryList .tm-row:hover { background: var(--st-hover); }
body.student-workspace #statsPage .tm-topic { font: 650 .875rem/1.3 var(--ds-font-text); }
body.student-workspace #statsPage .tm-sub { font: 500 .6875rem/1.4 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage .tm-bar { height: 6px; background: var(--st-hover); }
body.student-workspace #statsPage .tm-bar::after { width: 2px; height: 12px; border-radius: 1px; background: var(--st-ink-3); opacity: .55; }
body.student-workspace #statsPage .tm-fill { background: var(--st-accent); transform-origin: left center; }
body.student-workspace #statsPage .tm-pct { font: 500 .75rem/1.2 var(--ds-font-mono); color: var(--st-ink-2); }
body.student-workspace #statsPage .tm-action {
    justify-self: end;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--st-accent-soft);
    color: var(--st-accent-ink);
    font-size: .75rem;
    font-weight: 650;
}
body.student-workspace #statsPage .tm-action:hover { background: var(--st-accent-fill); color: #fff; }
body.student-workspace #statsPage .trend-head { margin: 12px 0 8px; }
body.student-workspace #statsPage .trend-title { font: 650 .875rem/1.3 var(--ds-font-text); }
body.student-workspace #statsPage .trend-sub { font: 500 .6875rem/1.4 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage .trend-delta { font: 500 .6875rem/1.2 var(--ds-font-mono); border: 0; background: var(--st-accent-soft); color: var(--st-accent-ink); }
/* The trend reads under the pointer (studio.js): a rule and a readout. */
body.student-workspace #statsPage .st-trend { position: relative; }
body.student-workspace #statsPage .st-trend-rule {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: var(--st-line-2);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
body.student-workspace #statsPage .st-trend-tip {
    position: absolute; top: 0;
    padding: 6px 9px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: var(--st-card);
    box-shadow: var(--st-lift-2);
    font: 500 .6875rem/1.35 var(--ds-font-mono);
    color: var(--st-ink-2);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .15s ease;
}
body.student-workspace #statsPage .st-trend-tip b { display: block; font: 600 .9375rem/1.2 var(--ds-font-display); color: var(--st-ink); }
body.student-workspace #statsPage .st-trend.is-reading :is(.st-trend-rule, .st-trend-tip) { opacity: 1; }
body.student-workspace #statsPage .st-trend svg { cursor: crosshair; }
body.student-workspace #statsPage .st-trend circle { transition: r .2s var(--st-spring); }
body.student-workspace #statsPage .st-trend circle.is-near { r: 6.5px; }

/* A long topic list scrolls past the trend, which stays in view beside it. */
@media (min-width: 1100px) {
    /* The screen pads 96px under the 64px bar; sticky insets count from that padding. */
    body.student-workspace #statsPage .student-progress-trend { position: sticky; top: -8px; }
}
body.student-workspace #statsPage .dash-pair { gap: 12px; margin-top: 12px; align-items: stretch; }
body.student-workspace #statsPage .dash-pair > div:last-child .dash-sec-head { margin-bottom: 14px; }
body.student-workspace #statsPage #dashDaily .daily-card {
    height: 100%;
    margin: 0;
    padding: 20px 22px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-card);
    background: var(--st-card);
    box-shadow: var(--st-lift);
}
body.student-workspace #statsPage #dashDaily .daily-title { font: 600 1.0625rem/1.3 var(--ds-font-display); letter-spacing: -.02em; }
body.student-workspace #statsPage #dashDaily .daily-sub { font: 500 .6875rem/1.4 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage #dashDaily .quest { border: 1px solid var(--st-line); background: transparent; border-radius: 10px; }
body.student-workspace #statsPage #dashDaily .quest-ico { width: 24px; height: 24px; border: 1.5px solid var(--st-line-2); border-radius: 50%; background: transparent; color: #fff; }
body.student-workspace #statsPage #dashDaily .quest.done { border-color: color-mix(in srgb, var(--ds-mint) 40%, transparent); background: var(--ds-mint-soft); }
body.student-workspace #statsPage #dashDaily .quest.done .quest-ico { border-color: var(--ds-mint); background: var(--ds-mint); }
body.student-workspace #statsPage #dashDaily .quest.done :is(.quest-bar-fill) { background: var(--ds-mint); }
body.student-workspace #statsPage #dashDaily .quest-bar-fill { background: var(--st-accent); }
body.student-workspace #statsPage #dashDaily .quest-bar { height: 4px; background: var(--st-hover); }
body.student-workspace #statsPage #dashDaily .quest-xp { font: 500 .6875rem/1.2 var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage .heatmap-card { margin: 0; padding: 0; border: 0; background: transparent; }
body.student-workspace #statsPage :is(.heatmap-grid, .heatmap-daylabels) { grid-template-rows: repeat(7, 17px); gap: 4px; }
body.student-workspace #statsPage .heatmap-grid { grid-auto-columns: 17px; }
body.student-workspace #statsPage .heatmap-cell { width: 17px; height: 17px; }
body.student-workspace #statsPage .heatmap-daylabels span { font-size: .625rem; line-height: 17px; }
body.student-workspace #statsPage .heatmap-footer { margin-top: 14px; font-size: .6875rem; }
body.student-workspace #statsPage .heatmap-cell { border-radius: 4px; background: var(--st-hover); transition: transform .2s var(--st-spring); }
body.student-workspace #statsPage .heatmap-cell[data-level="-1"] { background: transparent; }
body.student-workspace #statsPage .heatmap-cell[data-level="1"] { background: color-mix(in srgb, var(--st-accent) 28%, transparent); }
body.student-workspace #statsPage .heatmap-cell[data-level="2"] { background: color-mix(in srgb, var(--st-accent) 50%, transparent); }
body.student-workspace #statsPage .heatmap-cell[data-level="3"] { background: color-mix(in srgb, var(--st-accent) 75%, transparent); }
body.student-workspace #statsPage .heatmap-cell[data-level="4"] { background: var(--st-accent); }
body.student-workspace #statsPage .heatmap-cell[data-today="1"] { box-shadow: 0 0 0 1.5px var(--st-card), 0 0 0 3px var(--st-accent); }
body.student-workspace #statsPage .heatmap-cell:not([data-level="-1"]):hover { transform: scale(1.35); }
body.student-workspace #statsPage :is(.heatmap-footer, .heatmap-daylabels span) { font-family: var(--ds-font-mono); color: var(--st-ink-3); }
body.student-workspace #statsPage .heatmap-legend span { border-radius: 2px; }

body.student-workspace #statsPage .dash-ach-progress { height: 6px; background: var(--st-hover); }
body.student-workspace #statsPage .dash-ach-progress span { background: var(--st-accent); }
body.student-workspace #statsPage .dash-count-pill { border: 0; background: var(--st-accent-soft); color: var(--st-accent-ink); font: 500 .6875rem/1.2 var(--ds-font-mono); }

@media (max-width: 1099px) {
    body.student-workspace #statsPage #dashStanding .ds-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.student-workspace #statsPage #dashStanding .ds-cell:nth-child(n) { padding: 16px 18px 18px; }
    body.student-workspace #statsPage .dash-pair { display: grid; }
}
@media (max-width: 640px) {
    body.student-workspace #statsPage #dashStanding .ds-row { gap: 8px; }
    body.student-workspace #statsPage #dashStanding .ds-cell:nth-child(n) { min-height: 148px; padding: 14px; }
    body.student-workspace #statsPage .st-viz { left: 14px; right: 14px; top: 40px; height: 30px; }
    body.student-workspace #statsPage .st-viz-caption { display: none; }
    body.student-workspace #statsPage .st-cov-bar { display: none; }
    body.student-workspace #statsPage #dashStanding .ds-cov-subject { min-width: 0; }
    body.student-workspace #statsPage :is(.student-progress-topics, .student-progress-trend, .dash-pair > div:last-child, #dashDaily .daily-card) { padding: 16px; }
}
@media (max-width: 560px) {
    /* The name takes the row; bar, numbers and action share the next. */
    body.student-workspace #statsPage #topicMasteryList .tm-row { grid-template-columns: minmax(0, 1fr) 76px minmax(72px, auto); }
}

/* ── Quiz player ───────────────────────────────────────────────────── */
/* A question slides in from the direction of travel; its options follow
   one after another. Answer feedback (studio.js) plays once, when the
   answer is given, never again on a revisit. */
@keyframes st-q-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes st-opt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.student-workspace #quizSection .question-card.q-enter { animation: st-q-in .42s var(--st-ease) both; }
body.student-workspace #quizSection .question-card .option:not(.correct):not(.wrong) { animation: st-opt-in .36s var(--st-ease) both; }
body.student-workspace #quizSection .question-card .option:nth-child(2) { animation-delay: .04s; }
body.student-workspace #quizSection .question-card .option:nth-child(3) { animation-delay: .08s; }
body.student-workspace #quizSection .question-card .option:nth-child(4) { animation-delay: .12s; }
body.student-workspace #quizSection .question-card .option:nth-child(5) { animation-delay: .16s; }
body.student-workspace #quizSection .question-card .option:nth-child(n+6) { animation-delay: .2s; }
body.student-workspace #quizSection .option { transition: border-color .15s ease, background-color .15s ease, opacity .3s ease, transform .15s ease; }
body.student-workspace #quizSection .option:not(.disabled):hover { transform: translateX(2px); }
body.student-workspace #quizSection .opt-letter { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .25s var(--st-spring); }
body.student-workspace #quizSection .option:not(.disabled):hover .opt-letter { transform: scale(1.06); }

/* Progress: one segment per question when there are few enough to count. */
body.student-workspace #quizSection .progress-bar-fill { transition: width .6s var(--st-spring); }
body.student-workspace #quizSection .progress-bar-track.st-segmented {
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--st-steps) - 3px), transparent calc(100% / var(--st-steps) - 3px) calc(100% / var(--st-steps)));
    mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--st-steps) - 3px), transparent calc(100% / var(--st-steps) - 3px) calc(100% / var(--st-steps)));
}
body.student-workspace #quizSection :is(.progress-label, .progress-completed) { font-family: var(--ds-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: 0; }

/* Results: the tier is stamped onto the slip. */
@keyframes st-stamp {
    0% { opacity: 0; transform: scale(1.9) rotate(-9deg); }
    55% { opacity: 1; transform: scale(.94) rotate(-2deg); }
    100% { opacity: 1; transform: none; }
}
body.student-workspace #scoreCard .debrief-stamp.show { animation: st-stamp .5s var(--st-ease) .45s both; }

@media (prefers-reduced-motion: reduce) {
    body.student-workspace #quizSection .question-card.q-enter,
    body.student-workspace #quizSection .question-card .option:not(.correct):not(.wrong) { animation: none; }
    body.student-workspace #quizSection .option:not(.disabled):hover,
    body.student-workspace #quizSection .option:not(.disabled):hover .opt-letter { transform: none; }
    body.student-workspace #scoreCard .debrief-stamp.show { animation: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.student-workspace #statsPage #dashStanding .ds-cell:hover { transform: none; }
    body.student-workspace #statsPage .heatmap-cell:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.student-workspace .section-page { animation: none; }
    body.student-workspace .st-rail-marker { transition: none; }
    body.student-workspace :is(.btn-generate, .tool-cta, .next-session__start, .un-cta, #quizSection .btn-next, #quizSection .btn-grade, #quizSection .btn-prev, .preset-opt, .tab-btn, #quizSection .option, .fc-btn-ghost, .cq-btn-secondary, .study-rail-btn):active:not(:disabled) { transform: none; }
}