/* ============================================================
   ESGS Teacher Training — Design Tokens
   Palette sampled directly from schoolportal.enugustate.gov.ng
   (Enugu State School Management Portal) so this platform reads
   as part of the same state education system, not a separate
   brand. Forest green is the primary action/brand color, sage
   green is secondary, mint is the light tint used for pills and
   badges. Laterite is kept only as a semantic error/incorrect
   color (every UI needs one state color that reads as "wrong"
   distinct from "correct") — it is never used decoratively.
   ============================================================ */

:root {
    --board:      #1A7740;   /* Enugu portal forest green — primary brand/action */
    --board-deep: #145C31;   /* darker forest green, for depth/hover */
    --sage:       #6BA15E;   /* Enugu portal sage green — secondary accent */
    --sage-deep:  #4F7D45;
    --mint:       #DDEBE3;   /* Enugu portal light mint — pill/badge backgrounds */
    --chalk:      #FFFFFF;   /* white surface, matching the portal's white-heavy layout */
    --paper:      #F7FAF8;   /* very light green-tinted paper for long reading surfaces */
    --laterite:   #B3413A;   /* semantic error/incorrect only — not a brand color */
    --laterite-deep: #8C2F29;
    --harmattan:  #6BA15E;   /* completion/success now uses the portal's sage green */
    --harmattan-deep: #4F7D45;
    --ink:        #3A4858;   /* portal heading text color (dark slate, not pure black) */
    --ink-soft:   #686D74;   /* portal body text color */
    --path:       #8A9088;   /* borders, dividers, muted meta text */
    --path-line:  #E0E6E1;   /* hairline borders on light surfaces */
    --gold:       #E8AE49;   /* table header bar accent */
    --gold-text:  #5A3E10;   /* dark text on gold, fixed regardless of light/dark mode for contrast */

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Work Sans', -apple-system, sans-serif;
    --font-meta: 'IBM Plex Mono', ui-monospace, monospace;

    --radius-card: 14px;
    --radius-control: 8px;
    --radius-pill: 999px;

    --fs-mult: 1; /* fluid text-scale multiplier, set by assets/js/accessibility.js (100%-200%) */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--chalk);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink); }
p { line-height: 1.7; margin: 0 0 1rem; }

.meta-label {
    font-family: var(--font-meta);
    font-size: calc(11px * var(--fs-mult));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--path);
}

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: calc(15px * var(--fs-mult));
    padding: 12px 22px;
    border-radius: var(--radius-control);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--board); color: var(--chalk); }
.btn-primary:hover { background: var(--board-deep); }
.btn-primary:disabled { background: var(--path-line); color: var(--path); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--board); border: 1.5px solid var(--path-line); }
.btn-ghost:hover { border-color: var(--board); }

/* ---------- Login page ---------- */
.login-shell {
    min-height: 100vh;
    background: var(--board);
    background-image:
        radial-gradient(circle at 15% 85%, rgba(107,161,94,0.10) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(221,235,227,0.15) 0%, transparent 40%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--chalk);
    border-radius: var(--radius-card);
    padding: 40px 32px 32px;
}
.wordmark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.wordmark-badge-img {
    width: 44px; height: 44px;
    flex-shrink: 0;
    object-fit: contain;
}
.wordmark-text .eyebrow { font-family: var(--font-meta); font-size: calc(10px * var(--fs-mult)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--path); display: block; }
.wordmark-text .title { font-family: var(--font-display); font-size: calc(18px * var(--fs-mult)); font-weight: 600; color: var(--ink); }

.brand-logo { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: calc(13px * var(--fs-mult)); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-control);
    border: 1.5px solid var(--path-line);
    font-family: var(--font-body);
    font-size: calc(15px * var(--fs-mult));
    background: #FFFFFF;
    color: var(--ink);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--board); }

.login-error {
    background: #FBEAE5;
    color: var(--laterite-deep);
    font-size: calc(13px * var(--fs-mult));
    padding: 10px 14px;
    border-radius: var(--radius-control);
    margin-bottom: 16px;
    display: none;
}
.login-success {
    background: var(--mint);
    color: var(--board-deep);
    font-size: calc(13px * var(--fs-mult));
    padding: 10px 14px;
    border-radius: var(--radius-control);
    margin-bottom: 16px;
    display: none;
}
.login-footnote { margin-top: 20px; font-size: calc(12.5px * var(--fs-mult)); color: var(--path); text-align: center; }

/* ---------- Circulation path (signature element) ---------- */
.path-track {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    overflow-x: auto;
}
.path-node {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-meta);
    font-size: calc(12px * var(--fs-mult));
    font-weight: 600;
    border: 2px solid var(--path-line);
    background: var(--chalk);
    color: var(--path);
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.path-node.done { background: var(--harmattan); border-color: var(--harmattan-deep); color: var(--harmattan-deep); }
.path-node.current { border-color: var(--board); color: var(--board); background: var(--chalk); }
.path-connector { flex: 1; height: 2px; background: var(--path-line); min-width: 14px; }
.path-connector.done { background: var(--harmattan); }

/* ---------- Dashboard ---------- */
.topbar {
    background: var(--board);
    color: var(--chalk);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: calc(16px * var(--fs-mult)); font-weight: 600; }
.topbar .topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar .user-chip { font-family: var(--font-meta); font-size: calc(12px * var(--fs-mult)); color: var(--chalk); opacity: 0.85; }
.topbar .logout-link {
    font-family: var(--font-body);
    font-size: calc(13px * var(--fs-mult));
    color: var(--chalk);
    opacity: 0.85;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-control);
    padding: 6px 12px;
    cursor: pointer;
}
.topbar .logout-link:hover { opacity: 1; border-color: rgba(255,255,255,0.65); }

.dashboard-shell { max-width: 640px; margin: 0 auto; padding: 28px 20px 60px; }
.dashboard-greeting { margin-bottom: 24px; }
.dashboard-greeting h1 { font-size: calc(24px * var(--fs-mult)); margin-bottom: 4px; }
.dashboard-greeting p { color: var(--ink-soft); margin: 0; }

.module-card {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(58, 72, 88, 0.08), 0 1px 2px rgba(58, 72, 88, 0.06);
}
.module-card .module-eyebrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.module-card h2 { font-size: calc(18px * var(--fs-mult)); margin-bottom: 4px; }
.module-card .subtitle { color: var(--ink-soft); font-size: calc(14px * var(--fs-mult)); margin-bottom: 16px; }
.status-pill {
    font-family: var(--font-meta);
    font-size: calc(10.5px * var(--fs-mult));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}
.status-pill.not_started { background: var(--path-line); color: var(--ink-soft); }
.status-pill.in_progress { background: var(--mint); color: var(--board-deep); }
.status-pill.completed { background: var(--mint); color: var(--harmattan-deep); }

/* ---------- Module viewer ---------- */
.module-shell { max-width: 640px; margin: 0 auto; padding-bottom: 80px; }
.section-header { padding: 24px 20px 16px; border-bottom: 1px solid var(--path-line); }
.section-header .breadcrumb { font-family: var(--font-meta); font-size: calc(11px * var(--fs-mult)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--path); margin-bottom: 8px; }
.section-header h1 { font-size: calc(22px * var(--fs-mult)); margin-bottom: 4px; }
.section-header .subtitle { color: var(--ink-soft); font-size: calc(14.5px * var(--fs-mult)); }

.block { padding: 20px; border-bottom: 1px solid var(--path-line); }
.block:last-child { border-bottom: none; }

/* card_compare */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-card { border-radius: var(--radius-control); padding: 14px; }
.compare-card.a { background: var(--path-line); }
.compare-card.b { background: var(--mint); }
.compare-card .label { font-weight: 700; font-size: calc(13px * var(--fs-mult)); margin-bottom: 8px; display: block; }
.compare-card.a .label { color: var(--ink-soft); }
.compare-card.b .label { color: var(--harmattan-deep); }
.compare-card ul { margin: 0; padding-left: 18px; font-size: calc(13.5px * var(--fs-mult)); }
.compare-card li { margin-bottom: 6px; }

/* callout */
.callout { border-left: 3px solid var(--board); background: var(--mint); border-radius: 0 var(--radius-control) var(--radius-control) 0; padding: 14px 16px; }
.callout.tip { border-color: var(--harmattan); background: var(--mint); }
.callout.warning { border-color: var(--laterite-deep); background: #FBEAE5; }
.callout.quote { border-color: var(--board); background: var(--path-line); font-family: var(--font-display); font-style: italic; }
.callout .heading { font-weight: 700; font-size: calc(14px * var(--fs-mult)); margin-bottom: 6px; display: block; }

/* glossary term */
.glossary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--board);
    color: var(--chalk);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: calc(13.5px * var(--fs-mult));
    font-weight: 600;
    cursor: pointer;
}
.glossary-detail { margin-top: 10px; font-size: calc(13.5px * var(--fs-mult)); color: var(--ink-soft); display: none; }
.glossary-detail.open { display: block; }

/* reflection */
.reflection-prompt { font-size: calc(15px * var(--fs-mult)); margin-bottom: 6px; }
.reflection textarea {
    width: 100%; min-height: 90px;
    border: 1.5px solid var(--path-line);
    border-radius: var(--radius-control);
    padding: 12px;
    font-family: var(--font-body);
    font-size: calc(14.5px * var(--fs-mult));
    resize: vertical;
}
.reflection textarea:focus { outline: none; border-color: var(--board); }
.word-count { font-size: calc(12px * var(--fs-mult)); color: var(--path); margin-top: 6px; }

/* quiz */
.quiz-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1.5px solid var(--path-line);
    border-radius: var(--radius-control); margin-bottom: 8px; cursor: pointer;
    font-size: calc(14.5px * var(--fs-mult));
}
.quiz-option:hover { border-color: var(--board); }
.quiz-option.selected.correct { border-color: var(--harmattan-deep); background: var(--mint); }
.quiz-option.selected.incorrect { border-color: var(--laterite-deep); background: #FBEAE5; }

/* checkin / self-assessment */
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: calc(14.5px * var(--fs-mult)); }
.check-item input { margin-top: 3px; }

.assess-table { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--fs-mult)); }
.assess-table th { font-family: var(--font-meta); font-size: calc(10.5px * var(--fs-mult)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--path); font-weight: 600; padding: 8px 4px; text-align: center; }
.assess-table th:first-child { text-align: left; }
.assess-table td { padding: 10px 4px; border-top: 1px solid var(--path-line); text-align: center; }
.assess-table td:first-child { text-align: left; padding-right: 8px; }

/* role card grid */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-card { background: var(--path-line); border-radius: var(--radius-control); padding: 14px; }
.role-card .icon { font-size: calc(20px * var(--fs-mult)); }
.role-card .label { font-weight: 700; font-size: calc(14px * var(--fs-mult)); display: block; margin: 6px 0 4px; }
.role-card .body { font-size: calc(12.5px * var(--fs-mult)); color: var(--ink-soft); }

/* feedback banner */
.feedback-banner { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-control); font-size: calc(13.5px * var(--fs-mult)); }
.feedback-banner.correct { background: var(--mint); color: var(--harmattan-deep); }
.feedback-banner.incorrect { background: #FBEAE5; color: var(--laterite-deep); }

.block-footer { padding: 20px; display: flex; justify-content: flex-end; }
.gate-reason { font-size: calc(12.5px * var(--fs-mult)); color: var(--path); margin-right: auto; align-self: center; }

@media (max-width: 480px) {
    .compare-grid, .role-grid { grid-template-columns: 1fr; }
}

/* ---------- Public landing page ---------- */
.landing-nav {
    background: var(--board);
    color: var(--chalk);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--board-deep);
}
.landing-nav .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: calc(16px * var(--fs-mult)); font-weight: 600; color: #FFFFFF; }
.landing-nav .nav-links { display: flex; gap: 20px; align-items: center; }
.landing-nav .nav-links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: calc(14px * var(--fs-mult)); }
.landing-nav .nav-links a:hover { color: #FFFFFF; text-decoration: underline; }
.landing-nav .nav-links .btn-ghost { border-color: rgba(255,255,255,0.5); color: #FFFFFF; }
.landing-nav .nav-links .btn-ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.12); }

.landing-hero {
    background: #FFFFFF;
    color: var(--ink);
    padding: 56px 24px 64px;
    text-align: center;
    border-bottom: 1px solid var(--path-line);
}
.landing-hero .eyebrow { font-family: var(--font-meta); font-size: calc(11px * var(--fs-mult)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--path); margin-bottom: 14px; }
.landing-hero h1 { font-size: calc(34px * var(--fs-mult)); line-height: 1.25; max-width: 560px; margin: 0 auto 16px; color: var(--ink); }
.landing-hero p { max-width: 480px; margin: 0 auto 28px; color: var(--ink-soft); font-size: calc(15.5px * var(--fs-mult)); }
.landing-hero .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-hero .btn-primary { background: var(--board); }
.landing-hero .btn-outline { background: transparent; border: 1.5px solid var(--path-line); color: var(--ink); }
.landing-hero .btn-outline:hover { border-color: var(--board); background: var(--path-line); }


.landing-body { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; }
.landing-section-title { font-size: calc(20px * var(--fs-mult)); margin-bottom: 6px; }
.landing-section-sub { color: var(--ink-soft); font-size: calc(14px * var(--fs-mult)); margin-bottom: 24px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 48px; }
.stat-card { background: #FFFFFF; border-radius: var(--radius-card); padding: 18px 16px; box-shadow: 0 1px 3px rgba(58, 72, 88, 0.08), 0 1px 2px rgba(58, 72, 88, 0.06); }
.stat-card .stat-icon { font-size: calc(18px * var(--fs-mult)); margin-bottom: 8px; display: block; }
.stat-card .stat-value { font-family: var(--font-display); font-size: calc(26px * var(--fs-mult)); font-weight: 600; color: var(--ink); display: block; }
.stat-card .stat-label { font-size: calc(12.5px * var(--fs-mult)); color: var(--ink-soft); margin-top: 2px; }

.module-summary-card { background: #FFFFFF; border: 1.5px solid var(--sage); border-radius: var(--radius-card); padding: 20px; margin-bottom: 14px; }
.module-summary-card h3 { font-size: calc(17px * var(--fs-mult)); margin-bottom: 4px; }
.module-summary-card .subtitle { color: var(--ink-soft); font-size: calc(13.5px * var(--fs-mult)); margin-bottom: 14px; }
.completion-bar-track { height: 8px; background: var(--path-line); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 6px; }
.completion-bar-fill { height: 100%; background: var(--gold); border-radius: var(--radius-pill); }
.completion-label { font-family: var(--font-meta); font-size: calc(11px * var(--fs-mult)); color: var(--path); text-transform: uppercase; letter-spacing: 0.05em; }

.landing-footer { text-align: center; padding: 28px 24px 40px; background: var(--board); color: rgba(255,255,255,0.8); font-size: calc(12.5px * var(--fs-mult)); border-top: 1px solid var(--board-deep); }

/* ---------- Registration & admin pages (reuse login-shell/card) ---------- */
.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 480px) { .form-grid-two { grid-template-columns: 1fr; } }

/* ---------- Demographic charts on the landing page ---------- */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 48px; }
.chart-card { background: #FFFFFF; border-radius: var(--radius-card); padding: 18px; box-shadow: 0 1px 3px rgba(58, 72, 88, 0.08), 0 1px 2px rgba(58, 72, 88, 0.06); }
.chart-card h3 { font-size: calc(14.5px * var(--fs-mult)); margin-bottom: 12px; color: var(--ink); }
.chart-card .chart-wrap { position: relative; height: 220px; }
.chart-card .chart-empty { color: var(--path); font-size: calc(13px * var(--fs-mult)); text-align: center; padding: 60px 0; }
/* Keep the two demographic charts side by side down to small phone widths;
   they only drop to a single column below 380px, where two would be too
   cramped to read. */
@media (max-width: 480px) {
    .chart-grid { gap: 8px; }
    .chart-card { padding: 12px 10px; }
    .chart-card h3 { font-size: calc(12.5px * var(--fs-mult)); margin-bottom: 8px; }
    .chart-card .chart-wrap { height: 170px; }
}
@media (max-width: 380px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------- Teacher stories (written feedback) on the landing page ---------- */
.feedback-panel { background: #FFFFFF; border-radius: var(--radius-card); padding: 6px 20px; box-shadow: 0 1px 3px rgba(58, 72, 88, 0.08), 0 1px 2px rgba(58, 72, 88, 0.06); margin-bottom: 48px; }
.fb-item { padding: 14px 0; border-bottom: 1px solid var(--path-line); }
.fb-item:last-child { border-bottom: none; }
.fb-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.fb-name { font-family: var(--font-meta); font-size: calc(11.5px * var(--fs-mult)); font-weight: 600; letter-spacing: 0.03em; color: var(--board-deep); }
.fb-date { font-family: var(--font-meta); font-size: calc(11px * var(--fs-mult)); color: var(--path); white-space: nowrap; }
.fb-text { font-size: calc(14px * var(--fs-mult)); line-height: 1.55; color: var(--ink); }
.fb-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--path-line); }
.fb-pager button { padding: 6px 14px; font-size: calc(12.5px * var(--fs-mult)); }
.fb-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.fb-page-info { font-family: var(--font-meta); font-size: calc(11.5px * var(--fs-mult)); color: var(--path); }
@media (max-width: 480px) { .feedback-panel { padding: 4px 14px; } .fb-item { padding: 12px 0; } }

/* ---------- Admin: filter bar ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-search {
    flex: 1; min-width: 180px;
    padding: 9px 12px;
    border: 1.5px solid var(--path-line);
    border-radius: var(--radius-control);
    font-family: var(--font-body);
    font-size: calc(13.5px * var(--fs-mult));
    background: #FFFFFF;
}
.filter-search:focus { outline: none; border-color: var(--board); }
.filter-select {
    padding: 9px 10px;
    border: 1.5px solid var(--path-line);
    border-radius: var(--radius-control);
    font-family: var(--font-body);
    font-size: calc(13.5px * var(--fs-mult));
    background: #FFFFFF;
    color: var(--ink);
}

/* ---------- Admin: teacher detail modal ---------- */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20,40,30,0.55);
    align-items: center; justify-content: center;
    padding: 20px;
    z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-panel {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    padding: 28px;
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}
.modal-close {
    position: absolute; top: 16px; right: 16px;
    background: var(--path-line);
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: calc(13px * var(--fs-mult));
    color: var(--ink-soft);
}
.modal-close:hover { background: var(--path); color: #FFFFFF; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: calc(13.5px * var(--fs-mult)); }
.detail-grid .detail-label { display: block; font-family: var(--font-meta); font-size: calc(10px * var(--fs-mult)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--path); margin-bottom: 2px; }

.response-item { border-top: 1px solid var(--path-line); padding: 10px 0; }
.response-meta { font-family: var(--font-meta); font-size: calc(10.5px * var(--fs-mult)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--path); margin-bottom: 4px; }
.response-prompt { font-size: calc(12.5px * var(--fs-mult)); color: var(--ink-soft); margin-bottom: 4px; font-style: italic; }
.response-answer { font-size: calc(13.5px * var(--fs-mult)); color: var(--ink); }

/* ============================================================
   Accessibility: dark mode
   Redefines the same design-token variables so every existing
   component (buttons, cards, callouts, tables…) repaints correctly
   with no per-component overrides needed.
   ============================================================ */
html.dark-mode {
    --chalk:      #1B211D;   /* was white surface -> near-black surface */
    --paper:      #20261F;
    --mint:       #223228;   /* pill/badge backgrounds, dark-safe tint of sage */
    --path-line:  #33392F;   /* hairline borders */
    --path:       #8B9186;   /* muted meta text, unchanged contrast target */
    --ink:        #EDEFE9;   /* body/heading text -> light on dark */
    --ink-soft:   #B7BDB2;
    --board:      #2E9A5C;   /* brighten primary green for AA contrast on dark */
    --board-deep: #217A47;
}
html.dark-mode body { background: var(--paper); }
html.dark-mode .login-shell,
html.dark-mode .landing-hero,
html.dark-mode .stat-card,
html.dark-mode .chart-card,
html.dark-mode .module-summary-card,
html.dark-mode .feedback-panel,
html.dark-mode .modal-panel,
html.dark-mode .modal-card,
html.dark-mode .compare-card.a,
html.dark-mode .role-card { background: var(--chalk); }
html.dark-mode .login-error { background: #3A2523; }
html.dark-mode .feedback-banner.incorrect { background: #3A2523; }
html.dark-mode .quiz-option.selected.incorrect { background: #3A2523; }
html.dark-mode img.brand-logo,
html.dark-mode img.wordmark-badge-img { filter: brightness(0.92); }

/* ---------- Accessibility / display settings toolbar ---------- */
.topbar-link {
    font-family: var(--font-body);
    font-size: calc(13px * var(--fs-mult));
    color: var(--chalk);
    opacity: 0.85;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-control);
    padding: 6px 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.topbar-link:hover { opacity: 1; border-color: rgba(255,255,255,0.65); }

.modal-card {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    padding: 28px;
    max-width: 420px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-card h3 { font-size: calc(18px * var(--fs-mult)); margin-bottom: 10px; }

.access-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--path-line); font-size: calc(14px * var(--fs-mult)); }
.access-row:first-of-type { border-top: none; }
.access-toggle { min-width: 52px; justify-content: center; }
.access-scale-controls { display: flex; align-items: center; gap: 10px; font-family: var(--font-meta); font-size: calc(12.5px * var(--fs-mult)); }
.access-scale-controls .btn { padding: 6px 12px; font-size: calc(13px * var(--fs-mult)); }

/* ---------- Onboarding / Training Overview page ---------- */
.onboard-shell { max-width: 640px; margin: 0 auto; padding: 32px 20px 60px; }
.onboard-hero { margin-bottom: 24px; }
.onboard-hero h1 { font-size: calc(24px * var(--fs-mult)); margin: 6px 0 10px; }
.onboard-hero p { color: var(--ink-soft); }
.onboard-card {
    display: flex; gap: 16px;
    background: #FFFFFF; border: 1.5px solid var(--path-line);
    border-radius: var(--radius-card); padding: 18px 20px; margin-bottom: 14px;
}
.onboard-card-highlight { border-color: var(--board); background: var(--mint); }
.onboard-num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--board); color: var(--chalk);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: calc(14px * var(--fs-mult));
}
.onboard-body h3 { font-size: calc(16px * var(--fs-mult)); margin-bottom: 6px; }
.onboard-body p { margin: 0; color: var(--ink-soft); font-size: calc(14px * var(--fs-mult)); }
.onboard-btn-guide { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: calc(14px * var(--fs-mult)); }
.onboard-btn-guide li { margin-bottom: 10px; }
.onboard-actions { margin-top: 24px; }

/* ---------- Post-module knowledge assessment ---------- */
.assessment-shell { max-width: 640px; margin: 0 auto; padding: 28px 20px 80px; }
.assessment-intro { background: #FFFFFF; border: 1.5px solid var(--path-line); border-radius: var(--radius-card); padding: 22px; margin-bottom: 18px; }
.assessment-progress { font-family: var(--font-meta); font-size: calc(11px * var(--fs-mult)); text-transform: uppercase; letter-spacing: 0.06em; color: var(--path); margin-bottom: 10px; }
.assessment-question { background: #FFFFFF; border: 1.5px solid var(--path-line); border-radius: var(--radius-card); padding: 20px; margin-bottom: 14px; }
.assessment-question h3 { font-size: calc(16px * var(--fs-mult)); margin-bottom: 12px; }
.assessment-question .quiz-option.correct-reveal { border-color: var(--harmattan-deep); background: var(--mint); }
.assessment-question .quiz-option.incorrect-reveal { border-color: var(--laterite-deep); background: #FBEAE5; }
.assessment-hint { margin-top: 10px; font-size: calc(13px * var(--fs-mult)); color: var(--board-deep); background: var(--mint); padding: 10px 12px; border-radius: var(--radius-control); }
.assessment-result { text-align: center; padding: 32px 20px; }
.assessment-result .score-ring {
    width: 120px; height: 120px; border-radius: 50%;
    border: 8px solid var(--path-line); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; font-family: var(--font-display); font-size: calc(28px * var(--fs-mult)); font-weight: 600; color: var(--ink);
}
.assessment-result .score-ring.pass { border-color: var(--harmattan); color: var(--harmattan-deep); }
.assessment-result .score-ring.fail { border-color: var(--laterite); color: var(--laterite-deep); }

/* ---------- Dynamic gate messaging (app.js) ---------- */
.gate-reason { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gate-reason .gate-link { background: none; border: none; padding: 0; color: var(--board); font-family: var(--font-body); font-size: calc(12.5px * var(--fs-mult)); text-decoration: underline; cursor: pointer; }
.block.gate-highlight { animation: gateFlash 1.4s ease; }
@keyframes gateFlash {
    0% { background: var(--mint); }
    100% { background: transparent; }
}

/* ---------- Read-aloud (text-to-speech) ---------- */
.tts-active .block[data-tts-current="true"] { background: var(--mint); }