*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ── Reading preferences ─────────────────────────────────────
   Same vocabulary as the printed worksheet – the values come from
   public/js/a11y-profiles.js and the attributes are written by student.js
   onto <html>. Kept in the same names as worksheet-print.css on purpose: a
   pupil who is given large print on cream should see the same thing on the
   screen, and one list of layouts is what keeps that true. */
:root {
    --q-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --q-line-height: 1.5;
    --q-letter-spacing: normal;
    --q-scale: 1;
    --q-paper: #f4f5f7;
    --q-card: #fff;
}

html { font-size: calc(100% * var(--q-scale)); }

html[data-a11y="dyslexia"] {
    --q-font: 'OpenDyslexic', Verdana, Arial, sans-serif;
    --q-line-height: 1.8;
    --q-letter-spacing: 0.03em;
}
html[data-a11y="large-print"] { --q-scale: 1.35; --q-line-height: 1.6; }
html[data-a11y="high-legibility"] {
    --q-font: Verdana, 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif;
    --q-line-height: 1.7;
    --q-letter-spacing: 0.02em;
    --q-scale: 1.08;
}
html[data-a11y="low-density"] { --q-scale: 1.15; --q-line-height: 1.9; }
html[data-a11y="low-density"] .q-block   { margin-bottom: 26px; padding: 26px 28px; }
html[data-a11y="low-density"] .tf-options { flex-direction: column; }

/* The screen equivalent of coloured paper. The card is lifted a shade off the
   page so the question blocks still read as cards rather than dissolving. */
html[data-tint="cream"]  { --q-paper: #f3ead2; --q-card: #fdf6e3; }
html[data-tint="blue"]   { --q-paper: #dce9f7; --q-card: #eaf2fb; }
html[data-tint="green"]  { --q-paper: #dfeedf; --q-card: #ecf6ec; }
html[data-tint="pink"]   { --q-paper: #f4e0e7; --q-card: #fbeef2; }
html[data-tint="yellow"] { --q-paper: #f5edcd; --q-card: #fdf8e0; }

/* Text scaling is a large enough change to be worth not animating through. */
html[data-a11y] *, html[data-a11y] *::before, html[data-a11y] *::after {
    transition-property: border-color, background-color, color;
}

body {
    font-family: var(--q-font);
    letter-spacing: var(--q-letter-spacing);
    background: var(--q-paper);
    color: #1a1a2e;
    min-height: 100vh;
}

/* ── Keyboard and screen reader ──────────────────────────────
   The page had neither a visible focus style nor a way past the header, so a
   pupil working by keyboard had to tab through the chrome on every question
   and could not see where they were. */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: #0077ff;
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* The focus ring itself is defined at the very bottom of this file, not here.
   Several of the inputs below carry `outline: none` at the same specificity,
   and on a tie the later rule wins — so a focus style written here would be
   silently cancelled by the component rules further down. */

@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}

/* ── The display options control ─────────────────────────── */

.a11y-bar {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 50;
}

.a11y-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    min-height: 44px;           /* touch target – this is a phone page */
    border: 2px solid #cfd6e0;
    border-radius: 999px;
    background: #fff;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
}
.a11y-btn:hover { border-color: #0077ff; color: #0b4fd6; }
.a11y-btn[aria-expanded="true"] { border-color: #0077ff; background: #e8f0ff; }

.a11y-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(19rem, calc(100vw - 20px));
    padding: 16px;
    background: #fff;
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.16);
    text-align: left;
}

.a11y-panel-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.a11y-panel-sub {
    font-size: 0.8rem;
    line-height: 1.45;
    color: #666;
    margin-bottom: 14px;
}

.a11y-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.a11y-select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    margin-bottom: 13px;
    border: 2px solid #cfd6e0;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 0.95rem;
}
.a11y-select:last-of-type { margin-bottom: 14px; }

.a11y-reset {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: #eef1f5;
    color: #333;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.a11y-reset:hover { background: #e2e6ec; }

/* On a narrow screen the pill would sit on top of the quiz header, so it
   tucks in and shows the icon alone. The label goes visually hidden rather
   than display:none – the icon is aria-hidden, so removing the text outright
   would leave the button with no accessible name at all. */
@media (max-width: 560px) {
    .a11y-bar { top: 8px; right: 8px; }
    .a11y-btn { padding: 10px; min-width: 44px; justify-content: center; }
    .a11y-btn-label {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

#student-app {
    min-height: 100vh;
}

/* Loading */
#loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: #666;
    font-size: 1rem;
}

/* Card container */
.student-card {
    background: var(--q-card);
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    margin: 60px auto;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.quiz-brand {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0077ff;
    margin-bottom: 12px;
}

.student-card h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.student-card h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.lead {
    color: #555;
    margin-bottom: 24px;
}

/* Name form */
.name-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.name-form input {
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}

.name-form input:focus { border-color: #0077ff; }

/* Picking your name from the class list. Names are big tap targets because
   this is the one thing a room of students does at once, on phones, fast. */
.pick-search {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}
.pick-search:focus { border-color: #0077ff; }

.pick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
    text-align: left;
}

.pick-name {
    padding: 13px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pick-name:hover { border-color: #0077ff; background: #f5f9ff; }
.pick-name:focus-visible { outline: 3px solid #0077ff; outline-offset: 2px; }

.pick-empty { padding: 14px; color: #777; font-size: 0.9rem; text-align: center; }

.pick-fallback {
    margin-top: 14px;
    border: none;
    background: none;
    padding: 8px;
    font: inherit;
    font-size: 0.88rem;
    color: #0077ff;
    text-decoration: underline;
    cursor: pointer;
}

.student-note {
    margin: 18px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #777;
}
.student-note a { color: #0077ff; }

.btn-primary {
    background: #0077ff;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-primary:hover { background: #005ecc; }
.btn-primary:disabled { background: #aaa; cursor: not-allowed; }

.field-error {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 8px;
}

/* Quiz header */
.quiz-header {
    background: var(--q-card);
    border-bottom: 1px solid #e8e8e8;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.quiz-header .quiz-brand { margin-bottom: 0; }

/* An h1 rather than a span: the quiz screen is the whole page once it is
   showing, and it had no heading at all to navigate to. Styled down to match
   the header it sits in – heading level is structure, not size. */
/* The Display pill is fixed to the top-right and floats over this bar, so the
   header has to keep that corner clear or it lands on the pupil's name. In rem
   because the pill is sized in rem too and grows with the text-size setting —
   a px value would stop clearing it at the larger sizes, which are exactly the
   ones the pupils using this feature are on. */
.quiz-header { padding-right: calc(5.5rem + 78px); }

#quiz-header-title {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#student-name-display {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

/* Quiz body */
.quiz-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Sections */
.q-section { margin-bottom: 32px; }

.q-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0077ff;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8f0ff;
}

/* Home language (EAL).
   A quiz built with a home language is still an English quiz: only the
   section instruction and the key-words list get a translated twin, so a
   pupil who is new to English knows what the task is without being handed the
   answer in their own language. Direction and lang are set per element, so an
   RTL script flips its own line and nothing else.
   See public/js/home-languages.js. */

.q-section-l1,
.q-glossary-l1,
.q-l1-label {
    /* Cancelled, not inherited: the dyslexia and large-print profiles widen
       letter-spacing on the body, and in a cursive script like Arabic, Urdu or
       Nastaliq that pulls joined letters apart into something a reader of the
       language has to decode rather than read. The profile still applies to
       the English on the page, which is what it was chosen for. */
    letter-spacing: normal;
    /* Ahead of the UI stack, not after it: a Latin face with a partial Arabic
       or Indic range renders the line badly instead of deferring to the face
       that covers it properly. */
    font-family: 'Noto Nastaliq Urdu', 'Noto Sans Arabic', 'Noto Sans Gurmukhi',
                 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans CJK SC',
                 'Noto Sans SC', inherit;
    line-height: 1.75;
}

/* Under the section title, quieter than it – the English line is the
   instruction, this is the way in to it. */
.q-section-l1 {
    margin: -8px 0 16px;
    font-size: 0.95rem;
    color: var(--q-text-muted, #5b6478);
    /* Same reason as the printed sheet: `dir` still orders the words, this
       just starts the line under the English one rather than at the far edge
       of the column, where it would read as unrelated to it. */
    text-align: left;
}

.q-glossary {
    margin-bottom: 28px;
    padding: 16px 20px;
    border: 1px solid #e8f0ff;
    border-left: 3px solid #0077ff;
    border-radius: 0 10px 10px 0;
    background: var(--q-card);
}

.q-glossary-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0077ff;
    margin-bottom: 10px;
}
.q-l1-label { text-transform: none; font-weight: 400; }

.q-glossary-list { display: grid; gap: 6px; }
.q-glossary-item dt { display: inline; font-weight: 700; }
.q-glossary-item dt::after { content: ' – '; font-weight: 400; }
.q-glossary-item dd { display: inline; margin: 0; }

/* Three real columns once there is a translation to show, so the pupil reads
   across a row the way they would a vocabulary list. Collapses back to the
   run-on line on a phone, where three columns leave a word apiece. */
.q-glossary-bilingual .q-glossary-item {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.9fr);
    gap: 0 16px;
    align-items: baseline;
}
.q-glossary-bilingual .q-glossary-item dt { display: block; }
.q-glossary-bilingual .q-glossary-item dt::after { content: none; }
.q-glossary-bilingual .q-glossary-item dd { display: block; }
.q-glossary-l1[dir="rtl"] { text-align: right; }

@media (max-width: 560px) {
    .q-glossary-bilingual .q-glossary-item { grid-template-columns: 1fr; }
}

/* Question blocks */
.q-block {
    background: var(--q-card);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.q-text {
    font-size: 1rem;
    line-height: var(--q-line-height);
    margin-bottom: 16px;
}

.q-num {
    font-weight: 700;
    color: #0077ff;
    margin-right: 4px;
}

.blank-placeholder { font-weight: 700; }

/* MCQ / T/F options */
.q-options { display: flex; flex-direction: column; gap: 10px; }

.tf-options { flex-direction: row; gap: 16px; }

.q-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.q-option:hover { border-color: #0077ff; background: #f0f6ff; }

.q-option input[type=radio] { accent-color: #0077ff; width: 16px; height: 16px; }

.q-option:has(input:checked) {
    border-color: #0077ff;
    background: #e8f0ff;
}

.opt-key {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0077ff;
    min-width: 18px;
}

.opt-text { font-size: 0.95rem; }

/* Fill blank */
.fill-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s;
}

.fill-input:focus { border-color: #0077ff; }

/* Short answer */
.short-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}

.short-textarea:focus { border-color: #0077ff; }

/* Whiteboard */
.wb-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.wb-spacer { flex: 1; }

.wb-tool {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.wb-tool:hover { border-color: #0077ff; color: #0077ff; }

.wb-tool.active {
    border-color: #0077ff;
    background: #e8f0ff;
    color: #0077ff;
}

.wb-toolbar { flex-wrap: wrap; }

.wb-tool.wb-shape {
    padding: 6px 10px;
    min-width: 38px;
    line-height: 1;
}

.wb-canvas-wrap {
    position: relative;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.wb-text-entry {
    position: absolute;
    z-index: 2;
    border: 1px dashed #0077ff;
    border-radius: 4px;
    background: rgba(255,255,255,0.92);
    color: #1a1a2e;
    padding: 1px 4px;
    outline: none;
    max-width: calc(100% - 8px);
}

.wb-canvas {
    display: block;
    width: 100%;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.wb-hint {
    font-size: 0.8rem;
    color: #888;
    margin-top: 8px;
}

/* Submit row */
.submit-row {
    padding-top: 24px;
    border-top: 1px solid #e8e8e8;
    margin-top: 8px;
}

.submit-row .btn-primary { width: 100%; padding: 14px; font-size: 1.05rem; }
.submit-row .field-error { margin-top: 12px; }

/* Done screen */
.done-card { text-align: center; padding: 60px 40px; }

.done-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.done-card h2 { margin-bottom: 10px; }
.done-card p { color: #555; }

/* Error screen */
#error-screen .student-card { text-align: center; }
#error-screen h2 { margin-bottom: 12px; color: #c62828; }
#error-screen p { color: #555; }

/* ── Focus ring ───────────────────────────────────────────
   Last in the file on purpose. The inputs above each set `outline: none` to
   suppress the browser default in favour of a border colour change, and a
   colour change alone is not a focus indicator — it is invisible to anyone
   who cannot see that particular blue, and it does nothing for the buttons.
   These selectors are one class heavier than the component rules so they win
   regardless of order, and the `!important` on the inputs covers the ones
   whose `outline: none` is on the element itself.

   One rule for the whole page rather than per control: a focus style that
   only some controls have is barely better than none, because the pupil
   cannot trust it. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #0b4fd6 !important;
    outline-offset: 2px;
    border-radius: 4px;
}
/* The whole option row lights up, since the radio is inside its label. */
.q-option:has(input:focus-visible) {
    outline: 3px solid #0b4fd6;
    outline-offset: 2px;
}
.q-option input[type=radio]:focus-visible { outline: none !important; }

/* Headings and the questions region are focused programmatically on a screen
   change, so a ring here would appear without anyone having pressed a key.
   :focus-visible would mostly handle this, but Chromium does show a ring on a
   programmatically focused tabindex="-1" container in some cases. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
main[tabindex="-1"]:focus { outline: none !important; }

@media (max-width: 480px) {
    .student-card { margin: 20px 12px; padding: 28px 20px; }
    .name-form { flex-direction: column; }
    /* The pill is icon-only below 560px, so it needs far less room — and the
       title needs the space back. */
    .quiz-header { padding: 10px 16px; padding-right: 62px; }
    .quiz-body { padding: 16px 12px 48px; }
    .q-block { padding: 16px; }
}