/* ═══════════════════════════════════════════════════════════════════════════
   YETI ACCESSIBILITY KIT v1.7.5
   Drop-in accessibility panel for all Yeti Academy games & activities

   Files:  yeti-a11y.css + yeti-a11y.js
   Prefix: ya-  (CSS classes)  |  ya-  (body state classes)

   SECTIONS
   §1   Tokens & overrides
   §2   Floating launcher button
   §3   Panel container
   §4   Panel sections (rows, headings)
   §5   Toggle switch
   §6   Button group (font size, language, color vision)
   §7   Reading guide / ruler overlays + sr-only
   §8   STATE: ya-high-contrast
   §9   STATE: ya-large-text / ya-extra-large-text
   §10  STATE: ya-reduce-motion
   §11  STATE: ya-voice-over (hover ring)
   §12  STATE: ya-dyslexia-font
   §13  STATE: ya-focus-indicators
   §14  STATE: ya-readability-mode
   §15  STATE: ya-big-cursor
   §16  STATE: ya-compact-mode
   §17  STATE: ya-cv-* (color vision filters)
   §18  Read-Along player
   §19  Responsive
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ §1  Tokens & overrides ═══════════════════════════════════════════════ */
:root {
    --ya-primary:        #12A0DD;
    --ya-primary-dark:   #0d80b0;
    --ya-accent:         #69b64b;
    --ya-text:           #2c3e50;
    --ya-text-light:     #555;
    --ya-bg:             #ffffff;
    --ya-bg-alt:         #f8f9fc;
    --ya-border:         #e8ecf1;
    --ya-shadow:         0 8px 32px rgba(0, 0, 0, 0.15);
    --ya-radius:         12px;
    --ya-radius-sm:      8px;
    --ya-font:           'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ya-z-button:       9990;
    --ya-z-panel:        9991;
    --ya-z-badge:        9992;
    --ya-z-guide:        9999;
    --ya-z-tooltip:     10000;
}


/* ═══ §2  Floating launcher button ═════════════════════════════════════════
   The icon (ya_iconSVG) brings its own brand-blue circle background, so the
   button itself is just a transparent container with a drop-shadow.
   ═════════════════════════════════════════════════════════════════════════ */
.ya-launcher {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #fff;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 4px 16px rgba(18, 160, 221, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    z-index: var(--ya-z-button);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ya-font);
    transition: transform 0.2s ease, filter 0.2s ease;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.ya-launcher:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 6px 20px rgba(18, 160, 221, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.ya-launcher:focus {
    outline: none;
}
.ya-launcher:focus-visible .ya-launcher-icon .ya-icon-bg {
    stroke: #ffd700;
    stroke-width: 24;
}
.ya-launcher[aria-expanded="true"] {
    transform: scale(1.05);
}
.ya-launcher-icon {
    width: 52px;
    height: 52px;
    display: block;
}


/* ═══ §3  Panel container ══════════════════════════════════════════════════
   v1.6: responsive two-column layout. Wide panel on desktops/tablets fits
   Chromebook viewports (≤768px tall) without scrolling. Falls back to
   single-column on phones.
   ══════════════════════════════════════════════════════════════════════════ */
.ya-panel {
    position: fixed;
    bottom: 84px;
    left: 20px;
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
    overscroll-behavior: contain;        /* don't rubber-band the page */
    background: var(--ya-bg);
    color: var(--ya-text);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 0;
    z-index: var(--ya-z-panel);
    font-family: var(--ya-font);
    display: none;
}
.ya-panel.ya-open {
    display: block;
    animation: ya-slide-in 0.25s ease;
}
@keyframes ya-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* On narrow screens (phones), collapse to a single column */
@media (max-width: 720px) {
    .ya-panel {
        width: 340px;
    }
}

/* Header bar — gradient brand colors, pinned at top */
.ya-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--ya-primary) 0%, var(--ya-primary-dark) 100%);
    color: #fff;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.ya-panel-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}
.ya-panel-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.ya-panel-head-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ya-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.ya-close:hover { background: rgba(255, 255, 255, 0.32); }
.ya-close:focus { outline: 3px solid #ffd700; outline-offset: 2px; }

/* Body region — now uses CSS Grid for the two-column layout */
.ya-panel-body {
    padding: 12px 20px 16px;
}

/* Language row stays full-width above the columns */
.ya-lang-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ya-border);
}
.ya-lang-row .ya-group-label {
    margin-bottom: 6px;
}

/* Two-column grid for the four sections.
   On wide screens: Vision + Audio in left, Reading + Input in right.
   On narrow screens: stacks to single column. */
.ya-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    align-items: start;
}
.ya-grid-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
/* If the second column is empty (e.g. kiosk build with only one feature
   group), collapse the grid to single column so we don't get awkward
   empty space on the right */
.ya-sections-grid.ya-single-col {
    grid-template-columns: 1fr;
}
@media (max-width: 720px) {
    .ya-sections-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ya-grid-col {
        gap: 8px;
    }
}


/* ═══ §4  Panel sections ═══════════════════════════════════════════════════ */
.ya-section {
    /* No top margin — grid gap handles spacing */
}
.ya-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ya-primary);
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ya-border);
}
.ya-section-head-icon {
    font-size: 14px;
    line-height: 1;
}

.ya-row {
    padding: 8px 0;
}
.ya-row + .ya-row {
    border-top: 1px solid var(--ya-border);
}

.ya-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ya-toggle-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.ya-row-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ya-text);
    cursor: pointer;
    margin: 0;
}
.ya-row-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}
.ya-row-icon {
    font-size: 18px;
    line-height: 1;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.ya-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ya-row-note {
    font-size: 12px;
    font-weight: 400;
    color: #6b7785;
    margin-top: 2px;
    line-height: 1.35;
    /* Allow descriptions to wrap at word boundaries cleanly */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.ya-row-name {
    /* The bold feature name (e.g. "Voice Over") */
}

/* ── Help (?) button and tooltip popover ──────────────────────────────
   The ? button lives next to the row label. Click/tap toggles a tooltip
   popover. Hovering also shows it for mouse users. The tooltip uses
   position: fixed and is positioned via JS so it can escape the panel's
   overflow:auto clipping.
   ───────────────────────────────────────────────────────────────────── */
.ya-help {
    position: relative;
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    color: var(--ya-text-light);
    border: 1.5px solid var(--ya-border);
    border-radius: 50%;
    font-family: var(--ya-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Keep the help icon's hit area constrained to the actual visible
   button so it cannot bleed over the adjacent toggle. */
.ya-help::before {
    content: none;
}

/* Show the ? button in two-column mode (where the inline note is hidden) */
@media (min-width: 721px) {
    .ya-sections-grid:not(.ya-single-col) .ya-help {
        display: inline-flex;
    }
}
/* Always show in compact mode */
body.ya-compact-mode .ya-help {
    display: inline-flex;
    width: 18px;
    height: 18px;
    font-size: 11px;
}

.ya-toggle-row .ya-help {
    margin-left: 0;
}

.ya-help:hover,
.ya-help.ya-help-open {
    background: var(--ya-primary);
    color: #fff;
    border-color: var(--ya-primary);
}
.ya-help:focus-visible {
    outline: 3px solid var(--ya-primary);
    outline-offset: 2px;
}

/* Tooltip popover — appended to document.body, positioned via JS.
   Uses position:fixed so it isn't clipped by .ya-panel's overflow. */
.ya-tooltip {
    position: fixed;
    z-index: var(--ya-z-tooltip, 10000);
    display: none;
    max-width: 240px;
    min-width: 180px;
    padding: 10px 12px;
    background: #2c3e50;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    pointer-events: none;
    white-space: normal;
    font-family: var(--ya-font);
}
.ya-tooltip.ya-tooltip-visible {
    display: block;
}
/* Arrow pointing to the help button — positioned by JS via inline style
   for left offset, fixed bottom-edge style here */
.ya-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--ya-tooltip-arrow-x, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
}
/* Variant for tooltips that flipped below the button */
.ya-tooltip.ya-tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2c3e50;
}

body.ya-high-contrast .ya-tooltip {
    background: #000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}
body.ya-high-contrast .ya-tooltip::after {
    border-top-color: #ffff00 !important;
}
body.ya-high-contrast .ya-help {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
}
body.ya-high-contrast .ya-help:hover,
body.ya-high-contrast .ya-help.ya-help-open {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #000 !important;
}

/* ── Two-column density rules ─────────────────────────────────────────
   When the panel is in two-column mode (wide screens), each column is
   only ~280px wide. Descriptions and icons would force the labels to
   wrap into illegible 1-2 word fragments. Hide them by default in
   two-column mode and rely on the label + toggle alone, which is
   still self-explanatory.

   On single-column (≤720px) the panel is 340px wide and there's room
   for the full layout, so descriptions and icons stay visible.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
    /* Hide descriptions in two-column mode — they wrap badly in narrow
       columns and the label alone is enough for the common features */
    .ya-sections-grid:not(.ya-single-col) .ya-row-note {
        display: none;
    }
    /* Tighter row padding when there's no description to space out */
    .ya-sections-grid:not(.ya-single-col) .ya-row {
        padding: 6px 0;
    }
    /* Tighter section heading spacing */
    .ya-sections-grid:not(.ya-single-col) .ya-section-head {
        margin-bottom: 4px;
        padding-bottom: 4px;
    }
}

/* ── Compact Mode (body.ya-compact-mode) ──────────────────────────────
   Compact Mode is a user-toggleable density setting that affects both
   the panel AND the page (pages can hook into body.ya-compact-mode for
   their own density adjustments). Inside the panel, Compact Mode:
     - Hides descriptions even on narrow/single-column layouts
     - Hides decorative row icons
     - Shrinks row padding
     - Slightly smaller toggle switches and label text
   ───────────────────────────────────────────────────────────────────── */
body.ya-compact-mode .ya-row-note {
    display: none;
}
body.ya-compact-mode .ya-row-icon {
    display: none;
}
body.ya-compact-mode .ya-row {
    padding: 5px 0;
}
body.ya-compact-mode .ya-row-label {
    font-size: 13px;
}
body.ya-compact-mode .ya-section-head {
    font-size: 10px;
    margin-bottom: 4px;
    padding-bottom: 4px;
}
body.ya-compact-mode .ya-switch {
    width: 40px;
    /* keep 44px tap area for touch even in compact */
}
body.ya-compact-mode .ya-switch-track {
    width: 40px;
    height: 22px;
}
body.ya-compact-mode .ya-switch-track::after {
    width: 16px;
    height: 16px;
}
body.ya-compact-mode .ya-switch input:checked + .ya-switch-track::after {
    transform: translateX(18px);
}
body.ya-compact-mode .ya-panel-body {
    padding: 10px 16px 12px;
}
body.ya-compact-mode .ya-lang-section {
    margin-bottom: 10px;
    padding-bottom: 10px;
}
body.ya-compact-mode .ya-panel-footer {
    margin-top: 10px;
    padding-top: 8px;
}

.ya-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ya-text);
    margin-bottom: 6px;
}

/* ── Footer (status + reset) ─────────────────────────────────────────── */
.ya-panel-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid var(--ya-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Status indicator — left side of footer */
.ya-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    min-height: 28px;
    line-height: 1;
}
.ya-status-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

/* Status states */
.ya-status[data-state="saved"] {
    background: #e8f5e9;
    color: #2e7d32;
}
.ya-status[data-state="saving"] {
    background: #e3f2fd;
    color: #1565c0;
}
.ya-status[data-state="unsaved"] {
    background: #fff3e0;
    color: #e65100;
}
.ya-status[data-state="error"] {
    background: #ffebee;
    color: #c62828;
}
.ya-status[data-state="local"] {
    background: var(--ya-bg-alt);
    color: var(--ya-text-light);
}

/* Spinning icon for the saving state */
.ya-status[data-state="saving"] .ya-status-icon {
    animation: ya-spin 1s linear infinite;
}
@keyframes ya-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Reset button — right side of footer */
.ya-reset-btn {
    background: transparent;
    color: var(--ya-text-light);
    border: 1px solid var(--ya-border);
    padding: 10px 16px;
    border-radius: 6px;
    font-family: var(--ya-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;       /* WCAG 2.5.5 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ya-reset-btn:hover {
    background: var(--ya-bg-alt);
    color: var(--ya-text);
    border-color: #c0c8d4;
}
.ya-reset-btn:focus {
    outline: 3px solid var(--ya-primary);
    outline-offset: 2px;
}


/* ═══ §5  Toggle switch ════════════════════════════════════════════════════ */
.ya-switch {
    position: relative;
    width: 48px;
    height: 44px;          /* WCAG 2.5.5 — 44px tap target */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.ya-switch input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;          /* full 44px hit area */
    margin: 0;
    cursor: pointer;
}
.ya-switch-track {
    display: block;
    width: 48px;
    height: 26px;          /* visual track stays 26px */
    background: #ccc;
    border-radius: 13px;
    transition: background 0.25s;
    position: relative;
    pointer-events: none;  /* clicks pass through to the input */
}
.ya-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ya-switch input:checked + .ya-switch-track {
    background: var(--ya-primary);
}
.ya-switch input:checked + .ya-switch-track::after {
    transform: translateX(22px);
}
.ya-switch input:focus + .ya-switch-track {
    outline: 3px solid var(--ya-primary);
    outline-offset: 2px;
}


/* ═══ §6  Button group (font size, language, color vision) ════════════════ */
.ya-btn-group {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.ya-btn {
    flex: 1;
    padding: 11px 10px;
    border: 2px solid var(--ya-border);
    background: var(--ya-bg);
    color: var(--ya-text);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--ya-font);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 44px;       /* WCAG 2.5.5 */
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.ya-btn:hover {
    border-color: var(--ya-primary);
    color: var(--ya-primary);
}
.ya-btn:active {
    transform: scale(0.97);
}
.ya-btn.ya-active {
    background: var(--ya-primary);
    color: #fff;
    border-color: var(--ya-primary);
}
.ya-btn:focus {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}
.ya-btn-fontsize-1 { font-size: 13px; }
.ya-btn-fontsize-2 { font-size: 17px; }
.ya-btn-fontsize-3 { font-size: 21px; }

/* Compact 4-up grid for Color Vision (4 buttons in one row, narrower) */
.ya-btn-group-cv {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.ya-btn-group-cv .ya-btn {
    padding: 8px 4px;
    font-size: 11px;
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
}
.ya-btn-cv-swatch {
    display: block;
    width: 22px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.ya-btn-cv-swatch-off  { background: linear-gradient(90deg, #e74c3c 0%, #27ae60 50%, #3498db 100%); }
.ya-btn-cv-swatch-rg   { background: linear-gradient(90deg, #d35400 0%, #f39c12 50%, #16a085 100%); }
.ya-btn-cv-swatch-by   { background: linear-gradient(90deg, #c0392b 0%, #8e44ad 50%, #2980b9 100%); }
.ya-btn-cv-swatch-gray { background: linear-gradient(90deg, #2c3e50 0%, #95a5a6 50%, #ecf0f1 100%); }


/* ═══ §7  Reading guide + skip link + sr-only ═════════════════════════════ */
.ya-reading-guide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 215, 0, 0.85);
    z-index: var(--ya-z-guide);
    pointer-events: none;
    display: none;
}
body.ya-reading-guide-on .ya-reading-guide { display: block; }

.ya-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    background: var(--ya-primary);
    color: #fff;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: var(--ya-radius-sm);
    z-index: 10000;
    font-family: var(--ya-font);
    font-weight: 600;
}
.ya-skip-link:focus { top: 8px; }

.ya-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;
}


/* ═══ §8  STATE: ya-high-contrast ══════════════════════════════════════════
   Inverts the page to a black background with white text and yellow accents.

   STRATEGY
   - Page elements: black bg, white text, yellow links/focus, white borders
   - Containers (div, section, etc.) get reset backgrounds + box-shadow off
   - Game devs can opt out specific elements by adding class="ya-keep" or
     by writing higher-specificity overrides
   - The kit's own panel + launcher use a white-on-black inversion so the
     controls themselves stay bright and obvious

   IMPORTANT
   Every panel rule below uses !important to win against the universal page
   rules. When extending high contrast for your own game, do the same.
   ═════════════════════════════════════════════════════════════════════════ */

/* §8a Page reset */
body.ya-high-contrast {
    background: #000 !important;
    color: #fff !important;
}
body.ya-high-contrast main,
body.ya-high-contrast section,
body.ya-high-contrast article,
body.ya-high-contrast aside,
body.ya-high-contrast header,
body.ya-high-contrast footer,
body.ya-high-contrast nav,
body.ya-high-contrast div:not([class*="ya-"]):not(.ya-keep) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}
body.ya-high-contrast h1,
body.ya-high-contrast h2,
body.ya-high-contrast h3,
body.ya-high-contrast h4,
body.ya-high-contrast h5,
body.ya-high-contrast h6,
body.ya-high-contrast p,
body.ya-high-contrast li,
body.ya-high-contrast td,
body.ya-high-contrast th,
body.ya-high-contrast dt,
body.ya-high-contrast dd,
body.ya-high-contrast figcaption,
body.ya-high-contrast blockquote,
body.ya-high-contrast strong,
body.ya-high-contrast em,
body.ya-high-contrast code,
body.ya-high-contrast small,
body.ya-high-contrast span:not([class*="ya-"]),
body.ya-high-contrast label:not([class*="ya-"]) {
    color: #fff !important;
    background-color: transparent !important;
}
body.ya-high-contrast a:not([class*="ya-"]) {
    color: #ffff00 !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}
body.ya-high-contrast a:not([class*="ya-"]):hover,
body.ya-high-contrast a:not([class*="ya-"]):focus {
    background: #ffff00 !important;
    color: #000 !important;
}
body.ya-high-contrast button:not([class*="ya-"]),
body.ya-high-contrast input[type="button"],
body.ya-high-contrast input[type="submit"] {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
body.ya-high-contrast button:not([class*="ya-"]):hover,
body.ya-high-contrast button:not([class*="ya-"]):focus,
body.ya-high-contrast input[type="button"]:hover,
body.ya-high-contrast input[type="submit"]:hover {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #ffff00 !important;
}
body.ya-high-contrast input[type="text"],
body.ya-high-contrast input[type="number"],
body.ya-high-contrast input[type="email"],
body.ya-high-contrast input[type="password"],
body.ya-high-contrast input[type="search"],
body.ya-high-contrast textarea,
body.ya-high-contrast select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
body.ya-high-contrast img:not([class*="ya-"]) {
    filter: contrast(1.2) brightness(1.1);
}

/* §8b The kit's own UI — white panel on black page */
body.ya-high-contrast .ya-launcher {
    filter: drop-shadow(0 4px 16px rgba(255, 255, 0, 0.5)) drop-shadow(0 0 0 2px #000);
}
body.ya-high-contrast .ya-launcher-icon .ya-icon-bg {
    fill: #000 !important;
    stroke: #ffff00 !important;
    stroke-width: 16 !important;
}
body.ya-high-contrast .ya-launcher-icon .ya-icon-fg {
    fill: #ffff00 !important;
}
body.ya-high-contrast .ya-panel-head-icon .ya-icon-bg {
    fill: #000 !important;
    stroke: #ffff00 !important;
    stroke-width: 16 !important;
}
body.ya-high-contrast .ya-panel-head-icon .ya-icon-fg {
    fill: #ffff00 !important;
}
body.ya-high-contrast .ya-panel {
    background: #fff !important;
    color: #000 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 3px #000, 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
/* Header bar — flip to solid black with yellow text in HC */
body.ya-high-contrast .ya-panel-head {
    background: #000 !important;
    color: #ffff00 !important;
    border-bottom: 3px solid #ffff00 !important;
}
body.ya-high-contrast .ya-panel-head h2 {
    color: #ffff00 !important;
}
body.ya-high-contrast .ya-section-head {
    color: #000 !important;
    border-bottom-color: #000 !important;
}
body.ya-high-contrast .ya-row + .ya-row {
    border-top-color: #000 !important;
}
/* Force every text node inside the panel BODY to black.
   IMPORTANT: do NOT include .ya-panel itself or .ya-panel-head in this list
   — those have their own backgrounds and including them zeroes them out. */
body.ya-high-contrast .ya-panel-body h1,
body.ya-high-contrast .ya-panel-body h2,
body.ya-high-contrast .ya-panel-body h3,
body.ya-high-contrast .ya-panel-body p,
body.ya-high-contrast .ya-panel-body span,
body.ya-high-contrast .ya-panel-body label,
body.ya-high-contrast .ya-panel-body div,
body.ya-high-contrast .ya-panel-body .ya-row-label,
body.ya-high-contrast .ya-panel-body .ya-row-title,
body.ya-high-contrast .ya-panel-body .ya-group-label {
    color: #000 !important;
    background-color: transparent !important;
}
body.ya-high-contrast .ya-panel-body .ya-row-note {
    color: #333 !important;
}
body.ya-high-contrast .ya-close {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
}
body.ya-high-contrast .ya-close:hover,
body.ya-high-contrast .ya-close:focus {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #000 !important;
}
/* Buttons inside panel (font size + language) — white, with black active */
body.ya-high-contrast .ya-btn {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}
body.ya-high-contrast .ya-btn:hover,
body.ya-high-contrast .ya-btn:focus,
body.ya-high-contrast .ya-btn.ya-active {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #000 !important;
}
/* Toggle switches — black track, white thumb, yellow when on */
body.ya-high-contrast .ya-switch-track {
    background: #fff !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 2px #000 !important;
}
body.ya-high-contrast .ya-switch-track::after {
    background: #000 !important;
}
body.ya-high-contrast .ya-switch input:checked + .ya-switch-track {
    background: #000 !important;
}
body.ya-high-contrast .ya-switch input:checked + .ya-switch-track::after {
    background: #ffff00 !important;
}
body.ya-high-contrast .ya-switch input:focus + .ya-switch-track {
    outline: 3px solid #ffff00 !important;
    outline-offset: 3px !important;
}
/* Reset button — HC variant */
body.ya-high-contrast .ya-reset-btn {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}
body.ya-high-contrast .ya-reset-btn:hover,
body.ya-high-contrast .ya-reset-btn:focus {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #000 !important;
}
body.ya-high-contrast .ya-panel-footer {
    border-top-color: #000 !important;
}
body.ya-high-contrast .ya-lang-section {
    border-bottom-color: #000 !important;
}
/* Status indicator — high contrast: black bg, yellow text for all states */
body.ya-high-contrast .ya-status {
    background: #000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}
/* Color vision swatches — keep their actual colors so users can see them */
body.ya-high-contrast .ya-btn-cv-swatch {
    border: 2px solid #000 !important;
}


/* ═══ §9  STATE: text size ════════════════════════════════════════════════ */
body.ya-large-text       { font-size: 18px; }
body.ya-large-text h1    { font-size: 32px; }
body.ya-large-text h2    { font-size: 26px; }
body.ya-large-text h3    { font-size: 22px; }
body.ya-large-text button,
body.ya-large-text input,
body.ya-large-text select,
body.ya-large-text textarea { font-size: 17px; }

body.ya-extra-large-text     { font-size: 21px; }
body.ya-extra-large-text h1  { font-size: 36px; }
body.ya-extra-large-text h2  { font-size: 30px; }
body.ya-extra-large-text h3  { font-size: 25px; }
body.ya-extra-large-text button,
body.ya-extra-large-text input,
body.ya-extra-large-text select,
body.ya-extra-large-text textarea { font-size: 19px; }

/* Keep panel readable but not bloated when text size grows */
body.ya-large-text .ya-panel,
body.ya-extra-large-text .ya-panel { font-size: 15px; }


/* ═══ §10 STATE: ya-reduce-motion ═════════════════════════════════════════ */
body.ya-reduce-motion *,
body.ya-reduce-motion *::before,
body.ya-reduce-motion *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}


/* ═══ §11 STATE: ya-voice-over ════════════════════════════════════════════
   Adds a small badge and a subtle outline to the element being read.
   ═════════════════════════════════════════════════════════════════════════ */
body.ya-voice-over::after {
    content: '🔊 Voice Over';
    position: fixed;
    bottom: 16px;
    left: 16px;
    background: var(--ya-primary);
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ya-font);
    z-index: var(--ya-z-badge);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.ya-voice-over .ya-vo-hover {
    outline: 3px solid var(--ya-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
body.ya-high-contrast.ya-voice-over::after {
    background: #ffff00;
    color: #000;
}
body.ya-high-contrast.ya-voice-over .ya-vo-hover {
    outline-color: #ffff00;
}


/* ═══ §12 STATE: ya-dyslexia-font ═════════════════════════════════════════ */
body.ya-dyslexia-font {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Arial', sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.16em;
    line-height: 1.8;
}


/* ═══ §13 STATE: ya-focus-indicators ══════════════════════════════════════ */
body.ya-focus-indicators a[href]:focus,
body.ya-focus-indicators button:focus,
body.ya-focus-indicators input:not([type="hidden"]):focus,
body.ya-focus-indicators select:focus,
body.ya-focus-indicators textarea:focus,
body.ya-focus-indicators summary:focus,
body.ya-focus-indicators [role="button"]:focus,
body.ya-focus-indicators [role="link"]:focus,
body.ya-focus-indicators [role="menuitem"]:focus,
body.ya-focus-indicators [role="tab"]:focus,
body.ya-focus-indicators [role="checkbox"]:focus,
body.ya-focus-indicators [role="radio"]:focus,
body.ya-focus-indicators [role="switch"]:focus,
body.ya-focus-indicators [tabindex]:not([tabindex="-1"]):focus,
body.ya-focus-indicators a[href]:focus-visible,
body.ya-focus-indicators button:focus-visible,
body.ya-focus-indicators input:not([type="hidden"]):focus-visible,
body.ya-focus-indicators select:focus-visible,
body.ya-focus-indicators textarea:focus-visible,
body.ya-focus-indicators summary:focus-visible,
body.ya-focus-indicators [role="button"]:focus-visible,
body.ya-focus-indicators [role="link"]:focus-visible,
body.ya-focus-indicators [role="menuitem"]:focus-visible,
body.ya-focus-indicators [role="tab"]:focus-visible,
body.ya-focus-indicators [role="checkbox"]:focus-visible,
body.ya-focus-indicators [role="radio"]:focus-visible,
body.ya-focus-indicators [role="switch"]:focus-visible,
body.ya-focus-indicators [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(18, 160, 221, 0.3) !important;
}

body.ya-focus-indicators :focus:not(html):not(body):not(input[type="hidden"]),
body.ya-focus-indicators :focus-visible:not(html):not(body):not(input[type="hidden"]) {
    outline: 3px solid #ffd700 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(18, 160, 221, 0.3) !important;
}

body.ya-focus-indicators .ya-switch input:focus + .ya-switch-track,
body.ya-focus-indicators .ya-switch input:focus-visible + .ya-switch-track {
    outline: 3px solid #ffd700 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(18, 160, 221, 0.3) !important;
}

body.ya-high-contrast.ya-focus-indicators a[href]:focus,
body.ya-high-contrast.ya-focus-indicators button:focus,
body.ya-high-contrast.ya-focus-indicators input:not([type="hidden"]):focus,
body.ya-high-contrast.ya-focus-indicators select:focus,
body.ya-high-contrast.ya-focus-indicators textarea:focus,
body.ya-high-contrast.ya-focus-indicators summary:focus,
body.ya-high-contrast.ya-focus-indicators [role="button"]:focus,
body.ya-high-contrast.ya-focus-indicators [role="link"]:focus,
body.ya-high-contrast.ya-focus-indicators [role="menuitem"]:focus,
body.ya-high-contrast.ya-focus-indicators [role="tab"]:focus,
body.ya-high-contrast.ya-focus-indicators [role="checkbox"]:focus,
body.ya-high-contrast.ya-focus-indicators [role="radio"]:focus,
body.ya-high-contrast.ya-focus-indicators [role="switch"]:focus,
body.ya-high-contrast.ya-focus-indicators [tabindex]:not([tabindex="-1"]):focus,
body.ya-high-contrast.ya-focus-indicators a[href]:focus-visible,
body.ya-high-contrast.ya-focus-indicators button:focus-visible,
body.ya-high-contrast.ya-focus-indicators input:not([type="hidden"]):focus-visible,
body.ya-high-contrast.ya-focus-indicators select:focus-visible,
body.ya-high-contrast.ya-focus-indicators textarea:focus-visible,
body.ya-high-contrast.ya-focus-indicators summary:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="button"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="link"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="menuitem"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="tab"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="checkbox"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="radio"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [role="switch"]:focus-visible,
body.ya-high-contrast.ya-focus-indicators [tabindex]:not([tabindex="-1"]):focus-visible,
body.ya-high-contrast.ya-focus-indicators :focus:not(html):not(body):not(input[type="hidden"]),
body.ya-high-contrast.ya-focus-indicators :focus-visible:not(html):not(body):not(input[type="hidden"]),
body.ya-high-contrast.ya-focus-indicators .ya-switch input:focus + .ya-switch-track,
body.ya-high-contrast.ya-focus-indicators .ya-switch input:focus-visible + .ya-switch-track {
    box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.35) !important;
}


/* ═══ §14 STATE: ya-readability-mode ══════════════════════════════════════
   Light cream background with extra spacing — for text-heavy pages.
   ═════════════════════════════════════════════════════════════════════════ */
body.ya-readability-mode {
    background: #fdfaf3;
}
body.ya-readability-mode p,
body.ya-readability-mode li {
    line-height: 1.9;
    max-width: 70ch;
}


/* ═══ §15 STATE: ya-compact-mode ══════════════════════════════════════════ */
body.ya-compact-mode .ya-panel {
    width: 560px;
}
body.ya-compact-mode .ya-sections-grid {
    gap: 8px 14px;
}

@media (max-width: 720px) {
    body.ya-compact-mode .ya-panel {
        width: 320px;
    }
    body.ya-compact-mode .ya-sections-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* ═══ §15b STATE: ya-cv-* (Color Vision filters) ══════════════════════════
   Approximate hue/saturation shifts that help distinguish colors for the
   most common types of color vision deficiency. Applied to .ya-page-wrap
   instead of body so position:fixed elements (the kit's launcher and
   panel) keep their viewport-relative positioning.
   ═════════════════════════════════════════════════════════════════════════ */
.ya-page-wrap {
    /* No styles by default — only acts as a filter target */
}
body.ya-cv-rg .ya-page-wrap   { filter: saturate(1.5) hue-rotate(15deg); }
body.ya-cv-by .ya-page-wrap   { filter: saturate(1.5) hue-rotate(-25deg); }
body.ya-cv-gray .ya-page-wrap { filter: grayscale(1); }

/* Teacher-v6 portals its page overlays onto <body> so the wrap's filter
   cannot become their containing block and wreck position:fixed (#3345).
   That puts them outside the wrap, so the colour-vision filter has to be
   re-applied here or modals would stay in full colour while the page behind
   them is filtered.

   The filter goes on the CHILDREN, not on the flagged element itself. Some
   flagged nodes are zero-height static wrappers (the layout's reset-password
   and profile partials, #yr-toast-mount) whose real overlay is a position:
   fixed child. Filtering the wrapper would make it that child's containing
   block, collapsing `inset: 0` to the wrapper's 0-height box and throwing the
   modal off-screen. Filtering the child instead is safe: a filter only
   establishes a containing block for an element's own descendants, and those
   are static or absolute in every one of these overlays. */
body.ya-cv-rg   > [data-yr-overlay] > * { filter: saturate(1.5) hue-rotate(15deg); }
body.ya-cv-by   > [data-yr-overlay] > * { filter: saturate(1.5) hue-rotate(-25deg); }
body.ya-cv-gray > [data-yr-overlay] > * { filter: grayscale(1); }


/* ═══ §15c STATE: ya-mute-sfx ══════════════════════════════════════════════
   The kit doesn't actually mute audio — it just sets a body class and fires
   the yeti-a11y:change event. Games listen and silence their own decorative
   audio (NOT speech, which is handled by Voice Over and Read-Along).
   ═════════════════════════════════════════════════════════════════════════ */
/* No visual styles — body class is informational only */


/* ═══ §15d STATE: ya-big-cursor ════════════════════════════════════════════
   Replaces the system cursor with a 32-pixel high-contrast SVG arrow.
   Browsers cap cursor size at ~32×32 reliably (Safari especially), so 32 is
   the largest size we can guarantee. Pointer cursor swapped for buttons.
   ═════════════════════════════════════════════════════════════════════════ */
body.ya-big-cursor,
body.ya-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 2 L4 26 L11 20 L16 30 L20 28 L15 18 L24 18 Z' fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}
body.ya-big-cursor a,
body.ya-big-cursor button,
body.ya-big-cursor [role="button"],
body.ya-big-cursor label,
body.ya-big-cursor input[type="checkbox"],
body.ya-big-cursor input[type="radio"],
body.ya-big-cursor select,
body.ya-big-cursor .ya-switch {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M14 4 L14 18 L10 18 L10 22 L14 22 L14 28 L18 28 L18 22 L22 22 L22 18 L18 18 L18 4 Z M16 6 L16 4' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/><circle cx='16' cy='14' r='2' fill='black'/></svg>") 16 4, pointer !important;
}
/* High-contrast variant — yellow cursor with thick black outline */
body.ya-high-contrast.ya-big-cursor,
body.ya-high-contrast.ya-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 2 L4 26 L11 20 L16 30 L20 28 L15 18 L24 18 Z' fill='%23ffff00' stroke='black' stroke-width='3' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}


/* ═══ §15e STATE: ya-reading-ruler-on ═════════════════════════════════════
   Two semi-opaque overlays that follow the cursor, leaving a clear band of
   ~80px around the current Y position. Like a physical ruler under text.
   Different from the reading guide (which is a thin line) — the ruler dims
   surrounding content to focus attention.
   ═════════════════════════════════════════════════════════════════════════ */
.ya-ruler-top, .ya-ruler-bot {
    position: fixed;
    left: 0;
    width: 100vw;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: var(--ya-z-guide);
    display: none;
    transition: none;
}
body.ya-reading-ruler-on .ya-ruler-top {
    display: block;
    top: 0;
}
body.ya-reading-ruler-on .ya-ruler-bot {
    display: block;
}
body.ya-high-contrast .ya-ruler-top,
body.ya-high-contrast .ya-ruler-bot {
    background: rgba(0, 0, 0, 0.85);
}


/* ═══ §16 Read-Along (data-ya-read) ═══════════════════════════════════════
   Karaoke-style word highlighting paired with text-to-speech. The kit
   wraps each word in a span and the spans get highlight classes as they
   are spoken. Controlled by an auto-injected play/pause button.

   USAGE
   <p data-ya-read>Once upon a time, in a snowy mountain...</p>

   Or programmatically:
       YetiA11y.attachReader(document.querySelector('#myStory'));
   ═════════════════════════════════════════════════════════════════════════ */

/* The play/pause button injected before each readable element */
.ya-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ya-primary);
    color: #fff;
    border: 2px solid var(--ya-primary);
    border-radius: var(--ya-radius-sm);
    cursor: pointer;
    font-family: var(--ya-font);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    transition: background 0.2s, transform 0.15s;
    min-height: 44px;          /* WCAG 2.5.8 target size */
}
.ya-read-btn:hover {
    background: var(--ya-primary-dark);
    border-color: var(--ya-primary-dark);
}
.ya-read-btn:focus {
    outline: 3px solid #ffd700;
    outline-offset: 3px;
}
.ya-read-btn:active {
    transform: scale(0.97);
}
.ya-read-btn-icon {
    font-size: 14px;
    line-height: 1;
}
.ya-read-btn[data-ya-state="playing"] {
    background: #f39c12;
    border-color: #f39c12;
}
.ya-read-btn[data-ya-state="playing"]:hover {
    background: #e67e22;
    border-color: #e67e22;
}

/* The element being read gets this class */
.ya-readable {
    /* No layout change — wrapping is invisible until reading starts */
}

/* Each word wrapped by the kit */
.ya-readable .ya-word {
    display: inline;
    border-radius: 3px;
    padding: 1px 0;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.2s ease;
}

/* Dim unread words while a session is active so the eye tracks the highlight */
.ya-readable.ya-reading .ya-word {
    opacity: 0.45;
}
.ya-readable.ya-reading .ya-word.ya-read {
    opacity: 1;
}

/* The currently-spoken word — bright yellow highlight */
.ya-readable .ya-word.ya-current {
    background: #ffeb3b;
    color: #000 !important;
    opacity: 1;
    padding: 1px 4px;
    margin: 0 -2px;             /* compensate so layout doesn't shift */
    box-shadow: 0 2px 0 #f9a825;
    font-weight: 600;
}

/* High-contrast variants */
body.ya-high-contrast .ya-read-btn {
    background: #000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}
body.ya-high-contrast .ya-read-btn:hover,
body.ya-high-contrast .ya-read-btn:focus {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #ffff00 !important;
}
body.ya-high-contrast .ya-read-btn[data-ya-state="playing"] {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #ffff00 !important;
}
body.ya-high-contrast .ya-readable .ya-word.ya-current {
    background: #ffff00 !important;
    color: #000 !important;
    box-shadow: 0 0 0 2px #000 !important;
}
body.ya-high-contrast .ya-readable.ya-reading .ya-word {
    color: #fff !important;
    opacity: 0.55;
}
body.ya-high-contrast .ya-readable.ya-reading .ya-word.ya-read {
    color: #fff !important;
    opacity: 1;
}

/* Reduce-motion variant — no opacity transitions, just instant highlight */
body.ya-reduce-motion .ya-readable .ya-word {
    transition: none !important;
}


/* ═══ §17 Responsive ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .ya-launcher {
        bottom: 12px;
        left: 12px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .ya-panel {
        bottom: 68px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ya-panel,
    .ya-launcher,
    .ya-switch-track,
    .ya-switch-track::after,
    .ya-btn {
        transition: none !important;
        animation: none !important;
    }
}