/* Accessibility / SEN profile. Driven by attributes on <html> set from pupils.access_json:
   data-font, data-tint, data-contrast, data-cb, data-motion, data-input, data-focus, style="--text-scale:n". */

/* --- fonts --- */
/* Dyslexia-friendly: Atkinson Hyperlegible (SIL OFL, shipped in /public/fonts) with Verdana fallback. */
html[data-font="dyslexic"] body, html[data-font="dyslexic"] input, html[data-font="dyslexic"] button, html[data-font="dyslexic"] select, html[data-font="dyslexic"] textarea {
  font-family: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif;
}
html[data-font="dyslexic"] body { letter-spacing: .035em; word-spacing: .14em; line-height: 1.75; }
html[data-font="dyslexic"] .q-prompt { line-height: 1.8; max-width: 60ch; }
html[data-font="dyslexic"] em, html[data-font="dyslexic"] i { font-style: normal; text-decoration: underline; }
html[data-font="large"] { font-size: calc(118.75% * var(--text-scale, 1)); }
html[data-font="large"] body { font-family: Verdana, Arial, sans-serif; }

/* --- tints: full-page background + translucent overlay (helps with visual stress) --- */
.tint-overlay { display: none; }
html:not([data-tint="none"]) .tint-overlay { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 1000; mix-blend-mode: multiply; }
html[data-tint="cream"] { --bg: #fbf3dc; --card: #fffaf0; }
html[data-tint="cream"] .tint-overlay { background: rgba(255, 236, 179, .22); }
html[data-tint="blue"] { --bg: #e3eefb; --card: #f3f8fe; }
html[data-tint="blue"] .tint-overlay { background: rgba(160, 200, 255, .2); }
html[data-tint="pink"] { --bg: #fbe6ee; --card: #fff4f8; }
html[data-tint="pink"] .tint-overlay { background: rgba(255, 182, 210, .2); }
html[data-tint="green"] { --bg: #e5f4e3; --card: #f4fbf3; }
html[data-tint="green"] .tint-overlay { background: rgba(170, 225, 165, .2); }
html[data-tint="grey"] { --bg: #e9eaec; --card: #f5f5f6; }
html[data-tint="grey"] .tint-overlay { background: rgba(190, 190, 195, .22); }
html:not([data-tint="none"]) .q-card, html:not([data-tint="none"]) .card, html:not([data-tint="none"]) .task-card,
html:not([data-tint="none"]) .choice label, html:not([data-tint="none"]) input, html:not([data-tint="none"]) .pic-btn { background-color: var(--card); }

/* --- high contrast --- */
html[data-contrast="high"] {
  --ink: #000; --muted: #222; --bg: #fff; --card: #fff; --line: #000; --brand: #000; --brand-2: #000;
  --vis-ink: #000; --vis-grid: #555; --vis-accent: #c00000; --vis-fill: #000; --vis-shade: #000; --focus: #ffdd00;
}
html[data-contrast="high"] .tint-overlay { display: none; }
html[data-contrast="high"] body { background: #fff; color: #000; }
html[data-contrast="high"] .site-header { background: #000; }
html[data-contrast="high"] .card, html[data-contrast="high"] .q-card, html[data-contrast="high"] .task-card { border: 3px solid #000; box-shadow: none; }
html[data-contrast="high"] .btn { border-width: 3px; border-color: #000; color: #000; background: #fff; }
html[data-contrast="high"] .btn-primary { background: #000; color: #fff; }
html[data-contrast="high"] .site-header .btn { background: #000; color: #fff; border-color: #fff; }
html[data-contrast="high"] input, html[data-contrast="high"] select, html[data-contrast="high"] textarea { border: 3px solid #000; }
html[data-contrast="high"] .fb-correct, html[data-contrast="high"] .fb-wrong, html[data-contrast="high"] .fb-info { background: #fff; border: 3px solid #000; border-left-width: 10px; }
html[data-contrast="high"] .vis-shaded { fill: #000; }
html[data-contrast="high"] .vis-bar-0, html[data-contrast="high"] .vis-bar-1, html[data-contrast="high"] .vis-bar-2 { fill: #fff; }
html[data-contrast="high"] .rag { background: #fff; color: #000; border: 2px solid #000; }
html[data-contrast="high"] a { color: #00e; }
html[data-contrast="high"] .site-header a { color: #fff; }

/* --- colour-blind-safe palette (Okabe-Ito). RAG keeps icon + text everywhere. --- */
html[data-cb="safe"] {
  --ok: #005a8f; --ok-bg: #dbeefa; --warn: #7a4b00; --warn-bg: #fde7c2; --bad: #a33d00; --bad-bg: #fbe2d3;
  --vis-accent: #d55e00; --vis-fill: #0072b2; --vis-fill-2: #e69f00; --vis-fill-3: #009e73; --vis-shade: #0072b2;
}
html[data-cb="safe"] .rag-green { border-style: solid; }
html[data-cb="safe"] .rag-amber { border-style: dashed; }
html[data-cb="safe"] .rag-red { border-style: dotted; border-width: 2px; }
html[data-cb="safe"] .vis-bar-0 { fill: #9ccbe8; } html[data-cb="safe"] .vis-bar-1 { fill: #f3c77a; } html[data-cb="safe"] .vis-bar-2 { fill: #8fd3bd; }

/* --- reduced motion (profile or OS setting) --- */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* --- input modes --- */
html[data-input="buttons"] .choice label { min-height: 84px; font-size: 1.6rem; }
html[data-input="buttons"] .btn { min-height: 56px; font-size: 1.15rem; }
html[data-input="keypad"] .answer-input { caret-color: var(--brand); }

/* --- focus mode: hide chrome while working --- */
html[data-focus="on"] .site-footer, html[data-focus="on"] .main-nav, html[data-focus="on"] .player-foot { display: none; }
html[data-focus="on"] .player-page .site-header { display: none; }
html[data-focus="on"] .q-card { margin-inline: auto; }

/* --- Phase 2 additions --- */
/* focus mode keeps one quiet way out of the player */
html[data-focus="on"] .player-page .focus-exit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; }
html[data-focus="on"] .player-page main { padding-top: .75rem; }
html[data-focus="on"] .player-page .q-card { max-width: 46rem; }

/* tints: new surfaces follow the tint card colour */
html:not([data-tint="none"]) .tool-panel, html:not([data-tint="none"]) .model-area, html:not([data-tint="none"]) .pill-choice,
html:not([data-tint="none"]) .reward, html:not([data-tint="none"]) .progress-summary, html:not([data-tint="none"]) .mastery-row,
html:not([data-tint="none"]) .key, html:not([data-tint="none"]) .calc-display { background-color: var(--card); }

/* high contrast for new components */
html[data-contrast="high"] .timer, html[data-contrast="high"] .offline-banner, html[data-contrast="high"] .badge-earned,
html[data-contrast="high"] .reward, html[data-contrast="high"] .tool-panel, html[data-contrast="high"] .model-area,
html[data-contrast="high"] .pill-choice, html[data-contrast="high"] .calc-display, html[data-contrast="high"] .key { background: #fff; color: #000; border: 3px solid #000; }
html[data-contrast="high"] .pill-choice:has(input:checked), html[data-contrast="high"] .model-choices [aria-pressed="true"] { background: #000; color: #fff; }
html[data-contrast="high"] .band-tag, html[data-contrast="high"] .part-ok, html[data-contrast="high"] .part-bad,
html[data-contrast="high"] .fb-correct .fb-title, html[data-contrast="high"] .fb-wrong .fb-title { color: #000; }
html[data-contrast="high"] .star-on { color: #000; } html[data-contrast="high"] .star-off { color: #595959; }
html[data-contrast="high"] .progress-bar, html[data-contrast="high"] .meter { border: 2px solid #000; background: #fff; }
html[data-contrast="high"] #progress-fill, html[data-contrast="high"] .progress-fill, html[data-contrast="high"] .meter-fill { background: #000; }
html[data-contrast="high"] .vis-cube, html[data-contrast="high"] .vis-cube-top, html[data-contrast="high"] .vis-cube-side, html[data-contrast="high"] .vis-ruler { fill: #fff; }
html[data-contrast="high"] .focus-exit { color: #00e; }

/* colour-blind-safe: progress bands also differ by icon + text (already) and by pattern */
html[data-cb="safe"] .band-developing .meter-fill { background: repeating-linear-gradient(45deg, #e69f00 0 6px, #b37a00 6px 12px); }
html[data-cb="safe"] .band-secure .meter-fill { background: #0072b2; }
html[data-cb="safe"] .timer-low { border-style: dashed; } html[data-cb="safe"] .timer-up { border-style: dotted; }

/* reduced motion: no pops, celebrations or smooth scrolling */
html[data-motion="reduce"] .pop, html[data-motion="reduce"] .celebrate .star-on { animation: none !important; }