/* The read-back practices (js/practice/speak.js, natural.js, model.js, read-own.js, mini-drill.js, phrases.js), on the
   guided practice's stage (app.css .stage): a sentence to say with its marks, the small play icon, the line under the
   big button, the three phrases and the mini drill's word. */

/* The headline takes focus when a screen changes (B.0); it is not a control, so it shows no ring. */
.read-main h1:focus { outline: none; }

/* The sentence to say, with a play icon under it. Lines leave room round the highlighted words. */
.say-block { display: grid; gap: 12px; justify-items: center; width: 100%; min-width: 0; }
.say-text { display: grid; justify-items: center; width: 100%; }
.t-intro.say { color: var(--ink); line-height: 1.6; max-width: 36em; overflow-wrap: anywhere; text-wrap: pretty; }
/* A change (B.11): a highlighted word that shows what the student said there. Pressing moves nothing and adds no box;
   the open one is underlined. Keyboard focus keeps the solid ring, rounded like the highlight. */
.chg {
  display: inline; padding: 0 2px; margin: 0; border: 0; border-radius: 4px; font: inherit; letter-spacing: inherit; color: inherit;
  background: var(--highlight); cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.chg[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--ink-2); }
@media (hover: hover) { .chg:hover { box-shadow: inset 0 -2px 0 var(--ink-2); } }
.chg:focus-visible { outline-offset: 2px; border-radius: 6px; }
/* 'You said ‘…’.': a callout under the tapped word, over what follows (js/practice/speak.js places it), so nothing moves. */
.say-text { position: relative; }
.say-tip:empty { display: none; }
.say-tip { position: absolute; z-index: 3; width: max-content; max-width: 100%; }
.say-tip .tip-card { justify-items: center; text-align: center; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06); }

/* The big button with its label, then one quiet line: the timer while recording, or what went wrong. It keeps its
   height when empty, so the controls never move. The small play icon sits beside the big button, level with its
   centre (12px margin + 48px, less half its 44px), with an empty place of the same size on the other side. */
.say-controls { display: grid; justify-items: center; gap: 6px; }
.say-row { display: grid; grid-template-columns: 44px auto 44px; column-gap: 12px; align-items: start; justify-content: center; }
.say-side { display: flex; justify-content: center; width: 44px; height: 44px; margin-top: 38px; }
.read-hint { min-height: 1.42859em; font-variant-numeric: tabular-nums; }
.read-hint.bad { color: var(--red-bright); }
/* A clear word in the mini drill (B.14): its label in green while the next word waits. */
.rec-btn.is-ok .rec-label { color: var(--good); }

/* The three phrases (B.15): one white group of rows, as an inset list, each with its play icon. */
.phrase-list {
  list-style: none; margin: 0; padding: 0; width: 100%; text-align: left;
  background: var(--card); border-radius: var(--r-inner); overflow: hidden;
}
.phrase-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 12px 12px 24px; }
.phrase-row + .phrase-row::before { content: ""; position: absolute; top: 0; left: 24px; right: 0; height: 1px; background: var(--line); }
.phrase-text { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media only screen and (max-width: 734px) {
  .phrase-row { padding-left: 18px; }
  .phrase-row + .phrase-row::before { left: 18px; }
}
/* The same phrases as static chips while the student answers (B.5). */
.phrase-chips { justify-content: center; }
.phrase-chips .chip { background: var(--card); }

/* The mini drill's word with its play icon beside it. */
.drill-word { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Play icons on the stage's grey are white (the mini drill's beside its word, the read-backs' beside the big button);
   inside the white list they are grey. Playing, they turn pink. */
.read-main .play, .say-side .play { background: var(--card); }
.read-main .phrase-row .play { background: var(--bg); }
@media (hover: hover) { .read-main .play:hover, .say-side .play:hover, .read-main .phrase-row .play:hover { background: var(--bg-hover); } }
.read-main .play[aria-pressed="true"], .say-side .play[aria-pressed="true"] { background: var(--pink-100); color: var(--red-dark); }
@media (hover: hover) { .read-main .play[aria-pressed="true"]:hover, .say-side .play[aria-pressed="true"]:hover { background: var(--pink-100); color: var(--red-dark); } }
.read-main .play:disabled, .say-side .play:disabled { cursor: default; opacity: .4; }

/* While a result rests on the big button (B.14) it takes no tap: no pointer and no hover change. */
.read-controls .rec.big:not(.thinking)[aria-disabled="true"] { cursor: default; }
@media (hover: hover) {
  .read-controls .rec.big:not(.thinking)[aria-disabled="true"]:hover { box-shadow: 0 0 0 4px var(--line) inset; }
  .read-controls .rec.big[aria-disabled="true"]:hover .rec-dot { background: var(--red); }
}