/* ── IELTSX HSL Variable System (DevOps 1:1) ── */
:root {
    --background: 180 3% 13%;
    /* REVERTED TO ORIGINAL STATE */
    --foreground: 0 0% 98%;
    --muted: 180 3% 13%;
    --muted-foreground: 180 3% 65%;
    --border: 180 3% 20%;
    --accent: 180 3% 13%;
    --accent-foreground: 0 0% 98%;
    --secondary: 180 3% 20%;

    --global-font-size: 16px;
    --exam-font-size: 16px; /* controlled by setTextSize() */

    /* Legacy Exam Variables mapped to HSL system */
    --exam-bg: hsl(var(--background));
    --exam-bg-alt: hsl(var(--muted));
    --exam-bg-header: hsl(var(--background));
    --exam-bg-footer: hsl(var(--background));
    --exam-bg-darker: hsl(180, 3%, 15%);
    --exam-bg-input: hsl(var(--background));

    --exam-text: hsl(var(--foreground));
    --exam-text-muted: hsl(var(--muted-foreground));
    --exam-text-white: #fff;
    --exam-text-gray: #e5e7eb;
    --exam-text-gray-300: #d1d5db;

    --exam-border: hsl(var(--border));
    --exam-border-solid: hsl(var(--border) / 0.5);
    --exam-border-input: hsl(var(--border));
    --exam-border-cell: hsl(var(--border));
    --exam-border-focus: #ffffff;

    --exam-hover-bg: hsl(var(--muted));
    --exam-hover-border: hsl(var(--border) / 0.8);
    --exam-selected-bg: hsl(var(--muted));
    --exam-selected-border: #ffffff;
    --exam-selected-inset: hsl(var(--background));

    --exam-mcq-radio-border: #94a3b8;
    --exam-arrow-bg: hsl(var(--background));
    --exam-btn-bg: hsl(var(--muted));
    --exam-btn-hover: hsl(var(--border));

    --exam-footer-active-bg: hsl(var(--muted));
    --exam-footer-q-top: hsl(var(--border));
    --exam-footer-answered: #00ff00;

    --header-btn-bg: #2d2d38;
    --header-btn-hover: #5a5a6a;
}

[data-theme='light'] {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    /* Absolute Black */
    --muted: 0 0% 95%;
    --muted-foreground: 0 0% 20%;
    --border: 0 0% 85%;
    background-color: #FFFFFF !important;

    --exam-bg: #FFFFFF;
    --exam-text: #000000;
    --exam-border-input: #000000;
    --exam-border-focus: #000000;

    --exam-mcq-radio-border: #6B7280;
    /* In dark mode the selected fill/border is white; mirror it in light
       with near-black so the chosen option and radio dot stay visible */
    --exam-selected-border: #111827;
    --exam-selected-inset: #FFFFFF;
    --exam-arrow-bg: #FFFFFF;
    --exam-btn-bg: #F3F4F6;
    --exam-btn-hover: #E5E7EB;

    --exam-footer-active-bg: #EFF6FF;
    --exam-footer-q-top: #E5E7EB;
    --exam-footer-answered: #22C55E;

    --exam-bg-input: #FFFFFF;

    --header-btn-bg: #FFFFFF;
    --header-btn-hover: #F8FAFC;

    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

[data-theme='dark'] .exam-footer {
    border-top-color: rgb(55 65 81);
}

[data-theme='dark'] .border-gray-300 {
    border-color: #4b5563;
}

/* ── Theme-Responsive Classes ── */
.bg-header-btn {
    background-color: var(--header-btn-bg) !important;
    border: 1px solid var(--exam-border) !important;
}

[data-theme='light'] .bg-header-btn {
    border-color: #E2E8F0 !important;
}

.bg-header-btn-hover:hover {
    background-color: var(--header-btn-hover) !important;
}

/* ── Content High Contrast (Light Mode) ── */
[data-theme='light'] body,
[data-theme='light'] .exam-container,
[data-theme='light'] .exam-content,
[data-theme='light'] .question-text,
[data-theme='light'] .instruction-text,
[data-theme='light'] .passage-text,
[data-theme='light'] p,
[data-theme='light'] span,
[data-theme='light'] label,
[data-theme='light'] li,
[data-theme='light'] b,
[data-theme='light'] h2,
[data-theme='light'] h3,
[data-theme='light'] h4,
[data-theme='light'] h5,
[data-theme='light'] div:not(.settings-box):not(.mcq-option):not(.instruction-box) {
    color: #111827 !important;
}

[data-theme='light'] .exam-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme='light'] .exam-body h2 {
    font-weight: 700 !important;
    color: #111827 !important;
}

[data-theme='light'] .exam-body h3 {
    font-weight: 600 !important;
    color: #111827 !important;
}

[data-theme='light'] .exam-body p, 
[data-theme='light'] .exam-body li,
[data-theme='light'] .exam-body span {
    font-weight: 400 !important;
    color: #111827 !important;
}

[data-theme='light'] .exam-body strong,
[data-theme='light'] .exam-body b {
    font-weight: 700 !important;
    color: #111827 !important;
}

/* Header Button Correction (Light Mode) */
[data-theme='light'] .header-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Typography Hierarchy (Strict) */
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }

/* Main Question Area Scaling */
.exam-body, 
.exam-content-text, 
.passage-text,
.question-group p:not(.question-numbers-label):not(.instruction),
.mcq-option,
.matching-grid-table td.question-text-cell {
    font-size: 18px !important;
}

[data-theme='light'] .exam-body,
[data-theme='light'] .exam-body p,
[data-theme='light'] .exam-body span,
[data-theme='light'] .exam-body li,
[data-theme='light'] .exam-body div:not(.instruction-box):not(.question-group .instruction) {
    color: #111827 !important;
}

/* Inline Instructions (Inside Question Groups) */
.question-group .instruction,
.question-group .instruction-text {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

[data-theme='light'] .question-group .instruction,
[data-theme='light'] .question-group .instruction-text,
[data-theme='light'] .question-group .instruction p {
    color: #111827 !important;
    font-weight: 400 !important;
}

[data-theme='light'] .question-group .instruction strong,
[data-theme='light'] .question-group .instruction-text strong {
    color: #111827 !important;
    font-weight: 700 !important;
}

[data-theme='light'] .answer-input,
[data-theme='light'] .exam-input {
    border: 1px solid #9ca3af !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    width: 10rem !important; /* w-40 */
    max-width: 10rem !important;
    height: 1.5rem !important; /* max-h-6 */
    max-height: 1.5rem !important;
}

[data-theme='light'] .answer-input:focus,
[data-theme='light'] .exam-input:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

[data-theme='light'] .answer-input::placeholder,
[data-theme='light'] .exam-input::placeholder {
    color: #6b7280 !important;
}

/* ── Exam Body Typography Refinement ── */
.exam-body h4 {
    font-weight: 700 !important;
    text-align: center; /* Centered titles usually are H4s in this project */
}

.exam-body h5 {
    font-weight: 600 !important;
}

.exam-body p, 
.exam-body li {
    font-weight: 400 !important;
}

.exam-body strong,
.exam-body p strong,
.exam-body li strong {
    font-weight: 700 !important;
}

/* Ensure Question Numbers Labels specifically follow the 600 rule if they are headings */
.exam-body .question-numbers-label,
.exam-body h5.question-numbers-label {
    font-weight: 600 !important;
}

/* ── Content Area Spacing & Alignment (IELTSX 1:1) ── */

/* Part Banner (Instruction Card) background override */
.bg-\[\#F1F2EC\] {
    background-color: #F1F2EC !important;
}

[data-theme='dark'] .bg-\[\#F1F2EC\] {
    background-color: hsl(var(--secondary)) !important;
}

/* Main & Section Container Spacing (React/Tailwind Overrides) */
.mt-4.px-1.flex-col.overflow-hidden {
    margin-top: 1.5rem !important; /* mt-6 */
    padding-left: 1rem !important; /* px-4 */
    padding-right: 1rem !important;
}

.p-4.min-h-0.text-content {
    padding-left: 2.5rem !important; /* px-10 */
    padding-right: 2.5rem !important;
    padding-top: 0.5rem !important; /* pt-2 */
}

/* Sharp Professional Icons */
.exam-header svg,
.exam-header i {
    stroke-width: 2.5 !important;
}



/* ── Override text color utilities in light mode ── */
[data-theme='light'] .exam-header button svg,
[data-theme='light'] .exam-header button i {
    color: #000000 !important;
    opacity: 1 !important;
}

/* Base Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--exam-bg);
    color: var(--exam-text);
    overflow: hidden;
    height: 100vh;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

/* ══════════════════════════════════
   EXAM LAYOUT
   ══════════════════════════════════ */

.exam-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* On a phone 100vh is the viewport with the browser chrome retracted, so
       the last ~60px of the exam — including the fixed footer that holds the
       question navigation — sat underneath the URL bar. dvh tracks the space
       that is actually visible. The 100vh line above stays as the fallback
       for browsers that do not understand dvh. */
    height: 100dvh;
    background: var(--exam-bg);
}

.exam-header {
    background: var(--exam-bg-header);
    border-bottom: 1px solid rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 48px;
    color: var(--exam-text-white);
    font-size: 14px !important;
}

[data-theme='dark'] .exam-header {
    border-bottom-color: #4b5563;
}

.exam-instruction {
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
}

.instruction-box {
    background: var(--exam-bg-alt);
    border: 1px solid var(--exam-border-cell);
    padding: 1.25rem 2rem;
    border-radius: 4px;
    width: 100%;
    margin: 0 0 3rem 0;
}

/* ── Exam Body (Scaled by --global-font-size) ── */
.exam-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 1rem 48px;
    background: var(--exam-bg);
    color: var(--exam-text);
    width: 100%;
}

#exam-body,
#exam-body p,
#exam-body li,
#exam-body h4,
#exam-body h5,
#exam-body span:not(.answer-overlay-num) {
    font-size: var(--exam-font-size) !important;
}

/* Inputs stay fixed — never resize with text size setting */
#exam-body .answer-input,
#exam-body .inline-input {
    font-size: 0.875rem !important;
}



.exam-footer {
    background: #1e1e1e !important;
    border-top: 1px solid;
    flex-shrink: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    width: 100%;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    font-size: 14px !important;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 50;
}

/* ══════════════════════════════════
   TIMER
   ══════════════════════════════════ */

.timer {
    font-size: 1rem;
    font-weight: 600;
    color: var(--exam-text-white);
    display: flex;
    align-items: center;
    height: 100%;
}

/* ══════════════════════════════════
   FOOTER NAVIGATION
   ══════════════════════════════════ */

.footer-part-btn-container {
    display: flex;
    height: 100%;
    align-items: center;
}

/* ── Zone 1: Active Part + Numbers ── */
.footer-active-part-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48px;
    background: #1e1e1e !important;
    gap: 4px;
    min-width: 0;
    flex-grow: 1;
}

.footer-part-btn.active {
    height: 100%;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff !important;
    background: transparent !important;
    border-top-width: 3px !important;
    border-top-style: solid !important;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-q-numbers-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    overflow-x: auto;
    padding-right: 8px;
    height: 100%;
}

.footer-q-outer-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    border-top-width: 3px;
    border-top-style: solid;
}

.footer-q-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    color: #ffffff !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 2px;
    transition: all 150ms;
    outline: none;
    white-space: nowrap !important;
}

.footer-q-btn:hover {
    border-color: #3b82f6 !important;
}

/* ── Zones 2, 3, 4: Inactive Parts ── */
.footer-part-btn-inactive {
    flex: 1;
    height: 100%;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-top: 3px solid transparent;
    border-radius: 0;
    transition: background 150ms;
    cursor: pointer;
    white-space: nowrap;
}

.footer-part-btn-inactive:hover {
    background: #2a2a2a;
}

.footer-part-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 4px;
}

.footer-part-label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.footer-part-progress {
    font-size: 14px;
    font-weight: 400;
    color: #888888;
}

@media (max-width: 640px) {
    .footer-part-content {
        flex-direction: column;
        gap: 0;
    }
    .footer-part-progress {
        font-size: 12px;
    }
}

/* ── Light Mode Footer Refinements ── */
[data-theme='light'] .exam-footer,
[data-theme='light'] .footer-active-part-wrapper {
    background: #f9fafb !important;
    border-top-color: rgb(209 213 219) !important;
}

[data-theme='light'] .footer-part-label,
[data-theme='light'] .footer-q-btn,
[data-theme='light'] .footer-part-btn.active {
    color: #111111 !important;
}

[data-theme='light'] .footer-part-progress {
    color: #6b7280;
}

[data-theme='light'] .footer-part-btn-inactive:hover {
    background: #f3f4f6;
}

/* ── Conditional Borders ── */
.border-unanswered {
    border-top-color: #94a3b8 !important; /* gray-400 */
}

.border-answered {
    border-top-color: #22c55e !important; /* green-500 */
}

[data-theme='light'] .border-unanswered {
    border-top-color: #94a3b8 !important;
}

/* ══════════════════════════════════
   NAV ARROWS
   ══════════════════════════════════ */

.footer-arrows-container {
    display: flex;
    gap: 4px;
    align-items: center;
}

.footer-nav-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--exam-border-cell);
    border-radius: 4px;
    background: var(--exam-arrow-bg);
    color: var(--exam-text-gray);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.footer-nav-arrow i {
    font-weight: 300;
}

.footer-nav-arrow:hover {
    background: var(--exam-btn-hover);
    color: var(--exam-text-white);
}

/* ══════════════════════════════════
   QUESTION CONTENT
   ══════════════════════════════════ */

.question-group {
    margin-bottom: 3.5rem !important;
}

.exam-body h4, 
.question-group .question-numbers-label {
    margin-bottom: 2rem !important;
}

.question-group .instruction {
    margin-bottom: 2rem !important;
}

.exam-body ul.list-disc {
    margin-bottom: 2rem !important;
}

.exam-body ul.list-disc > li + li {
    margin-top: 1rem !important; /* space-y-4 */
}

.question-numbers-label {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--exam-text-white);
}

.instruction {
    font-style: normal !important;
    color: var(--exam-text-muted);
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
    font-weight: 400 !important;
}

/* ══════════════════════════════════
   MCQ STYLES
   ══════════════════════════════════ */

.mcq-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid var(--exam-border-input);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    margin-bottom: 10px;
    font-size: 1.125rem;
}

.mcq-option:hover {
    background: var(--exam-hover-bg);
    border-color: var(--exam-hover-border);
}

.mcq-option.selected {
    background: var(--exam-selected-bg);
    border-color: var(--exam-selected-border);
}

/* Light mode: soften unselected option borders (the global
   --exam-border-input is intentionally black for text inputs) */
[data-theme='light'] .mcq-option {
    border-color: #CBD5E1;
}

[data-theme='light'] .mcq-option:hover {
    border-color: #94A3B8;
}

[data-theme='light'] .mcq-option.selected {
    border-color: var(--exam-selected-border);
}

.mcq-radio,
.mcq-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--exam-mcq-radio-border);
    flex-shrink: 0;
    margin-top: 3px;
}

.mcq-radio {
    border-radius: 50%;
}

.mcq-checkbox {
    border-radius: 2px;
}

.mcq-option.selected .mcq-radio,
.mcq-option.selected .mcq-checkbox {
    border-color: var(--exam-selected-border);
    background: var(--exam-selected-border);
    box-shadow: inset 0 0 0 3px var(--exam-selected-inset);
}

.mcq-option b {
    color: var(--exam-text-white);
    font-weight: 700;
    margin-right: 4px;
}

/* ══════════════════════════════════
   MATCHING GRID TABLE
   ══════════════════════════════════ */

.matching-grid-container {
    margin: 2.5rem 0;
    width: 100%;
}

.matching-legend {
    background: var(--exam-bg-alt);
    border: 1px solid var(--exam-border-cell);
    padding: 1.5rem 2rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.matching-grid-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--exam-bg);
}

.matching-grid-table th,
.matching-grid-table td {
    border: 1px solid var(--exam-border-cell);
    padding: 14px;
    text-align: center;
    vertical-align: middle;
}

.matching-grid-table th {
    background: var(--exam-bg-darker);
    color: var(--exam-text-white);
    font-size: 1rem;
    font-weight: 700;
}

.matching-grid-table td.question-text-cell {
    text-align: left;
    width: 45%;
    font-size: 1.125rem;
    color: var(--exam-text);
    font-weight: 500;
}

.matching-grid-table td.selection-cell {
    cursor: pointer;
    width: 80px;
    transition: background 0.2s;
}

.matching-grid-table tr:hover td {
    background: var(--exam-hover-bg);
}

.matching-grid-table td.selection-cell:hover {
    background: var(--exam-hover-border);
}

.matching-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--exam-mcq-radio-border);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
}

.matching-grid-table td.selected .matching-indicator {
    background: var(--exam-selected-border);
    border-color: var(--exam-selected-border);
    box-shadow: inset 0 0 0 3px var(--exam-selected-inset);
}

/* ══════════════════════════════════
   INPUT STYLES
   ══════════════════════════════════ */

.exam-input,
.answer-input {
    border: 1px solid var(--exam-border-input);
    border-radius: 2px;
    padding: 0 8px;
    height: 26px;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1rem;
    background: var(--exam-bg-input);
    color: var(--exam-text);
    width: 10rem !important;
    min-width: 60px;
    max-width: 10rem !important;
    text-align: center;
    font-weight: 500;
    transition: all 0.15s;
    display: inline-block;
    vertical-align: baseline;
}

.exam-input:focus,
.answer-input:focus {
    border: 1px solid #3B82F6;
    background: var(--exam-bg-input);
}

/* ══════════════════════════════════
   LOGO
   ══════════════════════════════════ */

.certa-logo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

.logo-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    width: 36px;
    height: 36px;
}

.logo-icon-box i {
    font-size: 1.1rem;
    color: #e11d48;
}

.logo-icon-box .logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.taker-label { font-size: 12px; color: #9ca3af; }
.taker-val   { font-size: 12px; color: #f3f4f6; }
[data-theme='light'] .taker-label { color: #6b7280; }
[data-theme='light'] .taker-val   { color: #111827; }
/* For pages using .dark class (result pages) */
html:not(.dark) .taker-label { color: #6b7280; }
html:not(.dark) .taker-val   { color: #111827; }

.logo-text {
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: var(--exam-text-white);
    text-transform: uppercase;
}

/* ══════════════════════════════════
   VOLUME SLIDER
   ══════════════════════════════════ */

.volume-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: #4b5563;
    outline: none;
}

[data-theme='light'] .volume-slider {
    background: #E5E7EB;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e5e7eb;
    cursor: pointer;
}

[data-theme='light'] .volume-slider::-webkit-slider-thumb {
    background: #3b82f6;
}

/* ── Footer nav arrows (theme-aware) ── */
.footer-nav-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--border));
    border-radius: 6px;
    background: transparent;
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.footer-nav-btn:hover { background: hsl(var(--muted)); }

/* ══════════════════════════════════
   DIALOG OVERLAY (Submit / Generic)
   ══════════════════════════════════ */

.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog-box {
    background: hsl(180, 3%, 15%);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 2rem;
    /* min-width: 360px was wider than a 360px Android viewport — the card
       overflowed the screen it had to sit inside. */
    min-width: min(360px, calc(100vw - 2rem));
    max-width: min(440px, calc(100vw - 2rem));
    color: var(--exam-text);
}

/* ══════════════════════════════════════════════════════
   EXAM SETTINGS MODAL
   All font sizes HARDCODED — never affected by scaling
   ══════════════════════════════════════════════════════ */

.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-box {
    position: relative;
    background: var(--exam-bg-header);
    border-radius: 0.5rem;
    max-width: 448px;
    width: 100%;
    padding: 1.5rem;
    border: 1px solid var(--exam-border);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    margin: 0;
    color: hsl(var(--foreground));
    font-size: 14px !important;
    animation: modalPopIn 200ms ease-out forwards;
}

@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Alert dialogs (submit-error, submit-dialog, …) ──
   Same --exam-* tokens .settings-box uses above, so a dialog box can't ship
   dark-only again — there's no per-component light-mode override to forget. */
.exam-alert-surface {
    background: var(--exam-bg-header);
    color: hsl(var(--foreground));
    border: 1px solid var(--exam-border);
}

.exam-alert-text-muted {
    color: var(--exam-text-muted);
}

.exam-alert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.25rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color .15s;
}

.exam-alert-btn-ghost {
    border: 1px solid var(--exam-border);
    background: transparent;
    color: hsl(var(--foreground));
}
.exam-alert-btn-ghost:hover {
    background: var(--exam-btn-hover);
}

/* Always a white pill, in both themes — a bordered/shadowed surface so it
   still reads as a distinct control against the (also white) light-mode
   dialog, rather than flipping color with the theme. */
.exam-alert-btn-solid {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid var(--exam-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.exam-alert-btn-solid:hover {
    background: #e2e8f0;
}
.exam-alert-btn-solid:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Header ── */
.settings-header {
    margin-bottom: 1.5rem;
}

.settings-header-title {
    font-size: 18px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--foreground));
}

.settings-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: hsl(var(--foreground));
    opacity: 0.7;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: opacity 0.15s;
}

.settings-close-btn:hover { opacity: 1; }

/* ── Section ── */
.settings-section {
    margin-bottom: 1.5rem;
}

.settings-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Options ── */
.settings-options-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.settings-option-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s;
    user-select: none;
    border-radius: 0.375rem;
    text-decoration: none;
}

.settings-option-box:hover:not(.active) {
    background-color: hsl(var(--muted));
}

.settings-option-box.active {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border));
}

.settings-option-box .checkmark {
    opacity: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: hsl(var(--foreground));
}

.settings-option-box.active .checkmark {
    opacity: 1;
}

.settings-option-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    color: hsl(var(--foreground));
    opacity: 0.7;
}

.settings-option-box.active .settings-option-icon { opacity: 1; }

/* ── Leave button ── */
.settings-leave-btn {
    display: block;
    width: 100%;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card) / 0.6);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
    color: hsl(var(--foreground));
}

.settings-leave-btn:hover {
    background: hsl(var(--accent) / 0.6);
}

[data-theme='light'] .settings-leave-btn:hover {
    background: hsl(var(--muted) / 0.6);
}

.settings-leave-btn .leave-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.settings-leave-btn .leave-title svg {
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
    transition: color 0.15s;
}

.settings-leave-btn:hover .leave-title svg {
    color: hsl(var(--foreground));
}

.settings-leave-btn .leave-desc {
    margin-top: 4px;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* ══════════════════════════════════
   MOBILE RESPONSIVE — Exam Pages
   ══════════════════════════════════ */

@media (max-width: 640px) {

    /* ── Header ── */
    .exam-header {
        padding: 0 0.5rem;
        gap: 0;
    }

    /* Hide test taker email — too long on small screens */
    .taker-label,
    .taker-val {
        display: none;
    }

    /* Wordmark — dropped, icon kept.
       The listening header has to hold the logo, the countdown, a volume
       control, settings and Submit in 360px. Adding it up, the countdown was
       left about 32px for a string like "30 minutes left", so the one piece
       of information a candidate checks constantly was clipped. The wordmark
       is the only thing in that row carrying no information; the icon still
       identifies the product. */
    .certa-logo .logo-text {
        display: none;
    }

    /* Logo icon box — slightly smaller */
    .certa-logo .logo-icon-box {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Same budget: 1rem of side padding on the volume control is 32px that
       the countdown needs more. */
    .volume-control {
        padding: 0 0.25rem;
        gap: 0.4rem;
    }

    /* A two-line countdown does not fit a 48px header, so it overflows its
       centred box rather than wrapping inside it. */
    .timer {
        white-space: nowrap;
    }

    /* Timer — fix absolute overlap: flow in flex and center */
    .exam-header .absolute {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        transform: none !important;
        flex: 1;
        display: flex !important;
        justify-content: center;
    }

    /* Timer — smaller font */
    .timer {
        font-size: 0.85rem;
    }

    /* Volume slider — narrower */
    .volume-slider {
        width: 50px;
    }

    /* Submit button — shorter text padding */
    .exam-header .header-btn[onclick*="submit"],
    .exam-header .header-btn[onclick*="Submit"] {
        padding: 0 0.75rem;
        font-size: 0.75rem;
    }

    /* ── Instruction banner ──
       The banner is fixed chrome above the scrolling content, so every pixel
       it takes is a pixel the passage, the questions or the essay never get
       back. On a 640px-tall phone it was costing ~100px of ~590. */
    .exam-instruction .p-4 {
        padding: 0.5rem !important;
    }

    .exam-instruction .p-3 {
        padding: 0.375rem !important;
    }

    #sub-banner p,
    #instruction-display p {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
    }

    /* ── Exam body — reduce padding ── */
    .exam-body {
        padding: 12px 0.75rem 56px;
    }

    /* ── MCQ options — tighter on mobile ── */
    .mcq-option {
        padding: 10px 12px;
        font-size: 1rem;
    }

    /* ── Wide fixed-size answer content ──
       These are declared in absolute units that assume a desktop column.
       10rem of input in a 336px body is survivable; 10rem of input in a
       ~120px table cell or half-pane is not, and it pushed its own container
       into a horizontal scroll the candidate had to find. */
    .exam-input,
    .answer-input,
    [data-theme='light'] .answer-input,
    [data-theme='light'] .exam-input {
        width: min(10rem, 100%) !important;
        max-width: 100% !important;
    }

    .instruction-box {
        padding: 0.75rem 0.875rem;
    }

    .matching-legend {
        padding: 0.75rem 0.875rem;
    }

    .matching-grid-table th,
    .matching-grid-table td {
        padding: 8px 6px;
    }

    .matching-grid-table td.question-text-cell {
        font-size: 1rem;
    }

    /* Question blocks were spaced for a desktop column; 3.5rem between blocks
       and 2rem under every heading is most of a phone screen spent on air. */
    .question-group {
        margin-bottom: 2rem !important;
    }

    .exam-body h4,
    .question-group .question-numbers-label {
        margin-bottom: 1rem !important;
    }

    .question-group .instruction,
    .instruction {
        margin-bottom: 1rem !important;
    }

    /* ── Footer ──
       The footer is `flex-wrap: nowrap` and holds, on listening, an active
       part button, ten question buttons, three inactive part buttons, two
       arrows and (on speaking) the whole recorder cluster. That is well over
       360px of content in a 360px-wide bar with no scroll container, so on a
       phone the right-hand end — the Next arrow, and on speaking the Record
       button — was simply unreachable: `body { overflow-x: hidden }` clipped
       it away. Giving the bar its own horizontal scroll makes every control
       reachable again without changing anything on desktop, where it never
       overflows. overflow-y stays hidden so the 48px bar cannot grow. */
    .exam-footer {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    /* Scrolling the bar alone is not enough. The inactive part buttons are
       `flex: 1` — basis 0, shrink 1 — so they and the active wrapper split
       360px between them and squeeze the question-number strip down to about
       30px: one partly-visible number for a ten-question part. Sizing the
       inactive buttons to their content and giving the strip a floor makes
       the numbers usable, and the overflow above absorbs the difference. */
    .footer-part-btn-inactive {
        flex: 0 0 auto;
    }

    .footer-q-numbers-row {
        min-width: 45vw;
    }

    .footer-part-btn.active {
        padding: 0 8px;
        font-size: 13px;
    }

    .footer-part-btn-inactive {
        padding: 8px 10px;
    }

    .footer-part-label {
        font-size: 12px;
    }
}

/* ── FIX 2: Submit modal — light mode text visibility ── */
[data-theme='light'] #submit-dialog > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
[data-theme='light'] #submit-dialog h2 {
    color: #111827 !important;
}
[data-theme='light'] #submit-dialog p {
    color: #374151 !important;
}
[data-theme='light'] #submit-dialog button[onclick="hideSubmitDialog()"] {
    color: #374151 !important;
    border-color: #d1d5db !important;
}
[data-theme='light'] #submit-dialog button[onclick="hideSubmitDialog()"]:hover {
    background: #f3f4f6 !important;
}
[data-theme='light'] #submit-dialog button[onclick="submitTest()"],
[data-theme='light'] #submit-dialog button[onclick="doSubmit()"],
[data-theme='light'] #submit-dialog button[onclick="finishSpeaking()"] {
    background: #111827 !important;
    color: #ffffff !important;
}
[data-theme='light'] #submit-dialog button[onclick="submitTest()"]:hover,
[data-theme='light'] #submit-dialog button[onclick="doSubmit()"]:hover,
[data-theme='light'] #submit-dialog button[onclick="finishSpeaking()"]:hover {
    background: #374151 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   Added in the accessibility/responsive pass. Everything below either
   makes an existing control reachable and announceable, or makes an
   existing style meet WCAG 2.1 AA — nothing here changes the visual
   design for a mouse user in a default state.
   ══════════════════════════════════════════════════════════════════════ */

/* Visible to a screen reader, invisible on screen. Deliberately not
   Tailwind's .sr-only: the Tailwind CDN is a third-party script and the
   timer warnings must survive it failing to load. */
.exam-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Focus visibility (WCAG 2.4.7) ──
   .answer-input carried `outline: none !important`, and the footer question
   buttons `outline: none`, so a keyboard user had no idea where they were.
   :focus-visible keeps the ring off mouse clicks. */
.exam-container :focus-visible,
.settings-box :focus-visible,
.exam-gate-card :focus-visible,
[role="dialog"] :focus-visible,
.exam-input:focus-visible,
.answer-input:focus-visible,
.footer-q-btn:focus-visible,
.footer-part-btn:focus-visible,
.footer-part-btn-inactive:focus-visible,
.footer-nav-btn:focus-visible,
.header-btn:focus-visible,
.settings-option-box:focus-visible,
.settings-close-btn:focus-visible,
.settings-leave-btn:focus-visible,
.volume-slider:focus-visible,
.mcq-option:focus-visible,
.word-chip:focus-visible,
.summary-gap:focus-visible,
.matching-grid-table button:focus-visible,
[role="radio"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="separator"]:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* The dialog card itself is focused on open (programmatic, not via the
   keyboard), so it must not draw a ring. */
[role="dialog"]:focus,
[role="dialog"]:focus-visible {
    outline: none !important;
}

/* Grouping wrappers for radio/checkbox answers. A <fieldset> is the
   semantics an accessibility audit looks for; these three lines stop the
   browser's default border, padding and min-content sizing from changing
   how anything looks. */
.exam-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: block;
}

.exam-legend {
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
}

/* Div-based options behave as controls, so they take a control's cursor. */
[role="radio"],
[role="checkbox"] {
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE CONTAINMENT
   Wide answer content (matching grids, completion tables) scrolls inside
   its own box. Without min-width:0 a flex/grid child refuses to shrink
   below its content, and a 6-column matching table pushed the whole page
   sideways instead of scrolling in place.
   ══════════════════════════════════════════════════════════════════════ */

.exam-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
}

#questions-content-area,
#questions-content-area > *,
.reading-question-block,
.question-group,
.exam-body,
.matching-grid-container {
    min-width: 0;
    max-width: 100%;
}

/* The listening matching grid is the one wide block that never had a
   scroll box of its own — its table is as wide as options + question text
   demand, and it sat directly in the page flow. */
.matching-grid-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dialog cards must fit a 360px phone. (.dialog-box is corrected at its own
   declaration above; the settings box is capped here.) */
.settings-box {
    max-width: min(448px, calc(100vw - 2rem));
}

/* ── Touch targets (WCAG 2.5.5 / 2.5.8) ──
   Applied on coarse pointers only, so the desktop exam keeps its density. */
@media (pointer: coarse) {

    .footer-q-btn {
        min-width: 44px;
        height: 44px;
    }

    .footer-nav-btn {
        width: 44px;
        height: 44px;
    }

    .settings-close-btn {
        width: 44px;
        height: 44px;
    }

    .settings-option-box {
        min-height: 44px;
    }

    .header-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .volume-slider {
        height: 24px;
        background-clip: content-box;
        padding: 10px 0;
    }

    .volume-slider::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    .mcq-option {
        min-height: 44px;
    }

    .matching-grid-table td.selection-cell,
    .matching-grid-table button,
    .diagram-table button {
        min-height: 44px;
    }

    .summary-gap {
        min-height: 44px;
    }

    .word-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .hn-btn {
        min-height: 44px;
    }

    .paused-continue-btn {
        min-height: 44px;
    }

    /* The dialog buttons carry an inline height: 2.25rem (36px). A
       stylesheet min-height still wins over an inline height, because they
       are different properties — so the buttons grow without having to
       rewrite every inline style in four templates. */
    [role="dialog"] button,
    [role="alertdialog"] button {
        min-height: 44px;
    }
}

/* ── Contrast corrections (WCAG 1.4.3 / 1.4.11) ──
   Each of these measured below 4.5:1 for text or 3:1 for a control
   boundary in the theme named. */

/* #888888 on the #1e1e1e footer measures 4.35:1 — just under AA for 14px. */
.footer-part-progress {
    color: #a1a1aa;
}

/* #6b7280 section labels on the near-black question surfaces measure
   3.5:1 as 12px uppercase. */
.options-pool-title,
.word-bank-title {
    color: #9ca3af;
}

/* Light theme: option and row boundaries were #f3f4f6 on #fff — 1.05:1,
   effectively invisible, and .tfng-option is an interactive control. */
[data-theme='light'] .tfng-option {
    border-color: #6b7280;
}

[data-theme='light'] .matching-row,
[data-theme='light'] .options-pool,
[data-theme='light'] .word-bank,
[data-theme='light'] .tfng-question {
    border-color: #d1d5db;
}

/* Light theme: the same section labels sit on #f3f4f6, where #9ca3af is
   2.2:1. */
[data-theme='light'] .options-pool-title,
[data-theme='light'] .word-bank-title {
    color: #4b5563;
}