/* The pronunciation pages (js/skills.js, js/readaloud.js): Sounds and All Sounds, a sound practice one step per screen
   on the stage, Word Stress, and reading aloud. */

/* ---------- Sounds (B.25): the next sound in one card, with Start and All Sounds ---------- */
.next-sound { gap: 24px; }
.next-text { display: grid; gap: 6px; }
.next-short { margin-top: 6px; color: var(--ink-2); max-width: 34em; }

/* ---------- a sound practice and one answer read aloud, on the stage (B.27, B.29) ---------- */
/* Focus moves to the heading on each new screen, for screen readers; a heading is not a control, so it shows no ring. */
.sound-stage h1:focus { outline: none; }
.sound-stage .seg { justify-self: center; }
/* The stage sits on the page's grey, so its round play buttons and the two choices are white. */
.sound-stage .play:not([aria-pressed="true"]) { background: var(--card); }
@media (hover: hover) { .sound-stage .play:not([aria-pressed="true"]):hover { background: var(--bg-hover); } }
.step-line { margin-top: 12px; }
/* A word's counter ('1 of 5') sits under the big button's label as the mini drill's does (6px). */
.rec-btn + .step-line { margin-top: 6px; }

/* Hear the difference: two words side by side, white on the grey page. */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 432px; }
.choice, .syll {
  min-height: 60px; padding: 12px 24px; border: 0; border-radius: var(--r-inner); background: var(--bg); color: var(--ink); cursor: pointer;
}
.sound-stage .choice { background: var(--card); }
@media (hover: hover) { .choice:hover:not(:disabled):not([aria-disabled="true"]), .syll:hover:not(:disabled) { background: var(--bg-hover); } }
.choice:disabled, .choice[aria-disabled="true"], .syll:disabled { cursor: default; }
/* The keyboard ring follows each button's own corners (the shared rule rounds every ring to 10px). */
.choice:focus-visible { border-radius: var(--r-inner); }
.syll:focus-visible { border-radius: var(--r-pill); }
.sound-stage .choice.right, .choice.right { background: var(--good-50); color: var(--good); }
.sound-stage .choice.wrong, .choice.wrong, .syll.wrong { background: var(--pink-100); color: var(--red-dark); }

/* Say the words: the word with its play button; under it the result, which keeps two lines of room so the screen
   doesn't move when it appears. */
.say-word { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.say-word .t-super { overflow-wrap: anywhere; }
.word-out { min-height: 2lh; max-width: 30em; text-wrap: balance; }
.word-out.ok { color: var(--good); }
.word-out.err { color: var(--red-bright); }
/* Done: a green tick drawn over 400 ms (B.0). */
.sound-tick { display: grid; place-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--good-50); color: var(--good); }
.sound-tick .ico { width: 36px; height: 36px; }
.sound-tick path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: sound-tick 400ms var(--ease) forwards; }
@keyframes sound-tick { to { stroke-dashoffset: 0; } }

/* How to say it: a short sheet, centred on a wide screen and rising from the bottom on a phone. */
.sheet.tip-sheet { inset: 0; margin: auto; width: min(480px, calc(100% - 48px)); height: fit-content; max-height: calc(100dvh - 48px); }
@media only screen and (max-width: 734px) {
  .sheet.tip-sheet { inset: auto 0 0; margin: 0; width: 100%; max-height: calc(100dvh - 24px); }
}
.tip-text { max-width: 30em; }

/* ---------- reading aloud ---------- */
.read { display: grid; gap: 24px; align-content: start; min-width: 0; }
.read-top { display: grid; gap: 12px; justify-items: start; min-width: 0; }
/* Lines leave room for the wavy underlines, as in the Writing site's Comments tab. */
.read-text { line-height: 1.7; }
.read-score { display: grid; gap: 12px; }
.read-rec { display: grid; justify-items: start; }
.read-status:empty { display: none; }
/* On the stage: centred, the sentence in the .t-intro size (B.0); a whole answer reads from the left. */
.read.on-stage, .read.on-stage .read-top, .read.on-stage .read-score, .read.on-stage .read-rec, .read-ctl .read-rec { justify-items: center; }
.read.on-stage { width: 100%; }
.read.on-stage .read-text { margin-inline: auto; }
.read.on-stage .read-text { text-wrap: balance; }
.read.on-stage.long .read-text { text-align: left; text-wrap: pretty; }
.read.on-stage .score, .read.on-stage .chips { justify-content: center; }
.read.on-stage .tip-card { text-align: left; }
.read-ctl { display: grid; justify-items: center; }
.read-stage .read-slot { width: 100%; margin-top: 12px; }

/* ---------- Word Stress (B.28) ---------- */
.quiz-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sylls { display: flex; flex-wrap: wrap; gap: 6px; }
.syll { min-height: 48px; padding: 6px 18px; border-radius: var(--r-pill); }
.syll.stressed { background: var(--red); color: #fff; }
.stress { justify-items: start; }
.stress-after { display: grid; gap: 24px; }

@media (prefers-reduced-motion: reduce) {
  .sound-tick path { animation: none; stroke-dashoffset: 0; }
}

/* IPA (js/ipa-view.js): a word's British IPA under it, the drill's sounds in red; after a check the sounds not heard
   right in red, with what was heard on the line below. */
.ipa { color: var(--ink-2); margin: 0; text-align: center; }
.ipa[hidden] { display: none; }
.ipa .f, .ipa .bad { color: var(--red); font-weight: 600; }
.ipa .ipa-slash { color: var(--ink-2); }
.ipa-compare .ipa-note { display: block; margin-top: 6px; }
.ipa-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.ipa-row b { color: var(--ink); font-weight: 600; }
/* The practised sound is highlighted (not red), so red in the IPA only ever means 'not heard right'. */
.ipa .f { color: var(--ink); background: var(--pink-100); border-radius: 3px; } /* no padding: /str/ stays one word */
.read-own-body { display: grid; gap: 12px; justify-items: center; }