/**
 * Sound Awareness widget — phonological discrimination (v2 redesign, 2026-06-25)
 * Fleet-aligned chrome (UniversalHeader + UniversalContainer + UniversalFooter)
 * comes from shared CSS; this file styles the body using the --as-* design tokens.
 *
 * COLOR GRAMMAR (spec .claude/sound-awareness-redesign-spec.md §2):
 *   CYAN   (--as-audio)  = LISTEN / audio — circle or wave shapes only
 *   NAVY on white rect   = an ANSWER / choice
 *   BLUE   (--as-read)   = primary / selected / progress
 *   GREEN  = correct · RED = incorrect · AMBER = hint
 * The rule: cyan means HEAR it, white rectangle means CHOOSE it. An audio control
 * and an answer control NEVER share a shape (redundant coding for the population).
 *
 * Mobile-first, ≥64px touch targets (round audio 74px), no !important.
 */

/* Full-width: the exercise-layout-wrapper owns the max-width/centering. */
.sound-awareness-root {
    max-width: 100%;
    margin: 0 auto;
    color: #1e293b;
    font-family: var(--as-font);
}

/* ---- Field / content column ---- */
.sound-awareness-root .sa-exercise {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 2px 0;
}

/* ---- Loading / error / empty ---- */
.sound-awareness-root .sa-state {
    align-items: center;
    text-align: center;
    padding: 40px 16px;
    color: #64748b;
}
.sound-awareness-root .sa-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--as-read-accent, #2563eb);
    border-radius: 50%;
    animation: sa-spin 0.8s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sound-awareness-root .sa-error { color: #dc2626; font-weight: 600; }

/* ============================================================
   LISTEN BAR — CYAN (hear it). Single "Listen" button + sound-wave indicator.
   The core control for the two/three-sound modes (Same·Different / Odd One Out).
   ============================================================ */
.sound-awareness-root .sa-listen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    background: var(--as-inset, #f4f6fb);
    border-radius: 16px;
}
.sound-awareness-root .sa-listen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    border: 2.5px solid var(--as-audio, #0e9bb5);
    border-radius: 16px;
    background: #ffffff;
    color: var(--as-audio-deep, #0b7e93);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.sound-awareness-root .sa-listen-btn:hover {
    background: var(--as-audio-soft, #e0f5f9);
    box-shadow: 0 4px 14px rgba(14, 155, 181, 0.22);
}
.sound-awareness-root .sa-listen-btn:active { transform: translateY(1px); }
/* Playing = FILLED cyan, white text */
.sound-awareness-root .sa-listen-btn.is-playing {
    background: var(--as-audio, #0e9bb5);
    border-color: var(--as-audio, #0e9bb5);
    color: #ffffff;
    animation: sa-audio-pulse 1.4s ease-in-out infinite;
}
.sound-awareness-root .sa-listen-icon { font-size: 22px; line-height: 1; }
.sound-awareness-root .sa-listen-label { font-size: 17px; font-weight: 700; }
@keyframes sa-audio-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 155, 181, 0); }
    50% { box-shadow: 0 0 0 7px rgba(14, 155, 181, 0.18); }
}

/* ---- Sound-wave indicator — one wave per sound (spec §6.2) ---- */
.sound-awareness-root .sa-waves {
    display: flex;
    justify-content: center;
    gap: 26px;
}
.sound-awareness-root .sa-wave-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.sound-awareness-root .sa-wave {
    display: flex;
    gap: 2.5px;
    align-items: center;
    height: 22px;
}
.sound-awareness-root .sa-wave i {
    width: 3px;
    border-radius: 2px;
    background: #cfd9ea;            /* idle = gray silhouette (still reads as "sound") */
    transform-origin: center;
}
.sound-awareness-root .sa-wave i:nth-child(1) { height: 7px; }
.sound-awareness-root .sa-wave i:nth-child(2) { height: 13px; }
.sound-awareness-root .sa-wave i:nth-child(3) { height: 20px; }
.sound-awareness-root .sa-wave i:nth-child(4) { height: 12px; }
.sound-awareness-root .sa-wave i:nth-child(5) { height: 8px; }
/* currently sounding — ripples cyan ONLY while its clip actually plays */
.sound-awareness-root .sa-wave-item.is-live .sa-wave i {
    background: var(--as-audio, #0e9bb5);
    animation: sa-wv 0.8s ease-in-out infinite;
}
.sound-awareness-root .sa-wave-item.is-live .sa-wave i:nth-child(2) { animation-delay: 0.1s; }
.sound-awareness-root .sa-wave-item.is-live .sa-wave i:nth-child(3) { animation-delay: 0.2s; }
.sound-awareness-root .sa-wave-item.is-live .sa-wave i:nth-child(4) { animation-delay: 0.3s; }
.sound-awareness-root .sa-wave-item.is-live .sa-wave i:nth-child(5) { animation-delay: 0.4s; }
@keyframes sa-wv { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.3); } }
/* heard, static cyan (tap-to-advance trail) */
.sound-awareness-root .sa-wave-item.is-on .sa-wave i { background: var(--as-audio, #0e9bb5); }
/* hinted (odd-one-out tier 2) — emphasize the odd wave */
.sound-awareness-root .sa-wave-item.is-hint .sa-wave i {
    background: var(--as-audio, #0e9bb5);
    animation: sa-wv 0.7s ease-in-out infinite;
}
.sound-awareness-root .sa-wave-item.is-hint { border-radius: 10px; box-shadow: 0 0 0 3px var(--as-audio-soft, #e0f5f9); }
.sound-awareness-root .sa-wave-num { font-size: 13px; font-weight: 700; color: #64748b; }
.sound-awareness-root .sa-wave-item.is-live .sa-wave-num,
.sound-awareness-root .sa-wave-item.is-on .sa-wave-num { color: var(--as-audio-deep, #0b7e93); }

/* ============================================================
   ROUND AUDIO BUTTON — CYAN circle (single-sound word tasks: "the sound").
   ============================================================ */
.sound-awareness-root .sa-audio-round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    min-width: 74px;
    padding: 0;
    border: 2.5px solid var(--as-audio, #0e9bb5);
    border-radius: 50%;
    background: #ffffff;
    color: var(--as-audio-deep, #0b7e93);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.sound-awareness-root .sa-audio-round:hover {
    background: var(--as-audio-soft, #e0f5f9);
    box-shadow: 0 4px 14px rgba(14, 155, 181, 0.22);
}
.sound-awareness-root .sa-audio-round:active { transform: translateY(1px); }
.sound-awareness-root .sa-audio-round.is-playing {
    background: var(--as-audio, #0e9bb5);
    color: #ffffff;
    animation: sa-audio-pulse 1.4s ease-in-out infinite;
}
/* hinted (word modes) — pulse the target sound */
.sound-awareness-root .sa-audio-round.is-hint {
    box-shadow: 0 0 0 5px var(--as-audio-soft, #e0f5f9);
    animation: sa-audio-pulse 1.1s ease-in-out infinite;
}
.sound-awareness-root .sa-audio-round-icon { font-size: 28px; line-height: 1; }

/* ============================================================
   UNIFIED YES/NO STIMULUS BLOCK (Starts / Ends / Sound-in-word, spec §6.9)
   One inset tray, stacked: [image?] · "The word" + chip · "The sound" + round audio.
   Identical layout across all three so nothing shifts on the user between items.
   ============================================================ */
.sound-awareness-root .sa-targetblk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--as-inset, #f4f6fb);
    border-radius: 16px;
}
.sound-awareness-root .sa-stim-cap {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f8aa0;
    text-align: center;
}
.sound-awareness-root .sa-targetblk .sa-word-img { margin-bottom: 4px; }
.sound-awareness-root .sa-word-img {
    max-width: 160px;
    max-height: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}
/* Word chip — white rounded chip, tap to hear; the 🔊 is cyan (the audio cue). */
.sound-awareness-root .sa-word-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 22px;
    border: 2px solid var(--tile-border, #e4e9f1);
    border-radius: 14px;
    background: #ffffff;
    color: #283044;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(40, 48, 68, 0.06), 0 6px 18px rgba(40, 48, 68, 0.06);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.sound-awareness-root .sa-word-chip:hover { border-color: #cbd5e1; }
.sound-awareness-root .sa-word-chip:active { transform: translateY(1px); }
.sound-awareness-root .sa-word-chip.is-playing {
    border-color: var(--as-audio, #0e9bb5);
    box-shadow: 0 0 0 4px var(--as-audio-soft, #e0f5f9);
}
.sound-awareness-root .sa-word-chip-icon { font-size: 20px; line-height: 1; color: var(--as-audio-deep, #0b7e93); }
.sound-awareness-root .sa-word-chip-label { font-size: 22px; font-weight: 700; }

/* ============================================================
   ANSWER TILES — navy text on white rectangles, in a grid constrained to the
   card's content box (repeat(N,1fr)). 2-up (Same/Different · Yes/No) and 3-up
   (Odd One Out) BOTH stay inside the padding — the overflow fix (spec §5).
   ============================================================ */
.sound-awareness-root .sa-answers {
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    gap: 10px;
}
.sound-awareness-root .sa-ans {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    padding: 18px 8px;
    border: 1px solid var(--tile-border, #e4e9f1);
    border-radius: 14px;
    background: #ffffff;
    color: #283044;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    /* Stay fully visible even when disabled — defeats the Elementor kit's global
       button:disabled{opacity} fade that washed out the chosen tile post-answer
       ("kind of invisible", Lyda 2026-06-25). .is-dim still dims intentionally. */
    opacity: 1;
    box-shadow: 0 1px 2px rgba(40, 48, 68, 0.06), 0 6px 18px rgba(40, 48, 68, 0.06);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.sound-awareness-root .sa-ans:hover:not(:disabled) {
    border-color: var(--as-read-accent, #2563eb);
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}
.sound-awareness-root .sa-ans:active:not(:disabled) { transform: translateY(0); }
.sound-awareness-root .sa-ans:disabled { cursor: default; }
.sound-awareness-root .sa-ans-num { font-size: 26px; font-weight: 800; }
.sound-awareness-root .sa-ans-label { line-height: 1.1; }
.sound-awareness-root .sa-ans-mark { font-size: 20px; line-height: 1; }

/* States — colour ALWAYS paired with ✓/✗ or text (never colour-only) */
.sound-awareness-root .sa-ans.is-correct {
    border-color: var(--as-success, #15803d);
    background: var(--as-success-bg, #f0fdf4);
    color: var(--as-success, #15803d);
}
.sound-awareness-root .sa-ans.is-dim { opacity: 0.45; }
/* hinted (same/different tier 2) — spotlight the answer in amber */
.sound-awareness-root .sa-ans.is-hint {
    border-color: var(--as-hint-border, #ca8a04);
    box-shadow: 0 0 0 4px var(--as-hint-bg, #fef3c7);
    animation: sa-hint-pulse 1.1s ease-in-out infinite;
}
@keyframes sa-hint-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--as-hint-bg, #fef3c7); }
    50% { box-shadow: 0 0 0 6px var(--as-hint-bg, #fef3c7); }
}
/* wrong-answer shake (not locked — reverts so they can try again) */
.sound-awareness-root .sa-ans.sa-shake,
.sound-awareness-root .sa-stile.sa-shake { animation: sa-shake 0.35s ease-in-out; }
@keyframes sa-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ============================================================
   ODD-ONE-OUT SOUND-TILES — the sound IS the answer (spec §6.8). White rounded
   tiles in a contained repeat(N,1fr) grid, each a CYAN wave + number: the cyan
   wave says "this is a sound", the white card says "this is selectable". Playback
   (.is-live ripple) and selection (.is-correct / shake) are DISTINCT states.
   A bare Listen button above (no inset tray) replays the whole set.
   ============================================================ */
.sound-awareness-root .sa-listen--bare {
    background: transparent;
    padding: 0 0 12px;
}
.sound-awareness-root .sa-soundtiles {
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    gap: 10px;
}
.sound-awareness-root .sa-stile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 104px;
    padding: 14px 6px;
    border: 1px solid var(--tile-border, #e4e9f1);
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    opacity: 1;                      /* defeat the kit's disabled-button fade */
    box-shadow: 0 1px 2px rgba(40, 48, 68, 0.06), 0 6px 18px rgba(40, 48, 68, 0.06);
    transition: border-color 0.13s, background 0.13s, box-shadow 0.13s, transform 0.1s;
}
.sound-awareness-root .sa-stile:hover:not(:disabled) {
    border-color: var(--as-audio, #0e9bb5);
    transform: translateY(-1px);
}
.sound-awareness-root .sa-stile:active:not(:disabled) { transform: translateY(0); }
.sound-awareness-root .sa-stile:disabled { cursor: default; }
/* the tile's wave reads as a SOUND — cyan even at rest */
.sound-awareness-root .sa-stile .sa-wave i { background: var(--as-audio, #0e9bb5); }
.sound-awareness-root .sa-stile-num { font-size: 24px; font-weight: 800; color: #283044; line-height: 1; }
/* playback ripple (separate from selection) */
.sound-awareness-root .sa-stile.is-live { border-color: var(--as-audio, #0e9bb5); }
.sound-awareness-root .sa-stile.is-live .sa-wave i { animation: sa-wv 0.8s ease-in-out infinite; }
.sound-awareness-root .sa-stile.is-live .sa-wave i:nth-child(2) { animation-delay: 0.1s; }
.sound-awareness-root .sa-stile.is-live .sa-wave i:nth-child(3) { animation-delay: 0.2s; }
.sound-awareness-root .sa-stile.is-live .sa-wave i:nth-child(4) { animation-delay: 0.3s; }
.sound-awareness-root .sa-stile.is-live .sa-wave i:nth-child(5) { animation-delay: 0.4s; }
.sound-awareness-root .sa-stile.is-on { border-color: var(--as-audio-soft, #e0f5f9); }
/* selection feedback */
.sound-awareness-root .sa-stile.is-correct {
    background: var(--as-success-bg, #f0fdf4);
    border-color: var(--as-success, #15803d);
}
.sound-awareness-root .sa-stile.is-correct .sa-stile-num { color: var(--as-success, #15803d); }
.sound-awareness-root .sa-stile.is-correct .sa-wave i { background: var(--as-success, #15803d); }
.sound-awareness-root .sa-stile.is-dim { opacity: 0.45; }
/* hinted — emphasize the odd one */
.sound-awareness-root .sa-stile.is-hint {
    border-color: var(--as-audio, #0e9bb5);
    box-shadow: 0 0 0 4px var(--as-audio-soft, #e0f5f9);
}
.sound-awareness-root .sa-stile.is-hint .sa-wave i { animation: sa-wv 0.7s ease-in-out infinite; }

/* ============================================================
   HINT GRAPHEME — the LETTER(S) that spell a sound, revealed ONE sound per Hint
   tap below its wave / tile / round-audio (Lyda 2026-07-16). An ORTHOGRAPHIC cue
   layered on the phonological task. AMBER (--as-hint-*) so it reads as a HINT —
   never a tappable answer (navy/white), never an audio control (cyan). Purely the
   visual letter; the sound is heard from the existing cyan control that replays.
   ============================================================ */
.sound-awareness-root .sa-grapheme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin-top: 2px;
    padding: 2px 8px;
    border: 1.5px solid var(--as-hint-border, #ca8a04);
    border-radius: 8px;
    background: var(--as-hint-bg, #fef3c7);
    color: var(--as-hint-text, #92400e);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: lowercase;    /* graphemes as reading letters (fleet lowercase) */
    animation: sa-grapheme-in 0.22s ease-out;
}
@keyframes sa-grapheme-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* under a 3-up odd-one-out tile — a touch smaller so the tile stays compact */
.sound-awareness-root .sa-grapheme--tile { font-size: 17px; margin-top: 1px; }
/* under the single "The sound" round audio (word modes) — a little larger */
.sound-awareness-root .sa-grapheme--word { font-size: 20px; margin-top: 4px; }

/* ============================================================
   FOOTER FEEDBACK STRIP — rides the UniversalFooter middle slot.
   ============================================================ */
.sound-awareness-root .sa-feedback {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    animation: sa-fade 0.2s ease-out;
}
.sound-awareness-root .sa-feedback-text { font-size: 17px; font-weight: 700; }
.sound-awareness-root .sa-feedback.correct .sa-feedback-text { color: var(--as-success, #15803d); }
.sound-awareness-root .sa-feedback.incorrect .sa-feedback-text { color: var(--as-danger, #dc2626); }
.sound-awareness-root .sa-feedback.retry .sa-feedback-text { color: var(--as-hint-text, #92400e); }
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   DIRECTIVE INSTRUCTION — blue text; framed by the UniversalContainer card.
   ============================================================ */
.sound-awareness-root .te-mh-field { background: transparent; }
.sound-awareness-root .te-mh-instruction-text {
    color: var(--as-read-text, #1e40af);
    font-weight: 500;
    font-style: normal;
}

/* ============================================================
   END-OF-SESSION SUMMARY (fallback when SessionSummary is absent)
   ============================================================ */
.sound-awareness-root .sa-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
}
.sound-awareness-root .sa-summary-score { font-size: 30px; font-weight: 800; color: #1e293b; }
.sound-awareness-root .sa-summary-label { font-size: 14px; color: #64748b; margin-bottom: 12px; }
.sound-awareness-root .sa-summary-primary {
    min-width: 170px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--as-primary-bg, #15803d);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.sound-awareness-root .sa-summary-primary:hover { background: #166534; color: #ffffff; }

/* ---- Small phones ---- */
@media (max-width: 380px) {
    .sound-awareness-root .sa-listen-btn { min-height: 60px; }
    .sound-awareness-root .sa-waves { gap: 18px; }
    .sound-awareness-root .sa-ans { font-size: 18px; min-height: 60px; padding: 14px 6px; }
    .sound-awareness-root .sa-soundtiles { gap: 8px; }
    .sound-awareness-root .sa-stile { min-height: 92px; }
    .sound-awareness-root .sa-word-chip { padding: 10px 16px; }
    .sound-awareness-root .sa-word-chip-label { font-size: 20px; }
    .sound-awareness-root .sa-audio-round { width: 66px; height: 66px; min-width: 66px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .sound-awareness-root .sa-spinner,
    .sound-awareness-root .sa-listen-btn.is-playing,
    .sound-awareness-root .sa-audio-round.is-playing,
    .sound-awareness-root .sa-audio-round.is-hint,
    .sound-awareness-root .sa-wave-item.is-live .sa-wave i,
    .sound-awareness-root .sa-wave-item.is-hint .sa-wave i,
    .sound-awareness-root .sa-stile.is-live .sa-wave i,
    .sound-awareness-root .sa-stile.is-hint .sa-wave i,
    .sound-awareness-root .sa-ans.is-hint,
    .sound-awareness-root .sa-ans.sa-shake,
    .sound-awareness-root .sa-stile.sa-shake,
    .sound-awareness-root .sa-grapheme,
    .sound-awareness-root .sa-feedback { animation: none; }
    .sound-awareness-root .sa-ans:hover,
    .sound-awareness-root .sa-ans:active,
    .sound-awareness-root .sa-stile:hover,
    .sound-awareness-root .sa-stile:active { transform: none; }
}