/**
 * SSC Exam Template — reading modes (Day / Eye protector / Night)
 * -----------------------------------------------------------------------------
 * Loads AFTER css/ssc-exam-template.css, which has been converted to read every
 * colour from a --ssc-* custom property. This file supplies the values.
 *
 * Day is byte-for-byte the old palette, so an untouched install renders exactly
 * as it did before this file existed.
 *
 * Three sections:
 *   1. Tokens        — the palettes themselves
 *   2. Toggle        — the small three-button control in the top bar
 *   3. Reconciliation — colours hardcoded in quizSEO_front.css that would
 *                       otherwise punch white boxes through a dark exam
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.quizSEO_ssc_official,
.quizSEO_ssc_official[data-ssc-theme="day"] {
    --ssc-brand:            #1e5a8a;
    --ssc-brand-dark:       #164a70;
    --ssc-on-brand:         #ffffff;
    --ssc-on-status:        #ffffff;
    --ssc-on-warn:          #000000;

    /* Solution / answer-review box surface. Kept as its own token (rather
       than reusing --ssc-surface everywhere) so the review answer box can
       stay a clean white regardless of reading mode — see the Eye-protector
       block below, where --ssc-surface itself is intentionally a warm tan
       for the rest of the page but the solution box should not inherit
       that tint. Night is left to fall back to --ssc-surface (dark) since
       forcing white there would defeat the point of the dark mode. */
    --ssc-solution-bg:      #ffffff;

    --ssc-surface:          #ffffff;
    --ssc-surface-fade:     rgba(255, 255, 255, 0);
    --ssc-surface-alt:      #f8fafc;
    --ssc-surface-alt-fade: rgba(248, 250, 252, 0);
    --ssc-surface-foot:     #f1f5f9;

    --ssc-line:             #c5d0e0;
    --ssc-line-soft:        #e5e7eb;
    --ssc-line-strong:      #94a3b8;

    --ssc-head:             #0f3d4c;
    --ssc-text:             #334155;
    --ssc-text-strong:      #000000;
    --ssc-muted:            #5f5e5a;

    --ssc-chip:             #eef4fb;
    --ssc-chip-hover:       #dce8f6;

    --ssc-ok:               #16a34a;
    --ssc-bad:              #dc2626;
    --ssc-warn:             #eab308;
    --ssc-mark:             #7c3aed;
    --ssc-none:             #94a3b8;
    --ssc-current:          #0073aa;

    /* Same colour, two jobs. --ssc-ok fills a palette chip that carries white
       text; --ssc-ok-text is that colour used AS text on the page surface.
       On a light page one value serves both. On a dark one it cannot: the fill
       must go darker for white text to read, and the text must go lighter for
       the same reason. Day keeps them identical, so nothing here changes. */
    --ssc-ok-text:          #16a34a;
    --ssc-bad-text:         #dc2626;
    --ssc-link:             #1e5a8a;

    --ssc-muted-cool:       #475569;
    --ssc-muted-warm:       #5f5e5a;
    --ssc-surface-raised:   #e8eef5;
    --ssc-line-cool:        #9db0c5;
    --ssc-line-hover:       #cbd5e1;
    --ssc-line-neutral:     #cccccc;
    --ssc-line-soft-cool:   #e2e8f0;
    --ssc-line-soft-warm:   #d7e3ea;
    --ssc-text-neutral:     #333333;

    --ssc-timer-border:     #000000;
    --ssc-muted-slate:      #64748b;
    --ssc-shadow:           rgba(15, 61, 76, .08);
    --ssc-media-filter:     none;

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Eye protector — warm low-blue paper.
   Nothing on screen is pure white and nothing is pure black; the accent moves
   off blue entirely so the brightest thing in view is still a warm tone.
   -------------------------------------------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] {
    --ssc-brand:            #8a5a1e;
    --ssc-brand-dark:       #6f4715;
    --ssc-on-brand:         #fff8e6;
    --ssc-on-status:        #fffaf0;
    --ssc-on-warn:          #3a2c10;

    /* Solution box stays white even in Eye-protector mode — see the note
       on --ssc-solution-bg in the Day block above. */
    --ssc-solution-bg:      #ffffff;

    --ssc-surface:          #fbf3da;
    --ssc-surface-fade:     rgba(251, 243, 218, 0);
    --ssc-surface-alt:      #f4e9c8;
    --ssc-surface-alt-fade: rgba(244, 233, 200, 0);
    --ssc-surface-foot:     #efe2bb;

    --ssc-line:             #d9c48c;
    --ssc-line-soft:        #e4d5aa;
    --ssc-line-strong:      #b9a06a;

    --ssc-head:             #4a3719;
    --ssc-text:             #5a462a;
    --ssc-text-strong:      #3a2c10;
    --ssc-muted:            #7a6742;

    --ssc-chip:             #f7edd2;
    --ssc-chip-hover:       #eee0b8;

    --ssc-ok:               #356a26;
    --ssc-bad:              #a8351f;
    --ssc-warn:             #c9971b;
    --ssc-mark:             #6b3fa0;
    --ssc-none:             #a99772;
    --ssc-current:          #8a5a1e;

    --ssc-ok-text:          #356a26;
    --ssc-bad-text:         #a8351f;
    --ssc-link:             #8a5a1e;

    --ssc-muted-cool:       #6f5c38;
    --ssc-muted-warm:       #7a6742;
    --ssc-surface-raised:   #f0e2b6;
    --ssc-line-cool:        #cbb47a;
    --ssc-line-hover:       #c9b078;
    --ssc-line-neutral:     #d3bd85;
    --ssc-line-soft-cool:   #e4d5aa;
    --ssc-line-soft-warm:   #e0cf9f;
    --ssc-text-neutral:     #5a462a;

    --ssc-timer-border:     #3a2c10;
    --ssc-muted-slate:      #7d6a45;
    --ssc-shadow:           rgba(90, 70, 42, .10);
    --ssc-media-filter:     sepia(.18) saturate(.92) brightness(.98);

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Night — deep slate, never pure black.
   Pure black behind near-white text haloes each glyph, which over a two-hour
   paper is more tiring than the glare it was meant to fix. Status colours are
   desaturated too: #16a34a on white reads correctly, but on #131a22 it glows.
   -------------------------------------------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="night"] {
    --ssc-brand:            #356fa3;
    --ssc-brand-dark:       #2b5c88;
    --ssc-on-brand:         #f2f8ff;
    --ssc-on-status:        #f7fbff;
    --ssc-on-warn:          #14100a;

    --ssc-surface:          #131a22;
    --ssc-surface-fade:     rgba(19, 26, 34, 0);
    --ssc-surface-alt:      #1a222c;
    --ssc-surface-alt-fade: rgba(26, 34, 44, 0);
    --ssc-surface-foot:     #182029;

    --ssc-line:             #2e3a48;
    --ssc-line-soft:        #28323e;
    --ssc-line-strong:      #46586c;

    --ssc-head:             #dce7f2;
    --ssc-text:             #c3ced9;
    --ssc-text-strong:      #e8eff7;
    --ssc-muted:            #8d9baa;

    --ssc-chip:             #1e2a38;
    --ssc-chip-hover:       #263548;

    --ssc-ok:               #26814a;
    --ssc-bad:              #c0403c;
    --ssc-warn:             #c9a227;
    --ssc-mark:             #8b5fbf;
    --ssc-none:             #5c6b7c;
    --ssc-current:          #356fa3;

    --ssc-ok-text:          #4fbf80;
    --ssc-bad-text:         #f08a86;
    --ssc-link:             #7fb3e0;

    --ssc-muted-cool:       #93a2b2;
    --ssc-muted-warm:       #8d9baa;
    --ssc-surface-raised:   #1e2833;
    --ssc-line-cool:        #3a4a5c;
    --ssc-line-hover:       #405366;
    --ssc-line-neutral:     #35424f;
    --ssc-line-soft-cool:   #28323e;
    --ssc-line-soft-warm:   #2b3542;
    --ssc-text-neutral:     #c3ced9;

    --ssc-timer-border:     #6b7f94;
    --ssc-muted-slate:      #93a2b2;
    --ssc-shadow:           rgba(0, 0, 0, .45);
    --ssc-media-filter:     brightness(.86) contrast(1.04);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Inherited-text floor.

   The SSC frame never declares a base `color`, so any text it does not style
   explicitly inherits the site theme's body colour — near-black on most. That
   is invisible on a night surface, and it is not a closed set: it covers
   .ssc-cat-timer-value, anything pasted into a question by an author, and any
   markup a future release adds. Enumerating them is a losing game, so the
   frame gets a floor instead.

   Applied only to eye and night. Day continues to inherit from the site theme
   exactly as it always has, so no existing exam shifts colour. */
.quizSEO_ssc_official[data-ssc-theme="eye"],
.quizSEO_ssc_official[data-ssc-theme="night"] {
    color: var(--ssc-text);
}

.quizSEO_ssc_official .ssc-cat-timer-value {
    font-variant-numeric: tabular-nums;
}

/* --- main timer border ----------------------------------------------------
   The SSC sheet strips this element bare with `border: none !important`, so
   the box has to be put back at higher specificity.

   Black in Day and near-black in Eye protector, as asked. Night uses a lighter
   slate instead: a black border on a #1a222c bar is invisible, so asking for
   black there would mean asking for no border at all. Change
   --ssc-timer-border if you want it literally black in every mode. */
.quizSEO_ssc_official .ssc-topbar .quizSEO_time_limit {
    border: 1.5px solid var(--ssc-timer-border) !important;
    border-radius: 4px !important;
    padding: 2px 9px !important;
    background: transparent !important;
}

/* Question images and embeds are authored against white paper. Left raw they
   are the brightest object on a night screen — a flashbulb between questions. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main img,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main img,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description img,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description img {
    filter: var(--ssc-media-filter);
}

/* Radios and checkboxes are UA-painted; without this they stay bright white. */
.quizSEO_ssc_official input[type="radio"],
.quizSEO_ssc_official input[type="checkbox"] {
    accent-color: var(--ssc-brand);
}

/* Repaint is instant, but a 160ms fade stops the whole screen snapping at the
   candidate mid-question. Suppressed for reduced-motion users below. */
.quizSEO_ssc_official,
.quizSEO_ssc_official .ssc-topbar,
.quizSEO_ssc_official .ssc-exam-main,
.quizSEO_ssc_official .ssc-exam-sidebar,
.quizSEO_ssc_official .ssc-footer-bar,
.quizSEO_ssc_official .quizSEO_questionListItem {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}


/* ==========================================================================
   2. THE TOGGLE

   Hosted in .ssc-theme-bar, a thin strip at the top of .ssc-exam-main.

   The top bar was the obvious home and the wrong one: applyMobileHeader()
   moves the clock container, onQuizFinished() hides it, and the qmeta row it
   would otherwise fall back to is display:none on mobile. .ssc-exam-main is
   never restructured, so the control needs no relocation logic except when
   the quiz finishes and that whole subtree is hidden.
   ========================================================================== */

.quizSEO_ssc_official .ssc-theme-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    /* Above the question text a .quizSEO_langBar may float into. */
    position: relative;
    z-index: 2;
}

.quizSEO_ssc_official .ssc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--ssc-line);
    border-radius: 5px;
    background: var(--ssc-surface);
    line-height: 0;
}

.quizSEO_ssc_official .ssc-theme-btn {
    width: 26px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: var(--ssc-muted) !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .13s ease, color .13s ease;
}

.quizSEO_ssc_official .ssc-theme-btn svg {
    width: 13px;
    height: 13px;
    display: block;
    pointer-events: none;
}

.quizSEO_ssc_official .ssc-theme-btn:hover {
    background: var(--ssc-chip) !important;
    color: var(--ssc-head) !important;
}

.quizSEO_ssc_official .ssc-theme-btn:focus-visible {
    outline: 2px solid var(--ssc-brand);
    outline-offset: 1px;
}

.quizSEO_ssc_official .ssc-theme-btn[aria-pressed="true"] {
    background: var(--ssc-brand) !important;
    color: var(--ssc-on-brand) !important;
}

/* Deliberately NOT hidden outside the running quiz, unlike .ssc-fs-toggle.
   The start screen is the natural place to pick a mode before committing to a
   two-hour paper, and the result page is long-form reading of its own. */

/* --- desktop: sharing the section-clock row -------------------------------
   .ssc-topbar__cat-time is display:flex, justify-content:flex-end, and on
   desktop is pushed to the right of the qmeta row via margin-left:auto.
   Order inside the group: [theme] [fullscreen] [Section Time] with a
   consistent gap between each. */
.quizSEO_ssc_official .ssc-topbar__cat-time .ssc-theme-toggle {
    flex: 0 0 auto;
}

.quizSEO_ssc_official .ssc-topbar__cat-time .ssc-fs-toggle {
    flex: 0 0 auto;
    padding: 3px 10px;
    font-size: 11.5px;
    white-space: nowrap;
}

/* Keep a clear gap between theme, fullscreen and Section Time on desktop. */
.quizSEO_ssc_official .ssc-topbar__cat-time {
    gap: 10px;
}

/* --- mobile: sharing the per-question timer line --------------------------
   .quizSEO_sectionRow is space-between with the section name left and the
   timer right. margin-left:auto pulls the toggle across to sit against the
   timer instead of stranding it in the middle of the row.

   Sized down to match that line rather than the top bar: the timer there is
   12px on a 1.2 line-height, so full-size 26x22 buttons would tower over it. */
.quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px;
    border-radius: 4px;
}

.quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-btn {
    width: 22px;
    height: 18px;
    border-radius: 3px !important;
}

.quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-btn svg {
    width: 11px;
    height: 11px;
}

@media (max-width: 768px) {
    /* Fallback bar only — used when the section row is switched off in quiz
       settings and there is no timer line to sit on. */
    .quizSEO_ssc_official .ssc-theme-bar {
        margin: 0 0 6px;
    }
    .quizSEO_ssc_official .ssc-theme-bar .ssc-theme-btn {
        width: 30px;
        height: 26px;
    }
    .quizSEO_ssc_official .ssc-theme-bar .ssc-theme-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ==========================================================================
   3. RECONCILIATION
   quizSEO_front.css hardcodes colours that were written for a white page and
   are not routed through the SSC stylesheet. Left alone, each of these is a
   white rectangle or an invisible sentence in Night mode. Scoped to the SSC
   frame so no other quiz template is affected.
   ========================================================================== */

/* --- exam buttons ---------------------------------------------------------
   The quiz root carries .quizSEO_content and .quizSEO_ssc_official at once, so
   the base stylesheet's html-body-prefixed button rules outrank the SSC ones.
   All of them resolve through --quizseo-btn-bg, so re-pointing that variable
   recolours every button, the active section tab and the current-question
   marker in one move — no specificity fight.

   !important is required to clear the per-quiz `#quizSEO_N { ... }` block the
   Style Manager prints inline. Day deliberately sets none of these, so an
   admin's configured button colour survives untouched in the default mode. */
.quizSEO_ssc_official[data-ssc-theme="eye"],
.quizSEO_ssc_official[data-ssc-theme="night"] {
    --quizseo-btn-bg:       var(--ssc-brand) !important;
    --quizseo-btn-text:     var(--ssc-on-brand) !important;
    --quizseo-btn-hover:    var(--ssc-brand-dark) !important;
    --quizseo-accent:       var(--ssc-brand) !important;
    --quizseo-current:      var(--ssc-current) !important;
    --quizseo-current-text: var(--ssc-on-brand) !important;
}

/* --- question body text ---------------------------------------------------
   .quizSEO_question_description is `color:#000` with no !important, and the
   SSC sheet pins .ssc-exam-main text to --ssc-text-strong. Passage prose,
   tables and inline markup inside the description still need catching. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description p,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description p,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description li,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description li,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description td,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description td,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description th,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description th,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description span,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description span,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description div,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description div {
    color: var(--ssc-text-strong);
    background-color: transparent;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description strong,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description strong,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description b,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description b {
    color: var(--ssc-head);
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_question_description a,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_question_description a,
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main a,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main a {
    color: var(--ssc-brand);
}

/* Pasted question tables usually carry their own light borders. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main table,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main table,
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main th,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main th,
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main td,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main td {
    border-color: var(--ssc-line-soft);
    background-color: transparent;
    color: var(--ssc-text-strong);
}

/* --- answer option cards --------------------------------------------------
   The base sheet pins these with `ul.quizSEO_questionList > li.quizSEO_questionListItem`
   — specificity (0,2,2), which outranks the SSC template's (0,2,0) rule no
   matter what order the files load in. Left alone the cards stay pure white
   while the label text turns near-white: the four answers vanish. Matching the
   child combinator and adding .quizSEO_ssc_official takes this to (0,3,2). */
.quizSEO_ssc_official[data-ssc-theme="eye"] ul.quizSEO_questionList > li.quizSEO_questionListItem,
.quizSEO_ssc_official[data-ssc-theme="night"] ul.quizSEO_questionList > li.quizSEO_questionListItem,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionList > .quizSEO_questionListItem,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionList > .quizSEO_questionListItem {
    background: var(--ssc-surface) !important;
    background-color: var(--ssc-surface) !important;
    border-color: var(--ssc-line-soft) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] ul.quizSEO_questionList > li.quizSEO_questionListItem:hover,
.quizSEO_ssc_official[data-ssc-theme="night"] ul.quizSEO_questionList > li.quizSEO_questionListItem:hover,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionList > .quizSEO_questionListItem:hover,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionList > .quizSEO_questionListItem:hover {
    background: var(--ssc-chip) !important;
    background-color: var(--ssc-chip) !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionListItem > label,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionListItem > label,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionListItem label span,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionListItem label span {
    color: var(--ssc-text-strong);
}

/* --- section tabs --------------------------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_allCategoriesNav,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_allCategoriesNav {
    background: transparent !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_categoryTab:hover,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_categoryTab:hover {
    background: var(--ssc-chip) !important;
    border-color: var(--ssc-brand) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_categoryTabs::-webkit-scrollbar-track,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_categoryTabs::-webkit-scrollbar-track {
    background: var(--ssc-surface-alt) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_categoryTabs::-webkit-scrollbar-thumb,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_categoryTabs::-webkit-scrollbar-thumb {
    background: var(--ssc-line-strong) !important;
}

/* --- palette buttons -----------------------------------------------------
   Two parallel naming schemes exist (.quizSEO_questionIndex and
   .quizSEO_questionPaletteButton) and both are !important at (0,2,0); the
   extra .quizSEO_ssc_official carries these to (0,3,0). */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionPaletteButton,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionPaletteButton,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionIndex,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionIndex {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionPaletteButton.attempted,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionPaletteButton.attempted,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionIndex.attempted,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionIndex.attempted,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteItem.correct,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteItem.correct,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteItem.correct,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteItem.correct {
    background: var(--ssc-ok) !important;
    color: var(--ssc-on-status) !important;
    border-color: var(--ssc-ok) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionPaletteButton.skipped,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionPaletteButton.skipped,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionIndex.skipped,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionIndex.skipped,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteItem.incorrect,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteItem.incorrect,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteItem.incorrect,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteItem.incorrect,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_reviewQuestion li.quizSEO_skipped,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_reviewQuestion li.quizSEO_skipped {
    background: var(--ssc-bad) !important;
    color: var(--ssc-on-status) !important;
    border-color: var(--ssc-bad) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionPaletteButton.marked-for-review,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionPaletteButton.marked-for-review,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionIndex.marked-for-review,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionIndex.marked-for-review,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteItem.review,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteItem.review {
    background: var(--ssc-warn) !important;
    color: var(--ssc-on-warn) !important;
    border-color: var(--ssc-warn) !important;
}

/* Answered + Marked for review — violet, sits on top of both answered (green)
   and review (yellow) since a question can be both at once. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionPaletteButton.answered-marked,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionPaletteButton.answered-marked,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_questionIndex.answered-marked,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_questionIndex.answered-marked {
    background: var(--ssc-mark) !important;
    color: var(--ssc-on-status) !important;
    border-color: var(--ssc-mark) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteItem.unattempted,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteItem.unattempted,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteItem.unattempted,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteItem.unattempted {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_reviewQuestion,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_reviewQuestion,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_box,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_box {
    background-color: transparent;
    border-color: var(--ssc-line);
}

/* --- answer feedback and hint boxes -------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_response,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_response,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_sortable,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_sortable,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_sortStringItem,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_sortStringItem,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_matrixSortString,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_matrixSortString {
    background: var(--ssc-surface-alt) !important;
    border-color: var(--ssc-line) !important;
    color: var(--ssc-text) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_tipp > div,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_tipp > div {
    background-color: var(--ssc-chip) !important;
    border-color: var(--ssc-line-strong) !important;
    color: var(--ssc-text) !important;
}

/* Correct/incorrect wash stays legible in every mode: the hue carries the
   meaning, so it is mixed toward the surface rather than replaced. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answerCorrect,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answerCorrect {
    background: color-mix(in srgb, var(--ssc-ok) 26%, var(--ssc-surface)) !important;
    color: var(--ssc-text-strong) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answerIncorrect,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answerIncorrect {
    background: color-mix(in srgb, var(--ssc-bad) 26%, var(--ssc-surface)) !important;
    color: var(--ssc-text-strong) !important;
}

/* --- free-text answer fields --------------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main input[type="text"],
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main input[type="text"],
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main input[type="number"],
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main input[type="number"],
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-exam-main textarea,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-exam-main textarea,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_cloze input[type="text"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_cloze input[type="text"] {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text-strong) !important;
    border: 1px solid var(--ssc-line) !important;
}

/* --- result summary cards ------------------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_result_summary_cards,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_result_summary_cards {
    background: var(--ssc-surface-alt);
    border-color: var(--ssc-line);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_result_card,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_result_card {
    background: var(--ssc-surface);
    border-color: var(--ssc-line);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_result_label,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_result_label {
    color: var(--ssc-muted);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_result_value {
    color: var(--ssc-on-brand);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_score_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_score_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_accuracy_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_accuracy_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_time_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_time_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_average_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_average_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_total_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_total_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_correct_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_correct_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_wrong_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_wrong_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_skipped_card .quizSEO_result_value,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_skipped_card .quizSEO_result_value {
    background: var(--ssc-brand);
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_results h3,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_results h3,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsList,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsList,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsList > li,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsList > li {
    color: var(--ssc-text);
    border-color: var(--ssc-line-soft);
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_results .quizSEO_answersQuestionPalette,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_results .quizSEO_answersQuestionPalette,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersView .quizSEO_answersQuestionPalette,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersView .quizSEO_answersQuestionPalette {
    background: var(--ssc-surface-alt) !important;
    border-color: var(--ssc-line) !important;
}

/* --- results panels carrying inline styles --------------------------------
   QuizSEO_View_FrontQuiz.php prints these with style="..." attributes rather
   than classes. A stylesheet declaration marked !important still beats a
   non-important inline one, which is the only reason these are reachable.

   The score and time-expired panels use an inline linear-gradient, so they
   set background-image and leave background-color transparent — they read as
   bright white slabs on a night surface while any automated background-COLOR
   check reports them as clean. Both properties have to be reset. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_points,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_points,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_time_limit_expired,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_time_limit_expired {
    background: var(--ssc-surface-alt) !important;
    background-image: none !important;
    color: var(--ssc-text) !important;
    border-left-color: var(--ssc-brand) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_points strong,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_points strong,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_time_limit_expired strong,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_time_limit_expired strong {
    color: var(--ssc-head) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersQuestionPalette h5,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersQuestionPalette h5,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsQuestionPalette h5,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsQuestionPalette h5 {
    color: var(--ssc-head) !important;
}

/* Palette items before any status class is applied by the results script. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteItem,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteItem,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteItem,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteItem {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteGrid,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteGrid,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteContainer,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteContainer,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteLegend,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteLegend {
    color: var(--ssc-text) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersCategoryTab,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersCategoryTab {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersCategoryTab.active,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersCategoryTab.active {
    background: var(--ssc-brand) !important;
    color: var(--ssc-on-brand) !important;
    border-color: var(--ssc-brand) !important;
}

/* The results legend swatches are bare inline-styled spans with no class, so
   they are addressed by the very style attribute that needs beating. Worth the
   oddity: in Night an unattempted palette item is dark, and a legend still
   showing a white chip for "Unattempted" is not merely bright, it is wrong. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteLegend span[style*="#ffffff"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteLegend span[style*="#ffffff"],
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteLegend span[style*="#ffffff"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteLegend span[style*="#ffffff"] {
    background: var(--ssc-surface) !important;
    border-color: var(--ssc-line) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteLegend span[style*="#28a745"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteLegend span[style*="#28a745"],
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteLegend span[style*="#28a745"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteLegend span[style*="#28a745"] {
    background: var(--ssc-ok) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_answersPaletteLegend span[style*="#dc3545"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_answersPaletteLegend span[style*="#dc3545"],
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_resultsPaletteLegend span[style*="#dc3545"],
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_resultsPaletteLegend span[style*="#dc3545"] {
    background: var(--ssc-bad) !important;
}

/* --- overlay dialogs ------------------------------------------------------
   The prerequisite, wait-expired and submit-confirm dialogs can all appear
   while a paper is running. A white card is defensible for a dialog in the
   abstract, but one of these fires the moment a candidate presses Submit —
   which in Night mode means a full-brightness flash at exactly the moment
   they are deciding whether to end the test. They follow the frame. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_card,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_card,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal,
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-confirm-modal,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-confirm-modal {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__body,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__body,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_progress,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_progress,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_close,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_close {
    color: var(--ssc-muted) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__title,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__title,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__icon,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__icon,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__countdown,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__countdown {
    color: var(--ssc-bad-text, var(--ssc-bad)) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__countdown,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__countdown {
    background: color-mix(in srgb, var(--ssc-bad) 14%, var(--ssc-surface)) !important;
    border-color: var(--ssc-bad) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_mark,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_mark {
    background: var(--ssc-chip) !important;
    color: var(--ssc-muted) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prerequisite_msg,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prerequisite_msg,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_name,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_name {
    color: var(--ssc-text) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_cta,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_cta,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__ok,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__ok {
    background: var(--ssc-brand) !important;
    color: var(--ssc-on-brand) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_prereq_cta:hover,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_cta:hover,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__ok:hover,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__ok:hover,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_waitExpiredModal__ok:focus,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredModal__ok:focus {
    background: var(--ssc-brand-dark) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_chainNext,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_chainNext {
    background: color-mix(in srgb, var(--ssc-ok) 12%, var(--ssc-surface)) !important;
    border-color: var(--ssc-ok) !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_chainNext_label,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_chainNext_label {
    color: var(--ssc-ok-text, var(--ssc-ok)) !important;
}

/* Overlays sit above everything, so they darken further rather than lighten. */
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_prereq_overlay,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_waitExpiredOverlay,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-confirm-overlay {
    background: rgba(0, 0, 0, .68) !important;
}

/* --- colours written inline by JavaScript at runtime ----------------------
   quizSEO_front.js paints several elements with .css({...}) as the quiz runs:
   the section clock gets color:#0f3d4c every tick, palette squares get their
   status fill, category tabs get repainted on every switch. Those land as
   inline style attributes, so only an !important declaration reaches them.

   Note the cascade actually favours us here: an important declaration in a
   stylesheet outranks a normal inline one. Without !important these rules
   would simply never apply. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-cat-timer-value,
.quizSEO_ssc_official[data-ssc-theme="night"] .ssc-cat-timer-value {
    color: var(--ssc-head) !important;
}

/* The default (not-yet-visited) palette square is deliberately left without
   !important in ssc-exam-template.css so the script can paint states onto it.
   Scoping to squares carrying no state class keeps that contract intact while
   still stopping a light-grey chip appearing on a night surface. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_reviewQuestion li:not(.ssc-pal-answered):not(.ssc-pal-skipped):not(.ssc-pal-review):not(.ssc-pal-answered-review):not(.ssc-pal-current),
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_reviewQuestion li:not(.ssc-pal-answered):not(.ssc-pal-skipped):not(.ssc-pal-review):not(.ssc-pal-answered-review):not(.ssc-pal-current) {
    background: var(--ssc-surface) !important;
    background-color: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}

/* Answered + Marked for review on the main "All Questions" palette (violet) */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_reviewQuestion li.ssc-pal-answered-review,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_reviewQuestion li.ssc-pal-answered-review {
    background: var(--ssc-mark) !important;
    background-color: var(--ssc-mark) !important;
    color: var(--ssc-on-status) !important;
    border-color: var(--ssc-mark) !important;
}

/* Result cards the script builds from scratch with inline backgrounds. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_smartkeeda_stats,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_smartkeeda_stats,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_timeAnalysisCard,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_timeAnalysisCard,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_category_pie_chart,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_category_pie_chart {
    background: var(--ssc-surface-alt) !important;
    color: var(--ssc-text) !important;
    border-color: var(--ssc-line) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_timeAnalysisCard h3,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_timeAnalysisCard h3,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_timeAnalysisCard h4,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_timeAnalysisCard h4,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_category_pie_chart h3,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_category_pie_chart h3 {
    color: var(--ssc-head) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .smartkeeda-stat-card,
.quizSEO_ssc_official[data-ssc-theme="night"] .smartkeeda-stat-card,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_timeAnalysisCard > div > div,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_timeAnalysisCard > div > div {
    background: var(--ssc-surface) !important;
    color: var(--ssc-text) !important;
}

/* --- per-question timer / section row (added in v15) ----------------------
   quizSEO_front.css pins .quizSEO_perQuestionTimer to #64748b !important, and
   .quizSEO_sectionName declares no colour at all so it inherits the site
   theme's near-black. The inherited-text floor above catches the section name;
   the timer needs an explicit override to beat the !important. */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_perQuestionTimer,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_perQuestionTimer,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_sectionRow .quizSEO_perQuestionTimer,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_sectionRow .quizSEO_perQuestionTimer,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_perQuestionTimerIcon,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_perQuestionTimerIcon {
    color: var(--ssc-muted-slate) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_perQuestionTimer .quizSEO_timerDisplay,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_perQuestionTimer .quizSEO_timerDisplay,
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_sectionRow .quizSEO_timerDisplay,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_sectionRow .quizSEO_timerDisplay {
    color: var(--ssc-head) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_sectionRow .quizSEO_sectionName,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_sectionRow .quizSEO_sectionName {
    color: var(--ssc-head) !important;
}

.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_sectionRow,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_sectionRow {
    background-color: transparent !important;
    border-color: var(--ssc-line-soft) !important;
}

/* --- language switcher (already SSC-scoped in the base sheet) ------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_langSeg,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_langSeg {
    background: var(--ssc-surface);
    border-color: var(--ssc-line);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] button.quizSEO_langBtn,
.quizSEO_ssc_official[data-ssc-theme="night"] button.quizSEO_langBtn {
    color: var(--ssc-text);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] button.quizSEO_langBtn:hover,
.quizSEO_ssc_official[data-ssc-theme="night"] button.quizSEO_langBtn:hover {
    background: var(--ssc-chip);
}
.quizSEO_ssc_official[data-ssc-theme="eye"] button.quizSEO_langBtn.is-active,
.quizSEO_ssc_official[data-ssc-theme="night"] button.quizSEO_langBtn.is-active {
    background: var(--ssc-brand);
    color: var(--ssc-on-brand);
}

/* --- category percentages / misc ----------------------------------------- */
.quizSEO_ssc_official[data-ssc-theme="eye"] .quizSEO_catOverview span,
.quizSEO_ssc_official[data-ssc-theme="night"] .quizSEO_catOverview span {
    background: transparent !important;
}
.quizSEO_ssc_official[data-ssc-theme="eye"] span.quizSEO_catPercent,
.quizSEO_ssc_official[data-ssc-theme="night"] span.quizSEO_catPercent {
    color: var(--ssc-text-strong) !important;
}

/* Fullscreen fills the viewport with the frame, so the page behind it has to
   match or a light halo shows at the edges on some themes. */
html.quizSEO_ssc_fs_lock body {
    background: var(--ssc-page-bg, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .quizSEO_ssc_official[data-ssc-theme="eye"],
    .quizSEO_ssc_official[data-ssc-theme="night"],
    .quizSEO_ssc_official[data-ssc-theme="eye"] *,
    .quizSEO_ssc_official[data-ssc-theme="night"] *,
    .quizSEO_ssc_official[data-ssc-theme="eye"] .ssc-theme-btn,
    .quizSEO_ssc_official[data-ssc-theme="night"] .ssc-theme-btn {
        transition: none !important;
    }
}

/* =====================================================================
   v1.9.85 — SECTION-ROW HEIGHT RESERVATION (mobile jump fix)

   The theme toggle is a SINGLE node that ssc-theme.js moves into whichever
   question's .quizSEO_sectionRow is currently on screen, 60ms after the
   question changes. In that row the toggle is 22px tall (18px buttons + 1px
   padding + 1px border, both sides) while the rest of the row — the "8.
   Question" heading and the 12px/1.2 per-question timer — is only ~15px.

   So the incoming question's row first painted WITHOUT the toggle at ~15px,
   then grew to 22px when the toggle arrived. Everything below it, the whole
   question body, moved down 7px and the toggle and timer visibly jumped.

   Reserving the toggle's height on the row means the arrival of the toggle
   can never change the row's geometry.
   ===================================================================== */
.quizSEO_ssc_official .quizSEO_sectionRow {
    min-height: 22px;
}

/* The toggle is absent from the row for a frame on every question change.
   Without a reserved box the flex row collapses to the text height. */
.quizSEO_ssc_official .quizSEO_sectionRow .ssc-theme-toggle,
.quizSEO_ssc_official .quizSEO_sectionRow .quizSEO_perQuestionTimer {
    min-height: 22px;
    box-sizing: border-box;
}

/* Same reasoning for the fallback bar: it is only used when section rows are
   switched off, but if it is ever created mid-exam it must not resize. */
@media (max-width: 768px) {
    .quizSEO_ssc_official .ssc-theme-bar {
        min-height: 28px;
    }
}

/* The row must not reflow when the toggle is briefly missing. */
.quizSEO_ssc_official .quizSEO_sectionRow {
    overflow-anchor: none;
}