/* styles/recite-train.css — Recite's Training ground and Over and over (modules/tools/recite-train.js), in the mode
   window (styles/mode-win.css: its --mw-* tokens and parts), and "Hear it from five reciters" (modules/tools/recite-five.js)
   wherever it is mounted: in the window (.mw), and on the card a tap on a red word opens (#tt-flag, Recite's --al-* tokens).
   Fluid (H5): the window is mode-win's (a sheet on a phone, min(92vw, 640px) from 744px); the word grows at 700px.
   Every tappable is 44px or more (H3).
   SAFE TO DELETE: with recite-train.js and recite-five.js. */

/* Recite's panel steps aside while the Training ground is open (it comes back on close) */
body.tg-open #tt-panel.show { display:none; }

/* ── the drill ──────────────────────────────────────────────────────────────────────────────────── */
.mw.tg .tg-prog { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 4px 10px; font:600 calc(14px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.mw.tg .tg-disp { padding:2px 10px; border-radius:999px; background:var(--mw-soft); color:var(--mw-on); }
.mw.tg .tg-dots { display:inline-flex; gap:6px; }
.mw.tg .tg-dots i { width:14px; height:14px; border-radius:50%; background:var(--mw-fill2); }
.mw.tg .tg-dots i.on { background:var(--mw-on); }
.mw.tg .tg-card { display:grid; gap:4px; padding:calc(18px * var(--k-density)) 16px; border-radius:calc(22px * var(--k-radius) / 1.1429); background:var(--mw-group); text-align:center; }
.mw.tg .tg-word { font:calc(46px * var(--k-type))/1.7 var(--mk-q); color:var(--mw-ink); direction:rtl; overflow-wrap:anywhere; }
.mw.tg .tg-word.sm { font-size:calc(34px * var(--k-type)); }
.mw.tg .tg-ref { font:500 calc(13.5px * var(--k-type))/1.35 var(--mk-ui); color:var(--mw-mut); }
.mw.tg .tg-res:empty { display:none; }
.mw.tg .tg-res { display:grid; gap:10px; margin-top:12px; }
.mw.tg .tg-heard { position:relative; display:grid; gap:2px; padding:12px 16px 12px 52px; border-radius:16px; background:var(--mw-group); }
.mw.tg .tg-mk { position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--al-surf); background:var(--data-ok); }
.mw.tg .tg-heard.bad .tg-mk { background:var(--data-bad); }
.mw.tg .tg-mk .ic { width:16px; height:16px; stroke-width:2.8; }
.mw.tg .tg-hw { font:calc(34px * var(--k-type))/1.7 var(--mk-q); text-align:right; direction:rtl; color:var(--mw-ink); }
.mw.tg .tg-hw mark { background:none; color:var(--data-bad); text-decoration:underline 3px; text-underline-offset:10px; }
.mw.tg .tg-hl { font:500 calc(14.5px * var(--k-type))/1.45 var(--mk-ui); color:var(--mw-ink); }
.mw.tg .tg-hl [lang=ar] { font:calc(22px * var(--k-type))/1.2 var(--mk-q); color:var(--data-bad); }
.mw.tg .tg-cmp, .mw.tg .tg-tap, .mw.tg .tg-more, .mw.tg .tg-io { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.mw.tg .tg-more { margin-top:12px; }
.mw.tg .tg-more > :only-child { grid-column:1 / -1; }
.mw.tg :is(.tg-cmp, .tg-tap, .tg-more, .tg-io) :is(button, label) { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:0 12px; border-radius:999px;
  background:var(--mw-fill); color:var(--mw-ink); font:600 calc(15px * var(--k-type))/1.15 var(--mk-ui); text-align:center; cursor:pointer; }
.mw.tg :is(.tg-cmp, .tg-tap, .tg-more, .tg-io) .ic { width:18px; height:18px; stroke-width:2.3; flex:none; }
.mw.tg .tg-tap .tg-right { background:var(--mw-on); color:var(--mw-on-ink); }
.mw.tg .tg-lock { margin:0 4px; display:flex; gap:6px; align-items:flex-start; font:500 calc(13.5px * var(--k-type))/1.45 var(--mk-ui); color:var(--mw-mut); }
.mw.tg .tg-lock[hidden] { display:none; }
.mw.tg .tg-lock .ic { width:16px; height:16px; flex:none; margin-top:2px; }
.mw.tg .tg-lock [lang=ar] { font:calc(19px * var(--k-type))/1.2 var(--mk-q); color:var(--mw-ink); }
.mw.tg .tg-st { min-height:1.4em; margin:12px 4px 0; font:500 calc(14.5px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); text-align:center; }
.mw.tg .tg-five { margin-top:12px; }
.mw.tg .tg-five[hidden] { display:none; }
.mw.tg.tg-rec .mw-go { background:var(--data-bad); }
.mw.tg .tg-empty { margin:12px 4px; font:500 calc(15px * var(--k-type))/1.5 var(--mk-ui); color:var(--mw-mut); }

/* home: the page-or-āyah field */
.mw.tg .tg-pick { margin:-8px 0 20px; }
.mw.tg .tg-pick[hidden] { display:none; }
.mw.tg .tg-pick label { display:grid; gap:6px; font:600 calc(13px * var(--k-type))/1.2 var(--mk-ui); color:var(--mw-mut); padding:0 4px; }
.mw.tg .tg-pick input { min-height:48px; padding:0 16px; border:0; border-radius:12px; background:var(--mw-group); color:var(--mw-ink); font:500 calc(16px * var(--k-type))/1 var(--mk-ui); box-shadow:inset 0 0 0 .5px var(--mw-sep); }
.mw.tg .tg-pick input:focus-visible { outline:2px solid var(--mw-on); outline-offset:1px; }
.mw.tg .tg-how { margin-top:-12px; margin-bottom:20px; }

/* Over and over: choose the word */
.mw.tg .tg-lead { margin:0 4px 12px; }
.mw.tg .tg-words { display:flex; flex-wrap:wrap; gap:8px; direction:rtl; }
.mw.tg .tg-words button { min-height:52px; min-width:52px; padding:0 16px; border-radius:16px; background:var(--mw-group); color:var(--mw-ink); font:calc(26px * var(--k-type))/1.3 var(--mk-q); box-shadow:inset 0 0 0 .5px var(--mw-sep); }
.mw.tg .tg-words button.on { background:var(--mw-on); color:var(--mw-on-ink); }

/* done and the round's sum */
.mw.tg .tg-done, .mw.tg .tg-big2 { display:grid; justify-items:center; gap:6px; padding:18px 0; text-align:center; }
.mw.tg .tg-done b { font:800 calc(26px * var(--k-type))/1.2 var(--mk-ui); }
.mw.tg .tg-done p { margin:0; color:var(--mw-mut); }
.mw.tg .tg-big { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--mw-on); color:var(--mw-on-ink); }
.mw.tg .tg-big .ic { width:34px; height:34px; stroke-width:2.6; }
.mw.tg .tg-big2 b { font:800 calc(48px * var(--k-type))/1 var(--mk-ui); color:var(--mw-on); font-variant-numeric:tabular-nums; }
.mw.tg .tg-big2 span { font:600 calc(15px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); }
.mw.tg .mw-rt b[lang=ar] { font:calc(24px * var(--k-type))/1.4 var(--mk-q); text-align:right; }

/* what it has learned */
.mw.tg .tg-tv { cursor:default; }
.mw.tg .tg-rm { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--mw-fill); color:var(--mw-ink); }
.mw.tg .tg-rm .ic { width:16px; height:16px; stroke-width:2.4; }
.mw.tg .tg-imp { position:relative; overflow:hidden; }
.mw.tg .tg-imp input { position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ── v1403: the stop line, the last-word strip, the miss card's three bands, hands-free, the Learned rows ───────── */
.mw.tg .tg-sl { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 8px; font:500 calc(15px * var(--k-type))/1.35 var(--mk-ui); color:var(--mw-mut); }
.mw.tg .tg-sl [lang=ar] { font:calc(24px * var(--k-type))/1.3 var(--mk-q); color:var(--mw-ink); }
.mw.tg .tg-sl-t { min-width:0; overflow-wrap:anywhere; }
.mw.tg .tg-i { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--mw-fill); color:var(--mw-ink); font:700 italic calc(17px * var(--k-type))/1 Georgia, serif; }
.mw.tg .tg-i[aria-expanded="true"] { background:var(--mw-soft); color:var(--mw-on); }
.mw.tg .tg-sn { margin:0 auto; max-width:34em; font:500 calc(13.5px * var(--k-type))/1.45 var(--mk-ui); color:var(--mw-mut); }
.mw.tg .tg-sn[hidden] { display:none; }
.mw.tg .tg-sn [lang=ar] { font:calc(19px * var(--k-type))/1.2 var(--mk-q); color:var(--mw-ink); }
.mw.tg .tg-mnote { margin:-4px 4px 10px; }
.mw.tg .tg-ref [lang=ar] { font:calc(18px * var(--k-type))/1.2 var(--mk-q); color:var(--mw-ink); }
.mw.tg :is(.tg-last, .tg-slip) { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px; margin-top:12px; font:500 calc(14.5px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); text-align:center; }
.mw.tg :is(.tg-last, .tg-slip) [lang=ar] { font:calc(20px * var(--k-type))/1.2 var(--mk-q); color:var(--mw-ink); }
.mw.tg :is(.tg-last, .tg-slip, .tg-done-row) button { flex:none; min-height:44px; padding:0 18px; border-radius:999px; background:var(--mw-btn); box-shadow:var(--mw-spec); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--mw-ink); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); }
.mw.tg .tg-ex, .mw.tg .tg-it { font:500 calc(14.5px * var(--k-type))/1.5 var(--mk-ui); color:var(--mw-ink); overflow-wrap:anywhere; }
.mw.tg .tg-ex [lang=ar], .mw.tg .tg-it [lang=ar] { font:calc(22px * var(--k-type))/1.3 var(--mk-q); color:var(--mw-ink); }
.mw.tg .tg-seg u { text-decoration:underline 3px var(--data-bad); text-underline-offset:8px; color:var(--data-bad); }
.mw.tg .tg-det { margin-top:4px; color:var(--mw-mut); }
.mw.tg .tg-cmp small { font-weight:500; color:var(--mw-mut); }
.mw.tg .tg-jn { margin:-2px 4px 0; }
.mw.tg .tg-q { display:grid; gap:8px; margin-top:4px; }
.mw.tg .tg-cap { margin:4px 4px 0; font:700 calc(17px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-ink); }
.mw.tg .tg-cap[hidden], .mw.tg .tg-tap[hidden], .mw.tg .tg-done-row[hidden] { display:none; }
.mw.tg .tg-q .tg-tap { grid-template-columns:1fr; }
.mw.tg .tg-q .tg-tap button { justify-content:flex-start; gap:12px; min-height:60px; padding:10px 18px; border-radius:20px; text-align:left; }
.mw.tg .tg-q .tg-tap button > span { display:grid; gap:2px; min-width:0; }
.mw.tg .tg-q .tg-tap b { font:700 calc(16px * var(--k-type))/1.25 var(--mk-ui); }
.mw.tg .tg-q .tg-tap small { font:500 calc(13.5px * var(--k-type))/1.35 var(--mk-ui); opacity:.85; overflow-wrap:anywhere; }
.mw.tg .tg-q .tg-tap small [lang=ar] { font:calc(18px * var(--k-type))/1.2 var(--mk-q); }
.mw.tg .tg-q .tg-wrong { background:var(--mw-fill); }
.mw.tg .tg-done-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:10px 12px 10px 16px; border-radius:16px; background:var(--mw-group); font:500 calc(14.5px * var(--k-type))/1.45 var(--mk-ui); color:var(--mw-ink); }
.mw.tg .tg-done-row > span { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.mw.tg .tg-done-row .tg-warn { display:block; margin-top:4px; font:500 calc(13px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); }
.mw.tg .tg-cap [lang=ar] { font:calc(22px * var(--k-type))/1.25 var(--mk-q); }
.mw.tg .tg-q .tg-tap b [lang=ar] { font:calc(21px * var(--k-type))/1.2 var(--mk-q); font-weight:400; }
.mw.tg .tg-done-row [lang=ar] { font:calc(20px * var(--k-type))/1.2 var(--mk-q); }
.mw.tg .mw-go:disabled { opacity:.45; box-shadow:none; }
/* home: the page note, hands-free, the Learn-my-voice line */
.mw.tg .tg-pnote { margin:8px 4px 0; }
.mw.tg .tg-hands { cursor:pointer; }
.mw.tg .tg-tog { flex:none; position:relative; width:51px; height:31px; border-radius:999px; background:var(--mw-fill2); transition:background .2s; }
.mw.tg .tg-tog::after { content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .2s; }
.mw.tg .tg-hands[aria-checked="true"] .tg-tog { background:var(--mw-on); }
.mw.tg .tg-hands[aria-checked="true"] .tg-tog::after { transform:translateX(20px); }
.mw.tg .tg-voice { display:block; width:100%; min-height:44px; margin:-12px 0 8px; padding:0 16px; text-align:left; background:none; color:var(--mw-mut); font:500 calc(13px * var(--k-type))/1.4 var(--mk-ui); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--mw-sep); }
/* the round's sum */
.mw.tg .tg-first { margin:0 0 20px; }
.mw.tg .tg-first summary { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 16px; border-radius:calc(22px * var(--k-radius) / 1.1429); background:var(--mw-group); font:600 calc(15px * var(--k-type))/1.2 var(--mk-ui); cursor:pointer; list-style:none; }
.mw.tg .tg-first summary::-webkit-details-marker { display:none; }
.mw.tg .tg-first summary span { color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.mw.tg .tg-first[open] summary { margin-bottom:8px; }
.mw.tg .tg-line { margin:4px 4px 0; font:500 calc(14.5px * var(--k-type))/1.45 var(--mk-ui); color:var(--mw-ink); }
/* what it has learned */
.mw.tg .tg-tv small [lang=ar] { font:calc(17px * var(--k-type))/1.2 var(--mk-q); color:var(--mw-ink); }
.mw.tg .tg-tag { padding:1px 8px; border-radius:999px; background:var(--mw-soft); color:var(--mw-on); font-weight:600; }
.mw.tg .tg-pl { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--mw-fill); color:var(--mw-ink); }
.mw.tg .tg-pl .ic { width:16px; height:16px; stroke-width:2.4; }

/* ── v1406: the Review — the āyah up to the word, the word blurred until it is judged ───────────────────── */
.mw.tg .tg-word.tg-ayah { font-size:calc(30px * var(--k-type)); line-height:2; text-align:right; }
.mw.tg .tg-bw { display:inline-block; padding:0 4px; border-radius:10px; background:var(--mw-soft); filter:blur(9px); transition:filter .25s ease; -webkit-user-select:none; user-select:none; }
.mw.tg .tg-bw.shown { filter:none; background:none; box-shadow:inset 0 -3px 0 var(--mw-on); border-radius:0; }
.mw.tg .tg-rvc .tg-ref [lang=ar] { color:var(--mw-ink); }
.mw.tg .tg-rsum .mw-foot-note { margin-top:6px; }
@media (prefers-reduced-motion:reduce) { .mw.tg .tg-bw { transition:none; } }

@media (min-width:700px) {
  .mw.tg .tg-word.tg-ayah { font-size:calc(38px * var(--k-type)); }
  .mw.tg .tg-q .tg-tap { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mw.tg .tg-word { font-size:calc(58px * var(--k-type)); }
  .mw.tg .tg-hw { font-size:calc(40px * var(--k-type)); }
  .mw.tg :is(.tg-cmp, .tg-tap, .tg-more, .tg-io) :is(button, label) { min-height:52px; font-size:calc(16px * var(--k-type)); }
  .mw.tg .tg-words button { min-height:56px; font-size:calc(30px * var(--k-type)); }
}

/* ── five reciters: in the window (--mw-*) and on Recite's tap card (--al-*) ─────────────────────────── */
.r5 { --r5-fill:var(--mw-fill, var(--al-card2)); --r5-on:var(--mw-on, var(--al-acc)); --r5-on-ink:var(--mw-on-ink, var(--al-acc-ink)); --r5-mut:var(--mw-mut, var(--al-mut)); --r5-ink:var(--mw-ink, var(--al-ink));
  display:grid; gap:8px; padding:12px; border-radius:16px; background:var(--mw-group, var(--al-card)); color:var(--r5-ink); }
.r5 :where(button) { font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.r5 .r5-hd { display:flex; align-items:center; gap:8px; }
.r5 .r5-hd b { flex:1; min-width:0; display:flex; align-items:center; gap:7px; font:700 15px/1.25 var(--mk-ui, var(--f-ui)); }
.r5 .r5-hd b .ic { width:18px; height:18px; flex:none; }
.r5 .r5-all { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:999px; background:var(--r5-on); color:var(--r5-on-ink); font:700 14.5px/1 var(--mk-ui, var(--f-ui)); }
.r5 .r5-all .ic { width:16px; height:16px; }
.r5.playing .r5-all { background:var(--r5-fill); color:var(--r5-ink); }
.r5 .r5-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:6px; }
.r5 .r5-r { min-height:44px; padding:0 10px; border-radius:999px; background:var(--r5-fill); font:600 14px/1.15 var(--mk-ui, var(--f-ui)); }
.r5 .r5-r[hidden] { display:none; }
.r5 .r5-r:disabled { opacity:.5; cursor:default; }
.r5 .r5-r.on { background:var(--r5-on); color:var(--r5-on-ink); }
.r5 .r5-note, .r5 .r5-st { margin:0; font:500 13px/1.4 var(--mk-ui, var(--f-ui)); color:var(--r5-mut); }
.r5 .r5-st:empty { display:none; }
.r5 .r5-note [lang=ar] { font:19px/1.1 var(--mk-q, var(--f-quran)); color:var(--data-bad); }

/* on Recite's tap card */
#tt-flag .tf-5 { width:100%; margin-top:6px; display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:0 14px; border-radius:var(--al-rctl); background:var(--al-card2); font:600 15px/1.2 var(--f-ui); }
#tt-flag .tf-5[hidden], #tt-flag .tf-five[hidden] { display:none; }
#tt-flag .tf-5 .ic { width:18px; height:18px; }
#tt-flag .tf-five { margin-top:8px; }
#tt-flag .tf-five .r5 { padding:10px; background:var(--al-card); }
#tt-flag .tf-taught { margin-top:4px; font:500 13.5px/1.4 var(--f-ui); color:var(--al-mut); }
#tt-flag .tf-taught [lang=ar] { font:18px/1.2 var(--f-quran); color:var(--al-ink); }
@media (min-width:700px) { .r5 .r5-r { min-height:48px; font-size:15px; } }