/* ══════════════════════════════════════════════════════════════════════
   /app study workspace · Signal skin
   ----------------------------------------------------------------------
   The final layer on templates/index.html (static/ds/marking.css, which
   styles the examiner report, follows it). It re-dresses the workspace in
   the Signal system without touching a hook: every id, class and data
   attribute app.js reads stays where it was; every rule is presentational.

   House style — a study tool people trust with their marks:
   - One accent. Violet is for primary actions, selection and links; green,
     amber and coral appear only where something has been marked.
   - Flat surfaces on 1px lines. Shadows only on things that float.
   - Labels in sentence case in the text face; numbers in tabular figures.
   - Motion confirms a change of state and nothing else: colour and border
     transitions, no pulses, glows, twinkles or shakes.

   Layers:
   1. A token bridge on body.student-workspace. The legacy stylesheets read
      --text-*, --card-*, --workspace-*, --emerald/--rose/--amber and the dark
      --surface-* ladder; pointing those at --ds-* restyles most of the app.
   2. Component rules, scoped under body.student-workspace so they win here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Token bridge ───────────────────────────────────────────────── */
body.student-workspace {
    /* One study type family. Keep the old component tokens as aliases so
       quiz, dashboard and tool panels share the same contract. Marketing
       display faces and the maths renderer retain their own font rules. */
    --font-display: var(--font-ui);
    --ds-font-display: var(--font-display);
    --ds-font-mono: var(--font-ui);
    --qp-serif: var(--font-body);
    --qp-sans: var(--font-body);
    --qp-mono: var(--font-ui);

    --text-primary: var(--ds-ink);
    --text-secondary: var(--ds-ink-2);
    --text-muted: var(--ds-ink-3);

    --card-bg: var(--ds-surface);
    --card-border: var(--ds-line);
    --card-border-hover: var(--ds-line-2);

    --emerald: #13795b;
    --emerald-bg: #e8f6ef;
    --emerald-border: rgba(19, 121, 91, .3);
    --rose: #c0342d;
    --rose-bg: #fdeeec;
    --rose-border: rgba(192, 52, 45, .3);
    --amber: #945700;
    --amber-bg: #fdf3dd;
    --amber-border: rgba(148, 87, 0, .3);

    --r: 14px;
    --r-sm: 10px;
    --r-lg: 18px;
    --shadow-sm: var(--ds-shadow-1);
    --shadow-md: var(--ds-shadow-1);
    --shadow-lg: var(--ds-shadow-2);

    --workspace-line: var(--ds-line);
    --workspace-control: var(--ds-line-2);
    --workspace-surface: var(--ds-surface);
    --workspace-inset: var(--ds-bg-2);
    --workspace-accent: var(--ds-violet-600);
    --workspace-soft: var(--ds-accent-soft);
    --workspace-depth: none;
    --workspace-radius-control: 10px;
    --workspace-radius-panel: 16px;
    --workspace-radius-card: 18px;

    /* The guided "next session" card keeps its own palette variables. */
    --next-ink: var(--ds-ink);
    --next-muted: var(--ds-ink-3);
    --next-line: var(--ds-line);
    --next-bg: var(--ds-surface);
    --next-wash: var(--ds-surface);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-dark] body.student-workspace {
    --violet-text: var(--ds-violet-400);
    --surface-0: var(--ds-bg);
    --surface-1: var(--ds-bg-2);
    --surface-2: var(--ds-surface);
    --surface-3: var(--ds-surface-2);
    --line: var(--ds-line);
    --line-strong: rgba(255, 255, 255, .14);
    --text-muted-raised: var(--ds-ink-3);

    --card-bg: var(--ds-surface);
    --card-border: var(--ds-line);
    --card-border-hover: var(--ds-line-2);
    --violet-glow: transparent;

    --emerald: #6ee7b7;
    --emerald-bg: rgba(52, 211, 153, .12);
    --emerald-border: rgba(110, 231, 183, .32);
    --rose: #fda4a4;
    --rose-bg: rgba(248, 113, 113, .12);
    --rose-border: rgba(253, 164, 164, .32);
    --amber: #fcd34d;
    --amber-bg: rgba(251, 191, 36, .12);
    --amber-border: rgba(252, 211, 77, .32);

    --workspace-control: var(--ds-line-2);
    --workspace-surface: var(--ds-surface);
    --workspace-inset: var(--ds-bg-3);
    --workspace-accent: var(--ds-violet-400);
    --workspace-soft: var(--ds-accent-soft);

    --next-ink: var(--ds-ink);
    --next-muted: var(--ds-ink-3);
    --next-line: var(--ds-line);
    --next-bg: var(--ds-surface);
    --next-wash: var(--ds-surface);
}

/* ── 2. Ground ─────────────────────────────────────────────────────── */
/* Paper, or the homepage's night ink, with the faintest top light. */
html:has(> body.student-workspace) { background-color: var(--ds-bg); }
body.student-workspace,
[data-dark] body.student-workspace {
    background-color: var(--ds-bg);
    background-image: linear-gradient(180deg, var(--ds-bg-2), transparent);
    background-repeat: no-repeat;
    background-size: 100% 420px;
}
[data-dark] body.student-workspace .section-page {
    background-color: var(--ds-bg);
    background-image: linear-gradient(180deg, var(--ds-bg-2), transparent);
    background-repeat: no-repeat;
    background-size: 100% 420px;
}
body.student-workspace ::selection { background: var(--ds-violet-200); color: var(--ds-ink); }
[data-dark] body.student-workspace ::selection { background: rgba(122, 110, 240, .45); color: #fff; }

/* ── 3. Top nav ────────────────────────────────────────────────────── */
/* Stays opaque (the app scrolls long pages beneath it); only the ink moves. */
body.student-workspace .forge-topnav { border-bottom-color: var(--ds-line); }
[data-dark] body.student-workspace .forge-topnav {
    background: rgba(8, 9, 13, .97);
    border-bottom-color: var(--ds-line);
}
body.student-workspace .forge-topnav :is(.nav-logo-text, .logo-text) {
    font-family: var(--ds-font-display);
    letter-spacing: -.03em;
}

/* ── 4. Study rail ─────────────────────────────────────────────────── */
@media (min-width: 1280px) and (min-height: 600px) and (hover: hover) {
    body.student-workspace.rail-left .study-rail { border-right-color: var(--ds-line); }
    body.student-workspace.rail-left .study-rail-heading {
        padding: 16px 12px 6px;
        font: 600 .75rem/1.2 var(--ds-font-text);
        letter-spacing: 0;
        text-transform: none;
        color: var(--ds-ink-3);
    }
    body.student-workspace.rail-left .study-rail-heading:first-child { padding-top: 6px; }
    body.student-workspace.rail-left .study-rail-btn {
        position: relative;
        color: var(--ds-ink-2);
        font: 600 .875rem/1.2 var(--ds-font-text);
        word-spacing: .06em;
        transition: background-color .15s ease, color .15s ease;
    }
    body.student-workspace.rail-left .study-rail-btn svg { color: var(--ds-ink-3); transition: color .15s ease; }
    body.student-workspace.rail-left .study-rail-btn:hover { background: var(--ds-bg-3); color: var(--ds-ink); }
    body.student-workspace.rail-left .study-rail-btn:hover svg { color: var(--ds-ink-2); }
    body.student-workspace.rail-left .study-rail-btn.is-active {
        background: var(--ds-bg-3);
        color: var(--ds-ink);
        box-shadow: none;
    }
    body.student-workspace.rail-left .study-rail-btn.is-active svg { color: var(--ds-accent-ink); }
    body.student-workspace.rail-left .study-rail-btn.is-active::before {
        content: '';
        position: absolute;
        left: 0; top: 12px; bottom: 12px;
        width: 2px;
        border-radius: 2px;
        background: var(--ds-accent);
    }
    [data-dark] body.student-workspace.rail-left .study-rail-btn:is(:hover, .is-active) { background: rgba(255, 255, 255, .06); }
}
/* The plan marker is information, not a sticker. */
body.student-workspace .study-rail-pro {
    padding: 2px 5px;
    border: 1px solid var(--ds-line-2);
    border-radius: 4px;
    background: transparent;
    color: var(--ds-ink-3);
    font-weight: 650;
    letter-spacing: .04em;
    box-shadow: none;
}

/* ── 5. Tool headers ───────────────────────────────────────────────── */
body.student-workspace .study-tool-page .tool-hero h2,
body.student-workspace .generator-card-head h1,
body.student-workspace .tool-hero .dash-head h2 {
    font-family: var(--ds-font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.12;
    color: var(--ds-ink);
    text-wrap: balance;
}
body.student-workspace .study-tool-page .tool-hero p {
    margin-top: 10px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ds-ink-2);
}
body.student-workspace .study-tool-page .tool-hero { padding-bottom: 20px; border-bottom-color: var(--ds-line); }
body.student-workspace .generator-kicker {
    display: block;
    margin-bottom: 8px;
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-accent-ink);
}
body.student-workspace .study-session__eyebrow {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-accent-ink);
}
[data-dark] body.student-workspace .study-session__eyebrow { color: var(--ds-accent-ink); }
body.student-workspace .dash-date {
    font: 500 .8125rem/1.3 var(--ds-font-text);
    color: var(--ds-ink-3);
    font-variant-numeric: tabular-nums;
}

/* ── 6. Surfaces ───────────────────────────────────────────────────── */
body.student-workspace :is(.section-card, .input-card) {
    border-color: var(--ds-line);
    border-radius: 14px;
    background: var(--ds-surface);
    box-shadow: none;
}
[data-dark] body.student-workspace :is(.input-card, .question-card, #scoreCard, #achievementsPanel, .review-panel, #sideMenu, .auth-modal, #badgeToast, .section-card) {
    background: var(--ds-surface);
}
body.student-workspace button.section-card.features-list-item { transition: border-color .15s ease, background-color .15s ease; }
body.student-workspace button.section-card.features-list-item:hover { border-color: var(--ds-line-2); background: var(--ds-bg-2); }
body.student-workspace #inputSection {
    padding: clamp(20px, 3vw, 28px);
    border-color: var(--ds-line);
    border-radius: 16px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-1);
}

/* The guided "next session" card: the app's front door. */
body.student-workspace .next-session__card {
    border-radius: 16px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-1);
}
body.student-workspace .next-session__top h2 {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-accent-ink);
}
body.student-workspace .next-session__signal { display: none; }
body.student-workspace .next-session h3.next-session__topic {
    font-family: var(--ds-font-display);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.12;
    text-wrap: balance;
}
body.student-workspace .next-session__course { font-size: .8125rem; font-weight: 600; color: var(--ds-ink-3); }
body.student-workspace .next-session__reason { font-size: .9375rem; color: var(--ds-ink-2); }
body.student-workspace .next-session__summary { font-size: .875rem; }
body.student-workspace .next-session__note { font-size: .75rem; color: var(--ds-ink-3); }
body.student-workspace .next-session__segments { border-radius: 10px; background: var(--ds-bg-3); border-color: transparent; }
body.student-workspace .next-session__segments span { border-radius: 7px; font-size: .8125rem; transition: background-color .15s ease, color .15s ease; }
body.student-workspace .next-session__segments input:checked + span {
    background: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: 0 1px 2px rgba(14, 18, 32, .08), inset 0 0 0 1px var(--ds-line);
}
body.student-workspace .next-session__tools button,
body.student-workspace .next-session__progress button,
body.student-workspace #backToNextSession { color: var(--ds-accent-ink); }
body.student-workspace .next-session__eyebrow { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .75rem; color: var(--ds-ink-3); }

/* "Your next session" belongs in the main column. next-session.css spans it
   across the grid, but the Up next strip holds column 2 for twelve rows, so
   the full-width link was pushed below the whole strip and left a gap of
   ~220px above the session panel. */
body.student-workspace #mainContent > #backToNextSession { grid-column: 1; }

/* ── 7. Buttons ────────────────────────────────────────────────────── */
/* One primary: flat violet, darker on hover, a touch darker again on press.
   The legacy shimmer sweep is switched off. */
body.student-workspace :is(.btn-generate, .tool-cta, .next-session button.next-session__start, .un-cta, #quizSection .btn-next, #quizSection .btn-grade) {
    border-radius: 10px;
    background: var(--ds-violet-600);
    color: #fff;
    font-family: var(--ds-font-text);
    font-weight: 650;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(14, 18, 32, .14);
    filter: none;
    transform: none;
    transition: background-color .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: var(--ds-violet-700);
    box-shadow: 0 1px 2px rgba(14, 18, 32, .14);
    filter: none;
    transform: none;
}
body.student-workspace :is(.btn-generate, .tool-cta, .next-session button.next-session__start, .un-cta, #quizSection .btn-next, #quizSection .btn-grade):active:not(:disabled) {
    background: var(--ds-violet-800);
    transform: none;
}
body.student-workspace .btn-generate::before { display: none; }
body.student-workspace .generate-button-arrow { display: inline-block; transition: transform .15s ease; }
body.student-workspace .btn-generate:hover .generate-button-arrow { transform: translateX(2px); }
body.student-workspace #quizSection .btn-prev { border-radius: 10px; border-color: var(--ds-line-2); box-shadow: none; }

/* Secondary buttons: quiet outlines. */
body.student-workspace :is(.fc-btn-ghost, .cq-btn-secondary) {
    border-color: var(--ds-line-2);
    border-radius: 10px;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.student-workspace :is(.fc-btn-ghost, .cq-btn-secondary):hover { background: var(--ds-bg-2); color: var(--ds-ink); }

/* ── 8. Fields ─────────────────────────────────────────────────────── */
body.student-workspace :is(.select-styled, .input-text, .textarea-notes, #inputSection .input-text, #inputSection .textarea-notes, #quizSection textarea) {
    border: 1px solid var(--ds-line-2);
    border-radius: 10px;
    background-color: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.student-workspace :is(.select-styled, .input-text, .textarea-notes, #quizSection textarea):hover:not(:focus-visible):not(:disabled):not([readonly]) {
    border-color: color-mix(in srgb, var(--ds-ink) 30%, transparent);
}
body.student-workspace :is(.select-styled, .input-text, .textarea-notes, #inputSection .input-text, #inputSection .textarea-notes, #quizSection textarea):focus-visible {
    border-color: var(--ds-accent);
    box-shadow: none;
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}
[data-dark] body.student-workspace :is(.select-styled, .input-text, .textarea-notes, #inputSection .input-text, #inputSection .textarea-notes, #quizSection textarea) {
    background-color: var(--ds-bg-3);
    border-color: rgba(255, 255, 255, .12);
}
/* The custom selects (.csel), their open lists and the "Your course" toggle
   kept app.css's old neutral charcoal in dark (#232327 / #1D1D21 / #18181B)
   while the inputs beside them took the night palette. Same surface now. */
[data-dark] body.student-workspace :is(#inputSection .csel-trigger, #flashcardsPage .csel-trigger, .csel-trigger, .course-toggle) {
    background-color: var(--ds-bg-3);
    border-color: rgba(255, 255, 255, .12);
}
[data-dark] body.student-workspace :is(#inputSection .csel-panel, .csel-panel) {
    background-color: var(--ds-surface-2);
    border-color: var(--ds-line-2);
}
[data-dark] body.student-workspace .csel-search {
    background-color: var(--ds-bg-3);
    border-color: rgba(255, 255, 255, .12);
}
/* The quiz generator's fact cells had the same grey (white at 5.5% over
   night reads neutral). The live state keeps its own violet. */
[data-dark] body.student-workspace .gen-fact:not(.gen-fact--live) {
    background: var(--ds-bg-3);
    border-color: rgba(255, 255, 255, .12);
}
body.student-workspace :is(#inputSection .field-label, .field-label, #quizSection .written-answer-wrap .field-label) {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-2);
}
[data-dark] body.student-workspace #inputSection .field-label { color: var(--ds-ink-2); }
body.student-workspace :is(#inputSection, #flashcardsPage, .section-page) .builder-group-label {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink);
}

/* Segmented choices (Quick check · Practice · Exam prep · Custom). */
body.student-workspace .preset-opt {
    border-color: var(--ds-line-2);
    border-radius: 10px;
    color: var(--ds-ink-2);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.student-workspace #inputSection .preset-opt:not([aria-checked="true"]) { border-color: var(--ds-line-2); }
body.student-workspace .preset-opt:hover:not([aria-checked="true"]) { background: var(--ds-bg-2); color: var(--ds-ink); }
body.student-workspace :is(.preset-opt, #inputSection .preset-opt)[aria-checked="true"] {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-accent-ink);
    box-shadow: none;
}

/* Source tabs (Subject · From notes · From file): a plain segmented control. */
body.student-workspace :is(#inputSection, #flashcardsPage) .tabs {
    border-color: transparent;
    border-radius: 10px;
    background: var(--ds-bg-3);
}
body.student-workspace :is(#inputSection, #flashcardsPage) .tab-slider {
    border-radius: 8px;
    background: var(--ds-surface);
    box-shadow: 0 1px 2px rgba(14, 18, 32, .08), inset 0 0 0 1px var(--ds-line);
    transition: left .2s ease, width .2s ease, transform .2s ease;
}
[data-dark] body.student-workspace :is(#inputSection, #flashcardsPage) .tab-slider { background: var(--ds-night-3); }
body.student-workspace :is(#inputSection, #flashcardsPage #fcTabs) .tab-btn { border-radius: 8px; font-weight: 600; }
body.student-workspace :is(#inputSection, #flashcardsPage #fcTabs) .tab-btn.active { color: var(--ds-ink) !important; }

/* Toggles. */
body.student-workspace .toggle-switch { background: var(--ds-bg-3); box-shadow: inset 0 0 0 1px var(--ds-line-2); }
body.student-workspace :is(.toggle-switch, #settingsPage .toggle-switch)[aria-checked="true"] {
    background: var(--ds-violet-600);
    box-shadow: none;
}
body.student-workspace .toggle-thumb { box-shadow: 0 1px 2px rgba(14, 18, 32, .2); transition: left .2s ease; }

/* ── 9. Quiz ───────────────────────────────────────────────────────── */
body.student-workspace #quizSection .progress-wrap { border-radius: 12px; border-color: var(--ds-line); box-shadow: none; }
body.student-workspace #quizSection .progress-bar-track { height: 4px; border-radius: 999px; background: var(--ds-bg-3); }
body.student-workspace #quizSection .progress-bar-fill { border-radius: 999px; background: var(--ds-accent); box-shadow: none; }
body.student-workspace #quizSection .progress-bar-fill::after { display: none; }
body.student-workspace #quizSection :is(.question-card, #scoreCard) {
    border-color: var(--ds-line);
    border-radius: 18px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-1);
}
body.student-workspace #quizSection :is(.question-card, #scoreCard)::before { display: none; }
/* The card header reads like the worked example on the homepage:
   "Question 2 of 5 · Written", in plain labels. */
body.student-workspace #quizSection .question-num {
    padding: 0;
    border: 0;
    background: transparent;
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-2);
}
body.student-workspace #quizSection :is(.diff-badge, .qtype-badge, .score-chip) {
    font: 600 .75rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-3);
}
/* Plain labels, so they sit close; only the marks badge (study-workspace.css
   colours it) keeps a pill, because it tells you how much to write. */
body.student-workspace #quizSection :is(.diff-badge, .qtype-badge) { padding-inline: 4px; }
[data-dark] body.student-workspace #quizSection :is(.diff-badge, .qtype-badge) { color: var(--ds-ink-3); }
body.student-workspace #quizSection .marks-badge { padding: 3px 9px; font: 650 .75rem/1.3 var(--ds-font-text); letter-spacing: 0; }
body.student-workspace #quizSection .question-text {
    font-family: var(--ds-font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.4;
    color: var(--ds-ink);
    text-wrap: pretty;
}

body.student-workspace #quizSection .option {
    min-height: 56px;
    border: 1px solid var(--ds-line-2);
    border-radius: 12px;
    background: var(--ds-surface);
    box-shadow: none;
    transform: none;
    transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
body.student-workspace #quizSection .option::before { display: none; }
body.student-workspace #quizSection .option:not(.correct):not(.wrong):not(.timeout-correct):not(.selected) { border-color: var(--ds-line-2); background: var(--ds-surface); }
body.student-workspace #quizSection .option:not(.disabled):not(.correct):not(.wrong):not(.selected):hover {
    border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent);
    background: var(--ds-bg-2);
    transform: none;
    box-shadow: none;
}
body.student-workspace #quizSection .opt-letter {
    width: 30px; height: 30px;
    border: 1px solid var(--ds-line-2);
    border-radius: 8px;
    background: var(--ds-bg-2);
    color: var(--ds-ink-2);
    font: 650 .8125rem/1 var(--ds-font-text);
    transform: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.student-workspace #quizSection .option:not(.disabled):not(.correct):not(.wrong):hover .opt-letter {
    border-color: var(--ds-accent);
    background: var(--ds-surface);
    color: var(--ds-accent-ink);
    transform: none;
}
body.student-workspace #quizSection .opt-text { font-size: 1rem; font-weight: 500; color: var(--ds-ink); }
body.student-workspace #quizSection .option.selected { border-color: var(--ds-accent); background: var(--ds-accent-soft); box-shadow: none; }
body.student-workspace #quizSection .option.selected .opt-letter { border-color: var(--ds-accent); background: var(--ds-accent); color: #fff; }

/* Marked answers use the marking inks (the same ones as the examiner report). */
body.student-workspace #quizSection :is(.option.correct, .option.timeout-correct) {
    border-color: var(--emerald);
    background: var(--emerald-bg);
    box-shadow: none;
    animation: none;
}
body.student-workspace #quizSection :is(.option.correct, .option.timeout-correct) .opt-letter { border-color: var(--emerald); background: var(--emerald); color: #fff; }
body.student-workspace #quizSection :is(.option.correct, .option.timeout-correct) .opt-text { color: var(--ds-ink); font-weight: 600; }
body.student-workspace #quizSection .option.wrong { border-color: var(--rose); background: var(--rose-bg); box-shadow: none; animation: none; }
body.student-workspace #quizSection .option.wrong .opt-letter { border-color: var(--rose); background: var(--rose); color: #fff; }
body.student-workspace #quizSection .option.wrong .opt-text { color: var(--ds-ink); }
[data-dark] body.student-workspace #quizSection :is(.option.correct, .option.timeout-correct, .option.wrong) .opt-letter { color: var(--ds-bg); }
body.student-workspace #quizSection .option:is(.disabled, .dimmed):not(.correct):not(.wrong):not(.timeout-correct) { opacity: .6; }

body.student-workspace #quizSection .explanation-box {
    border: 0;
    border-left: 3px solid var(--ds-line-2);
    border-radius: 4px 12px 12px 4px;
    padding: 14px 18px;
    background: var(--ds-bg-2);
    color: var(--ds-ink-2);
    font-size: .9375rem;
    line-height: 1.65;
    animation: none;
}
body.student-workspace #quizSection .explanation-box.correct-exp { border-left-color: var(--emerald); }
body.student-workspace #quizSection .explanation-box.wrong-exp { border-left-color: var(--amber); }
body.student-workspace #quizSection .explanation-box.timeout-exp { border-left-color: var(--rose); }
body.student-workspace #quizSection .explanation-box strong { color: var(--ds-ink); }

/* ── 10. Debrief ───────────────────────────────────────────────────── */
body.student-workspace #scoreCard .dbr-slug {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-2);
}
body.student-workspace #scoreCard .dbr-frac {
    font-family: var(--ds-font-display);
    font-weight: 600;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
body.student-workspace #scoreCard :is(.dbr-pct, .dbr-avg) {
    font-family: var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
body.student-workspace #scoreCard .debrief-verdict-txt { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -.02em; }
body.student-workspace #scoreCard .dbr-track { height: 6px; border-radius: 999px; background: var(--ds-bg-3); overflow: hidden; }
body.student-workspace #scoreCard .dbr-fill { border-radius: 999px; background: var(--ds-accent); box-shadow: none; }
body.student-workspace .score-stat { border-color: var(--ds-line); border-radius: 12px; background: var(--ds-bg-2); box-shadow: none; }
body.student-workspace .score-stat-val {
    font-family: var(--ds-font-display);
    font-weight: 600;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ds-ink);
}
body.student-workspace .score-stat-label {
    font: 600 .75rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-3);
}

/* ── 11. Flashcards ────────────────────────────────────────────────── */
body.student-workspace .fc-btn-know { border-radius: 10px; }

/* ── 12. Settings, library, dashboard ──────────────────────────────── */
body.student-workspace :is(.acct-sec-title, .dash-sec-title) { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -.02em; }
body.student-workspace .settings-group-title {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-2);
}
body.student-workspace #settingsPage .set-row { border-color: var(--ds-line); }
body.student-workspace :is(.lib-chip, .uk-chip) { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
body.student-workspace #dashStanding .ds-val {
    font-family: var(--ds-font-display);
    font-weight: 600;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
body.student-workspace #dashStanding .ds-label {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-3);
}
body.student-workspace #dashStartGuide > li > span { color: var(--ds-ink-3); font-variant-numeric: tabular-nums; }
body.student-workspace #guestLimitBanner { border-color: var(--ds-line); background: var(--ds-surface); box-shadow: none; }

/* ── 13. First-run setup ───────────────────────────────────────────── */
/* Follows the theme like the rest of the app: paper in light, the pure
   black ground in dark. No image on either ground, and nothing here
   animates on its own (tests/test_setup_browser.py pins both themes).
   setup-experience.css draws the form in night colours, so the light
   theme restates every colour it sets; dark keeps those. */
body.student-workspace #setup[data-experience] {
    --setup-ground: #ffffff;
    --setup-paper: #ffffff;
    --setup-ink: var(--ds-ink);
    --setup-muted: var(--ds-ink-3);
    --setup-line: rgba(14, 18, 32, .12);
    --setup-violet: var(--ds-accent-ink);
    --violet: #5b50e8;
    color-scheme: light;
}
[data-dark] body.student-workspace #setup[data-experience] {
    --setup-ground: #000;
    --setup-paper: #18181b;
    --setup-ink: #eeeef0;
    --setup-muted: #a1a1aa;
    --setup-line: rgba(255, 255, 255, .1);
    --setup-violet: #b6a6ff;
    color-scheme: dark;
}
body.student-workspace #setup[data-experience] .setup-brand { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -.03em; }
body.student-workspace #setup[data-experience] .setup-h {
    font-family: var(--ds-font-display);
    font-size: clamp(1.625rem, 3.6vw, 2rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    text-wrap: balance;
}
body.student-workspace #setup[data-experience] .setup-sub { font-size: .875rem; }
body.student-workspace #setup[data-experience] .setup-body { scrollbar-color: #c9ccd6 transparent; }
body.student-workspace #setup[data-experience] .setup-path-node { width: 22px; height: 22px; background: #eceef4; color: var(--ds-ink-3); font: 600 .6875rem/1 var(--ds-font-text); }
body.student-workspace #setup[data-experience] .setup-path [aria-current] .setup-path-node { background: var(--ds-violet-600); color: #fff; box-shadow: none; }
body.student-workspace #setup[data-experience] .setup-path .is-done .setup-path-node { background: var(--ds-mint-soft); color: var(--ds-mint); }
body.student-workspace #setup[data-experience] :is(.setup-label, .setup-group-head) {
    font: 600 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink-2);
}
body.student-workspace #setup[data-experience] .setup-card { border-radius: 12px; }
body.student-workspace #setup[data-experience] .setup-card:hover { border-color: rgba(14, 18, 32, .24); background: #f7f7fb; }
body.student-workspace #setup[data-experience] :is(.setup-card[aria-pressed="true"], .setup-card[aria-checked="true"]) {
    border-color: var(--ds-violet-600);
    background: rgba(91, 80, 232, .07);
    box-shadow: none;
}
body.student-workspace #setup[data-experience] .setup-tick { border-color: rgba(14, 18, 32, .3); }
body.student-workspace #setup[data-experience] :is([aria-pressed="true"], [aria-checked="true"]) > .setup-tick { background: var(--ds-violet-600); border-color: var(--ds-violet-600); color: #fff; }
body.student-workspace #setup[data-experience] .setup-search { background: #fff; color: var(--setup-ink); border-color: rgba(14, 18, 32, .18); }
body.student-workspace #setup[data-experience] .setup-search:focus-visible { border-color: var(--ds-violet-600); box-shadow: 0 0 0 3px rgba(91, 80, 232, .18); outline: none; }
body.student-workspace #setup[data-experience] .setup-primary { border-radius: 10px; background: var(--ds-violet-600); box-shadow: none; }
body.student-workspace #setup[data-experience] .setup-primary:hover:not(:disabled) { background: var(--ds-violet-700); }
body.student-workspace #setup[data-experience] .setup-primary:disabled { background: #eceef4; color: #8a91ad; box-shadow: none; }
body.student-workspace #setup[data-experience] .setup-error { color: #9f1d2b; background: #fdecec; border-color: #f3b9bd; }
body.student-workspace #setup[data-experience] .setup-note { color: #7a4b0a; background: #fdf3e1; border-color: #f0d3a0; }
body.student-workspace #setup[data-experience] :is(button, input, select):focus-visible { outline-color: var(--ds-violet-600); }

/* Dark: the night form setup-experience.css was drawn for. */
[data-dark] body.student-workspace #setup[data-experience] .setup-body { scrollbar-color: #444449 transparent; }
[data-dark] body.student-workspace #setup[data-experience] .setup-path-node { background: #222226; color: inherit; }
[data-dark] body.student-workspace #setup[data-experience] .setup-path .is-done .setup-path-node { background: #20372a; color: #9ddbb5; }
[data-dark] body.student-workspace #setup[data-experience] :is(.setup-label, .setup-group-head) { color: #b2b9d9; }
[data-dark] body.student-workspace #setup[data-experience] .setup-card:hover { border-color: rgba(255, 255, 255, .24); background: #222226; }
[data-dark] body.student-workspace #setup[data-experience] :is(.setup-card[aria-pressed="true"], .setup-card[aria-checked="true"]) { border-color: #5940d6; background: rgba(91, 80, 232, .14); }
[data-dark] body.student-workspace #setup[data-experience] .setup-tick { border-color: #737680; }
[data-dark] body.student-workspace #setup[data-experience] :is([aria-pressed="true"], [aria-checked="true"]) > .setup-tick { background: #5940d6; border-color: #5940d6; }
[data-dark] body.student-workspace #setup[data-experience] .setup-search { background: #18181b; border-color: rgba(255, 255, 255, .18); }
[data-dark] body.student-workspace #setup[data-experience] .setup-search:focus-visible { border-color: #5940d6; box-shadow: 0 0 0 3px rgba(109, 98, 245, .22); }
[data-dark] body.student-workspace #setup[data-experience] .setup-primary:disabled { background: #222226; }
[data-dark] body.student-workspace #setup[data-experience] .setup-error { color: #ffc5c5; background: #2b1c20; border-color: #70414c; }
[data-dark] body.student-workspace #setup[data-experience] .setup-note { color: #e8d0ad; background: #2a2119; border-color: #6b5132; }
[data-dark] body.student-workspace #setup[data-experience] :is(button, input, select):focus-visible { outline-color: #b6a6ff; }
@media (prefers-reduced-motion: no-preference) {
    body.student-workspace #setup[data-experience] .setup-card { transition: border-color .15s ease, background-color .15s ease; }
}

/* Oct 2026 palette: fields are identified by an edge that reads at 3:1 on
   charcoal (#6b6b75 against #111113, #18181b and #222226). */
/* :is() with ids so these outrank the id-scoped field rules above. */
[data-dark] body.student-workspace :is(#mainContent, #inputSection, #flashcardsPage, .section-page) :is(.select-styled, .input-text, .textarea-notes, .csel-trigger, .course-toggle, .csel-search, .study-deck-select, .fill-input),
[data-dark] body.student-workspace .forge-topnav #appNavSearch {
    border: 1px solid var(--ds-input-line);
}
[data-dark] body.student-workspace :is(#mainContent, #inputSection, #flashcardsPage, .section-page) :is(.select-styled, .input-text, .textarea-notes, .csel-trigger, .csel-search, .fill-input):focus-visible,
[data-dark] body.student-workspace .forge-topnav #appNavSearch:focus-visible {
    border-color: var(--ds-focus); outline: 2px solid var(--ds-focus); outline-offset: 1px;
}

/* ── 14. One purple in the app ───────────────────────────────────────── */
/* app.css defines the legacy brand violet (#5b50e8) on :root, and marketing
   pages must keep it. This block is scoped to the signed-in shell, so the
   tokens that still paint app controls move to the Signal purple here. */
body.student-workspace {
    --violet: #5940d6;
    --violet-dim: #4932b8;
    --violet-shade: #4932b8;
    --violet-glow: rgba(89, 64, 214, .15);
}

/* ── 15. Hard-coded violet in app controls ──────────────────────────── */
/* These rules paint #5b50e8 directly, so the token block above cannot reach
   them. Each is repeated under body.student-workspace, which raises its
   specificity; the homepage and pricing never carry that class and keep
   their own accent. */
body.student-workspace .nav-logo-mark,
[data-dark] body.student-workspace .nav-logo-mark,
body.student-workspace .skip-link,
body.student-workspace #authModalOverlay .auth-submit:active,
body.student-workspace #settingsPage .toggle-switch[aria-checked="true"],
body.student-workspace #dashUpNext .un-cta,
body.student-workspace #flashcardsPage .fc-btn-know,
body.student-workspace .study-tool-page :is(.btn-generate, .tool-cta, .btn-essay, .fc-btn-know),
body.student-workspace .study-tool-page .path-node.current .path-circle,
body.student-workspace .handwriting-switch button[aria-pressed="true"],
body.student-workspace .next-session__segments input:checked + span,
body.student-workspace .next-session button.next-session__start,
body.student-workspace .menu-item-pro,
body.student-workspace .fc-progress-fill { background: #5940d6; }
body.student-workspace :is(#flashcardsPage .fc-btn-know, .study-tool-page .path-node.current .path-circle) { border-color: #5940d6; }
body.student-workspace .menu-item-pro:hover { background: #4932b8; }
body.student-workspace .daily-challenge-banner { background: linear-gradient(120deg, #5940d6, #7a5af5 55%, #18c0dd 135%); }
body.student-workspace .auth-aside { background: linear-gradient(160deg, #6d5cff 0%, #5940d6 55%, #4932b8 100%); }
body.student-workspace #splash { background: #111113; }
body.student-workspace .tutor-qa-btn { background: rgba(89, 64, 214, .08); }
body.student-workspace .tutor-qa-btn:hover:not(:disabled) { background: rgba(89, 64, 214, .16); }

/* ── 16. Plan badges: one quiet style ───────────────────────────────── */
/* Plan markers were filled: lilac on the rail, cyan and violet in the drawer.
   Now they are outlined labels that name the plan without competing with
   the item they sit beside. Colour follows the theme through the tokens. */
body.student-workspace .study-rail-btn .study-rail-pro,
body.student-workspace #sideMenu .pro-chip {
    padding: 1px 5px 2px;
    border: 1px solid var(--ds-line-2, #38383f);
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: var(--ds-ink-2);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}
body.student-workspace #sideMenu .menu-item:has(> .pro-chip) { display: flex; align-items: center; gap: 0; }
body.student-workspace #sideMenu .menu-item > .pro-chip:first-of-type { margin-left: auto; }
/* Every row's icon is drawn at one size, so labels share one left edge. */
body.student-workspace #sideMenu .menu-item > svg { width: 15px; height: 15px; flex: none; }
/* One badge per row: the lowest plan that unlocks the tool (Student comes
   first in the markup, and Pro includes everything in Student). Two badges
   pushed the label onto a second line at drawer width. */
body.student-workspace #sideMenu .menu-item > .pro-chip + .pro-chip { display: none; }
body.student-workspace #sideMenu .menu-item:has(> .pro-chip) { white-space: nowrap; }

/* ── 17. Type floor and button font ─────────────────────────────────── */
body.student-workspace .week-dot-circle,
body.student-workspace .week-dot-label,
body.student-workspace .ach2 .ach2-cat { font-size: .6875rem; }
/* :where() holds this at zero specificity, so a class that sets its own
   font-family (mono labels, serif numerals) still wins over it. */
:where(body.student-workspace) :where(button, input, select, textarea) { font-family: inherit; }

/* ── 18. No milestones, no milestones block ─────────────────────────── */
/* The heading, bar and next-up line sit beside #dashAchGrid, which
   achievements.js empties on reset and when nothing is earned to show. */
body.student-workspace :is(.dash-sec-head:has(#dashAchCount), .dash-ach-progress, .ach-next):has(~ #dashAchGrid:empty) {
    display: none !important;
}

/* ── 19. Motion ─────────────────────────────────────────────────────── */
/* Reduced motion: every animation and transition on the student workspace
   becomes an instant change. Each one still fires its end event, which is
   why the duration is .01ms rather than none. */
@media (prefers-reduced-motion: reduce) {
    body.student-workspace *,
    body.student-workspace *::before,
    body.student-workspace *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html:has(body.student-workspace) { scroll-behavior: auto !important; }
}

/* ── 20. Drawer: no row is styled as if it were selected ───────────── */
/* "Join a live game" carried an inline violet, bold style that read as the
   current page. It is an ordinary row now. */
body.student-workspace #sideMenu #menuLive { color: inherit !important; font-weight: inherit !important; }
/* The drawer title was set in italic, a style used nowhere else in the app. */
body.student-workspace #sideMenu > div:first-child > span:first-child { font-style: normal !important; font-weight: 650; }