/* ==========================================================
   Underhill Adventures – Accessibility & comfort
   Classes on <html> are set by js/a11y-settings.js.
   ========================================================== */
:root { --ua-size: 1; --ua-line: 1.6; }
html { font-size: calc(100% * var(--ua-size)); }
.passage, .question, .answer, .hint, .feedback, .bubble { line-height: var(--ua-line); }
.passage { max-width: 62ch; text-align: left; }
.passage p { margin-bottom: .9em; }

/* ---------- Fonts ---------- */
.ua-font-atkinson { --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Arial, sans-serif; }
.ua-font-atkinson body, .ua-font-atkinson .passage, .ua-font-atkinson h1, .ua-font-atkinson h2 { font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Arial, sans-serif; }
.ua-font-opendyslexic { --font-body: "OpenDyslexic", Arial, sans-serif; }
.ua-font-opendyslexic body, .ua-font-opendyslexic .passage, .ua-font-opendyslexic h1, .ua-font-opendyslexic h2 { font-family: "OpenDyslexic", Arial, sans-serif; }
.ua-font-opendyslexic .passage, .ua-font-opendyslexic .question { font-size: .94em; }
.ua-font-comic body, .ua-font-comic .passage { font-family: "Comic Sans MS", "Comic Neue", Arial, sans-serif; }
.ua-spacing-wide .passage, .ua-spacing-wide .question, .ua-spacing-wide .answer { letter-spacing: .05em; word-spacing: .2em; }
.ua-spacing-xwide .passage, .ua-spacing-xwide .question, .ua-spacing-xwide .answer { letter-spacing: .12em; word-spacing: .3em; }
.ua-no-texture body { background-image: none !important; }

/* ---------- Tints and contrast ---------- */
.ua-tint-peach { --cream: #FDE9D9; --paper: #FFF4EC; }
.ua-tint-blue { --cream: #E3F0FA; --paper: #F2F8FD; }
.ua-tint-mint { --cream: #E6F4EA; --paper: #F3FAF5; }
.ua-tint-lilac { --cream: #EFE7F7; --paper: #F8F4FC; }
.ua-tint-grey { --cream: #EEEEEE; --paper: #F7F7F7; }
.ua-tint-dark { --cream: #183829; --paper: #20402F; --ink: #FBF5E6; --forest: #F3D27A; --forest-deep: #FBF5E6; --muted: #E4DCC6; --amber-deep: #F3D27A; --bark: #F1E3C8; }
.ua-contrast-high { --ink: #000; --forest: #0B2A1B; --forest-deep: #000; --paper: #FFFFFF; --cream: #FFFDF7; --muted: #1E1E1E; --amber-deep: #5E3A06; --bark: #2A1B12; }
.ua-contrast-high .story-card, .ua-contrast-high .gbtn, .ua-contrast-high .answer, .ua-contrast-high .choice,
.ua-contrast-high .pick, .ua-contrast-high .level, .ua-contrast-high .guide, .ua-contrast-high .panel { border: 3px solid #000 !important; box-shadow: none !important; }
.ua-contrast-high-dark { --ink: #FFE76A; --forest: #FFE76A; --forest-deep: #FFE76A; --paper: #0B1F16; --cream: #000; --muted: #FFF3A6; --amber-deep: #FFE76A; --bark: #FFE76A; }
.ua-contrast-high-dark .story-card, .ua-contrast-high-dark .gbtn, .ua-contrast-high-dark .answer, .ua-contrast-high-dark .choice,
.ua-contrast-high-dark .pick, .ua-contrast-high-dark .level, .ua-contrast-high-dark .guide, .ua-contrast-high-dark .panel { border: 3px solid #FFE76A !important; box-shadow: none !important; }

/* Pages whose background is hard-coded follow the chosen tint */
.ua-tinted body, .ua-tinted body.adventure, .ua-tinted body.adventure.night, .ua-tinted .tool-body { background-color: var(--cream); }
.ua-tinted .hud { background: var(--paper); }

/* Dark tint and high-contrast dark: every light surface becomes dark */
.ua-dark body { color: var(--ink); }
.ua-dark .hud, .ua-dark .pick, .ua-dark .level, .ua-dark .pill, .ua-dark .pill.streak, .ua-dark .level-chip, .ua-dark .qstop,
.ua-dark .lookagain, .ua-dark .qpanel, .ua-dark .answer, .ua-dark .name-input, .ua-dark .hint, .ua-dark .feedback .gain,
.ua-dark .choice, .ua-dark .choice .ico, .ua-dark .bubble, .ua-dark .cert, .ua-dark .report, .ua-dark .class-note,
.ua-dark .setup-card, .ua-dark .icon-btn, .ua-dark .hint-close, .ua-dark .panel, .ua-dark .example-banner, .ua-dark .demo-badge,
.ua-dark .live-badge, .ua-dark .msg, .ua-dark .seg label, .ua-dark table.results thead th, .ua-dark .tbtn, .ua-dark .switch,
.ua-dark .adv-card, .ua-dark .adv-art, .ua-dark .feature, .ua-dark .feature .ico, .ua-dark .step .art, .ua-dark .cta-inner,
.ua-dark .site-header, .ua-dark .tool-header, .ua-dark .card, .ua-dark .toast, .ua-dark .field textarea, .ua-dark .field input,
.ua-dark .stat, .ua-dark .table-wrap, .ua-dark table.results td, .ua-dark .kids li, .ua-dark .preview-card, .ua-dark dialog.confirm,
.ua-dark .report-nums div, .ua-dark .report-skills li.none .skill-tag, .ua-dark .statement kbd,
.ua-dark .quest, .ua-dark .rp-bar, .ua-dark .guide-card, .ua-dark .reward-quiet, .ua-dark .next-preview, .ua-dark details.describe {
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--forest) !important;
}
.ua-dark .bubble::after { background: var(--paper) !important; }
.ua-dark .pick[aria-checked="true"], .ua-dark .level[aria-checked="true"], .ua-dark .qstop.done, .ua-dark .qstop.current,
.ua-dark .seg label:has(input:checked) { background: #2E5A43 !important; }
.ua-contrast-high-dark .pick[aria-checked="true"], .ua-contrast-high-dark .level[aria-checked="true"], .ua-contrast-high-dark .qstop.done,
.ua-contrast-high-dark .qstop.current, .ua-contrast-high-dark .seg label:has(input:checked) { background: #1F3A2C !important; }
.ua-dark h1, .ua-dark h2, .ua-dark h3, .ua-dark h4, .ua-dark a, .ua-dark .hud-title, .ua-dark p, .ua-dark li, .ua-dark label,
.ua-dark td, .ua-dark th, .ua-dark .passage, .ua-dark .question, .ua-dark dt, .ua-dark dd, .ua-dark legend, .ua-dark summary { color: var(--ink); }
.ua-dark .hero-scene::after { display: none; }
/* In the dark theme --forest turns gold, so anything that was white-on-forest becomes black-on-gold. */
.ua-dark .step-dot, .ua-dark .cert-badge, .ua-dark .keys-link, .ua-dark .skip-link, .ua-dark .step .num, .ua-dark .poses button[aria-pressed="true"],
.ua-dark .domain-tag, .ua-dark .who-chip[aria-pressed="true"], .ua-dark .listen-btn[aria-pressed="true"], .ua-dark .eyebrow { background: #F3D27A !important; color: #000 !important; }
.ua-dark .cert-badge .icon, .ua-dark .eyebrow .icon { color: #000; }
.ua-dark a.btn, .ua-dark .btn, .ua-dark a.gbtn, .ua-dark .gbtn { color: #000; }
.ua-dark .btn-green { --bg: #F3D27A; --fg: #000; --edge: #C9A23F; }
.ua-dark .btn-ghost, .ua-dark a.btn-ghost { color: var(--ink); }
.ua-dark .tool-header nav a:hover, .ua-dark .tool-header nav a[aria-current="page"], .ua-dark .tbtn:hover { background: #2E5A43 !important; }
.ua-dark .tbtn.primary, .ua-dark .preset-row .tbtn[aria-pressed="true"] { background: #F3D27A !important; color: #000 !important; border-color: #F3D27A !important; }
.ua-dark .tbtn.danger { color: #FFB4A3 !important; border-color: #FFB4A3 !important; }
.ua-dark .muted, .ua-dark .counter, .ua-dark .na, .ua-dark .rp-val, .ua-dark .report-note, .ua-dark .report-nums span, .ua-dark .stat dt { color: var(--ink) !important; }
.ua-dark .stat dd, .ua-dark .report-nums b { color: #F3D27A; }
.ua-dark .stars3 { color: #F3D27A; } .ua-dark .stars3 .off { color: #8C8775; }
.ua-dark .badge-example, .ua-dark .placeholder-tag { background: #F3D27A; color: #000; }
.ua-dark .gbtn, .ua-dark .btn { --bg: #F3D27A; --fg: #000; --edge: #C9A23F; }
.ua-dark .gbtn.ghost, .ua-dark .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.ua-dark .site-footer { background: #000; }
.ua-dark img.scene-img, .ua-dark .scene img { filter: brightness(.92); }

/* ---------- Calm mode and stars ---------- */
.ua-calm *, .ua-calm *::before, .ua-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.ua-calm .confetti, .ua-calm .fly-star, .ua-calm .levelup, .ua-calm .typing-dots, .ua-calm .toast { display: none !important; }
.ua-hide-stars #stars-pill, .ua-hide-stars #streak-pill, .ua-hide-stars .cert-stat:nth-child(-n+2), .ua-hide-stars .feedback .gain { display: none !important; }
.reward-quiet { margin: 10px 0 0; font-weight: 800; color: var(--forest); background: #FFF4D6; border-radius: 12px; padding: 8px 14px; display: inline-block; }

/* ---------- Low vision: never let sticky bars hide focus ---------- */
@media (max-height: 500px), (max-width: 700px) { .hud, .guide, .tool-header, .site-header { position: static !important; } }
.ua-size-big .hud, .ua-size-big .guide, .ua-size-big .tool-header { position: static !important; }
.ua-size-big .hud-inner { flex-wrap: wrap; padding-block: 8px; }
.ua-size-big .hud-title { white-space: normal; }
.answer, textarea { max-height: 40vh; }
textarea.answer { resize: vertical; min-height: 4.2em; width: 100%; font: inherit; font-weight: 700; }

/* ---------- Narration ---------- */
.listen-btn { display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--forest); background: var(--paper); color: var(--forest); font: 800 1rem var(--font-body); cursor: pointer; }
.ua-narrate.ua-can-listen .listen-btn { display: inline-flex; }
.listen-btn[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.listen-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.ua-reading { background: #FBE7B6; color: #2B2A22; border-radius: 4px; box-shadow: 0 0 0 2px #FBE7B6; }
.ua-hc .ua-reading, .ua-dark .ua-reading { background: #FFE76A; color: #000; outline: 2px solid #000; box-shadow: none; }

/* ---------- Describe the picture, next preview ---------- */
details.describe { margin: 12px clamp(22px, 3vw, 40px) 0; border: 2px solid rgba(36,80,58,.25); border-radius: 14px; background: var(--paper); }
details.describe summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-weight: 800; color: var(--forest); }
details.describe summary::before { content: "▸"; display: inline-block; transition: transform .15s; }
details.describe[open] summary::before { transform: rotate(90deg); }
details.describe p { margin: 0; padding: 0 16px 14px; line-height: var(--ua-line); }
details.describe[hidden] { display: none; }
.next-preview { margin: 6px 0 0; font-size: .95rem; color: var(--muted); font-weight: 700; }
.dictation-tip { font-size: .92rem; color: var(--muted); margin: 6px 0 0; }

/* ---------- Comfort entry buttons ---------- */
.comfort-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--forest); background: var(--paper); color: var(--forest); font: 800 1rem var(--font-body); cursor: pointer; text-decoration: none; }
.comfort-btn .icon { width: 1.3em; height: 1.3em; }
@media (max-width: 599px) { .comfort-btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .comfort-btn { padding: 8px; } }
.keys-link { position: absolute; left: 12px; top: -80px; background: var(--forest); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 999; font-weight: 800; }
.keys-link:focus { top: 64px; }

/* ---------- Dialogs (comfort panel and shortcuts) ---------- */
.ua-dialog { width: min(440px, 100vw); max-width: 100vw; max-height: 100vh; height: 100vh; margin: 0 0 0 auto; padding: 0 20px 24px; border: 0;
  border-radius: 24px 0 0 24px; background: #FFFDF7; color: #2B2A22; box-shadow: -10px 0 40px rgba(24,56,41,.25); overflow-y: auto; overscroll-behavior: contain;
  font-family: var(--font-body); }
.ua-dialog[open] { animation: uaSlideIn .22s ease-out; }
.ua-dialog::backdrop { background: rgba(24,56,41,.45); }
@keyframes uaSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes uaSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 699px) {
  .ua-dialog { width: 100vw; height: auto; max-height: 88vh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .ua-dialog[open] { animation-name: uaSlideUp; }
}
@media (prefers-reduced-motion: reduce) { .ua-dialog[open] { animation: none; } }
.ua-keys { height: auto; margin: auto; border-radius: 24px; max-height: 90vh; }
.ua-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: inherit; padding: 18px 0 12px; border-bottom: 1px solid #E6D3A6; margin-bottom: 8px; }
.ua-dialog h2 { margin: 0; font: 600 1.45rem var(--font-display); color: #24503A; }
.ua-dialog h2:focus { outline: none; }
.ua-dialog h2:focus-visible { outline: 3px solid #24503A; outline-offset: 2px; }
.ua-dialog h3 { font: 600 1.15rem var(--font-display); color: #24503A; margin: 18px 0 8px; }
.ua-dialog section { padding: 0; }
.ua-close, .ua-btn, .ua-step { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid #24503A; background: #FFFDF7; color: #24503A; font: 800 1rem var(--font-body); cursor: pointer; }
.ua-close { background: #24503A; color: #FFFDF7; }
.ua-btn:disabled { opacity: .55; cursor: not-allowed; }
.ua-preview { border: 2px dashed #C9A23F; border-radius: 16px; padding: 12px 14px; background: var(--paper); color: var(--ink); }
.ua-preview strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ua-preview p { margin: 4px 0 0; line-height: var(--ua-line); }
.ua-seg { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.ua-seg legend { font-weight: 800; color: #2B2A22; padding: 0; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ua-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid #24503A; background: #FBF5E6; color: #24503A; font-weight: 800; cursor: pointer; }
.ua-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ua-pill .ua-tick { display: none; }
.ua-pill:has(input:checked) { background: #24503A; color: #FBF5E6; }
.ua-pill:has(input:checked) .ua-tick { display: inline-block; }
.ua-pill:has(input:focus-visible) { outline: 3px solid #24503A; outline-offset: 2px; box-shadow: 0 0 0 6px #FBE7B6; }
.ua-pill:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.ua-tints .ua-pills { gap: 10px 6px; }
.ua-tints .ua-pill { flex-direction: column; min-width: 64px; padding: 6px 8px; border-radius: 16px; font-size: .85rem; gap: 4px; }
.ua-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #5B574A; }
.ua-tints .ua-pill .ua-tick { position: absolute; top: 14px; color: #24503A; background: #fff; border-radius: 50%; }
.ua-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid #F0E4C8; }
.ua-row-text { display: flex; flex-direction: column; gap: 2px; }
.ua-row-label { font-weight: 800; }
.ua-row-help, .ua-note { font-size: .9rem; color: #5B574A; }
.ua-note { margin: 4px 0 10px; }
.ua-lock { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 800; color: #8F5A0E; background: #FFF4D6; border-radius: 999px; padding: 2px 8px; }
.ua-lock[hidden] { display: none; }
.ua-switch { flex: none; position: relative; width: 52px; height: 32px; min-width: 52px; border-radius: 999px; border: 2px solid #24503A; background: #FBF5E6; cursor: pointer; padding: 0;
  font: 800 .62rem var(--font-body); color: #24503A; }
.ua-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #24503A; transition: left .15s; }
.ua-switch .on, .ua-switch .off { position: absolute; top: 50%; transform: translateY(-50%); }
.ua-switch .on { left: 6px; display: none; } .ua-switch .off { right: 4px; }
.ua-switch[aria-checked="true"] { background: #24503A; color: #FBF5E6; }
.ua-switch[aria-checked="true"]::after { left: 23px; background: #FBF5E6; }
.ua-switch[aria-checked="true"] .on { display: inline; } .ua-switch[aria-checked="true"] .off { display: none; }
.ua-switch[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* make the switch's touch target 44px tall without changing its look */
.ua-switch::before { content: ""; position: absolute; inset: -8px -4px; }
.ua-voice { display: grid; gap: 6px; margin: 12px 0; }
.ua-voice label { font-weight: 800; }
.ua-voice select { min-height: 44px; border-radius: 12px; border: 2px solid #24503A; padding: 6px 10px; font: 700 1rem var(--font-body); background: #fff; color: #2B2A22; max-width: 100%; }
.ua-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; font-weight: 800; }
.ua-stepper { display: inline-flex; align-items: center; gap: 6px; }
.ua-step { padding: 0; font-size: 1.4rem; }
.ua-stepper output { min-width: 3.4em; text-align: center; font-weight: 800; }
.ua-foot { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid #E6D3A6; margin-top: 16px; padding-top: 16px; }
.ua-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: #24503A; font-weight: 700; margin: 4px 0 0; }
.ua-keytable { width: 100%; border-collapse: collapse; }
.ua-keytable th, .ua-keytable td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #F0E4C8; vertical-align: top; }
kbd { font: 800 .9rem ui-monospace, Menlo, Consolas, monospace; background: #F4E8CC; border: 1px solid #C9A23F; border-radius: 6px; padding: 2px 6px; white-space: nowrap; color: #2B2A22; }
/* the dialogs keep their own light look in dark mode but follow high-contrast dark */
.ua-contrast-high-dark .ua-dialog { background: #000; color: #FFE76A; }
.ua-contrast-high-dark .ua-dialog h2, .ua-contrast-high-dark .ua-dialog h3, .ua-contrast-high-dark .ua-seg legend, .ua-contrast-high-dark .ua-row-help,
.ua-contrast-high-dark .ua-note, .ua-contrast-high-dark .ua-privacy { color: #FFE76A; }
.ua-contrast-high-dark .ua-pill, .ua-contrast-high-dark .ua-btn, .ua-contrast-high-dark .ua-step, .ua-contrast-high-dark .ua-switch { background: #000; color: #FFE76A; border-color: #FFE76A; }
.ua-contrast-high-dark .ua-pill:has(input:checked), .ua-contrast-high-dark .ua-close { background: #FFE76A; color: #000; }

/* ---------- Reading ruler ---------- */
.ua-ruler { position: fixed; left: 0; right: 0; height: calc(2.2em * var(--ua-line)); pointer-events: none; z-index: 70; background: rgba(227,167,47,.18); border-block: 2px solid rgba(36,80,58,.45); }
.ua-ruler-focus .ua-ruler { background: transparent; box-shadow: 0 0 0 100vmax rgba(24,56,41,.45); }

/* ---------- Forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .gbtn, .choice, .answer, .pick, .level, .ua-pill, .ua-switch, .listen-btn, .comfort-btn, .ua-btn { border: 2px solid ButtonText; }
  .icon { forced-color-adjust: auto; }
  .ua-pill:has(input:checked) { outline: 3px solid Highlight; }
  .ua-switch::after { background: ButtonText; }
  .ua-reading { outline: 2px solid Highlight; }
  .ua-ruler { border-color: Highlight; }
}
.ua-dark .soon-pill { background: #F3D27A !important; color: #000 !important; }
.ua-dark .feedback.wrong { color: #FFC9A8; }
.ua-dark .feedback.correct { color: #BFE8C9; }