/* ===== STYLESHEET UPDATES FOR PORTAL MODALS & TOASTS ===== */

/* --------------------------------------------------------------------------
   THEME TOKENS
   The app is fully token-driven. Colours live only in the theme blocks below,
   so a single [data-theme] override flips the whole UI.
   - :root                     = shared (non-colour) tokens + the DARK palette,
                                  which is what an explicit dark choice falls
                                  through to. It is NOT what a new reader sees.
   - :root:not([data-theme])   = LIGHT, and this is the default a new reader
                                  gets on any OS (see the note above that rule)
   - :root[data-theme="light"] = warm light overrides (brand-matched to the
                                  main site: beige / forest green / gold)
   The OS preference is deliberately NOT consulted; it used to be, and a
   dark-mode phone then overrode the brand look for readers arriving from the
   light main site.
   -------------------------------------------------------------------------- */
:root {
    /* Brand dark (forest-green-black + gold) */
    --bg-primary: #0c1210;
    --bg-secondary: #121e1a;
    --bg-card: #1a2a24;
    --bg-card-hover: #223530;
    --accent-green: #347d53;   /* was #3a8a5c — white label measured 4.23:1 */
    --accent-green-hover: #2c6e48;
    --accent-green-glow: rgba(58, 138, 92, 0.12);
    /* The fill green measures 3.55:1 against a card — fine behind white button
       text, too low to BE text. Green used as text (links, "practise this →")
       gets its own token, measured at 4.52:1 on cards and 5.71:1 on the page. */
    --accent-green-text: #4a9d6c;
    --accent-gold: #d4a84b;
    --accent-gold-glow: rgba(212, 168, 75, 0.1);
    --accent-gold-text: #d4a84b;
    --accent-red: #c0392b;
    --accent-red-glow: rgba(192, 57, 43, 0.1);
    /* Red used as TEXT, same split as the green, gold and blue: the fill red is
       too dark to read on a dark card (2.76:1). */
    --accent-red-text: #ef8b7f;
    /* Backdrop for a sticky bar that content scrolls under. Must follow the
       theme: this was hardcoded to a near-opaque navy, so on a phone in light
       mode the quiz header was a dark navy strip in a cream UI with dark text
       on it at 2.76:1. Off-brand too, the dark theme's own surface is a
       green-black, never navy. */
    --surface-sticky: rgba(12, 18, 16, 0.96);
    /* Green text sitting ON a green tint, which is a different background from
       a card and needs a different value. --accent-green-text is measured
       against cards (4.52:1); on --accent-green-glow it drops to 3.94 and the
       onboarding modal's "Free access · No card required" failed on the first
       screen a new student sees. 5.0:1 on the composited tint. */
    --accent-green-on-tint: #5cb17e;
    /* PERFORMANCE STATUS PALETTE.
     *
     * Red for weak, amber and orange for middling, green for strong, purple for
     * a level badge. These were hardcoded as raw hex inside app.js inline
     * styles, which no stylesheet can override, so they never changed with the
     * theme: the dark-tuned values were painted onto white cards in light mode
     * and a score of 20% rendered at 3.76:1, "Strong areas" at 2.54:1, and the
     * weakness badges at 2.66:1. All of it invisible in dark mode, which is the
     * only mode anyone had looked at.
     *
     * Dark values below are the originals. The light block darkens each one to
     * clear 4.5:1 on a white card, measured rather than guessed. */
    --status-weak: #f87171;
    --status-mid: #f59e0b;
    --status-near: #f97316;
    --status-strong: #10b981;
    --status-level: #a78bfa;
    --accent-blue: #4a7c6e;
    --accent-blue-glow: rgba(74, 124, 110, 0.12);
    /* 3.14:1 on a card — a fill colour, not a text colour. Same split as the
       green and the gold. */
    --accent-blue-text: #5f9a89;
    --text-primary: #e8ede9;
    --text-secondary: #8a9e94;
    --text-muted: #7d948a;   /* was #4a5d54 — 2.13:1 on a card, unreadable */
    --border: #1e3029;
    --border-hover: #2d4a3e;
    /* Semantic helpers (used to retire hardcoded #fff / #000 for light mode) */
    --text-on-accent: #ffffff;   /* text sitting on a green/coloured fill */
    /* White on the gold fill measures 2.21:1 — the worst contrast anywhere in
       the product, and gold is used for primary calls to action. Gold takes a
       dark label (8.56:1) instead. */
    --text-on-gold: #0c1210;
    --text-strong: #ffffff;      /* highest-contrast text on the page surface  */
    --surface-raised: #1a2a24;   /* popovers / raised panels                    */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --overlay-scrim: rgba(6, 10, 8, 0.72);

    --radius: 16px;
    --radius-sm: 8px;
    --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.25s;

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    color-scheme: dark;
}

/* Warm light theme — brand-matched to excel-in-economics.com */
:root[data-theme="light"] {
    --bg-primary: #f7f5f2;
    --bg-secondary: #efece5;
    --bg-card: #ffffff;
    --bg-card-hover: #f3efe7;
    --accent-green: #2f7a50;
    --accent-green-hover: #24603f;
    --accent-green-glow: rgba(47, 122, 80, 0.12);
    --accent-green-text: #256641;
    --accent-gold: #b3822c;
    --accent-gold-glow: rgba(179, 130, 44, 0.12);
    --accent-gold-text: #846019;
    --accent-red: #b23a2c;
    --accent-red-glow: rgba(178, 58, 44, 0.1);
    --accent-red-text: #a3352a;
    --surface-sticky: rgba(247, 245, 242, 0.96);
    --accent-green-on-tint: #256641;
    /* Measured on #ffffff: 5.44, 5.92, 5.02, 6.39, 7.10 respectively. The
       dark-theme originals score 3.76, 2.9, 3.3, 2.54 and 3.51 here. */
    --status-weak: #a3352a;
    --status-mid: #8a5a06;
    --status-near: #b4530a;
    --status-strong: #146c4e;
    --status-level: #6d28d9;
    --accent-blue: #3f6f62;
    --accent-blue-glow: rgba(63, 111, 98, 0.12);
    --accent-blue-text: #3f6f62;
    --text-primary: #22302a;
    --text-secondary: #556359;  /* darkened: #5a6b62 measured 4.45:1 on the tinted cards, just under AA */
    --text-muted: #5f6e65;   /* was #8a9a91 — 2.95:1 on white */
    --border: #e4dfd4;
    --border-hover: #cfc8b8;
    --text-on-accent: #ffffff;
    --text-on-gold: #0c1210;
    --text-strong: #1c2822;
    --surface-raised: #ffffff;
    --shadow-color: rgba(44, 62, 54, 0.14);
    --overlay-scrim: rgba(34, 48, 42, 0.42);

    color-scheme: light;
}

/* LIGHT IS THE DEFAULT (12 Aug 2026).
   These overrides used to sit inside @media (prefers-color-scheme: light), so
   the portal followed the reader's OS and anyone on a dark-mode phone got the
   dark theme. The brand site is light and most students arrive from it, so the
   portal now opens light for everyone who has not chosen, whatever their OS.

   An explicit choice still wins in both directions: [data-theme="dark"] matches
   neither this rule nor the light block, so it falls through to the base :root
   above, which is the dark palette; [data-theme="light"] is declared separately.

   THE TOGGLE'S current() MUST AGREE WITH THIS. It used to answer the OS via
   matchMedia, so after this change a dark-OS reader would see a light page
   while the toggle believed it was dark, and their first click would set light
   and appear to do nothing. Changed in index.html and landing.html too. */
:root:not([data-theme]) {
    --bg-primary: #f7f5f2;
    --bg-secondary: #efece5;
    --bg-card: #ffffff;
    --bg-card-hover: #f3efe7;
    --accent-green: #2f7a50;
    --accent-green-hover: #24603f;
    --accent-green-glow: rgba(47, 122, 80, 0.12);
    --accent-green-text: #256641;
    --accent-gold: #b3822c;
    --accent-gold-glow: rgba(179, 130, 44, 0.12);
    --accent-gold-text: #846019;
    --accent-red: #b23a2c;
    --accent-red-glow: rgba(178, 58, 44, 0.1);
    --accent-red-text: #a3352a;
    --surface-sticky: rgba(247, 245, 242, 0.96);
    --accent-green-on-tint: #256641;
    --status-weak: #a3352a;
    --status-mid: #8a5a06;
    --status-near: #b4530a;
    --status-strong: #146c4e;
    --status-level: #6d28d9;
    --accent-blue: #3f6f62;
    --accent-blue-glow: rgba(63, 111, 98, 0.12);
    --accent-blue-text: #3f6f62;
    --text-primary: #22302a;
    --text-secondary: #556359;  /* darkened: #5a6b62 measured 4.45:1 on the tinted cards, just under AA */
    --text-muted: #5f6e65;   /* was #8a9a91 — 2.95:1 on white */
    --border: #e4dfd4;
    --border-hover: #cfc8b8;
    --text-strong: #1c2822;
    --surface-raised: #ffffff;
    --shadow-color: rgba(44, 62, 54, 0.14);
    --overlay-scrim: rgba(34, 48, 42, 0.42);
    color-scheme: light;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
}

.account-sync-note { color: var(--text-secondary); font-size: 12px; margin-top: 14px; }
.marketing-consent { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 10px; line-height: 1.4; }
.marketing-consent input { margin-right: 7px; accent-color: var(--accent-green-text); }
.google-continue-btn { width: 100%; margin-top: 12px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); background: #fff; color: #182033; cursor: pointer; font: inherit; font-weight: 800; }
.google-continue-btn:hover { background: #eaf1ff; }
.auth-helper-copy { color: var(--text-secondary); font-size: 11px; line-height: 1.5; margin-top: 12px; text-align: center; }
.account-prompt-card { max-width: 430px; text-align: center; }
.account-prompt-icon { font-size: 38px; margin-bottom: 10px; }
.account-later-btn { width: 100%; margin-top: 10px; padding: 10px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; }

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: var(--transition);
}
.theme-toggle:hover {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}
.theme-toggle-icon { display: block; }

/* ===== DASHBOARD: WELCOME + QUICK-LAUNCH ===== */
.dashboard-welcome { margin-bottom: 20px; }
/* #hero-welcome, not `h1`: the element is an h2, so the h1 rule styled nothing
 * and the heading fell back to the browser default -- 24px flat, where this
 * asks for up to 32px on a wide screen. Matched to the #hero-subtitle rule
 * below, which is why that one has always worked. */
.dashboard-welcome #hero-welcome { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3vw, 32px); color: var(--text-strong); }
.dashboard-welcome #hero-subtitle { color: var(--text-secondary); font-size: 15px; margin-top: 6px; }

.quick-launch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 14px;
}
.ql-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: var(--transition);
}
.ql-card:hover {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--shadow-color);
}
.ql-card:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
/* The one card we actually want a new student to press. A border rather than
   a fill, so it reads as "start here" without shouting over the other three. */
.ql-card-primary { border-color: var(--accent-green); background: var(--accent-green-glow); }
.ql-icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    font-size: 26px;
    background: var(--accent-green-glow);
    border-radius: 14px;
}
.ql-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ql-body strong { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--text-strong); }
.ql-body small { color: var(--text-secondary); font-size: 12.5px; line-height: 1.4; }
.ql-arrow { flex: 0 0 auto; color: var(--accent-green-text); font-size: 20px; font-weight: 700; transition: transform 0.2s ease; }
.ql-card:hover .ql-arrow { transform: translateX(3px); }

.ql-helper { margin: 2px 0 8px; color: var(--text-secondary); font-size: 13px; }
/* Used where a board's practice needs a word of explanation before a student
   invests time in it. Quiet, not a warning — the situation is normal, it just
   deserves saying out loud rather than being discovered mid-set. */
.board-source-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--accent-gold);
    background: var(--bg-secondary);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 760px;
}
.board-source-note strong { color: var(--text-strong); }
.ql-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent-green-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ql-link:hover { color: var(--accent-green-text); text-decoration-thickness: 2px; }

/* --- Keyboard focus ------------------------------------------------------
   Only a handful of components declared a focus ring, so tabbing through the
   portal — the whole sidebar, the quick-launch cards, every plain button, link
   and field — moved an invisible cursor. This is the baseline; the component
   rules below refine it where a tighter ring looks better. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
    outline: 2px solid var(--accent-green-text);
    outline-offset: 2px;
    border-radius: 4px;
}
/* A high-contrast ring needs to survive on the gold and green fills too. */
.btn-primary:focus-visible,
.toolbar-btn.primary:focus-visible {
    outline: 2px solid var(--text-strong);
    outline-offset: 3px;
}

/* Hide the progress/analytics zone until the student has practised */
#panel-dashboard.dash-empty #dashboard-activity-zone { display: none !important; }

/* Class work is a teacher feature. A student practising on their own should
   not be shown a section heading for work that does not exist — until a
   teacher has actually set some, it is one quiet line they can open. */
.student-assignment-section[data-has-work="false"] .teacher-section-heading,
.student-assignment-section[data-has-work="false"] .student-assignment-list { display: none; }
.student-assignment-section[data-has-work="false"] .teacher-inline-form { display: none; }
/* Collapsed, it is a line of text — not a card with one link rattling in it. */
.student-assignment-section[data-has-work="false"] {
    background: none; border: 0; box-shadow: none; padding: 4px 0; margin-top: 4px;
}
.student-assignment-section[data-has-work="false"].code-open .teacher-inline-form { display: flex; }
.student-assignment-section[data-has-work="true"] .class-code-toggle { display: none; }
.class-code-toggle {
    background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14px;
    color: var(--text-secondary); cursor: pointer; text-decoration: underline;
    text-underline-offset: 3px;
}
.class-code-toggle:hover { color: var(--text-primary); }
.class-code-toggle:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 3px; border-radius: 4px; }

/* Standalone progress stats row (replaces the old hero band) */
.dashboard-stats-row { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; margin: 0 0 8px; }
.dashboard-stats-row .hero-stat-box { min-width: 150px; }

@media (max-width: 720px) {
    .quick-launch-grid { grid-template-columns: 1fr; }
}

/* ===== LAYOUT & CORE VIEWS ===== */
.app-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}
.sidebar-close, .sidebar-backdrop { display: none; }
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.brand-icon {
    font-size: 28px;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-info {
    display: flex;
    flex-direction: column;
}
.brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-strong);
}
.brand-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-gold-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* User summary profile (Settings click trigger) */
.user-profile-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    position: relative;
}
.user-profile-summary.clickable {
    cursor: pointer;
    transition: var(--transition);
}
.user-profile-summary.clickable:hover {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
}
.user-avatar-wrapper {
    position: relative;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-on-accent);
}
.status-indicator {
    position: absolute;
    bottom: 0; right: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.status-indicator.online { background-color: var(--accent-green); }

.user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-strong);
}
.user-role {
    font-size: 10px;
    color: var(--text-secondary);
}
.settings-gear {
    font-size: 14px;
    color: var(--text-muted);
    transition: var(--transition);
}
.user-profile-summary:hover .settings-gear {
    color: var(--text-strong);
    transform: rotate(45deg);
}

/* Menu links */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.nav-item {
    background: none;
    border: none;
    padding: 14px 18px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.nav-item:hover {
    color: var(--text-strong);
    background: rgba(255,255,255,0.03);
}
.nav-item.active {
    color: var(--text-strong);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.nav-icon {
    font-size: 16px;
}

/* Cambridge's own cohort data, under the explanation.
 *
 * Deliberately quieter than the explanation it follows — it is context, not the
 * teaching. The left rule ties it to the explanation block rather than letting
 * it read as a separate alert. */
.examiner-stats {
    margin-top: 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--accent-gold);
    background: var(--accent-gold-glow);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.examiner-stats__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-gold-text);
    margin-bottom: 4px;
}
.examiner-stats p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}
.examiner-stats strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.examiner-stats__source {
    margin-top: 4px !important;
    font-size: 12px;
    color: var(--text-muted, var(--text-secondary));
    opacity: .8;
}

/* Count of newly marked essays, on the Essay Arena nav item.
 *
 * margin-left:auto pushes it to the trailing edge of the flex row without
 * disturbing the icon/label gap. Green rather than red: a marked essay is good
 * news, and red here would read as an error beside every other nav item. */
.nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Sidebar Promo card */
.sidebar-promo {
    background: linear-gradient(135deg, var(--bg-card), var(--accent-green-glow));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: auto;
}
.sidebar-promo h4 {
    font-size: 14px;
    color: var(--text-strong);
    margin-bottom: 6px;
}
.sidebar-promo p {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}
.promo-btn {
    display: block;
    width: 100%;
    background: var(--accent-green);
    color: var(--text-on-accent);
    border: none;
    padding: 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    transition: var(--transition);
}
.promo-btn:hover {
    background: var(--accent-green-hover);
}

.sidebar-account-area { margin-top: auto; padding: 16px; border: 1px solid var(--accent-green); border-radius: var(--radius-sm); background: linear-gradient(145deg, var(--accent-green-glow), var(--bg-card)); }
.sidebar-account-kicker { color: var(--accent-gold-text); font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-bottom: 5px; }
.sidebar-account-area h4 { font-size: 14px; margin-bottom: 5px; }
.sidebar-account-area p:not(.sidebar-account-kicker) { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.sidebar-account-btn { width: 100%; margin-top: 13px; padding: 10px; border: 0; border-radius: 7px; background: var(--accent-green); color: var(--text-on-accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.sidebar-account-btn:hover { background: var(--accent-green-hover); }
.sidebar-feedback-link { display: block; margin-top: 11px; color: var(--text-secondary); font-size: 11px; text-align: center; text-decoration: none; }
.sidebar-feedback-link:hover { color: var(--text-strong); }
.sidebar-legal { margin: 12px 0 0; text-align: center; font-size: 11px; color: var(--text-muted); }
.sidebar-legal a { color: var(--text-muted); text-decoration: none; }
.sidebar-legal a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
.google-brand-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; }
.google-g { display: block; flex: 0 0 20px; width: 20px; height: 20px; }

/* ===== MAIN WINDOW WRAPPER ===== */
.main-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* TOP NAVBAR */
.top-nav {
    height: 65px;
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}
.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-strong);
    font-size: 20px;
    cursor: pointer;
    position: relative;   /* anchors the unread dot below */
}

/* On a phone the sidebar is translated off-canvas, so .nav-badge is invisible
 * until the menu is opened — and a student with no reason to open it would
 * never learn their essay had been marked. The same signal is mirrored onto the
 * one control that is always on screen. A dot, not a count: 40px of button is
 * no place for a numeral, and "something is waiting" is the whole message. */
.mobile-menu-toggle.has-alert::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    /* --accent-green-text, not --accent-green: as a bare shape the dot is held
     * to 3:1 against the button it sits on, and --accent-green measures exactly
     * 3.00 in dark mode — passing only until someone nudges a token. This one
     * measures 4.52 dark and 6.87 light. The badge keeps --accent-green because
     * there the contrast that matters is the white numeral on top of it. */
    background: var(--accent-green-text);
    box-shadow: 0 0 0 2px var(--bg-card);   /* keeps the edge readable over the icon */
}
/* The header title is an h1: it is the page's real heading, which a11y and
 * search both need it to be. These rules said `h2`, so for as long as that has
 * been true NOTHING here styled it. It fell back to the browser default of
 * 2em/48px, which on a 375px screen wrapped to two lines and stood 96px tall
 * inside a 64px header — "Student" clipped off the top of the viewport,
 * "Dashboard" spilling over the content below, and the board badge cut in half.
 * On every panel, on every phone. Selectors that match nothing fail silently,
 * which is why this survived a contrast sweep and 70 validators. */
.nav-left {
    /* A flex item will not shrink below its content width without this, so the
     * ellipsis below never gets the chance to apply. */
    min-width: 0;
}
.nav-left h1 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-strong);
    margin: 0;
    min-width: 0;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.metric-pill {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.metric-pill.clickable {
    cursor: pointer;
    transition: var(--transition);
}
.metric-pill.clickable:hover {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
}
.metric-value {
    color: var(--accent-gold-text);
}
.metric-pill .metric-value#global-credits {
    color: var(--accent-green-text);
}

/* XP Tracker */
.xp-container {
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xp-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.xp-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
    border-radius: 3px;
}

/* VIEW PANELS */
.view-content {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-primary);
}
.view-panel {
    display: none;
    height: 100%;
    padding: 32px;
    animation: fadeTransition 0.25s ease-out;
}
.view-panel.active {
    display: block;
}
.view-panel.active.flex-panel {
    display: flex !important;
}

@keyframes fadeTransition {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden {
    display: none !important;
}

/* ===== IB PAPER 2 DATA LAB ===== */
.ib-lab-hero { padding: 24px; border: 1px solid var(--accent-blue-glow); border-radius: var(--radius); background: linear-gradient(135deg, rgba(14,116,144,.22), var(--bg-card)); margin-bottom: 20px; }
.ib-lab-eyebrow { color: var(--accent-blue-text); font-size: 12px; letter-spacing: .09em; font-weight: 800; text-transform: uppercase; }
.ib-lab-hero h2 { margin: 5px 0 8px; font-size: 28px; }
.ib-lab-hero p { color: var(--text-secondary); max-width: 720px; }
.ib-lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.ib-lab-card { width: 100%; padding: 20px; text-align: left; color: inherit; cursor: pointer; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); font: inherit; }
.ib-lab-card:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
/* Reserve two lines for the eyebrow. "HL · Macroeconomics / Global economy ·
   6 min" wraps where "HL · Macroeconomics · 6 min" does not, and without a
   floor the longer one pushed its card's title 9px below its neighbours' —
   a visibly ragged row in both the Data Lab and the Policy Lab. */
.ib-lab-card .ib-lab-meta { color: var(--accent-blue-text); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; min-height: 3.2em; }
/* Two lines reserved here too, for the same reason as the eyebrow above:
   "Minimum wages & the labour market: Brindale" wraps where "Pollution &
   policy: Ternau" does not, which left the descriptions in a row starting at
   different heights. 1.6em line-height x 2. */
.ib-lab-card h3 { margin: 8px 0; font-size: 18px; min-height: 3.2em; }
.ib-lab-card p { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
/* IB practice hub: papers, level toggle */
.ib-level-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ib-level-label { color: var(--text-secondary); font-size: 13px; font-weight: 700; margin-right: 2px; }
.ib-level-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.ib-level-btn:hover { border-color: var(--accent-blue); }
.ib-level-btn.active { background: var(--accent-green); border-color: var(--accent-green); color: #fff; }
.ib-practice-card { cursor: default; }
.ib-practice-card:hover { transform: none; }
.ib-practice-actions { display: grid; gap: 10px; margin-top: 14px; }
.ib-practice-action { display: flex; flex-direction: column; gap: 4px; }
.ib-practice-action span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.ib-practice-note { color: var(--text-secondary); font-size: 13px; margin-top: 12px; }
.ib-practice-extra { margin-top: 20px; }
.ib-practice-extra h3 { margin: 5px 0 8px; font-size: 20px; }
.ib-lab-run { max-width: 820px; margin: 0 auto; }
.ib-lab-source { padding: 18px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); line-height: 1.65; }
.ib-lab-parts { display: grid; gap: 12px; margin-top: 18px; }
.ib-lab-part { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.ib-lab-part label { display:block; font-weight: 800; margin-bottom: 8px; }
.ib-lab-options { display:grid; gap:8px; }
.ib-lab-option { padding: 11px 13px; border:1px solid var(--border); border-radius:9px; background: var(--bg-secondary); color:var(--text-primary); cursor:pointer; text-align:left; font:inherit; }
.ib-lab-option:hover { border-color:var(--accent-blue); }
.ib-lab-feedback { margin-top:10px; color:var(--accent-green-text); line-height:1.55; }
.ib-lab-next { margin-top: 18px; }
.ib-builder-layout { max-width: 980px; margin: 0 auto; }
.ib-builder-prompt { padding: 20px; border: 1px solid var(--accent-gold-glow); border-radius: 12px; background: var(--accent-gold-glow); margin: 16px 0; font-size: 18px; line-height: 1.55; }
.ib-builder-steps { display: grid; gap: 12px; }
.ib-builder-step { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.ib-builder-step h3 { font-size: 16px; margin-bottom: 5px; }
.ib-builder-step p { color: var(--text-secondary); font-size: 13px; margin-bottom: 11px; }
.ib-builder-step textarea { width: 100%; min-height: 86px; resize: vertical; padding: 12px; color: var(--text-primary); font: inherit; line-height: 1.5; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; }
.ib-builder-tip { margin-top: 10px; padding: 11px; border-radius: 8px; background: var(--accent-green-glow); color: var(--accent-green-text); font-size: 13px; }
.ib-builder-progress { color: var(--accent-gold-text); font-size: 13px; font-weight: 700; }
.ib-policy-data { display:grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap:10px; margin-top:14px; }
.ib-policy-stat { padding:13px; border:1px solid var(--border); border-radius:10px; background: var(--bg-secondary); }
.ib-policy-stat strong { display:block; color:var(--accent-gold-text); font-size:19px; }
.ib-policy-stat span { color:var(--text-secondary); font-size:12px; }
.ib-policy-choice { width:100%; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--text-primary); cursor:pointer; text-align:left; font:inherit; }
.ib-policy-choice:hover { border-color:#f59e0b; }
@media (max-width: 680px) { .ib-lab-hero { padding: 18px; } .ib-lab-hero h2 { font-size: 24px; } .ib-lab-grid { grid-template-columns: 1fr; } }

.section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-strong);
    margin-bottom: 16px;
    margin-top: 24px;
}

/* ===== VIEW 1: DASHBOARD LAYOUT ===== */
.dashboard-hero {
    background: linear-gradient(135deg, var(--accent-green-glow), var(--accent-gold-glow));
    border: 1px solid var(--accent-green-glow);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.hero-text h1 {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--text-strong);
}
.hero-text p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 500px;
}
.hero-stats {
    display: flex;
    gap: 16px;
}
.hero-stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    text-align: center;
    min-width: 120px;
}
.hero-stat-num {
    font-size: 24px;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--accent-green-text);
    display: block;
}
.hero-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

/* Daily Quests */
.quests-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.quest-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
}
.quest-card.completed {
    border-color: var(--accent-green-glow);
    background: var(--accent-green-glow);
}
.quest-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-secondary);
}
.quest-card.completed .quest-status {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--text-on-accent);
}
.quest-status.action-trigger {
    border-color: var(--accent-gold);
    color: var(--accent-gold-text);
    cursor: pointer;
    transition: var(--transition);
}
.quest-status.action-trigger:hover {
    background: var(--accent-gold);
    color: #000;
}
.quest-details h4 {
    font-size: 14px;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.quest-details p {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Coverage Grid */
.progress-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.progress-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.progress-card.clickable {
    cursor: pointer;
    transition: var(--transition);
}
.progress-card.clickable:hover {
    border-color: var(--accent-green);
    background: var(--bg-card-hover);
}
.progress-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.progress-card-header h4 {
    font-size: 14px;
    color: var(--text-strong);
}
.progress-pct {
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--accent-green-text);
}
.progress-track {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent-green);
    border-radius: 3px;
}

/* ===== VIEW 2: MCQ MODULE ===== */
.level-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 4px;
    border: 1px solid var(--border);
    margin-bottom: 24px;
    /* WAS max-width: 400px WITH flex: 1 ON EACH TAB.
     *
     * Three tabs sharing 400px got about 120px each, and "AS Level (Paper 1)"
     * does not fit in 120px at 13px, so every tab broke onto two lines with the
     * closing bracket stranded underneath. The width was capped before the
     * labels were this long.
     *
     * Now the row is as wide as its labels need and no wider, and it scrolls
     * sideways rather than wrapping if a narrow phone cannot take it. */
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.level-tabs::-webkit-scrollbar { display: none; }
.level-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: var(--transition);
}
.level-tab.active {
    background: var(--accent-green);
    color: var(--text-on-accent);
}

.essay-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    flex-wrap: wrap;
}
.filter-pill {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.filter-pill:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-strong);
}
.filter-pill.active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #000;
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.chapter-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.chapter-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}
.chapter-num {
    /* Deliberately NOT the chapter's accent colour. That palette is mid-toned
       so each chapter stays distinguishable in both themes, which leaves 6 of
       the 11 accents between 3.66:1 and 4.48:1 as 10px text on the dark card —
       under AA. The icon badge and card border still carry the colour coding;
       this label just has to be readable. */
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-green-text);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.chapter-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 12px;
}
.chapter-count {
    font-size: 12px;
    color: var(--text-secondary);
}
.chapter-count strong {
    color: var(--accent-gold-text);
}
.chapter-progress {
    margin-top: 12px;
    height: 4px;
    background: var(--bg-primary);
    border-radius: 2px;
    overflow: hidden;
}
/* Redesigned Chapter Cards (v2) */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.chapter-card-v2 {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--ch-color);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.chapter-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 20%, var(--ch-color) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.chapter-card-v2:hover {
    transform: translateY(-4px);
    border-color: var(--ch-color);
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.4), 0 0 15px -2px var(--ch-color) 25;
}
.chapter-card-v2:focus-visible,
.subtopic-card-v2:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
}
.chapter-card-v2:hover::before {
    opacity: 0.05;
}
.ch-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.ch-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
}
.ch-header-text {
    flex: 1;
}
.chapter-card-v2 .chapter-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.chapter-card-v2 .chapter-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.4;
    margin-bottom: 0;
}
.ch-subtopics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}
.ch-subtopic-chip {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 140px cut "Scarcity & Opportunity Cost", "Maximum & Minimum Prices" and
       "Aggregate Demand & Supply" mid-word. The row wraps, so a wider chip
       costs nothing. */
    max-width: 210px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.ch-more-chip {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-weight: 600;
}
.ch-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}
.ch-progress-label {
    color: var(--text-secondary);
    font-weight: 600;
}
.chapter-card-v2 .chapter-progress {
    margin-top: 0;
    height: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.back-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.back-btn:hover {
    border-color: var(--accent-blue);
    color: var(--text-strong);
    background: var(--accent-green-glow);
}

.subtopic-grid {
    display: grid;
    gap: 14px;
}
.subtopic-card-v2 {
    /* Fades to --bg-secondary, a surface token, NOT --overlay-scrim.
       The scrim is a modal backdrop and is dark in BOTH themes
       (rgba(6,10,8,.72) / rgba(34,48,42,.42)). Against a dark card that read
       as a subtle vignette; against the white light-mode card it faded from
       white into a murky green wash over the right-hand half of every topic
       row, taking the chips with it. */
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.question-theme-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.question-theme-chip {
    border: 1px solid var(--accent-gold-glow);
    border-radius: 999px;
    background: var(--accent-gold-glow);
    /* Was #ddd6fe — a pale lavender left over from the old purple brand, the
       only occurrence left in the codebase. Hardcoded, so it ignored the theme
       entirely and disappeared on the light card. --accent-gold-text is the
       matching pair for this gold background and is defined per theme. */
    color: var(--accent-gold-text);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
    padding: 6px 9px;
    text-align: left;
}

.question-theme-chip:hover,
.question-theme-chip:focus-visible {
    background: var(--accent-gold-glow);
    border-color: var(--accent-gold);
    outline: none;
}
.subtopic-card-v2:hover {
    transform: translateX(4px);
    border-color: var(--accent-blue);
    background: var(--bg-card-hover);
    box-shadow: 0 6px 16px var(--accent-green-glow);
}
.subtopic-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.subtopic-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}
.subtopic-count {
    font-size: 12px;
    color: var(--text-secondary);
}
.subtopic-perf-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    text-align: right;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Quiz view specific metrics */
.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 20px;
}
.quiz-progress {
    flex: 1;
}
#quiz-progress-text {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}
.progress-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
}

.question-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
}
.question-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.question-meta span {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.question-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.question-visual {
    margin: 0 0 22px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.question-visual img {
    display: block;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}

.question-visual figcaption {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.options-grid {
    display: grid;
    gap: 10px;
}
.option-btn {
    width: 100%;
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
}
.option-btn:hover:not(.disabled) {
    border-color: var(--accent-blue);
    background: var(--accent-green-glow);
}
.option-letter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--bg-primary);
}
.option-btn.correct {
    border-color: var(--accent-green) !important;
    background: var(--accent-green-glow) !important;
}
.option-btn.correct .option-letter {
    background: var(--accent-green);
    color: var(--text-on-accent);
    border-color: var(--accent-green);
}
.option-btn.wrong {
    border-color: var(--accent-red) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
.option-btn.wrong .option-letter {
    background: var(--accent-red);
    color: var(--text-on-accent);
    border-color: var(--accent-red);
}
.option-btn.disabled {
    opacity: 0.6;
    cursor: default;
}
.comparison-options-grid { gap: 10px; }
.comparison-options-header,
.comparison-options-grid .option-btn {
    display: grid;
    grid-template-columns: 48px repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
.comparison-options-header {
    gap: 8px;
    padding: 0 14px 2px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}
.comparison-options-header span:not(:first-child) { padding: 0 5px; }
.comparison-options-grid .option-btn {
    gap: 8px;
    padding: 10px 14px;
}
.comparison-option-values { display: contents; }
.comparison-option-values span {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 640px) {
    .comparison-options-header { font-size: 9px; }
    .comparison-options-header,
    .comparison-options-grid .option-btn { grid-template-columns: 38px repeat(4, minmax(0, 1fr)); }
    .comparison-options-grid .option-btn { padding: 9px 8px; gap: 4px; }
    .comparison-option-values span { min-height: 28px; padding: 3px; font-size: 11px; }
    .question-visual {
        padding: 6px;
        overflow-x: auto;
    }

    .question-visual img {
        min-width: 620px;
    }
}

/* Teacher Pilot: intentionally compact, classroom-oriented controls. */
.student-assignment-section, .teacher-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 22px 0; }
.teacher-pilot-shell { max-width: 1280px; margin: 0 auto; }
.teacher-hero { margin-bottom: 20px; }
.teacher-kicker { display: block; color: var(--accent-green-text); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 6px; }
.teacher-section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px; }
.teacher-section-heading h2 { font-size: 20px; margin: 0; }
.teacher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.teacher-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.teacher-form input, .teacher-form select, .teacher-form textarea, .teacher-inline-form input { min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-primary); color: var(--text-primary); font: inherit; padding: 11px 12px; }
.teacher-form textarea { grid-column: 1 / -1; min-height: 74px; resize: vertical; }
.teacher-form button { grid-column: 1 / -1; justify-self: start; }
.teacher-class-list, .teacher-assignment-list, .student-assignment-list { display: grid; gap: 10px; margin-top: 16px; }
.teacher-class-card, .student-assignment-card, .teacher-assignment-row { border: 1px solid var(--border); border-radius: 11px; background: var(--bg-secondary); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.teacher-class-card h3, .student-assignment-card h3 { margin: 0 0 4px; font-size: 16px; }
.teacher-class-card p, .student-assignment-card p, .teacher-assignment-row span { margin: 0; color: var(--text-secondary); font-size: 13px; }
.teacher-class-code { text-align: right; display: grid; gap: 3px; font-size: 12px; color: var(--text-secondary); }
.teacher-class-code strong { color: var(--accent-gold-text); font-size: 16px; letter-spacing: .08em; }
.teacher-class-code button, .teacher-assignment-row button, .teacher-inline-form button { border: 1px solid var(--accent-blue); color: var(--accent-blue-text); background: transparent; border-radius: 8px; padding: 7px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.assignment-result { margin: 10px 0 0; color: var(--accent-teal); font-weight: 700; }
.teacher-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.teacher-report-actions button { border: 1px solid var(--accent-blue); color: var(--accent-blue-text); background: transparent; border-radius: 8px; padding: 8px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.teacher-inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 14px; color: var(--text-secondary); font-size: 13px; }
.teacher-inline-form input { max-width: 170px; text-transform: uppercase; }
.student-assignment-card { align-items: flex-start; flex-direction: column; }
.student-assignment-card .btn-primary { align-self: flex-start; }
.teacher-assignment-row > div { display: grid; gap: 4px; }
.teacher-report-output { margin-top: 14px; border-left: 3px solid var(--accent-green); background: var(--accent-green-glow); padding: 14px; color: var(--text-secondary); border-radius: 0 8px 8px 0; line-height: 1.55; }
.teacher-report-output strong { color: var(--text-primary); }
.teacher-target-note { grid-column: 1 / -1; margin: -2px 0 0; color: var(--accent-gold-text); font-size: 12px; }
.teacher-student-results { display: grid; gap: 7px; margin: 14px 0; }
.teacher-student-results label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--text-primary); font-size: 13px; }
.teacher-student-results em { color: var(--text-secondary); font-style: normal; font-size: 12px; }
.teacher-report-output button { margin-top: 4px; border: 1px solid var(--accent-blue); color: var(--accent-blue-text); background: transparent; border-radius: 8px; padding: 8px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.teacher-report-output button:disabled { opacity: .45; cursor: not-allowed; }
.teacher-empty { color: var(--text-secondary); font-size: 13px; line-height: 1.55; padding: 14px 0; margin: 0; }
@media (max-width: 760px) {
  .teacher-grid { grid-template-columns: 1fr; }
  .teacher-form { grid-template-columns: 1fr; }
  .teacher-class-card, .teacher-assignment-row { align-items: flex-start; flex-direction: column; }
  .teacher-class-code { text-align: left; }
}

.explanation-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 16px;
}

/* THE EXPLANATION IS READ AT THE WORST POSSIBLE MOMENT: straight after getting
 * the question wrong. Until 12 Aug 2026 formatMarkdown emitted only bold and
 * line breaks, so 1,374 explanations that had been WRITTEN as bullet lists
 * arrived as a hyphenated slab of soft-wrapped prose. These two rules are what
 * the new <ul> and <h4> need to land as something scannable.
 *
 * Everything is token-driven, so both themes follow automatically and neither
 * hard-codes a colour. */
.expl-list {
    margin: 10px 0 14px;
    padding-left: 22px;
    list-style: disc;
}
.expl-list li {
    margin-bottom: 6px;
    line-height: 1.55;
}
.expl-list li:last-child { margin-bottom: 0; }

/* A sub-heading inside a card, so it sits BELOW the card's own heading level
 * and must not compete with it. Slightly smaller than body, letter-spaced and
 * in the secondary colour: the job is to let the eye find "why the others are
 * wrong" while skimming, not to shout. */
.expl-h {
    margin: 18px 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.expl-h:first-child { margin-top: 0; }

/* The rest of the explanation, one click away. Native <details>, so it is
 * keyboard operable and searchable without any script of ours, and nothing is
 * hidden from a screen reader. */
.expl-more {
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.expl-more-toggle {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-green-text);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 2px;
    border-radius: var(--radius-sm);
}
/* Safari draws its own triangle through ::-webkit-details-marker, which
   list-style:none does not remove. */
.expl-more-toggle::-webkit-details-marker { display: none; }
.expl-more-toggle::before {
    content: "▸";
    font-size: 0.9em;
    transition: transform 0.15s ease;
}
.expl-more[open] > .expl-more-toggle::before { transform: rotate(90deg); }
.expl-more-toggle:hover { text-decoration: underline; }
.expl-more-toggle:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}
.expl-more-body { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    .expl-more-toggle::before { transition: none; }
}

.mcq-mobile-action-bar {
    display: none;
}

.question-skill {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
    align-items: baseline;
    margin: 12px 0 16px;
    padding: 13px 15px;
    border: 1px solid var(--accent-green-glow);
    border-left: 4px solid var(--accent-green);
    border-radius: var(--radius-sm);
    background: var(--accent-green-glow);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.question-skill-label {
    grid-row: 1 / span 2;
    padding: 4px 7px;
    border-radius: 999px;
    /* The container already paints --accent-green-glow, so repeating it here
       doubled the tint and dropped the label to 3.45:1 in dark. A card-surface
       pill reads as a pill AND restores the contrast the green text token was
       measured against. */
    background: var(--bg-card);
    color: var(--accent-green-text);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.question-skill strong {
    color: var(--text-primary);
    font-size: 14px;
}
.explanation-header {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}
.explanation-header.correct-header { color: var(--accent-green-text); }
.explanation-header.wrong-header { color: var(--accent-red); }
.explanation-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    white-space: pre-wrap;
}
.next-btn {
    width: 100%;
    background: var(--accent-green);
    color: var(--text-on-accent);
    border: none;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.next-btn:hover {
    background: var(--accent-green-hover);
}

/* Results view */
.results-card {
    max-width: 480px;
    margin: 40px auto;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
}
.results-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.results-score {
    font-size: 40px;
    font-weight: 800;
    color: var(--accent-gold-text);
    margin: 12px 0;
}
.results-breakdown {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}
.results-plan {
    margin: 0 0 24px;
    padding: 18px;
    text-align: left;
    background: var(--accent-green-glow);
    border: 1px solid var(--accent-green-glow);
    border-radius: var(--radius-sm);
}
.results-plan.hidden { display: none; }
.results-plan-kicker {
    color: var(--accent-green-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}
.results-plan h3 { margin: 6px 0; font-size: 17px; }
.results-plan p { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.results-plan .btn-primary { width: 100%; }
.question-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.question-report-btn {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.question-report-btn:hover { color: var(--text-strong); border-color: var(--accent-gold); }
.question-report-card { max-width: 440px; }
.question-report-card .modal-label { display: block; margin: 16px 0 7px; }
.question-report-detail { min-height: 98px; resize: vertical; }
.question-report-card .btn-primary { width: 100%; margin-top: 18px; }
.results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.btn-primary {
    background-color: var(--accent-green);
    color: var(--text-on-accent);
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary:hover { background-color: var(--accent-green-hover); }
.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.btn-secondary:hover { border-color: var(--accent-green); color: var(--text-strong); }

/* ===== VIEW 3: ESSAY ARENA (SPLIT CANVAS) ===== */
.canvas-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: auto 1fr;
    height: 100%;
    margin: -32px;
}
.chat-sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.chat-bubble {
    display: flex;
    gap: 12px;
    max-width: 85%;
}
.chat-bubble.assistant { align-self: flex-start; }
.chat-bubble.user { align-self: flex-end; flex-direction: row-reverse; }
.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.avatar.user-avatar { background: var(--border-hover); }
.message-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
}
.chat-bubble.user .message-content {
    background: var(--accent-green-glow);
    border-color: var(--accent-green-glow);
}
.chat-input-container {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 16px;
}
.token-usage-bar {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.token-count {
    color: var(--accent-gold-text);
    font-weight: 700;
}
.chat-input-wrapper {
    display: flex;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 6px 12px 6px 16px;
    align-items: center;
}
.chat-input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-strong);
    font-size: 13px;
    outline: none;
}
.send-btn {
    background: var(--accent-green);
    border: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    color: var(--text-on-accent);
    cursor: pointer;
    font-size: 10px;
}

.writing-canvas {
    background: var(--bg-primary);
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow-y: auto;
}
.canvas-inner {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.editor-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-strong);
}
.editor-textarea {
    flex: 1;
    background: transparent;
    border: none;
    resize: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.8;
    padding-bottom: 80px;
}

/* Floating Toolbar */
.canvas-toolbar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(21, 28, 46, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 6px 12px;
    display: flex;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toolbar-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
}
.toolbar-btn:hover {
    color: var(--text-strong);
    background: rgba(255,255,255,0.05);
}
.toolbar-btn.primary {
    background: var(--accent-green);
    color: var(--text-on-accent);
}
.toolbar-btn.primary:hover {
    background: var(--accent-green-hover);
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.checklist-bullet {
    width: 5px; height: 5px;
    background: var(--accent-gold);
    border-radius: 50%;
}

/* ===== VIEW 4: TUTOR GRADING WORKSPACE ===== */
.tutor-layout {
    display: grid;
    grid-template-columns: 280px 1.2fr 0.8fr;
    gap: 24px;
    height: 100%;
}
.grading-essay-pane {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.pane-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pane-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-strong);
}
.submission-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
    flex: 1;
    overflow-y: auto;
}
.submission-content::selection {
    background: var(--accent-gold-glow);
}
.highlighted-comment {
    background: var(--accent-gold-glow);
    border-bottom: 2px solid var(--accent-gold);
    cursor: pointer;
}

.grading-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.score-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.score-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.score-box label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.score-box input {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-strong);
    padding: 6px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    outline: none;
}
.score-box input:focus {
    border-color: var(--accent-gold);
}

.feedback-editor {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
    resize: none;
    outline: none;
    min-height: 120px;
}
.feedback-editor:focus {
    border-color: var(--accent-gold);
}

.btn-release {
    background: var(--accent-gold);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 16px;
    transition: var(--transition);
}
.btn-release:hover {
    background: #d97706;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comment-item {
    background: var(--accent-gold-glow);
    border-left: 3px solid var(--accent-gold);
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.comment-item-quote {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

/* POPOVER STYLE */
.comment-popover {
    position: absolute;
    background: var(--surface-raised);
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    padding: 12px;
    width: 260px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    z-index: 1000;
    display: none;
}
.comment-popover textarea {
    width: 100%;
    height: 60px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-strong);
    padding: 8px;
    font-size: 12px;
    resize: none;
    outline: none;
    margin-bottom: 8px;
    font-family: inherit;
}
.comment-popover button {
    background: var(--accent-gold);
    color: #000;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* Widget Upsell inside Blog embeds */
.widget-upsell {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
}
.widget-upsell p {
    font-size: 13px;
    margin-bottom: 8px;
}
.upsell-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}
.upsell-desc {
    font-weight: 600;
    color: var(--accent-gold-text);
}
.upsell-btn {
    display: block;
    width: 100%;
    background: var(--accent-green);
    color: var(--text-on-accent);
    text-decoration: none;
    text-align: center;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    transition: var(--transition);
}
.upsell-btn:hover {
    background: var(--accent-green-hover);
}

/* ===== MODAL OVERLAYS ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: var(--overlay-scrim);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: none; /* Controlled by JS */
    /* The onboarding card is 777px tall. Centring it with align-items on a
       720px-high laptop screen clipped the bottom off — the Google sign-in and
       the "you can practise without an account" line were unreachable, with no
       scrollbar. flex-start plus margin:auto centres it when it fits and lets
       it scroll when it does not. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 16px;
}
.modal-overlay.active {
    display: flex;
    animation: fadeInModal 0.25s ease-out;
}
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    position: relative;
    margin: auto;
}
@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.modal-card h2 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-strong);
}
.modal-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}
.onboarding-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 10px;
    border: 1px solid var(--accent-green-glow);
    border-radius: 999px;
    background: var(--accent-green-glow);
    color: var(--accent-green-on-tint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.onboarding-step { margin-top: 22px; }
.onboarding-start-btn {
    display: block;
    width: auto;
    min-width: 236px;
    min-height: 52px;
    margin: 22px auto 0;
    padding: 10px 18px;
    font-size: 15px;
    line-height: 1.15;
}
.onboarding-start-btn > span { display: block; font-weight: 800; }
.onboarding-start-btn small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 650;
    opacity: 0.8;
}
.onboarding-diagnostic-link {
    display: block;
    margin: 12px auto 0;
    padding: 4px 6px;
    background: none;
    border: none;
    color: var(--accent-green-text);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    text-align: center;
}
.onboarding-diagnostic-link:hover { text-decoration: underline; }
.onboarding-reassurance {
    margin: 9px 0 0 !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
.mobile-continue-learning { display: none; }
.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.modal-close:hover {
    color: var(--text-strong);
}
.modal-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.modal-select {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    padding: 12px;
    font-size: 14px;
    outline: none;
    margin-bottom: 20px;
}
.modal-select:focus {
    border-color: var(--accent-green);
}
.modal-input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    padding: 12px;
    font-size: 14px;
    outline: none;
    margin-bottom: 20px;
}
.modal-input:focus {
    border-color: var(--accent-green);
}

/* Radio Pill Group */
.radio-pill-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.radio-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
}
.radio-pill:hover {
    border-color: var(--accent-green);
}
.radio-pill input {
    accent-color: var(--accent-green-text);
}
.radio-pill span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Day tracker dots */
.streak-tracker-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}
.day-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}
.day-dot.active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #000;
}

/* ===== TOAST LOGS LOGGER ===== */
.toast-container {
    position: fixed;
    bottom: 24px; right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3000;
}
.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    min-width: 250px;
    max-width: 350px;
    animation: slideInToast 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast.success { border-left-color: var(--accent-green); }
.toast.warning { border-left-color: var(--accent-gold); }
.toast.error { border-left-color: var(--accent-red); }

@keyframes slideInToast {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== PAST PAPERS PANEL (DESKTOP) ===== */
#panel-past-papers {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 24px;
}
#panel-past-papers.active {
    display: flex !important;
}
#past-papers-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    flex: 1;
    overflow: hidden;
    height: calc(100% - 200px);
    margin-top: 0;
}

/* RESPONSIVE VIEWS */
@media (max-width: 1024px) {
    .app-layout { grid-template-columns: 1fr; }
    .sidebar {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 86vw);
        height: 100dvh;
        z-index: 1200;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 18px 0 45px rgba(0, 0, 0, 0.45);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-close {
        display: inline-flex;
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        right: 14px;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-card);
        color: var(--text-strong);
        font: inherit;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
    }
    .sidebar.mobile-open + .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1150;
        border: 0;
        background: var(--overlay-scrim);
        cursor: pointer;
    }
    .sidebar.mobile-open .sidebar-brand { padding-right: 44px; }
    .mobile-menu-toggle { display: inline-flex; flex-shrink: 0; }
    .top-nav { justify-content: flex-start; gap: 12px; padding: 0 16px; }
    .nav-right { margin-left: auto; }
    .nav-right .metric-pill, .nav-right .xp-container, .nav-tour-btn { display: none; }
    .tutor-layout { grid-template-columns: 1fr; }
    .canvas-layout { grid-template-columns: 1fr; }
    .chat-sidebar { display: none; }
    .dashboard-three-column { grid-template-columns: 1fr; }
    .dashboard-two-column { grid-template-columns: 1fr; height: auto !important; }
    #panel-past-papers {
        height: auto !important;
        overflow: visible !important;
        padding: 16px !important;
    }
    #past-papers-two-column {
        display: flex;
        flex-direction: column;
        overflow: visible !important;
        height: auto !important;
        gap: 16px;
    }
    #panel-past-papers .dashboard-column {
        height: auto !important;
        min-height: 0;
    }
    #panel-past-papers .dashboard-column:first-child .progress-card {
        height: 55vh !important;
        min-height: 420px;
    }
    #panel-past-papers .dashboard-column:last-child .progress-card {
        height: 60vh !important;
        min-height: 460px;
    }
}

/* ===== THREE-COLUMN DASHBOARD GRID ===== */
.dashboard-three-column {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    margin-top: 16px;
    align-items: start;
}

/* ===== TWO-COLUMN DASHBOARD GRID ===== */
.dashboard-two-column {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    margin-top: 16px;
    height: calc(100vh - 275px);
    align-items: stretch;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== PERSISTED RECENT STUDY ACTIVITY ===== */
.activity-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
}

.activity-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.activity-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.activity-item:hover {
    border-color: var(--border-hover);
    background: rgba(255,255,255,0.02);
}

.activity-info h4 {
    font-size: 13px;
    color: var(--text-strong);
    margin-bottom: 2px;
}

.activity-info span {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
}

.activity-score {
    text-align: right;
}

.activity-score-val {
    font-size: 15px;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--accent-gold-text);
    display: block;
}

.activity-score-pct {
    font-size: 10px;
    color: var(--text-secondary);
}

/* ===== ACHIEVEMENTS & BADGES SHELF ===== */
.achievements-shelf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    padding: 10px 16px;
    border-radius: 30px;
    width: fit-content;
}

.shelf-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.3;
    filter: grayscale(100%);
    cursor: help;
    transition: var(--transition);
}

.badge-item.active {
    opacity: 1;
    filter: none;
    background: linear-gradient(135deg, var(--bg-card), var(--accent-gold-glow));
    border-color: var(--accent-gold);
    box-shadow: 0 0 10px var(--accent-gold-glow);
}

.badge-item.active:hover {
    transform: scale(1.15) rotate(5deg);
}

/* ===== CIRCULAR PROGRESS ringS ===== */
.circle-chart {
    position: relative;
    width: 65px;
    height: 65px;
}

.circular-chart-svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.circle-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 3.2;
}

.circle {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
    animation: progressRing 1.2s ease-out forwards;
}

@keyframes progressRing {
    0% { stroke-dasharray: 0 100; }
}

.circular-chart-svg.green .circle {
    stroke: var(--accent-green);
}

.circle-val {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    color: var(--text-strong);
}

/* ===== WHERE YOU STAND =====
 * Replaces the grade-predictor needle, whose rules styled #grade-pointer and
 * .grade-ranges. Neither element was ever added to index.html, so this entire
 * block styled nothing for as long as it existed. See
 * PUBLISHED_GRADE_THRESHOLDS in app.js. */
.grade-benchmark {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-green);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 16px 0;
    text-align: left;
}

.benchmark-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent-green-text);
    margin-bottom: 6px;
}

.benchmark-headline {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.25;
}

.benchmark-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 8px;
}

/* The provenance line. Deliberately quiet but never hidden: it is the whole
 * difference between this and a made-up letter. */
.benchmark-source {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 8px;
}

/* ===== WEEKLY LEADERBOARD ===== */
.leaderboard-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.01);
    border: 1px solid transparent;
    transition: var(--transition);
}

.leaderboard-item.active-user {
    background: var(--accent-green-glow);
    border-color: var(--accent-green-glow);
}

.rank-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    color: var(--text-secondary);
    width: 16px;
    text-align: center;
}

.leaderboard-item:nth-child(1) .rank-num { color: var(--accent-gold-text); }
.leaderboard-item:nth-child(2) .rank-num { color: var(--text-secondary); }
.leaderboard-item:nth-child(3) .rank-num { color: #b45309; }

.leader-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-strong);
}

.leader-avatar.user-avatar-lb {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
}

.leader-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.leader-xp {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    color: var(--accent-green-text);
}

/* ===== DIAGRAM WARNING NOTICE BANNER ===== */
.diagram-notice {
    background: var(--accent-gold-glow);
    border: 1px solid var(--accent-gold-glow);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    animation: slideDownNotice 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/* "Original exam visual included" is good news, and it used to arrive in the
 * same amber-and-warning-triangle dress as "you cannot answer this without the
 * paper". That mattered little while the banner mostly fired by accident; now
 * that it fires only when a figure IS attached, this is the only version most
 * students will ever see, and a warning colour on every diagram question reads
 * as something being wrong 1,705 times over. */
.diagram-notice.is-informative {
    background: var(--accent-green-glow);
    border-color: var(--accent-green-glow);
}
.diagram-notice.is-informative .notice-content strong { color: var(--accent-green-on-tint); }

@keyframes slideDownNotice {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.notice-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.notice-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notice-content strong {
    color: var(--accent-gold-text);
    font-size: 13px;
}

.notice-content span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.notice-link-btn {
    background: var(--accent-gold);
    color: #000;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    transition: var(--transition);
}

/* ===== WEAKNESS TARGETING WIDGET ===== */
.weakness-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.weakness-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.weakness-item:hover {
    border-color: rgba(239, 68, 68, 0.4);
}

.weakness-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.weakness-info h4 {
    font-size: 12px;
    color: var(--text-strong);
    font-weight: 700;
}

.weakness-info span {
    font-size: 10px;
    color: var(--text-secondary);
}

.weakness-score-badge {
    /* Was the dark-theme red tint, hardcoded, so light mode painted a
       light-theme red onto a dark-mode swatch at 2.66:1. */
    background: var(--accent-red-glow);
    color: var(--accent-red-text);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(239,68,68,0.3);
    margin-right: 12px;
}

.booster-quiz-btn {
    background: var(--accent-red);
    color: var(--text-on-accent);
    border: none;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

/* ===== INTERACTIVE SITE TOUR ===== */
.nav-tour-btn {
    background: transparent;
    border: 1px dashed var(--accent-gold);
    color: var(--accent-gold-text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    margin-left: 8px;
    box-shadow: 0 0 8px var(--accent-gold-glow);
}

.nav-tour-btn:hover {
    background: var(--accent-gold-glow);
    border-style: solid;
    transform: translateY(-1px);
}

.tour-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: transparent;
    backdrop-filter: none;
    z-index: 9999;
    display: none;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.tour-overlay.active {
    display: block;
}

.tour-highlight-box {
    position: absolute;
    border: 3.5px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 9999px rgba(10, 15, 30, 0.65), 0 0 20px var(--accent-gold);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 10000;
}

.tour-popover {
    position: absolute;
    width: 320px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    animation: tourPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

@keyframes tourPop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.tour-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tour-popover-header h3 {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-strong);
}

#tour-step-indicator {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.tour-popover-body p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tour-popover-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}

.tour-btn-skip {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.tour-btn-skip:hover {
    color: var(--accent-red);
}

.tour-nav-btns {
    display: flex;
    gap: 8px;
}

.tour-btn-nav {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.tour-btn-nav:hover {
    border-color: var(--border-hover);
}

.tour-btn-primary {
    background: var(--accent-gold);
    color: #000;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

/* ===== COMPACT WIDGET MODE (FOR INLINE WIX EMBEDS) ===== */
body.widget-mode {
    background: transparent !important;
}

body.widget-mode .sidebar {
    display: none !important;
}

body.widget-mode .top-nav {
    display: none !important;
}

body.widget-mode .app-layout {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

body.widget-mode .main-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    width: 100% !important;
}

body.widget-mode .view-content {
    padding: 0 !important;
    width: 100% !important;
}

body.widget-mode .view-panel {
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
}

body.widget-mode #mcq-quit-quiz {
    display: none !important;
}

body.widget-mode #mcq-back-chapters {
    display: none !important;
}

body.widget-mode .quiz-header {
    border-bottom: none !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

/* ===== STUDY HUB VIEW PANELS & GRIDS ===== */
#panel-study-hub {
    padding: 32px;
}
.study-revision-experience {
    margin-bottom: 24px;
}
.study-revision-hero {
    padding: 28px;
    border: 1px solid var(--accent-gold-glow);
    border-radius: 18px;
    background: radial-gradient(circle at top right, var(--accent-gold-glow), transparent 44%), linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
}
.study-revision-eyebrow { color: var(--accent-gold-text); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.study-revision-hero h2 { margin: 8px 0; font-size: clamp(24px, 4vw, 34px); color: var(--text-strong); }
.study-revision-hero p { max-width: 720px; color: var(--text-secondary); line-height: 1.6; }
.study-revision-progress { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 13px; color: var(--text-secondary); }
.study-revision-progress-bar { flex: 1; max-width: 360px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); }
.study-revision-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-blue), var(--accent-green)); transition: width .25s ease; }
.study-module-list { display: grid; gap: 16px; margin-top: 18px; }
.study-module { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.study-module-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.study-module h3 { margin: 0; color: var(--text-strong); font-size: 17px; }
/* The blue text token is tuned for the card, not for a blue-tinted pill: on
   its own glow it drops to 4.08:1. Secondary text carries it. */
.study-module-time { white-space: nowrap; color: var(--text-secondary); background: var(--accent-blue-glow); padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.study-module-summary { margin: 10px 0 16px; color: var(--text-secondary); line-height: 1.6; }
.study-key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.study-key-point { min-width: 0; padding: 13px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.study-key-point strong { display: block; color: var(--accent-gold-text); font-size: 13px; margin-bottom: 5px; }
.study-key-point span { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.study-worked-example { margin-top: 14px; padding: 16px; border-left: 3px solid var(--accent-gold); border-radius: 8px; background: var(--accent-gold-glow); }
.study-worked-example h4 { margin: 0 0 8px; color: var(--accent-gold-text); font-size: 13px; }
/* Secondary text on the gold-tinted panel measures 4.41:1 — this is the
   worked example a student reads, not a caption. */
.study-worked-example p { margin: 6px 0; color: var(--text-primary); line-height: 1.55; font-size: 13px; }
.study-worked-example p strong { color: var(--text-strong); }
/* --text-primary, not a hardcoded colour and not --text-secondary.
   --text-secondary lands at 4.38:1 on the gold tint behind this block, just
   under AA. Earlier today I "fixed" that by hardcoding #9db0a6, which is a
   dark-theme value — it measured 2.01:1 in light mode, far worse than the
   problem it replaced. Any fix here has to be a token, because this block
   renders on a white card and a near-black one. */
.study-worked-answer { color: var(--text-primary) !important; }
.study-retrieval { margin-top: 16px; padding: 16px; border-radius: 10px; background: var(--accent-green-glow); border: 1px solid var(--accent-green-glow); }
.study-retrieval h4 { margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; }
.study-retrieval p { margin: 0 0 12px; color: var(--text-strong); font-size: 14px; line-height: 1.5; }
.study-check-options { display: flex; flex-wrap: wrap; gap: 8px; }
.study-check-option { border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); padding: 9px 11px; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.study-check-option:hover { border-color: var(--accent-blue); }
.study-check-option:focus-visible { border-color: var(--accent-blue); }
.study-check-option.correct { background: var(--accent-green-glow); border-color: var(--accent-green); color: var(--accent-green-text); }
.study-check-option.incorrect { background: var(--accent-red-glow); border-color: var(--accent-red); color: var(--accent-red-text); }
.study-check-feedback { margin: 10px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.study-module-actions { display: flex; gap: 10px; margin-top: 16px; }
/* A label cannot be legible across a green-to-gold gradient: white fails at the
   gold end, dark fails at the green end. Solid gold with a dark label is the
   product's strongest call to action and measures 8.56:1. */
.study-drill-button { border: 0; border-radius: 9px; background: var(--accent-gold); color: var(--text-on-gold); padding: 11px 15px; cursor: pointer; font: inherit; font-weight: 750; }
.study-drill-button:hover { filter: brightness(1.12); }
.study-diagram { position: relative; min-height: 168px; margin: 16px 0 0; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)); border: 1px solid var(--accent-blue-glow); }
.study-diagram .axis-x, .study-diagram .axis-y { position: absolute; background: #94a3b8; transform-origin: left center; }
.study-diagram .axis-x { width: 76%; height: 1px; left: 11%; bottom: 20%; }
.study-diagram .axis-y { width: 67%; height: 1px; left: 11%; bottom: 20%; transform: rotate(-90deg); }
.study-diagram .ppc-curve { position: absolute; width: 57%; height: 91%; left: 11%; bottom: 20%; border: 3px solid var(--accent-gold); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; transform: rotate(11deg) skewX(-15deg); }
.study-diagram .diagram-point { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-green); left: 43%; bottom: 45%; box-shadow: 0 0 0 4px var(--accent-green-glow); }
.study-diagram-svg { color: var(--text-secondary); padding: 10px; min-height: 0; }
.study-diagram-svg svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.study-diagram .diagram-label { position: absolute; color: var(--text-secondary); font-size: 11px; }
.study-diagram .label-x { right: 9%; bottom: 9%; }
.study-diagram .label-y { left: 2%; top: 9%; transform: rotate(-90deg); }
.study-diagram .label-inside { left: 45%; bottom: 28%; color: var(--accent-green-text); }
.study-market-diagram .market-demand, .study-market-diagram .market-supply, .study-market-diagram .market-supply-tax { position:absolute; width:68%; height:2px; left:15%; top:48%; transform-origin:center; }
.study-market-diagram .market-demand { background:var(--accent-blue); transform:rotate(-28deg); }
.study-market-diagram .market-supply { background:var(--accent-green); transform:rotate(28deg); }
.study-market-diagram .market-supply-tax { background:var(--accent-gold); transform:rotate(28deg) translate(-4px,-32px); }
.study-market-diagram .market-d { left:20%; top:57%; color:var(--accent-blue-text); font-weight:800; }
.study-market-diagram .market-s { right:17%; top:29%; color:var(--accent-green-text); font-weight:800; }
.study-market-diagram .market-tax { right:10%; top:14%; color:var(--accent-gold-text); font-weight:800; }
.study-market-diagram .market-eq { left:48%; top:45%; color:var(--text-secondary); }
@media (max-width: 700px) {
    .study-revision-hero, .study-module { padding: 18px; }
    .study-key-grid { grid-template-columns: 1fr; }
    .study-module-head { flex-direction: column; }
    .study-revision-progress { flex-wrap: wrap; gap: 8px; }
    .study-revision-progress-bar { flex-basis: 100%; order: 3; max-width: none; }
    .study-check-options { display: grid; grid-template-columns: 1fr; }
    .study-check-option { min-height: 44px; width: 100%; font-size: 13px; }
    .study-module-actions, .study-drill-button { width: 100%; }
    .study-drill-button { min-height: 48px; }
}
.study-hub-header {
    margin-bottom: 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: var(--radius);
}
.topic-select-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Let the select drop to its own full-width row rather than be squeezed
       when the label and it cannot both fit. */
    flex-wrap: wrap;
}
.topic-select-wrapper label {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-strong);
    font-size: 15px;
}
.premium-select {
    /* THE FLOOR HAS TO REACH THE FAULT.
     *
     * A previous fix here set min-width: 240px because flex-basis:0 was letting
     * this shrink to ~113px. It stopped the worst of it and still truncated:
     * the longest option, "Chapter 3: Government Microeconomic Intervention
     * (AS)", measures 374px at this font, plus 36px of padding. 240 was chosen
     * as obviously-better-than-113, not measured against the real strings, so a
     * student picking a chapter still read "Chapter 1: Basic Economic Ide".
     *
     * 410px is the measured requirement. flex-basis carries it rather than
     * min-width so the wrapper above can wrap it onto its own row on a phone,
     * where 410 simply does not exist. */
    flex: 1 1 410px;
    min-width: 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.premium-select:hover, .premium-select:focus {
    border-color: var(--accent-green);
    outline: none;
}
.study-hub-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
}
.study-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: var(--transition);
}
.study-card:hover {
    border-color: var(--border-hover);
}
.card-header-with-badge {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card-badge {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 4px;
}
.video-badge { background-color: var(--accent-green-glow); color: var(--accent-blue-text); }
.audio-badge { background-color: var(--accent-gold-glow); color: var(--accent-gold-text); }
.info-badge { background-color: var(--accent-green-glow); color: var(--accent-green-text); }

.study-card h3 {
    font-size: 16px;
    color: var(--text-strong);
}
.video-player-wrapper {
    flex: 1;
    min-height: 380px;
    background-color: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
}
.mock-video-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-overlay {
    text-align: center;
    padding: 32px;
    max-width: 500px;
}
.player-play-icon {
    font-size: 48px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 12px;
}
.player-placeholder-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 16px;
    display: block;
}
.study-hub-side-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== MOBILE-FIRST PORTAL EXPERIENCE =====
   A phone is the primary student device: each view must become one readable
   column rather than retaining a cropped desktop grid.  These rules live after
   the desktop component rules deliberately, so they remain the final cascade. */
@media (max-width: 1024px) {
    .dashboard-three-column,
    .dashboard-two-column,
    .study-hub-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-two-column {
        height: auto;
    }

    .subtopic-card-v2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px 16px;
    }

    .question-theme-list {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    html, body {
        width: 100%;
        overscroll-behavior-x: none;
    }

    .app-layout {
        height: 100dvh;
        min-height: 100dvh;
    }

    .top-nav {
        height: 64px;
        min-height: 64px;
        padding: 0 16px;
    }

    .nav-left {
        gap: 8px;
    }

    .nav-left h1 {
        /* 16px, not 17px. At 17px the longest title, "Student Dashboard", is 3px
         * wider than the space left on a 375px screen, so the very first thing a
         * phone visitor reads is "Student Dashbo…". Every panel title now fits
         * whole; the ellipsis stays as the safety net for a narrower phone. */
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The board badge was wrapping "CIE 9708" onto two lines, standing 45px tall
     * in a 64px header and eating the width the title needed. One line. */
    .nav-left .card-badge {
        white-space: nowrap;
        padding: 4px 8px;
    }

    /* The subject name is dropped here, and only here.
     *
     * On a wide screen the badge reads "CIE 9708 Economics", because a bare
     * syllabus number does not tell a student what they are practising, and
     * four subjects now share the CIE prefix.
     *
     * A 375px header cannot hold it. Measured: .nav-left gets 235px, the title
     * takes 146px, so the badge has 81px, and the shortest full label
     * ("CIE 9702 Physics") is 135px. Nothing overflows if you let it through,
     * which is what makes this worth a comment: the h1 is the flex sibling that
     * absorbs the loss, and "Student Dashboard" silently becomes "S".
     *
     * The title was deliberately dropped to 16px above so it fits whole on a
     * phone. Keeping that. If the subject is wanted on mobile too, the honest
     * trade is to stop showing the panel title there, not to shrink both. */
    .nav-left .card-badge .badge-subject {
        display: none;
    }

    /* TOUCH TARGETS.
     *
     * Fourteen controls sat under the 44px a finger needs, and they were not
     * incidental ones: "Start Essay" — the button the whole essay journey hangs
     * off — was 32px, and the dashboard's diagnostic link was 21px. All of them
     * were the right WIDTH; every failure was height, because these are text
     * controls sized by their line box on a layout designed with a mouse in
     * mind. So set a floor rather than restyling anything: the look is
     * unchanged, the hit area is not.
     *
     * Reads as 44 rather than Android's 48 because these sit in vertical stacks
     * with real gaps between them, where 44 is the accepted floor. */
    .ql-link,
    .class-code-toggle,
    .filter-pill,
    .btn-write-essay,
    .btn-primary,
    .study-notes-tab,
    /* In the onboarding modal, which sits outside .view-panel and so falls
     * outside every panel sweep. That blind spot has cost us before. */
    .onboarding-diagnostic-link,
    #filter-paper-number,
    #filter-paper-year,
    #filter-paper-season {
        min-height: 44px;
    }

    /* The two dashboard links are laid out as text, so a min-height alone would
     * leave the label floating at the top of its new box. */
    .ql-link,
    .class-code-toggle {
        display: inline-flex;
        align-items: center;
    }

    .view-panel,
    #panel-study-hub {
        height: auto;
        min-height: 100%;
        padding: 16px;
    }

    .modal-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 20px 16px;
    }

    .modal-card {
        width: 100%;
        max-width: 480px;
        margin: auto 0;
        padding: 24px 20px;
    }

    .modal-overlay:has(.onboarding-card) {
        padding: 0;
        align-items: stretch;
    }

    .onboarding-card {
        display: flex;
        width: 100%;
        min-height: 100dvh;
        max-width: none;
        margin: 0;
        padding: max(32px, env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        flex-direction: column;
        /* "safe" matters here. Plain `center` on a flex column whose content
           is taller than the box centres the overflow, pushing the first
           children above the container's start — and you cannot scroll above
           a flex start edge. On a 375x812 phone the AP board note made this
           card 917px tall, which put "Set up your Economics practice" 73px
           off the top of the screen with no way to reach it: a new student's
           very first screen, with its heading missing. `safe center` centres
           it when it fits and top-aligns it when it does not. Browsers that
           do not know the keyword drop the declaration and fall back to
           flex-start, which is the behaviour we want anyway. */
        justify-content: safe center;
        box-shadow: none;
    }

    .onboarding-card h2 {
        max-width: 340px;
        font-size: 28px;
        line-height: 1.12;
    }

    .onboarding-card > p {
        max-width: 360px;
        font-size: 15px;
    }

    .onboarding-card .onboarding-step {
        margin-top: 24px;
    }

    .onboarding-card .modal-select {
        min-height: 54px;
        font-size: 16px;
    }

    .onboarding-card .radio-pill-group {
        gap: 10px;
    }

    .onboarding-card .radio-pill {
        min-height: 54px;
        padding: 12px 14px;
        font-size: 15px;
    }

    .onboarding-card .onboarding-start-btn {
        width: 100%;
        min-height: 52px;
        margin-top: 24px;
    }

    .onboarding-card .google-continue-btn {
        min-height: 52px;
        font-size: 14px;
    }

    .dashboard-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-bottom: 24px;
    }

    .mobile-continue-learning {
        display: grid;
        width: 100%;
        margin-top: 18px;
        padding: 15px 16px;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--accent-green);
        border-radius: 16px;
        background: linear-gradient(135deg, var(--accent-green), var(--accent-green-hover));
        box-shadow: 0 10px 24px var(--accent-green-glow);
        color: var(--text-on-accent);
        cursor: pointer;
        text-align: left;
        font: inherit;
    }

    .mobile-continue-icon {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--accent-green-text);
        font-size: 13px;
    }

    .mobile-continue-learning small,
    .mobile-continue-learning strong { display: block; }
    .mobile-continue-learning small {
        margin-bottom: 3px;
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .mobile-continue-learning strong { font-size: 15px; }
    .mobile-continue-arrow { font-size: 22px; }

    .hero-text h1 {
        font-size: 25px;
        line-height: 1.15;
    }

    .achievements-shelf {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hero-stat-box {
        min-width: 0;
        padding: 13px 10px;
    }

    .dashboard-three-column,
    .dashboard-two-column {
        gap: 20px;
        margin-top: 0;
    }

    #panel-dashboard .dashboard-three-column {
        display: flex;
        flex-direction: column;
    }
    #panel-dashboard .dashboard-column:nth-child(1) { order: 1; }
    #panel-dashboard .dashboard-column:nth-child(3) { order: 2; }
    #panel-dashboard .dashboard-column:nth-child(2) { order: 3; }
    #panel-dashboard .leaderboard-card,
    #panel-dashboard .dashboard-column:nth-child(2) .section-title:nth-of-type(2) { display: none; }

    .dashboard-column {
        gap: 12px;
    }

    .progress-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .section-title {
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .quest-card,
    .question-card,
    .study-card {
        padding: 16px;
    }

    .level-tabs {
        position: sticky;
        top: 0;
        z-index: 5;
        max-width: none;
        margin: -16px -16px 16px;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        padding: 8px 12px;
    }

    .level-tab {
        min-height: 48px;
        padding: 7px 5px;
        font-size: 12px;
        line-height: 1.15;
    }

    #mcq-resume-banner {
        align-items: stretch !important;
        flex-direction: column;
        padding: 16px !important;
        gap: 14px !important;
    }

    #mcq-resume-banner > div:first-child,
    #mcq-resume-banner > div:last-child {
        width: 100%;
    }

    #mcq-resume-banner > div:last-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #mcq-resume-banner button {
        min-height: 44px;
        padding: 8px !important;
    }

    .chapter-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .chapter-card-v2 {
        min-height: 0;
        padding: 18px;
    }

    .subtopic-card-v2 {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
        gap: 12px;
    }

    .subtopic-perf-badge {
        justify-self: start;
        text-align: left;
    }

    .question-theme-list {
        gap: 8px;
    }

    .question-theme-chip {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .quiz-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    /* A phone quiz is a focused task, not a scaled-down dashboard. Keep the
       next answer within reach and strip unnecessary desktop spacing. */
    #mcq-quiz-run-area {
        max-width: 680px;
        margin: 0 auto;
    }

    #mcq-quiz-run-area .quiz-header {
        position: sticky;
        top: 64px;
        z-index: 4;
        margin: -16px -16px 12px;
        padding: 10px 16px 12px;
        background: var(--surface-sticky);
        border-bottom: 1px solid var(--border);
        backdrop-filter: blur(12px);
    }

    #mcq-quiz-run-area .quiz-progress {
        width: 100%;
    }

    #mcq-quiz-run-area .question-card {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    #mcq-quiz-run-area .question-meta {
        gap: 6px;
        margin-bottom: 14px;
    }

    #mcq-quiz-run-area .question-meta span {
        padding: 4px 7px;
        font-size: 10px;
    }

    #mcq-quiz-run-area .diagram-notice {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }

    #mcq-quiz-run-area .notice-link-btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #mcq-quiz-run-area .question-visual {
        padding: 8px;
        margin-bottom: 16px;
    }

    #mcq-quiz-run-area .options-grid {
        gap: 10px;
    }

    #mcq-quiz-run-area .explanation-card {
        margin-top: 12px;
        padding: 16px;
    }

    #mcq-quiz-run-area .next-btn {
        min-height: 52px;
        display: none;
    }

    #mcq-quiz-run-area.mcq-ready-to-continue {
        padding-bottom: 88px;
    }

    .mcq-mobile-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: block;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(10, 15, 29, 0.78), rgba(10, 15, 29, 0.98) 26%);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(14px);
    }

    .mcq-mobile-action-bar.hidden {
        display: none;
    }

    .mcq-mobile-continue {
        display: block;
        width: min(100%, 680px);
        min-height: 52px;
        margin: 0 auto;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--accent-green), var(--accent-green-hover));
        box-shadow: 0 10px 28px var(--accent-green-glow);
        color: var(--text-on-accent);
        cursor: pointer;
        font: inherit;
        font-weight: 800;
        font-size: 16px;
    }

    .mcq-mobile-continue:disabled {
        cursor: default;
        opacity: 0.5;
    }

    .quiz-header .back-btn {
        align-self: flex-start;
        margin-bottom: 0;
    }

    .question-meta {
        flex-wrap: wrap;
    }

    .question-text {
        font-size: 16px;
        line-height: 1.55;
    }

    .option-btn {
        min-height: 54px;
        padding: 12px 14px;
        align-items: flex-start;
        font-size: 15px;
    }

    .option-letter {
        flex: 0 0 28px;
        margin-top: 1px;
    }

    .study-hub-header {
        margin-bottom: 16px;
        padding: 16px;
    }

    .topic-select-wrapper {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .topic-select-wrapper > div,
    .topic-select-wrapper .premium-select {
        min-width: 0 !important;
        width: 100% !important;
    }

    .study-hub-grid {
        gap: 16px;
    }

    .study-hub-side-column {
        gap: 16px;
    }

    .video-player-wrapper {
        min-height: 220px;
    }

    #study-library-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    button,
    a,
    select {
        touch-action: manipulation;
    }
}
.podcast-player-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.podcast-mock-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.podcast-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.audio-element-container {
    width: 100%;
}
.player-empty-state {
    color: var(--text-muted);
    font-size: 12px;
}
.infographic-viewer {
    flex: 1;
    min-height: 180px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.concept-map-placeholder {
    text-align: center;
    padding: 16px;
}
.concept-map-placeholder p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 8px 0 16px 0;
}
.btn-primary-sm {
    background-color: var(--accent-green);
    color: var(--text-on-accent);
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary-sm:hover {
    background-color: var(--accent-green-hover);
}


/* ===== PERFORMANCE ANALYTICS PANEL ===== */

.analytics-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.analytics-panel-header h2 {
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.analytics-panel-header p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Summary Stats Strip */
.analytics-summary-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.analytics-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 100px;
}
.analytics-big-num {
    font-size: 28px;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.1;
}
.analytics-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 2px;
}
.analytics-drill-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 13px;
    /* Was gold -> red. White bold text over the GOLD end measured 2.2:1 in dark
       theme and 3.4:1 in light, against the 4.5 that size needs, so half of
       every drill CTA was the least readable text in the portal. Red is 5.4:1
       dark and 5.9:1 light, so both stops now derive from that one token and the
       darker end is mixed from it rather than hardcoded — hardcoding a colour to
       fix a contrast bug is how the last contrast regression got introduced.
       Keeps the urgency the gradient was there for. */
    background: linear-gradient(135deg, var(--accent-red),
        color-mix(in srgb, var(--accent-red) 65%, #000));
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-on-accent);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    animation: pulse-glow 2s infinite;
}
.analytics-drill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* Section */
.analytics-section {
    margin-bottom: 28px;
}
.analytics-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Table */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.analytics-table thead tr {
    background: rgba(255,255,255,0.04);
}
.analytics-table th {
    padding: 10px 16px;
    /* 10px muted on the tinted header row measured 4.11:1. Column headings are
       navigation, not decoration — they take the secondary text colour and a
       size that can carry it. */
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.analytics-row {
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.analytics-row:last-child { border-bottom: none; }
.analytics-row:hover {
    background: rgba(255,255,255,0.04);
}
.analytics-subtopic-cell {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 40%;
}
.analytics-status-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.analytics-subtopic-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.analytics-chapter-tag {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 500;
}
.analytics-bar-cell {
    padding: 12px 16px;
    width: 35%;
}
.analytics-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.analytics-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-acc-cell {
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 800;
    width: 10%;
    font-family: var(--font-heading);
}
.analytics-attempted-cell {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-muted);
    width: 15%;
    font-weight: 500;
}

/* Empty state */
.analytics-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}
.analytics-empty-state h3 {
    font-size: 18px;
    color: var(--text-primary);
}
.analytics-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 320px;
}

.analytics-footnote {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 16px;
    padding-bottom: 24px;
}

/* ===== WEAKNESS RADAR IMPROVEMENTS ===== */
.weakness-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}
.weak-areas-drill-btn {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    /* Was gold -> red. White bold text over the GOLD end measured 2.2:1 in dark
       theme and 3.4:1 in light, against the 4.5 that size needs, so half of
       every drill CTA was the least readable text in the portal. Red is 5.4:1
       dark and 5.9:1 light, so both stops now derive from that one token and the
       darker end is mixed from it rather than hardcoded — hardcoding a colour to
       fix a contrast bug is how the last contrast regression got introduced.
       Keeps the urgency the gradient was there for. */
    background: linear-gradient(135deg, var(--accent-red),
        color-mix(in srgb, var(--accent-red) 65%, #000));
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-on-accent);
    cursor: pointer;
    margin-bottom: 8px;
    transition: var(--transition);
}
.weak-areas-drill-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
}

/* ===== SUPPORTING SCREEN MOBILE COMPLETION ===== */
@media (max-width: 640px) {
    .analytics-panel-header {
        margin-bottom: 18px;
    }
    .analytics-panel-header h2 { font-size: 20px; }
    .analytics-drill-btn {
        width: 100%;
        min-height: 48px;
        margin-left: 0;
    }
    .analytics-summary-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px;
        gap: 16px 12px;
    }
    .analytics-summary-stat { min-width: 0; }
    .analytics-big-num { font-size: 24px; }
    .analytics-table { display: block; overflow-x: auto; }
    .analytics-table th,
    .analytics-subtopic-cell,
    .analytics-bar-cell,
    .analytics-acc-cell,
    .analytics-attempted-cell { padding: 10px 12px; }

    #panel-study-hub .study-hub-header {
        display: flex !important;
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 16px !important;
    }
    #panel-study-hub .topic-select-wrapper,
    #panel-study-hub .chapter-mastery-progress-card {
        flex: none !important;
        min-width: 0 !important;
        width: 100%;
    }
    #panel-study-hub .chapter-mastery-progress-card {
        align-items: stretch !important;
        flex-direction: column;
        gap: 14px !important;
        padding: 14px !important;
    }
    #panel-study-hub .chapter-mastery-progress-card > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }
    #panel-study-hub .chapter-mastery-progress-card .btn-primary-sm {
        min-height: 44px;
        padding: 8px !important;
    }
    #ib-study-notes-card { grid-column: auto !important; }
    #ib-notes-links-container { grid-template-columns: minmax(0, 1fr) !important; }
    #panel-study-hub > div[style*="margin-top"] { padding-left: 0 !important; padding-right: 0 !important; }

    #panel-essay-workspace .canvas-layout {
        height: calc(100dvh - 64px);
        margin: -16px;
    }
    #panel-essay-workspace .writing-canvas { padding: 20px 16px; }
    #panel-essay-workspace .editor-header { align-items: flex-start; gap: 12px; }
    #panel-essay-workspace .editor-title { font-size: 17px; }
    #panel-essay-workspace .canvas-toolbar {
        left: 16px;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        transform: none;
        justify-content: space-between;
        gap: 6px;
        padding: 6px;
    }
    #panel-essay-workspace .toolbar-btn {
        flex: 1;
        min-height: 40px;
        padding: 6px 8px;
    }
    .essay-selection-container { padding: 0; }
    .essay-chapters-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .essay-chapter-card { padding: 16px; }

    #reader-modal .reader-card {
        width: 100% !important;
        height: 100dvh !important;
        margin: 0;
        border: 0;
        border-radius: 0 !important;
    }
    #reader-modal .reader-modal-header { padding: max(14px, env(safe-area-inset-top)) 16px 14px !important; }
    #reader-modal .reader-modal-header h2 { font-size: 15px !important; }
    #reader-modal .reader-modal-container { flex-direction: column; }
    #reader-modal .reader-sidebar {
        width: 100% !important;
        max-height: 38dvh;
        border-right: 0 !important;
        border-bottom: 1px solid var(--border);
        padding: 12px !important;
    }
    #reader-modal .reader-content-area { padding: 20px 16px !important; }
}

/* ===== ESSAY PRACTICE HUB SELECTOR ===== */
.essay-selection-container {
    padding: 32px;
}

.essay-chapters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.essay-chapter-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
    cursor: pointer;
}

.essay-chapter-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    background: rgba(255,255,255,0.01);
}

/* Prompt selector tabs inside essay cards */
.essay-prompt-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.prompt-tab {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    /* No nowrap/max-width/ellipsis here any more. Those capped the tab at
       160px and cut every prompt to about twenty characters, so two different
       essays could render identically and a phone — with no hover to reveal
       the title attribute — gave a student nothing to choose on. The button
       now sets its own width and clamps to two lines inline. */
    overflow: hidden;
}

.prompt-tab:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold-text);
    background: var(--accent-gold-glow);
}

.prompt-tab.active {
    border-color: var(--accent-gold);
    background: var(--accent-gold-glow);
    color: var(--accent-gold-text);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.card-header h3 {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.3;
}

.status-badge {
    /* 10px secondary on the tinted pill measured 4.41:1 — under AA, and this
       is the label telling a student whether they have started the essay. */
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-not-started {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

.status-draft {
    background: var(--accent-gold-glow);
    color: var(--accent-gold-text);
}

.status-graded {
    background: var(--accent-green-glow);
    color: var(--accent-green-text);
}

.card-body {
    flex: 1;
    margin-bottom: 16px;
}

.prompt-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    font-style: italic;
}

.criteria-preview {
    font-size: 11px;
    color: var(--text-muted);
}

.criteria-preview strong {
    display: block;
    margin-bottom: 4px;
}

.criteria-preview ul {
    padding-left: 12px;
    margin: 0;
}

.criteria-preview li {
    margin-bottom: 2px;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
}

.btn-write-essay {
    width: 100%;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
}

.ib-notes-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ib-notes-btn:hover {
    border-color: var(--accent-green);
    background: var(--accent-green-glow);
    transform: translateY(-1px);
}

.ib-notes-btn span.arrow {
    color: var(--accent-green-text);
    font-weight: 800;
}

/* Keep these last: the essay selector base rules are defined late in this
   stylesheet and must not turn a phone back into a multi-column desktop grid. */
@media (max-width: 640px) {
    .essay-selection-container { padding: 0; }
    .essay-chapters-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .essay-chapter-card { padding: 16px; }
}

/* ==========================================================================
   GRADED-ANSWER DRILLS
   Options are candidate ANSWERS, so the answer prose is set apart from the
   interface chrome. Correct / partial / wrong map onto the existing semantic
   accents rather than introducing a new palette.
   ========================================================================== */
.ga-wrap { display: flex; flex-direction: column; gap: 22px; }
.ga-loading, .ga-empty { color: var(--text-secondary); }
.ga-empty h2 { color: var(--text-primary); margin: 0 0 8px; }

.ga-head { display: flex; flex-direction: column; gap: 8px;
    border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.ga-kicker { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-gold-text); font-weight: 600; }
.ga-head h2 { margin: 0; font-family: var(--font-heading); }
.ga-standfirst { margin: 0; color: var(--text-secondary); max-width: 62ch; }
.ga-progress { margin: 0; font-size: 13px; color: var(--text-muted);
    font-variant-numeric: tabular-nums; }

.ga-habits { background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 16px; }
.ga-habits h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-primary); }
.ga-habits ul { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px; }
.ga-habits li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    font-size: 13px; color: var(--text-secondary); }
.ga-habits li b { margin-left: auto; color: var(--accent-gold-text);
    font-variant-numeric: tabular-nums; }
.ga-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    padding: 2px 7px; border-radius: 4px; background: var(--accent-green-glow);
    color: var(--accent-green-text); }

.ga-grid { display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ga-card { display: flex; flex-direction: column; gap: 6px; text-align: left;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px; cursor: pointer;
    color: var(--text-primary); font: inherit; transition: var(--transition); }
.ga-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.ga-card:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.ga-card-top { display: flex; gap: 10px; justify-content: space-between;
    align-items: baseline; }
.ga-card-topic { font-weight: 600; font-size: 14px; }
.ga-card-marks { font-size: 12px; color: var(--accent-gold-text); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-card-paper { font-size: 12px; color: var(--text-muted); }
.ga-card-state { font-size: 12px; color: var(--text-muted); }
.ga-card-state.on { color: var(--accent-green-text); }

.ga-back { align-self: flex-start; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font: inherit; font-size: 13px; padding: 0; }
.ga-back:hover { color: var(--text-primary); }

.ga-stem { background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 18px;
    display: flex; flex-direction: column; gap: 14px; }
.ga-stem-head { display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: space-between; align-items: baseline; }
.ga-prompt { margin: 0; font-size: 16px; line-height: 1.55; }
.ga-ao { display: grid; gap: 1px; margin: 0; background: var(--border);
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ga-ao div { background: var(--bg-secondary); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px; }
.ga-ao dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); }
.ga-ao dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary);
    font-variant-numeric: tabular-nums; }

.ga-layer { background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; margin-top: 16px; }
.ga-layer-head { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px;
    background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.ga-layer-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; font-weight: 700; color: var(--accent-gold-text);
    font-variant-numeric: tabular-nums; }
.ga-layer-t { margin: 0; font-weight: 600; font-size: 15px; }
.ga-layer-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }
.ga-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }

.ga-opt { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px; color: var(--text-primary);
    transition: var(--transition); }
.ga-opt:hover:not(.done) { border-color: var(--accent-green);
    background: var(--accent-green-glow); }
.ga-opt:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.ga-opt.done { cursor: default; }
.ga-opt.dim { opacity: .55; }
.ga-opt-id { display: inline-grid; place-items: center; width: 26px; height: 26px;
    border: 1px solid var(--border-hover); border-radius: 5px; margin-right: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
    font-weight: 700; text-transform: uppercase; vertical-align: top; }
/* The answer prose reads as written exam work, distinct from the UI chrome. */
.ga-opt-text { display: inline-block; width: calc(100% - 40px); vertical-align: top;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-size: 15px; line-height: 1.6; max-width: 68ch; }
.ga-opt.ok { border-color: var(--accent-green); background: var(--accent-green-glow); }
.ga-opt.ok .ga-opt-id { background: var(--accent-green); color: var(--text-on-accent);
    border-color: var(--accent-green); }
.ga-opt.no { border-color: var(--accent-red); background: var(--accent-red-glow); }
.ga-opt.no .ga-opt-id { background: var(--accent-red); color: var(--text-on-accent);
    border-color: var(--accent-red); }
.ga-opt.part { border-color: var(--accent-gold); background: var(--accent-gold-glow); }
.ga-opt.part .ga-opt-id { background: var(--accent-gold); color: var(--text-on-gold);
    border-color: var(--accent-gold); }

.ga-verdict { display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
    padding-top: 12px; border-top: 1px dashed var(--border-hover); }
.ga-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ga-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    padding: 3px 8px; border-radius: 4px; font-weight: 600; }
.ga-chip.good { background: var(--accent-green); color: var(--text-on-accent); }
.ga-chip.bad { background: var(--accent-red); color: var(--text-on-accent); }
.ga-chip.part { background: var(--accent-gold); color: var(--text-on-gold); }
.ga-chip.ghost { background: transparent; border: 1px solid var(--border-hover);
    color: var(--text-secondary); font-weight: 500; }
.ga-why { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 70ch; }
.ga-why strong { color: var(--text-primary); }

.ga-score { display: flex; align-items: center; gap: 10px; font-size: 13px;
    color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ga-score b { color: var(--text-primary); }
.ga-bar { display: block; flex: 1; max-width: 180px; height: 6px; overflow: hidden;
    background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; }
.ga-bar i { display: block; height: 100%; background: var(--accent-gold);
    transition: width .45s var(--transition); }
.ga-bar.top i { background: var(--accent-green); }

.ga-note { padding: 14px 18px 18px; background: var(--bg-secondary);
    border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6;
    color: var(--text-secondary); }
.ga-note strong { color: var(--text-primary); }

@media (max-width: 640px) {
    .ga-opt-text { display: block; width: 100%; margin-top: 8px; }
    .ga-grid { grid-template-columns: 1fr; }
}

/* Markbands scheme (IB) — shown instead of the AO grid for boards that award
   a level rather than weighting assessment objectives. */
.ga-scheme { display: flex; flex-direction: column; gap: 10px; }
.ga-scheme-label { margin: 0; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); }
.ga-bands { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    counter-reset: none; }
.ga-bands li { background: var(--bg-secondary); padding: 8px 10px; display: grid;
    grid-template-columns: 3.4rem 4.6rem 1fr; gap: 10px; align-items: baseline;
    font-size: 13px; }
.ga-band-range { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600; color: var(--accent-gold-text); font-variant-numeric: tabular-nums; }
.ga-band-level { font-size: 12px; color: var(--text-muted); }
.ga-band-desc { color: var(--text-secondary); line-height: 1.5; }
.ga-criteria { list-style: none; margin: 0; padding: 0; display: flex;
    flex-wrap: wrap; gap: 6px; }
.ga-criteria li { font-size: 12px; padding: 3px 8px; border-radius: 4px;
    background: var(--accent-green-glow); color: var(--accent-green-text); }
@media (max-width: 640px) {
    .ga-bands li { grid-template-columns: 3.4rem 1fr; }
    .ga-band-desc { grid-column: 1 / -1; }
}

/* --- Business Studies 0450 Paper 1 model answers -------------------------
   Rendered by business-structured.js into #business-structured-root. Built out
   of the same tokens as the graded-answer drills above so the two written
   surfaces read as one product, and colour-coded by what each block is FOR:
   the model answer is neutral, the mark breakdown gold, the common error red
   and the wasted-effort block muted. A student skimming should be able to tell
   "what to write" from "what not to bother writing" without reading. */
.bs-wrap { display: flex; flex-direction: column; gap: 22px; }
.bs-loading { color: var(--text-secondary); }
.bs-head { display: flex; flex-direction: column; gap: 8px;
    border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.bs-kicker { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-gold-text); font-weight: 700; }
.bs-head h2 { margin: 0; font-family: var(--font-heading); }
.bs-standfirst { margin: 0; color: var(--text-secondary); max-width: 68ch; line-height: 1.6; }
.bs-count { margin: 0; font-size: 13px; color: var(--text-muted); }
.bs-note { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 68ch;
    border-left: 2px solid var(--border); padding-left: 12px; line-height: 1.6; }
/* The syllabus these papers were set on, which is NOT the syllabus the student
 * is entered for. Read as normal secondary text rather than as a footnote,
 * because it is the difference between practice and their own paper. */
.bs-provenance { margin: 0; font-size: 13px; color: var(--text-secondary); }
.bs-replacement { border-left-color: var(--accent-gold-text); color: var(--text-secondary); }

.bs-search { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.bs-search span { font-size: 12px; color: var(--text-secondary); }
.bs-search input { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-secondary); color: var(--text-primary); font-size: 14px; }
.bs-search input:focus { outline: 2px solid var(--accent-gold); outline-offset: 1px; }

/* The two banks. A student has to be able to tell at a glance which section
 * they are in, because one is their syllabus and the other is the withdrawn
 * one, so each bank gets a rule above it and its own heading weight rather
 * than being two lists that run together. */
.bs-banks { display: flex; flex-direction: column; gap: 34px; }
.bs-bank { display: flex; flex-direction: column; gap: 12px; }
.bs-bank h3 { margin: 0; font-family: var(--font-heading); font-size: 18px;
    color: var(--text-primary); }
/* The current syllabus leads, and is the only section marked in the accent
 * colour. The 0450 section is deliberately quieter: it is the depth, not the
 * headline. */
.bs-bank-specimen h3 { color: var(--accent-gold-text); }
.bs-bank-legacy { border-top: 1px solid var(--border); padding-top: 26px; }
.bs-shape { border-left-color: var(--accent-green-text); }
.bs-year h4 { margin: 0 0 10px; font-size: 15px; color: var(--text-primary); }
.bs-year + .bs-year { margin-top: 20px; }
.bs-grid { display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.bs-card, .bs-hit { display: flex; flex-direction: column; gap: 4px; text-align: left;
    padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-primary); cursor: pointer;
    transition: var(--transition); font: inherit; width: 100%; }
.bs-card:hover, .bs-hit:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.bs-card-title { font-weight: 600; font-size: 14px; }
.bs-card-meta { font-size: 12px; color: var(--text-muted); }
.bs-hit { margin-bottom: 8px; }
.bs-hit-q { line-height: 1.5; font-size: 13px; }

.bs-back { align-self: flex-start; padding: 7px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-secondary);
    color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 13px; }
.bs-back:hover { color: var(--text-primary); border-color: var(--border-hover); }

.bs-question { border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-card); padding: 18px; }
.bs-question h3 { margin: 0 0 12px; font-size: 16px; color: var(--accent-gold-text); }
.bs-case { background: var(--bg-secondary); border-radius: 8px; padding: 14px 16px;
    margin-bottom: 14px; }
.bs-case h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted); }
.bs-case p { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.65; font-size: 14px; }
.bs-case p:last-child { margin-bottom: 0; }

.bs-part { border-top: 1px solid var(--border); }
.bs-part-head { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 10px;
    align-items: baseline; width: 100%; text-align: left; padding: 12px 2px;
    background: none; border: 0; color: var(--text-primary); cursor: pointer; font: inherit; }
.bs-part-head:hover .bs-part-q { color: var(--accent-gold-text); }
.bs-part-label { font-weight: 700; color: var(--accent-gold-text); }
.bs-part-q { line-height: 1.5; }
.bs-part-marks { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.bs-part-body { padding: 0 2px 16px; }

.bs-reveal { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--accent-gold);
    background: var(--accent-gold-glow); color: var(--accent-gold-text);
    cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.bs-answer { display: flex; flex-direction: column; gap: 12px; }
.bs-block { border-radius: 8px; padding: 12px 14px; background: var(--bg-secondary);
    border-left: 3px solid var(--border); }
.bs-block h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted); }
.bs-block p { margin: 0 0 8px; line-height: 1.65; font-size: 14px; color: var(--text-secondary); }
.bs-block p:last-child { margin-bottom: 0; }
.bs-model { border-left-color: var(--accent-green-text); }
.bs-model p { color: var(--text-primary); }
.bs-scores { border-left-color: var(--accent-gold-text); }
.bs-error { border-left-color: var(--accent-red-text); }
.bs-wasted { border-left-color: var(--text-muted); }
.bs-scheme summary { cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 4px 0; }
.bs-scheme pre { white-space: pre-wrap; font-size: 12.5px; line-height: 1.6;
    color: var(--text-secondary); background: var(--bg-secondary); border-radius: 8px;
    padding: 12px 14px; margin: 6px 0 0; font-family: inherit; }
.bs-source { margin: 0; font-size: 12px; color: var(--text-muted); }

/* --- The 9708 data response stimulus -------------------------------------
   cie-data-response.js reuses everything above, because a data response and a
   0450 case study are the same object: source material with parts hanging off
   it. Only the pieces 0450 has no equivalent of are new.

   The table is the reason this block exists. A 9708 stimulus is usually a grid
   of figures, and a part reading "using Table 1.1, calculate" cannot be
   answered from a run-on line of numbers, so the extractor keeps the cells and
   this renders them as a real table. It scrolls INSIDE its own wrapper: a five
   column table of country data is wider than a phone, and letting it push the
   panel sideways would make the parts below it unreadable as well. */
.dr-stimulus p { font-size: 14px; }
.bs-tablewrap { overflow-x: auto; margin: 10px 0 12px; }
.bs-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.bs-table th, .bs-table td { border: 1px solid var(--border); padding: 7px 10px;
    text-align: right; color: var(--text-secondary); white-space: nowrap; }
.bs-table thead th { background: var(--bg-card); color: var(--text-primary);
    font-weight: 600; text-align: center; white-space: normal; }
.bs-table tbody th[scope="row"] { text-align: left; color: var(--text-primary);
    font-weight: 600; white-space: normal; }
/* The lead-in above a roman sub-part, "Explain how a fall in the rate of
   interest would be likely to affect expenditure on", without which "(i)
   consumption," is not a question at all. */
.dr-leadin { color: var(--text-muted); font-style: italic; }

@media (max-width: 640px) {
    .bs-part-head { grid-template-columns: 2rem 1fr; }
    .bs-part-marks { grid-column: 2; }
    .bs-question { padding: 14px; }
    .bs-table th, .bs-table td { padding: 6px 8px; font-size: 12px; }
}

/* --- Marked essay result -------------------------------------------------
   The grader's marks and written feedback arrive in the submit response. They
   used to be dropped on the floor: the student saw a toast saying the essay
   had gone to the tutor queue and nothing else, which is the one thing the
   Essay Arena exists to give back. */
.essay-result {
    margin: 18px 0 0;
    /* The canvas toolbar floats over the bottom of this panel, so the last
       strand and the final paragraph need room to clear it. */
    padding: 22px 24px 96px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.essay-result.hidden { display: none; }
.essay-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.essay-result-kicker {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.essay-result-head h3 {
    margin: 4px 0 0;
    font-size: 30px;
    font-weight: 800;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.essay-strands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.essay-strand {
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.essay-strand b {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.essay-strand span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.essay-result-feedback { margin-bottom: 8px; }
.essay-annotations { display: grid; gap: 12px; margin-top: 18px; }
.essay-annotation {
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 10px 10px 0;
}
.essay-annotation blockquote {
    margin: 0 0 8px;
    font-style: italic;
    color: var(--text-secondary);
}
.essay-annotation p { margin: 0; color: var(--text-primary); }
.essay-annotation .essay-annotation-strand {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--accent-gold-text);
    background: var(--accent-gold-glow, rgba(214, 168, 74, 0.12));
    border-radius: 999px;
}

/* --- Reduced motion ------------------------------------------------------
   Nothing in the portal honoured prefers-reduced-motion: the hero floated,
   panels slid in, toasts flew, the progress ring swept and confetti rained on
   a student who has asked their operating system for none of it. Motion that
   carries meaning (a spinner saying "still loading") keeps a slow, non-moving
   equivalent rather than vanishing. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* A spinner with no animation reads as a frozen page, so it stays — just
       slowly, without the fast rotation that causes the problem. */
    [class*="spinner"],
    .loading-spinner {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Skip link — offscreen until it is focused, then pinned over the header.
   Not `display:none`, which would take it out of the tab order and defeat
   the point; it stays focusable and simply sits outside the viewport. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--accent-green, #4a9d6c);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 0;
    outline: 2px solid var(--accent-gold, #d4a84b);
    outline-offset: 2px;
}
/* The main region is focused on panel change, but it is a container, not a
   control — a ring around the whole page would read as a bug. */
#portal-main:focus {
    outline: none;
}

/* Teaching diagrams inside notes.
 *
 * The SVGs carry no background of their own so one file serves both themes, so
 * the card behind them is what separates the drawing from the page. Colours in
 * the artwork are measured against BOTH grounds by
 * scripts/validate-notes-diagrams.js rather than trusted by eye. */
.notes-figure {
    margin: 0 0 26px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
}
.notes-figure img {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.notes-figure figcaption {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Past-paper figures are the exam board's own line art: black ink on a white
 * ground, which the file carries with it. On the dark portal that white plate
 * has to look deliberate rather than like a rendering accident, so give it a
 * radius and let the card breathe around it. */
/* The tutor diagrams are the same case: raster artwork drawn on a white ground,
 * so they need the same deliberate white plate rather than appearing to float
 * on the dark page. */
.notes-figure img[src*="/past-paper/"],
.notes-figure img[src*="/tutor/"] {
    background: #fff;
    border-radius: 6px;
    padding: 12px;
}
.notes-figure__source {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted, var(--text-secondary));
    font-style: italic;
}

/* WHERE THIS QUESTION SITS IN THE SYLLABUS.
 *
 * The question card named the board, paper, session and question number, and
 * then a themed concept, but never the chapter or subtopic. A student could not
 * place what they were answering against the syllabus they revise from. This
 * line runs above the meta pills and carries chapter then subtopic. */
.question-syllabus-path {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.question-syllabus-path.hidden { display: none; }
.qsp-sep { opacity: 0.45; }
/* The subtopic is the thing being practised, so it is the part that reads as
 * the answer to "what am I doing"; the chapter is context around it. */
.qsp-current {
    color: var(--text-strong);
    font-weight: 700;
}

/* The theme chips are a row of phrases with no on-screen explanation of what
 * they are. This names them. */
.question-theme-lead {
    align-self: center;
    margin-right: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* The chapter card's chips are subtopics and were unlabelled, the same gap the
 * theme chips had one level down. Named so a student can tell what the row is
 * rather than inferring it. */
.ch-subtopics-lead {
    align-self: center;
    margin-right: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Deep-link loading veil.
 *
 * Set by the synchronous head script in index.html when the URL names a
 * destination, cleared by app.js once it knows where the reader is going.
 * See the comment there for why this exists: the dashboard is "active" in the
 * markup and the deep-link decision is behind a fetch, so without this a blog
 * CTA showed the dashboard, then a panel switch, then the questions.
 *
 * It hides the app rather than switching panels early. Switching early means
 * guessing the destination before the data is loaded, and guessing wrong
 * strands the reader on an empty panel. Hiding is reversible: clear the flag
 * and whatever the app decided is simply there. */
.eie-deeplink-loading .app-layout {
    visibility: hidden;
}

.eie-deeplink-loading::after {
    content: 'Getting your questions ready';
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #0c1210);
    color: var(--text-secondary, #9aa8a2);
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0.01em;
    z-index: 9999;
}

@media (prefers-reduced-motion: no-preference) {
    .eie-deeplink-loading::after {
        animation: eie-deeplink-fade 1.4s ease-in-out infinite;
    }
}

@keyframes eie-deeplink-fade {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}