/* classroom UX polish — final authoritative layer for rendering quality, printing, and mobile.
   Loaded after beta-polish.css. Every override here intentionally settles conflicts between the
   earlier cascade layers (learning-cockpit.css / dashboard.css / app.css / workspace.css). */

/* ── 0. DARK-MODE PALETTE: neutral graphite/slate, not violet ─────────────
   learning-cockpit.css redefines the dark token set (--fc-*, --course-*, and the base
   --bg/--surface/--blue/--border tokens they alias to) THREE separate times, plus a fourth
   time for the #view-dashboard-scoped --course-* family — all converging on the same
   violet-tinted palette (#8b7fff accent, rgba(139,127,255,*) borders). That reads as
   purple/gimmicky rather than a restrained professional dark theme. Since every one of
   those blocks targets the exact same selectors (`html[data-theme="dark"]` /
   `html[data-theme="dark"] #view-dashboard`), redefining the same custom properties here
   — in the file guaranteed to load last — wins the cascade over all of them at once,
   without having to hunt down and edit every duplicate. Light mode is untouched. */
html[data-theme="dark"] {
    color-scheme: dark;
    --fc-bg: #121317;
    --fc-surface: #1a1b1f;
    --fc-surface-2: #212227;
    --fc-surface-3: #2a2b31;
    --fc-ink: #e9e9ec;
    --fc-muted: #9a9aa3;
    --fc-muted-2: #7d7d86;
    --fc-line: #2c2d33;
    --fc-line-strong: #3a3b42;
    --fc-blue: #5b8def;
    --fc-blue-strong: #86b2f7;
    --fc-blue-soft: rgba(91, 141, 239, 0.14);
    --fc-green: #4fd1a5;
    --fc-green-soft: rgba(79, 209, 165, 0.14);
    --fc-amber: #e8a94d;
    --fc-amber-soft: rgba(232, 169, 77, 0.14);
    --fc-red: #f0685f;
    --fc-red-soft: rgba(240, 104, 95, 0.14);
    --fc-violet: #9a9ab0;
    --page-bg: var(--fc-bg);
    --surface: var(--fc-surface);
    --surface-2: var(--fc-surface-2);
    --surface-3: var(--fc-surface-3);
    --text: var(--fc-ink);
    --muted: var(--fc-muted);
    --muted-2: var(--fc-muted-2);
    --border: var(--fc-line);
    --border-strong: var(--fc-line-strong);
    --blue: var(--fc-blue);
    --blue-dark: var(--fc-blue-strong);
    --blue-soft: var(--fc-blue-soft);
    --green: var(--fc-green);
    --green-soft: var(--fc-green-soft);
    --amber: var(--fc-amber);
    --amber-soft: var(--fc-amber-soft);
    --red: var(--fc-red);
    --red-soft: var(--fc-red-soft);
    --violet: var(--fc-violet);
    --ink-soft: var(--fc-ink);
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.26);
    --fc-shadow: var(--shadow-soft);
}

html[data-theme="dark"] #view-dashboard {
    --course-bg: var(--fc-bg);
    --course-surface: var(--fc-surface);
    --course-surface-soft: var(--fc-surface-2);
    --course-surface-warm: var(--fc-amber-soft);
    --course-ink: var(--fc-ink);
    --course-muted: var(--fc-muted);
    --course-line: var(--fc-line);
    --course-line-strong: var(--fc-line-strong);
    --course-blue: var(--fc-blue);
    --course-green: var(--fc-green);
    --course-amber: var(--fc-amber);
    --course-red: var(--fc-red);
    --course-shadow: none;
}

/* ── 0b. LIGHT-MODE PALETTE: the "VEX_NEW" neutral scale ──────────────────
   New brand neutrals (darkest to lightest: 1C1C1C, DADDD8, ECEBE4, EEF0F2,
   FAFAFF), mapped onto the same surface/border/text roles used everywhere else,
   replacing the old warm cream/plum light scale. Accent (blue/green/amber/red)
   is untouched — the new palette is neutrals only, so the existing brand blue
   keeps doing the accent job it already had. Targets both the unguarded :root
   (the default with no theme set) and the explicit light attribute, and — like
   the dark-mode block above — wins over every scattered duplicate definition
   elsewhere simply by being the last one loaded. */
:root,
html[data-theme="light"] {
    --fc-bg: #eef0f2;
    --fc-surface: #fafaff;
    --fc-surface-2: #ecebe4;
    --fc-surface-3: #daddd8;
    --fc-ink: #1c1c1c;
    --fc-muted: #6b6c68;
    --fc-muted-2: #96978f;
    --fc-line: #daddd8;
    --fc-line-strong: #c3c6bf;
    --page-bg: var(--fc-bg);
    --surface: var(--fc-surface);
    --surface-2: var(--fc-surface-2);
    --surface-3: var(--fc-surface-3);
    --text: var(--fc-ink);
    --muted: var(--fc-muted);
    --muted-2: var(--fc-muted-2);
    --border: var(--fc-line);
    --border-strong: var(--fc-line-strong);
    --ink-soft: var(--fc-ink);
}

html[data-theme="light"] #view-dashboard,
#view-dashboard {
    --course-bg: var(--fc-bg);
    --course-surface: var(--fc-surface);
    --course-surface-soft: var(--fc-surface-2);
    --course-ink: var(--fc-ink);
    --course-muted: var(--fc-muted);
    --course-line: var(--fc-line);
    --course-line-strong: var(--fc-line-strong);
}

/* ── 1. RENDERING QUALITY ────────────────────────────────────────────────── */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Lesson images: never stretch, snap to grid, reserve space while loading. */
.lesson-prose img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0.65rem auto;
    border-radius: 10px;
    object-fit: contain;
}

.lesson-prose img[loading="lazy"] {
    background: color-mix(in srgb, var(--fc-surface-2, var(--surface-2)) 70%, transparent);
    min-height: 6rem;
}

/* Long words / URLs / inline code must not blow the layout on narrow screens. */
.lesson-prose p,
.lesson-prose li,
.lesson-prose blockquote,
.lesson-prose th,
.lesson-prose td,
.lesson-prose figcaption,
.lesson-example-card p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Smooth horizontal scrolling for wide tables & code on touch devices. */
.lesson-prose table,
.lesson-prose pre,
.code-block,
.science-visual-fallback pre {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Code blocks: keep lines intact, scroll horizontally instead of wrapping. */
.lesson-prose pre,
.code-block {
    white-space: pre !important;
    overflow-x: auto !important;
    tab-size: 4;
}

.code-block code {
    white-space: pre !important;
}

/* Science visuals: reserve stage height while the chart library hydrates so
   the rest of the lesson does not jump around. Applies only while empty. */
.science-visual-stage:empty {
    min-height: 14rem;
}

/* MathJax display equations: contain overflow instead of clipping glyphs. */
mjx-container[display="true"],
mjx-container[display="true"] > svg {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* Reduce reflow of Mermaid/Plotly shells before hydration. */
.mermaid,
.science-plotly-stage,
.science-chartjs-stage {
    min-height: 10rem;
}

/* Heading anchors sit clear of any sticky chrome. */
.lesson-prose h2[id],
.lesson-prose h3[id] {
    scroll-margin-top: 5.5rem;
}

/* ── 2. PRINTING SYSTEM ──────────────────────────────────────────────────── */

@media print {
    /* Single authoritative page geometry. */
    @page {
        size: A4 portrait;
        margin: 12mm 11mm 14mm;

        /* Page header/footer in margin boxes */
        @top-left {
            content: string(doc-title);
            font-size: 7pt;
            color: #5a6d85;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        @top-center {
            content: "";
        }
        @top-right {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 7pt;
            color: #5a6d85;
            font-weight: 600;
        }
        @bottom-left {
            content: string(doc-url);
            font-size: 6pt;
            color: #8a9bb5;
            font-family: monospace;
        }
        @bottom-center {
            content: "";
        }
        @bottom-right {
            content: "";
        }
    }

    /* Font optimization for print - use system fonts that embed reliably */
    body.print-lesson-mode,
    body.print-lesson-mode * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }

    body.print-lesson-mode pre,
    body.print-lesson-mode code,
    body.print-lesson-mode .code-block,
    body.print-lesson-mode [class*="syntax-"] {
        font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    }

    /* Certificates & transcripts are landscape documents. Named pages keep the
       rest of the print output portrait. */
    @page certificate {
        size: A4 landscape;
        margin: 9mm 11mm 12mm;
    }

    body.print-lesson-mode #active-lesson-panel .certificate-document,
    body.print-account-document-mode #account-print-area .certificate-document,
    body.print-account-document-mode #account-print-area .account-transcript-document {
        page: certificate;
    }

    /* Certificate: reset fixed screen heights & cover chrome so it is one clean
       landscape page (A4 landscape content area is ~190mm tall). */
    body.print-lesson-mode #active-lesson-panel .certificate-document.print-document-cover,
    body.print-account-document-mode #account-print-area .certificate-document {
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: #ffffff !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-lesson-mode #active-lesson-panel .certificate-inner-frame,
    body.print-account-document-mode #account-print-area .certificate-inner-frame {
        min-height: 166mm !important;
        border: 1px solid #cfdcec !important;
        outline: 1px solid rgba(23, 32, 51, 0.09) !important;
        outline-offset: -4mm !important;
        padding: 16mm 20mm !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-lesson-mode #active-lesson-panel .certificate-document h1 {
        font-size: clamp(30pt, 9vw, 46pt) !important;
    }

    /* ── Orphan/widow control for prose ── */
    body.print-lesson-mode #active-lesson-panel p,
    body.print-lesson-mode #active-lesson-panel li {
        orphans: 3;
        widows: 3;
    }

    /* Keep headings attached to the content that follows them. */
    body.print-lesson-mode #active-lesson-panel h1,
    body.print-lesson-mode #active-lesson-panel h2,
    body.print-lesson-mode #active-lesson-panel h3,
    body.print-lesson-mode #active-lesson-panel h4 {
        break-after: avoid-page;
        page-break-after: avoid;
    }

    /* Keep self-contained blocks on one page when they fit. */
    body.print-lesson-mode #active-lesson-panel :is(
        table, pre, figure, blockquote,
        .science-visual, .exam-question, .exam-section h3,
        .tip-panel, .info-panel, .warning-panel,
        .lesson-example-card, .quiz-card, .assessment-card
    ) {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Wide tables & code must never clip at the page edge. */
    body.print-lesson-mode #active-lesson-panel :is(table, pre, .code-block) {
        max-width: 100%;
        overflow: visible;
    }

    body.print-lesson-mode #active-lesson-panel .lesson-prose table {
        display: table !important;
        width: 100% !important;
        font-size: 8.8pt !important;
    }

    body.print-lesson-mode #active-lesson-panel .lesson-prose th,
    body.print-lesson-mode #active-lesson-panel .lesson-prose td {
        padding: 5pt 7pt !important;
    }

    /* Diagrams that were sliced into dedicated print pages: only force page break
       on the 2nd+ slice, not the first one. Single diagrams flow naturally. */
    body.print-lesson-mode #active-lesson-panel .diagram-print-page {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    body.print-lesson-mode #active-lesson-panel .diagram-print-page + .diagram-print-page {
        break-before: page !important;
        page-break-before: always !important;
    }

    /* Every diagram page fills the printable area edge to edge. */
    body.print-lesson-mode #active-lesson-panel .diagram-print-frame {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.print-lesson-mode #active-lesson-panel .diagram-print-frame svg,
    body.print-lesson-mode #active-lesson-panel .diagram-print-frame img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Canvas snapshots and live canvases stay inside the page box. */
    body.print-lesson-mode #active-lesson-panel .canvas-print-snapshot,
    body.print-lesson-mode #active-lesson-panel .science-visual img,
    body.print-lesson-mode #active-lesson-panel .science-visual canvas {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 19cm !important;
        object-fit: contain !important;
        break-inside: avoid;
    }

    /* Final page should not be a near-empty orphan. */
    body.print-lesson-mode #active-lesson-panel {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Supress UI-only chrome that earlier layers might have missed. */
    body.print-lesson-mode #active-lesson-panel .lesson-actions,
    body.print-lesson-mode #active-lesson-panel .lesson-footer-nav,
    body.print-lesson-mode #active-lesson-panel .lesson-outline-card,
    body.print-lesson-mode #active-lesson-panel .lesson-objectives,
    body.print-lesson-mode #active-lesson-panel .lesson-meta-grid,
    body.print-lesson-mode #active-lesson-panel .lesson-reading-progress,
    body.print-lesson-mode #active-lesson-panel .course-page-header,
    body.print-lesson-mode #active-lesson-panel .course-page-nav,
    body.print-lesson-mode #active-lesson-panel .certificate-actions-header {
        display: none !important;
    }
}

/* ── 3. MOBILE RESPONSIVITY ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
    #view-dashboard .lesson-dashboard {
        grid-template-columns: 1fr !important;
    }

    #view-dashboard .lesson-insight-rail {
        position: static !important;
        grid-row: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #view-dashboard .lesson-reading-surface {
        min-height: 0 !important;
    }

    #view-dashboard .course-page-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        min-height: auto !important;
        padding: 0.85rem !important;
    }

    #view-dashboard .course-page-header > span {
        justify-self: start !important;
    }

    #view-dashboard .lesson-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.42rem;
    }

    #view-dashboard .lesson-actions .course-action-btn {
        flex: 1 1 auto;
    }

    /* Exam papers breathe on tablets. */
    #view-dashboard .exam-paper-body {
        padding: 0.9rem !important;
    }

    #view-dashboard .premium-exam-paper {
        border-radius: 10px !important;
    }

    #view-dashboard .results-columns {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    /* Portal: full-width hero actions and stacked stats. */
    #view-portal .portal-hero-card {
        grid-template-columns: 1fr !important;
    }

    #view-portal .portal-hero-actions {
        justify-content: stretch !important;
    }

    #view-portal .portal-hero-actions .btn-primary,
    #view-portal .portal-hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    #view-portal .portal-stat-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.32rem !important;
    }

    #view-portal .portal-stat-strip span {
        padding: 0.4rem 0.42rem !important;
    }

    /* Course cards fill the width with comfortable touch targets. */
    #view-portal .course-card-grid {
        grid-template-columns: 1fr !important;
    }

    #view-portal .course-card-grid > div {
        min-height: 3.4rem !important;
        padding: 0.68rem !important;
    }

    /* Dashboard: nav buttons become full-width touch rows. */
    #view-dashboard .course-page-nav {
        grid-template-columns: 1fr 1fr !important;
    }

    #view-dashboard .course-nav-item {
        min-height: 3.5rem !important;
    }

    #view-dashboard .course-page-header h3 {
        font-size: 1.18rem !important;
    }

    #view-dashboard .page-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.32rem !important;
    }

    #view-dashboard .page-metric-strip span {
        min-width: 0 !important;
        padding: 0.42rem 0.5rem !important;
    }

    /* Lesson surface padding for thumbs. */
    #view-dashboard .lesson-reading-surface {
        padding: 0.85rem !important;
    }

    /* Exam questions: options and sub-questions read as stacked rows. */
    #view-dashboard .exam-mcq-options label {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        padding: 0.55rem 0.62rem !important;
    }

    #view-dashboard .exam-mcq-options input {
        margin-top: 0.22rem;
    }

    #view-dashboard .exam-sub-question textarea,
    #view-dashboard .exam-question textarea {
        font-size: 0.95rem;
    }

    #view-dashboard .exam-section h3 {
        display: grid;
        gap: 0.2rem;
    }

    /* Account document previews should scroll horizontally instead of squashing. */
    #view-account .account-document-preview {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 560px) {
    /* Course nav goes 3-across on the smallest screens. */
    #view-dashboard .course-page-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.3rem !important;
    }

    #view-dashboard .course-nav-item {
        display: grid !important;
        justify-items: center !important;
        text-align: center !important;
        padding: 0.5rem 0.2rem !important;
    }

    #view-dashboard .course-nav-item span strong {
        font-size: 0.62rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #view-dashboard .page-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Stat rows collapse to two columns so numbers stay legible. */
    #view-portal .portal-stat-strip,
    #view-dashboard .calendar-metrics,
    #view-dashboard .learning-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Exam actions stack; primary submit gets full width. */
    #view-dashboard .exam-paper-actions,
    #view-dashboard .lesson-footer-nav,
    #view-dashboard .assessment-action-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    #view-dashboard .exam-paper-actions .primary,
    #view-dashboard .lesson-footer-nav .primary {
        grid-column: 1 / -1;
    }

    #view-dashboard .course-action-btn {
        justify-content: center;
    }

    /* Section bars and result cards fit narrow screens. */
    #view-dashboard .premium-score-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ==========================================================================
   LUXURY CERTIFICATE OF COMPLETION & CREDENTIALS
   ========================================================================== */

.course-certificate-panel {
    display: grid;
    gap: 1.5rem;
    max-width: 100%;
}

.certificate-document {
    position: relative;
    display: block;
    width: 100%;
    min-height: 640px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: #0f172a;
    padding: clamp(1.2rem, 3.5vw, 2.5rem);
    box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.certificate-inner-frame {
    position: relative;
    display: block;
    min-height: 560px;
    border: 2px solid #e2e8f0;
    outline: 1px solid rgba(217, 119, 6, 0.35);
    outline-offset: -8px;
    border-radius: 12px;
    background: #ffffff;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
}

/* Corner ornamental brackets */
.cert-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 3;
}
.cert-corner-tl {
    top: 14px;
    left: 14px;
    border-top: 3px solid #d97706;
    border-left: 3px solid #d97706;
}
.cert-corner-tr {
    top: 14px;
    right: 14px;
    border-top: 3px solid #d97706;
    border-right: 3px solid #d97706;
}
.cert-corner-bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 3px solid #d97706;
    border-left: 3px solid #d97706;
}
.cert-corner-br {
    bottom: 14px;
    right: 14px;
    border-bottom: 3px solid #d97706;
    border-right: 3px solid #d97706;
}

.certificate-line-art {
    position: absolute;
    right: clamp(10px, 2vw, 36px);
    top: 50%;
    z-index: 1;
    width: min(38%, 340px);
    max-height: 92%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none;
}

.certificate-line-major { fill: none; stroke: rgba(79, 70, 229, 0.32); stroke-width: 1.2; stroke-linecap: round; }
.certificate-line-soft { fill: none; stroke: rgba(79, 70, 229, 0.18); stroke-width: 0.8; stroke-linecap: round; }
.certificate-line-faint { fill: none; stroke: rgba(217, 119, 6, 0.22); stroke-width: 0.65; }

.certificate-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.8rem);
}

.cert-institution-badge {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.certificate-logo-mark {
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.cert-institution-sub {
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cert-credential-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cert-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid #fde68a;
}

.cert-uid-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 700;
}

.certificate-copy {
    position: relative;
    z-index: 2;
    max-width: min(68%, 680px);
}

.certificate-overline {
    margin: 0 0 0.5rem;
    color: #d97706;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.certificate-lead {
    margin: 0 0 0.5rem;
    color: #475569;
    font-size: 1.05rem;
    font-weight: 500;
}

.certificate-student-name {
    margin: 0 0 0.3rem;
    color: #0f172a;
    font-family: Outfit, Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cert-name-accent-line {
    width: 90px;
    height: 3px;
    background: linear-gradient(90deg, #d97706, #4f46e5);
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.certificate-statement {
    margin: 0 0 1.2rem;
    color: #334155;
    font-size: 0.96rem;
    line-height: 1.55;
}

.cert-course-badge-wrap {
    margin-bottom: 1.4rem;
}

.certificate-course-heading {
    margin: 0;
    color: #1e3a8a;
    font-family: Outfit, Inter, sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
}

.certificate-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.4rem 0 1.8rem;
    padding: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.cert-meta-item {
    display: grid;
    gap: 0.2rem;
}

.cert-meta-item b {
    color: #64748b;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.cert-meta-item span {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.certificate-signatures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1.8rem 0 1.4rem;
}

.cert-signature-block {
    display: grid;
    gap: 0.25rem;
    min-width: 150px;
}

.cert-sig-svg {
    width: 130px;
    height: 38px;
}

.cert-sig-line {
    width: 100%;
    height: 1px;
    background: #94a3b8;
    margin-bottom: 0.2rem;
}

.cert-signature-block b {
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
}

.cert-signature-block em {
    color: #64748b;
    font-size: 0.74rem;
    font-style: normal;
}

.cert-seal-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-gold-seal {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 4px 10px rgba(217, 119, 6, 0.3));
    transition: transform 0.2s ease;
}

.cert-gold-seal:hover {
    transform: scale(1.06) rotate(3deg);
}

.gold-seal-svg {
    width: 100%;
    height: 100%;
}

.certificate-footer-row {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.cert-qr-box {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cert-qr-svg {
    flex-shrink: 0;
}

.certificate-fineprint {
    margin: 0;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.4;
}

.certificate-fineprint code {
    color: #4f46e5;
    font-size: 0.72rem;
    background: #eff6ff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* Actions Header */
.certificate-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}

.cert-action-info {
    display: grid;
    gap: 0.2rem;
}

.cert-action-info .lesson-kicker {
    margin: 0;
    color: var(--accent, #4f46e5);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cert-action-info h3 {
    margin: 0;
    color: var(--text);
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.cert-action-info p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.cert-action-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cert-action-buttons .course-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
}

/* Dark Mode Certificate View (Screen only) */
html[data-theme="dark"] .certificate-document {
    background: #0f172a;
    color: #f8fafc;
    border-color: #334155;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .certificate-inner-frame {
    background: #0b1120;
    border-color: #1e293b;
    outline-color: rgba(217, 119, 6, 0.45);
}

html[data-theme="dark"] .certificate-logo-mark {
    color: #f8fafc;
}

html[data-theme="dark"] .certificate-student-name {
    color: #f8fafc;
}

html[data-theme="dark"] .certificate-course-heading {
    color: #93c5fd;
}

html[data-theme="dark"] .certificate-statement {
    color: #cbd5e1;
}

html[data-theme="dark"] .certificate-meta-grid {
    background: #111827;
    border-color: #1e293b;
}

html[data-theme="dark"] .cert-meta-item span {
    color: #f1f5f9;
}

html[data-theme="dark"] .cert-signature-block b {
    color: #f1f5f9;
}

html[data-theme="dark"] .cert-signature-block em {
    color: #94a3b8;
}

html[data-theme="dark"] .cert-sig-svg path {
    stroke: #94a3b8 !important;
}

html[data-theme="dark"] .certificate-footer-row {
    border-color: #1e293b;
}

html[data-theme="dark"] .certificate-fineprint code {
    background: #1e293b;
    color: #60a5fa;
}

/* ==========================================================================
   STEM & KNOWLEDGE NETWORK GRAPH STYLES
   ========================================================================== */

.knowledge-network-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem;
    margin: 0.6rem 0;
}

.knowledge-node-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.knowledge-node-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #4f46e5);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.08);
}

.knowledge-node-card .node-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.node-progress-dial {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.node-progress-dial .dial-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.node-progress-dial .dial-bg {
    stroke: var(--border);
}

.node-progress-dial .dial-fill {
    stroke: var(--accent, #4f46e5);
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}

.node-completed .dial-fill {
    stroke: #059669;
}

.node-progress-dial .dial-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text);
}

.knowledge-node-card .node-meta {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.node-unit-tag {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.node-title {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knowledge-node-card .node-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.node-status-pill {
    font-size: 0.72rem;
    font-weight: 700;
}
.node-status-pill.node-completed { color: #059669; }
.node-status-pill.node-active { color: #4f46e5; }
.node-status-pill.node-pending { color: var(--muted); }

.node-alert-pill {
    font-size: 0.68rem;
    font-weight: 700;
    color: #d97706;
    background: #fef3c7;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

html[data-theme="dark"] .node-alert-pill {
    background: rgba(217, 119, 6, 0.2);
    color: #fcd34d;
}

.node-optimal-pill {
    font-size: 0.68rem;
    font-weight: 700;
    color: #059669;
}

/* Interactive SVG Graph Polish */
.classroom-graph-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.05);
}

.graph-tooltip {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.graph-tooltip.visible {
    opacity: 1;
}

.graph-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.graph-zoom-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease;
}

.graph-zoom-btn:hover {
    background: var(--surface-2);
}

/* ── N. Assessment focus mode — immersive, distraction-free quiz/exam taking ──
   Activated by adding body.assessment-focus-mode while a timed quiz/exam runner
   is open (see ClassroomApp.openAssessment / selectCoursePage in classroom.js).
   Hides site chrome and the lesson browser so the test itself is the whole screen. */

body.assessment-focus-mode #view-dashboard .workspace-header,
body.assessment-focus-mode #view-dashboard .course-topbar.course-command-bar,
body.assessment-focus-mode #view-dashboard .course-sidebar.course-map {
    display: none !important;
}

body.assessment-focus-mode #view-dashboard .course-layout.learning-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}

body.assessment-focus-mode #view-dashboard .course-main.learning-stage {
    max-width: 46rem !important;
    margin: 0 auto !important;
    padding-top: clamp(1rem, 3vw, 2.25rem) !important;
    float: none !important;
}

body.assessment-focus-mode #view-dashboard .course-main.learning-stage:has(.exam-navigator) {
    max-width: 64rem !important;
}

body.assessment-focus-mode #view-dashboard .assessment-runner-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 15.5rem !important;
    align-items: start !important;
    gap: 1.25rem !important;
}

body.assessment-focus-mode #view-dashboard .assessment-runner {
    animation: assessment-focus-in 0.28s ease both;
}

@keyframes assessment-focus-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.assessment-focus-mode #view-dashboard .assessment-runner {
        animation: none;
    }
}

/* Live progress readout above the question list. */
.quiz-progress-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.4rem;
}

.quiz-progress-row .quiz-progress-line {
    flex: 1;
}

.quiz-progress-label {
    flex: none;
    color: var(--fc-muted, var(--muted));
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#assessment-progress-fill {
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fallback selected-answer highlight for browsers without :has() support;
   also reinforced live by ClassroomApp.updateAssessmentProgress(). */
.option-label.is-selected {
    border-color: color-mix(in srgb, var(--fc-blue, var(--blue)) 42%, var(--fc-line, var(--border))) !important;
    background: var(--fc-blue-soft, color-mix(in srgb, var(--blue) 12%, var(--surface))) !important;
}

/* ── Exam question navigator — a real palette instead of a plain scrolling form ── */

#view-dashboard .exam-navigator {
    position: sticky !important;
    top: clamp(1rem, 3vw, 2.25rem) !important;
    max-height: calc(100vh - 4rem) !important;
    overflow-y: auto !important;
    display: grid !important;
    align-content: start !important;
    gap: 0.75rem !important;
    border: 1px solid var(--fc-line, var(--border)) !important;
    border-radius: var(--radius, 16px) !important;
    background: var(--fc-surface, var(--surface)) !important;
    padding: 0.9rem !important;
    box-shadow: var(--fc-shadow, var(--shadow-soft)) !important;
}

.exam-navigator-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.exam-navigator-title {
    color: var(--fc-ink, var(--text));
    font-size: 0.86rem;
    font-weight: 700;
}

.exam-navigator-summary {
    color: var(--fc-muted, var(--muted));
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.exam-navigator-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr)) !important;
    gap: 0.4rem !important;
}

.exam-nav-chip {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--fc-line, var(--border));
    border-radius: 10px;
    background: var(--fc-surface-2, var(--surface-2));
    color: var(--fc-muted, var(--muted));
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.exam-nav-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--fc-blue, var(--blue)) 40%, var(--fc-line, var(--border)));
}

.exam-nav-chip.is-answered {
    border-color: color-mix(in srgb, var(--fc-blue, var(--blue)) 45%, var(--fc-line, var(--border)));
    background: var(--fc-blue-soft, color-mix(in srgb, var(--blue) 12%, var(--surface)));
    color: var(--fc-blue-strong, var(--blue-dark));
}

.exam-nav-chip.is-current {
    outline: 2px solid var(--fc-blue, var(--blue));
    outline-offset: 2px;
}

.exam-nav-chip-flag {
    display: none;
}

.exam-nav-chip.is-flagged .exam-nav-chip-flag {
    display: block;
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fc-amber, var(--amber));
    box-shadow: 0 0 0 2px var(--fc-surface, var(--surface));
}

.exam-navigator-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: var(--fc-muted, var(--muted));
    font-size: 0.68rem;
}

.exam-navigator-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.exam-nav-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fc-surface-3, var(--surface-3));
    border: 1px solid var(--fc-line, var(--border));
}

.exam-nav-dot.is-answered {
    background: var(--fc-blue, var(--blue));
    border-color: var(--fc-blue, var(--blue));
}

.exam-nav-dot.is-flagged {
    background: var(--fc-amber, var(--amber));
    border-color: var(--fc-amber, var(--amber));
}

.exam-nav-dot.is-current {
    background: transparent;
    border: 2px solid var(--fc-blue, var(--blue));
}

.exam-navigator-submit {
    width: 100%;
}

/* Mobile / narrow: collapse the side panel into a horizontal scroll strip above the form. */
@media (max-width: 860px) {
    body.assessment-focus-mode #view-dashboard .assessment-runner-body {
        display: flex !important;
        flex-direction: column !important;
    }
    #view-dashboard .exam-navigator {
        order: -1 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        max-height: none !important;
        margin-bottom: 1rem !important;
    }
    .exam-navigator-grid {
        grid-auto-flow: column !important;
        grid-template-columns: none !important;
        grid-auto-columns: 2.35rem !important;
        overflow-x: auto !important;
        padding-bottom: 0.25rem !important;
    }
    .exam-navigator-submit {
        display: none !important;
    }
}

/* ── Flag-for-review toggle ──
   The legend is float-based in learning-cockpit.css (#view-dashboard .assessment-question legend);
   switch it to flex here (matching specificity via the .question-legend class) so the flag button's
   margin-left: auto actually pushes it to the end of the row instead of being ignored by float. */

#view-dashboard .assessment-question legend.question-legend {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    float: none !important;
}

.question-flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--fc-line, var(--border));
    border-radius: 8px;
    background: var(--fc-surface, var(--surface));
    color: var(--fc-muted, var(--muted));
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.question-flag-btn:hover {
    border-color: color-mix(in srgb, var(--fc-amber, var(--amber)) 45%, var(--fc-line, var(--border)));
    color: var(--fc-amber, var(--amber));
}

.question-flag-btn.is-flagged {
    border-color: var(--fc-amber, var(--amber));
    background: var(--fc-amber-soft, color-mix(in srgb, var(--amber) 14%, var(--surface)));
    color: var(--fc-amber, var(--amber));
}

/* ── Option cards — lettered A/B/C/D badges instead of a plain radio + text row ── */

#view-dashboard .assessment-options label.option-label {
    display: grid !important;
    grid-template-columns: 1.9rem minmax(0, 1fr) !important;
    align-items: center !important;
    position: relative !important;
}

#view-dashboard .assessment-options input.option-input {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

#view-dashboard .assessment-options .option-badge {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1.5px solid var(--fc-line, var(--border));
    background: var(--fc-surface-2, var(--surface-2));
    color: var(--fc-muted, var(--muted));
    font-weight: 800;
    font-size: 0.82rem;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

#view-dashboard .assessment-options input.option-input:checked + .option-badge,
#view-dashboard .assessment-options label.option-label.is-selected .option-badge {
    background: var(--fc-blue, var(--blue)) !important;
    border-color: var(--fc-blue, var(--blue)) !important;
    color: #ffffff !important;
}

#view-dashboard .assessment-options input.option-input:focus-visible ~ .option-badge {
    outline: 2px solid var(--fc-blue, var(--blue)) !important;
    outline-offset: 2px !important;
}

/* ── Exam section headers — real visual identity instead of plain text ── */

#view-dashboard .exam-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 0 0 0.9rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid color-mix(in srgb, var(--fc-blue, var(--blue)) 25%, var(--fc-line, var(--border))) !important;
}

#view-dashboard .exam-section-header::before {
    content: attr(data-section-letter);
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--fc-blue, var(--blue));
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
}

#view-dashboard .exam-section-title {
    margin: 0 !important;
    font-family: var(--fc-display, var(--font-display, inherit)) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--fc-ink, var(--text)) !important;
}

#view-dashboard .exam-section-meta {
    margin-left: auto !important;
    flex: none !important;
    color: var(--fc-muted, var(--muted)) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

/* ── Mastery gating — locked/mastered lesson states in the Path sidebar ── */
#view-dashboard .lesson-state.locked {
    background: var(--fc-muted, var(--muted)) !important;
    opacity: 0.55;
}

#view-dashboard .lesson-state.mastered {
    background: var(--fc-green, #16a34a) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc-green, #16a34a) 22%, transparent);
}

#view-dashboard .course-lesson.lesson-row-locked {
    opacity: 0.62;
    cursor: not-allowed !important;
}

#view-dashboard .course-lesson.lesson-row-locked:hover {
    border-color: transparent !important;
    background: transparent !important;
}

#view-dashboard .lesson-row-locked .lesson-day {
    background: var(--course-surface-soft, var(--surface-2)) !important;
    color: var(--course-muted, var(--muted)) !important;
}

#view-dashboard .lesson-row-locked .lesson-day svg {
    width: 0.85rem;
    height: 0.85rem;
}

#view-dashboard .lesson-row-locked .lesson-title,
#view-dashboard .lesson-row-locked .lesson-summary {
    color: var(--course-muted, var(--muted)) !important;
}

/* ── Generic modal system (ClassroomApp.openModal/closeModal) ──
   The JS for this has existed for a while (used by the heatmap day-detail popup) but had no
   CSS anywhere in the app — it rendered as an unpositioned, transparent, un-centered block.
   Styling it properly here since the exam submit-confirmation flow now depends on it too. */

.modal-container {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
}

.modal-container.open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 20, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: modal-backdrop-fade 0.2s ease both;
}

.modal-container .modal {
    position: relative;
    width: min(100%, 26rem);
    max-height: min(85vh, 40rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius, 16px);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow, 0 20px 48px -12px rgba(0, 0, 0, 0.25));
    animation: modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.75rem;
}

.modal-header h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display, inherit);
    font-size: 1.05rem;
    font-weight: 700;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.modal-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.modal-body {
    overflow-y: auto;
    padding: 0.25rem 1.25rem 1rem;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.modal-body p {
    margin: 0 0 0.6rem;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem 1.1rem;
    border-top: 1px solid var(--border);
}

.modal-footer:empty {
    display: none;
}

@keyframes modal-backdrop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-container .modal {
        animation: none;
    }
}

/* ── Exam page breathing room — the base cockpit styles nest a card inside a card inside
   a card (form → section → question → option), each with its own border/background, and cap
   padding/gaps at ~0.7rem everywhere regardless of how much screen space is actually available.
   This declutters that nesting (only the question card itself stays a visible box) and gives
   everything more generous, size-appropriate spacing. ── */

/* Use more of a wide screen instead of capping out at 1024px. */
body.assessment-focus-mode #view-dashboard .course-main.learning-stage:has(.exam-navigator) {
    max-width: 78rem !important;
}

body.assessment-focus-mode #view-dashboard .assessment-runner-body {
    grid-template-columns: minmax(0, 1fr) 17rem !important;
    gap: 1.75rem !important;
}

/* Strip the redundant outer "card" chrome from the form/section wrappers so the question
   cards are the only boxes on the page, not boxes nested inside boxes inside boxes. */
#view-dashboard .assessment-runner-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 1.5rem !important;
}

#view-dashboard .exam-section {
    background: transparent !important;
    gap: 1.25rem !important;
}

/* Roomier question cards. */
#view-dashboard .assessment-question {
    padding: clamp(1.25rem, 2vw, 1.85rem) !important;
}

#view-dashboard .question-text {
    margin-top: 0.2rem;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

/* Roomier answer options — bigger touch targets, more air between choices. */
#view-dashboard .assessment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    margin-top: 0.75rem !important;
}

@media (max-width: 640px) {
    #view-dashboard .assessment-options {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

#view-dashboard .assessment-options label.option-label {
    min-height: 3.25rem !important;
    padding: 0.85rem 1rem !important;
}

#view-dashboard .assessment-question textarea.assessment-written-answer {
    margin-top: 0.5rem;
    padding: 0.85rem !important;
    line-height: 1.6 !important;
}

/* ── Question number vs. marks badge — give them distinct roles instead of two
   identical indigo pills sitting side by side. The question number is the dominant
   label; the marks badge is a quiet, secondary tag (closer to how a real exam paper
   prints "[4]" in the margin than a UI badge shouting for attention). ── */

#view-dashboard .assessment-question legend.question-legend .question-number,
#view-dashboard .assessment-review-item .review-question-header .question-number {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--fc-ink, var(--text)) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

#view-dashboard .assessment-question legend.question-legend .question-marks-badge {
    border: 1px solid var(--fc-line, var(--border)) !important;
    background: var(--fc-surface-2, var(--surface-2)) !important;
    color: var(--fc-muted, var(--muted)) !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ── Mark scheme — a real itemized list instead of a semicolon-joined line of text
   with literal square brackets (was completely unstyled before, relying on browser
   defaults for <ul>/<small>). Shared by the pre-submission hint and the post-submission
   review breakdown so both read the same way. ── */

#view-dashboard .mark-breakdown-hint,
#view-dashboard .mark-breakdown-review {
    margin-top: 0.9rem;
    border: 1px solid var(--fc-line, var(--border));
    border-radius: 12px;
    background: var(--fc-surface-2, var(--surface-2));
    padding: 0.8rem 0.95rem;
}

#view-dashboard .mark-breakdown-label {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--fc-muted, var(--muted));
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#view-dashboard .mark-breakdown-hint ul,
#view-dashboard .mark-breakdown-review ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#view-dashboard .mark-breakdown-hint li,
#view-dashboard .mark-breakdown-review li {
    padding-top: 0.55rem;
    border-top: 1px dashed var(--fc-line, var(--border));
}

#view-dashboard .mark-breakdown-hint li:first-child,
#view-dashboard .mark-breakdown-review li:first-child {
    padding-top: 0;
    border-top: none;
}

#view-dashboard .mb-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

#view-dashboard .mb-part {
    color: var(--fc-ink, var(--text));
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
}

#view-dashboard .mb-part p {
    margin: 0;
    display: inline;
}

#view-dashboard .mb-marks {
    flex: none;
    color: var(--fc-blue-strong, var(--blue-dark));
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

#view-dashboard .mb-criterion {
    display: block;
    margin-top: 0.3rem;
    color: var(--fc-muted, var(--muted));
    font-size: 0.8rem;
    line-height: 1.45;
}

/* ── Code blocks: one theme-consistent definition ────────────────────────
   Earlier layers hardcoded a fixed navy palette (#0f172a / #0b1220 etc.) for
   pre.code-block regardless of theme, so in light mode it sat on the page as
   a disconnected dark island, and in dark mode its cold blue-navy clashed
   with the app's warm violet/plum dark palette. Using the --fc-* tokens
   (which already flip per data-theme) makes one rule correct in both themes
   instead of needing separate hardcoded overrides. */
#view-dashboard :is(.lesson-prose, .lesson-example-card, .lesson-explain-output, .ai-message, .assessment-question, .exam-question, .assessment-review-question) pre.code-block {
    border: 1px solid var(--fc-line) !important;
    border-radius: 14px !important;
    background: var(--fc-surface-2) !important;
    color: var(--fc-ink) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #view-dashboard :is(.lesson-prose, .lesson-example-card, .lesson-explain-output, .ai-message, .assessment-question, .exam-question, .assessment-review-question) pre.code-block {
    border-color: var(--fc-line) !important;
    background: var(--fc-surface-2) !important;
    color: var(--fc-ink) !important;
}

#view-dashboard pre.code-block::before {
    border-bottom: 1px solid var(--fc-line);
    background: color-mix(in srgb, var(--fc-ink) 8%, var(--fc-surface-2));
    color: var(--fc-muted, var(--muted));
}

html[data-theme="dark"] #view-dashboard pre.code-block::before {
    border-bottom-color: var(--fc-line);
    background: color-mix(in srgb, black 18%, var(--fc-surface-2));
    color: var(--fc-muted, var(--muted));
}

#view-dashboard pre.code-block code,
#view-dashboard code.code-highlight {
    background: transparent !important;
    color: inherit !important;
}

#view-dashboard :is(.lesson-prose, .lesson-explain-output, .ai-message, .assessment-question, .exam-question, .assessment-review-question) code.code-inline {
    border: 1px solid color-mix(in srgb, var(--fc-blue) 24%, var(--fc-line)) !important;
    border-radius: 7px !important;
    background: var(--fc-blue-soft) !important;
    color: var(--fc-blue-strong) !important;
}

html[data-theme="dark"] #view-dashboard :is(.lesson-prose, .lesson-explain-output, .ai-message, .assessment-question, .exam-question, .assessment-review-question) code.code-inline {
    border-color: color-mix(in srgb, var(--fc-blue) 24%, var(--fc-line)) !important;
    background: var(--fc-blue-soft) !important;
    color: var(--fc-blue-strong) !important;
}

/* Syntax tokens need real hue swaps (not just surface/text tokens) to stay
   readable against a light vs. dark code-block background. */
#view-dashboard .syntax-comment {
    color: var(--fc-muted, var(--muted));
    font-style: italic;
}

#view-dashboard .syntax-keyword {
    color: var(--fc-blue-strong);
    font-weight: 760;
}

#view-dashboard .syntax-string {
    color: #15803d;
}

#view-dashboard .syntax-number,
#view-dashboard .syntax-literal {
    color: #a3580a;
}

#view-dashboard .syntax-function {
    color: #6d28d9;
}

#view-dashboard .syntax-property {
    color: #1d4ed8;
}

#view-dashboard .syntax-operator,
#view-dashboard .syntax-punctuation {
    color: var(--fc-ink);
}

html[data-theme="dark"] #view-dashboard .syntax-string {
    color: #a7f3d0;
}

html[data-theme="dark"] #view-dashboard .syntax-number,
html[data-theme="dark"] #view-dashboard .syntax-literal {
    color: #fbbf24;
}

html[data-theme="dark"] #view-dashboard .syntax-function {
    color: #c4b5fd;
}

html[data-theme="dark"] #view-dashboard .syntax-property {
    color: #93c5fd;
}

/* ── Exam paper: multi-part (a)/(b)/(c) sub-questions ─────────────────────
   Previously each part was a bare <label><span>…</span><textarea></label>
   with no border/background of its own — only the parent's grid `gap`
   separated one part from the next, so a 3-part structured question read
   as one undifferentiated wall of text next to its MCQ siblings, which
   already had card styling. Give each part the same card treatment. */
#view-dashboard .exam-sub-question {
    display: grid !important;
    gap: 0.55rem !important;
    border: 1px solid var(--fc-line) !important;
    border-radius: var(--fc-radius-sm, 10px) !important;
    background: var(--fc-surface-2) !important;
    padding: 0.7rem 0.85rem !important;
}

#view-dashboard .exam-sub-question-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.55rem;
}

#view-dashboard .exam-sub-question-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--fc-blue-soft);
    color: var(--fc-blue-strong);
    font-size: 0.76rem;
    font-weight: 800;
}

#view-dashboard .exam-sub-question-text {
    margin: 0 !important;
    color: var(--fc-ink) !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    padding-top: 0.15rem;
}

/* ── Dark mode: correct a navy color-temperature regression ───────────────
   learning-cockpit.css defines this exact same panel/card/input component
   list TWICE for dark mode. The earlier definition (~line 13038) correctly
   uses var(--fc-surface)/var(--fc-surface-2) — the plum/violet tokens the
   rest of the theme (including the page background gradient) is built on.
   A near-duplicate defined LATER in the same file (~line 16602) silently
   wins the tie and replaces those tokens with hardcoded navy-blue rgba()
   values (rgba(8-9,16-18,24-26,...)) — a completely different, colder hue
   family that clashes against the warm plum backdrop on every panel, card,
   input, and pill site-wide. This is the same "hardcoded navy on a plum
   theme" mistake as the old code-block bug, just applied much more broadly.
   Restoring the token-based colors here (same selector list, so it wins on
   source order) fixes the systemic dark-mode color mismatch. */
html[data-theme="dark"] :is(
    .workspace-header,
    .site-nav,
    .portal-hero-card,
    .side-panel,
    .active-course-card,
    .portal-course-card,
    .empty-state,
    .course-topbar,
    .course-sidebar,
    .course-panel,
    .page-panel,
    .course-page-header,
    .course-dashboard-hero,
    .dashboard-progress-card,
    .dashboard-action-board,
    .dashboard-timeline-panel,
    .dashboard-control-card,
    .next-action-panel,
    .assessment-command-panel,
    .premium-exam-callout,
    .materials-command-panel,
    .calendar-board-hero,
    .lesson-header,
    .lesson-reading-surface,
    .lesson-example-card,
    .lesson-summary-card,
    .lesson-objectives,
    .mini-quiz-panel,
    .assessment-question,
    .assessment-result-output,
    .study-session-output,
    .lesson-explain-output,
    .science-visual,
    .account-sidebar,
    .account-panel,
    .account-course-card,
    .account-course-row,
    .account-document-card,
    .account-document-tile,
    .account-empty,
    .account-loading-card,
    .ai-pane,
    .loader-panel
) {
    border-color: var(--fc-line) !important;
    background: color-mix(in srgb, var(--fc-surface) 92%, transparent) !important;
    background-image: none !important;
    color: var(--fc-ink) !important;
}

html[data-theme="dark"] :is(.workspace-header, .site-nav) {
    background: color-mix(in srgb, var(--fc-surface) 92%, transparent) !important;
    backdrop-filter: blur(18px);
    box-shadow: none !important;
}

html[data-theme="dark"] :is(
    .portal-stat-strip span,
    .active-course-stats span,
    .portal-course-card-meta span,
    .course-pulse-row span,
    .course-topbar-meta span,
    .course-nav-item,
    .course-unit,
    .course-lesson,
    .lesson-row,
    .lesson-meta-grid span,
    .mini-quiz-card,
    .assessment-options label,
    .exam-mcq-options label,
    .science-visual-stage,
    .simple-flow-stage,
    .account-profile-metrics span,
    .account-stat-grid span,
    .account-mini-stats span,
    .transcript-meta-grid span,
    .input-field,
    textarea,
    input,
    select,
    .ai-message,
    .material-item
) {
    border-color: var(--fc-line) !important;
    background: var(--fc-surface-2) !important;
    color: var(--fc-ink) !important;
}

html[data-theme="dark"] :is(.btn-secondary, .course-action-btn, .panel-icon-button, .icon-button, .science-visual-download, .science-visual-pdf) {
    border-color: var(--fc-line) !important;
    background: var(--fc-surface-2) !important;
    color: var(--fc-ink) !important;
}

html[data-theme="dark"] :is(.simple-flow-svg-node rect, .simple-flow-edge-label rect) {
    fill: var(--fc-surface-2) !important;
    stroke: var(--fc-line-strong) !important;
}

/* ── AI tutor chat: restore the user-bubble accent in dark mode ───────────
   A catch-all dark-mode rule (learning-cockpit.css, `html[data-theme="dark"] :is(...,
   .ai-message, ...)`) forces EVERY .ai-message — including the user's own — to the
   same near-black translucent background with !important, stomping the violet
   background .ai-message.user is meant to have. That made the student's own
   messages visually indistinguishable from the tutor's replies in dark mode. */
html[data-theme="dark"] #view-dashboard .ai-message.user {
    border-color: var(--fc-blue) !important;
    background: var(--fc-blue) !important;
    color: #06111b !important;
}

#view-dashboard .exam-sub-question-marks {
    flex: none;
    align-self: start;
    margin-top: 0.18rem;
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius-sm, 10px);
    background: var(--fc-surface);
    color: var(--fc-muted);
    padding: 0.16rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}