/* =========================================================================
 * RM Quiz Builder — Calm Mode (autism-friendly) + legibility controls
 *
 * Everything is scoped to .rmqb-wrapper and gated on the data-* flags that the
 * server render and the accessibility widget set on the wrapper:
 *
 *   [data-calm="1"]         muted low-stimulation palette, stilled motion,
 *                           de-alarmed timer, extra whitespace, softened
 *                           correct/incorrect option colours
 *   [data-font-scale=lg|xl] larger, more readable text
 *   [data-spacing="1"]      extra line / letter / word spacing
 *   [data-dyslexia="1"]     dyslexia-friendly font stack
 *
 * Specificity is deliberately high (wrapper + attribute + element) and !important
 * is used where the player sets colours inline, so these rules win over the
 * player's inline <style> block regardless of source order.
 *
 * NB: per-question read-aloud is NOT here — the player already ships a working
 * narrator button (.rmqb-narrator-btn) wired to speechSynthesis.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Calm palette — muted, low-saturation tokens override the :root theme
 *    tokens for this wrapper only (element-scoped custom properties beat :root).
 *    Colours chosen for WCAG 2.2 AA (white text on --rmqb-primary ≈ 5.8:1).
 * ---------------------------------------------------------------------- */
.rmqb-wrapper[data-calm="1"] {
    --rmqb-primary:   #3f6d55; /* dark sage */
    --rmqb-secondary: #345a46; /* hover */
    --rmqb-success:   #4a7d61; /* calm green */
    --rmqb-error:     #a15a4d; /* muted terracotta, not alarm red */
    background: #faf8f4 !important; /* warm paper */
    color: #2b2b2b !important;
}

/* Soften the question cards: no shadow, gentle border, warm tint */
.rmqb-wrapper[data-calm="1"] .rmqb-question {
    background: #fffdf9 !important;
    border-color: #e7e0d5 !important;
    box-shadow: none !important;
}

/* Correct / incorrect option feedback → calm sage / terracotta (class-based, so
   CSS can recolour these; the inline-styled feedback spans are handled in JS). */
.rmqb-wrapper[data-calm="1"] .rmqb-option-button.rmqb-correct {
    background: #eef5f0 !important;
    border-color: #4a7d61 !important;
    color: #234634 !important;
}
.rmqb-wrapper[data-calm="1"] .rmqb-option-button.rmqb-wrong {
    background: #f7edeb !important;
    border-color: #a15a4d !important;
    color: #5c2f27 !important;
}

/* -------------------------------------------------------------------------
 * 2. Stilled motion — kill the player's animations/transitions inside a calm
 *    wrapper (timer pulse, fades, modal slide, narrator pulse, shake, pop…).
 * ---------------------------------------------------------------------- */
.rmqb-wrapper[data-calm="1"] *,
.rmqb-wrapper[data-calm="1"] *::before,
.rmqb-wrapper[data-calm="1"] *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}
.rmqb-wrapper[data-calm="1"] { scroll-behavior: auto !important; }

/* De-alarm the countdown timer: no flashing, neutral colour at every stage */
.rmqb-wrapper[data-calm="1"] .rmqb-timer-time.red,
.rmqb-wrapper[data-calm="1"] .rmqb-timer-time.orange,
.rmqb-wrapper[data-calm="1"] .rmqb-timer-time.yellow {
    color: #6b7280 !important;
}
.rmqb-wrapper[data-calm="1"] .rmqb-timer-time.red {
    animation: none !important;
}

/* Extra breathing room between questions and options in calm mode */
.rmqb-wrapper[data-calm="1"] .rmqb-question { padding: 22px !important; }
.rmqb-wrapper[data-calm="1"] .rmqb-option-button,
.rmqb-wrapper[data-calm="1"] .rmqb-options label {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

/* Single-focus: strip the high-stimulation peer-review + poll CTAs from the
   quiz results in calm mode (the purple "Share for Peer Review" accordion, the
   "Want more detailed feedback?" promo, and the per-question "Push to Poll"
   buttons). Grading and the learner's own results are untouched. */
.rmqb-wrapper[data-calm="1"] .rmqb-pr-accordion,
.rmqb-wrapper[data-calm="1"] .rmqb-pr-promo,
.rmqb-wrapper[data-calm="1"] .rmqb-poll-action {
    display: none !important;
}

/* -------------------------------------------------------------------------
 * 3. Honour the OS "reduce motion" preference on EVERY quiz (not just calm) —
 *    a low-risk global accessibility win.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rmqb-wrapper .rmqb-timer-time.red { animation: none !important; }
    .rmqb-wrapper *,
    .rmqb-wrapper *::before,
    .rmqb-wrapper *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* -------------------------------------------------------------------------
 * 4. Legibility — text size, spacing, dyslexia-friendly font. Independent of
 *    calm so a learner can dial just these up.
 * ---------------------------------------------------------------------- */
.rmqb-wrapper[data-font-scale="lg"] { font-size: 18px; }
.rmqb-wrapper[data-font-scale="xl"] { font-size: 20px; }

.rmqb-wrapper[data-font-scale="lg"] .rmqb-question-title,
.rmqb-wrapper[data-font-scale="xl"] .rmqb-question-title {
    font-size: 1.25em !important;
    line-height: 1.6 !important;
}
.rmqb-wrapper[data-font-scale="lg"] .rmqb-option-button,
.rmqb-wrapper[data-font-scale="xl"] .rmqb-option-button,
.rmqb-wrapper[data-font-scale="lg"] .rmqb-options label,
.rmqb-wrapper[data-font-scale="xl"] .rmqb-options label,
.rmqb-wrapper[data-font-scale="lg"] .rmqb-cloze-sentence,
.rmqb-wrapper[data-font-scale="xl"] .rmqb-cloze-sentence {
    font-size: 1.1em !important;
}

.rmqb-wrapper[data-spacing="1"] .rmqb-question-title,
.rmqb-wrapper[data-spacing="1"] .rmqb-option-button,
.rmqb-wrapper[data-spacing="1"] .rmqb-options label,
.rmqb-wrapper[data-spacing="1"] .rmqb-cloze-sentence,
.rmqb-wrapper[data-spacing="1"] p {
    line-height: 1.9 !important;
    letter-spacing: 0.03em !important;
    word-spacing: 0.08em !important;
}

.rmqb-wrapper[data-dyslexia="1"],
.rmqb-wrapper[data-dyslexia="1"] .rmqb-question-title,
.rmqb-wrapper[data-dyslexia="1"] .rmqb-option-button,
.rmqb-wrapper[data-dyslexia="1"] .rmqb-options label,
.rmqb-wrapper[data-dyslexia="1"] .rmqb-cloze-sentence,
.rmqb-wrapper[data-dyslexia="1"] input,
.rmqb-wrapper[data-dyslexia="1"] textarea {
    /* OpenDyslexic isn't bundled; use widely-available readable stacks. */
    font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
}

/* =========================================================================
 * 5. The accessibility widget (always present; not gated by data-calm)
 * ========================================================================= */
.rmqb-a11y-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999998;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rmqb-a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: #3f6d55;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.rmqb-a11y-toggle:hover { background: #345a46; }
.rmqb-a11y-toggle:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.rmqb-a11y-toggle .rmqb-a11y-ico { font-size: 18px; line-height: 1; }

.rmqb-a11y-panel {
    position: absolute;
    right: 0;
    bottom: 56px;
    width: 268px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    padding: 16px;
    box-sizing: border-box;
}
.rmqb-a11y-panel[hidden] { display: none; }
.rmqb-a11y-panel h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}
.rmqb-a11y-panel .rmqb-a11y-sub {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.rmqb-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid #f1f1f1;
    font-size: 14px;
}
.rmqb-a11y-row:first-of-type { border-top: none; }
.rmqb-a11y-row label { font-weight: 500; cursor: pointer; }

/* Segmented text-size control */
.rmqb-a11y-seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.rmqb-a11y-seg button {
    border: none;
    background: #fff;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 600;
    color: #374151;
    border-left: 1px solid #d1d5db;
}
.rmqb-a11y-seg button:first-child { border-left: none; }
.rmqb-a11y-seg button[aria-pressed="true"] { background: #3f6d55; color: #fff; }

/* Simple accessible switch */
.rmqb-a11y-switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.rmqb-a11y-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rmqb-a11y-switch .rmqb-a11y-track {
    position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s;
}
.rmqb-a11y-switch .rmqb-a11y-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    background: #fff; border-radius: 50%; transition: transform .15s;
}
.rmqb-a11y-switch input:checked + .rmqb-a11y-track { background: #3f6d55; }
.rmqb-a11y-switch input:checked + .rmqb-a11y-track::after { transform: translateX(18px); }
.rmqb-a11y-switch input:focus-visible + .rmqb-a11y-track { outline: 3px solid #111827; outline-offset: 2px; }

.rmqb-a11y-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .rmqb-a11y-switch .rmqb-a11y-track,
    .rmqb-a11y-switch .rmqb-a11y-track::after { transition: none; }
}