/* English shadowing practice (/english/shadowing/), on top of /english/tools.css
   and /english/speaking-practice/family.css, which has the hero picture with
   its sample card (.st-visual) and the full-screen layer (.st-talk) shared
   with the speaking and accent tests. Here: the level and set picker, the
   line with its marks and karaoke, the controls, the take's result and the
   summary. Solid colours only, no inline styles (the CSP forbids them). */

.sh-hero{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px)}
.sh-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.sh-copy .tt-lede{margin-top:18px!important;max-width:58ch}
.sh-copy .tt-actions{margin-top:24px}
.sh-copy .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px}
@media (max-width:1023px){.sh-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}.sh-copy .tt-facts-row{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
@media (max-width:639px){.sh-copy .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Level and set */
.sh-pick{display:grid;gap:8px;margin-top:24px;max-width:560px}
.sh-pick-k{color:var(--muted);font:600 13.5px/1.3 var(--font-body)}
.sh-pick-k+div{margin-bottom:8px}
.sh-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--field)}
.sh-seg button{min-height:38px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font:600 14.5px/1 var(--font-body);cursor:pointer}
.sh-seg button[aria-checked="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(23,18,29,.12)}
.sh-levels{justify-self:start}
.sh-choose{display:flex;flex-wrap:wrap;gap:8px}
.sh-setpick{display:grid;gap:2px;min-width:180px;padding:10px 14px;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.sh-setpick b{font:700 15.5px/1.3 var(--font-display);letter-spacing:-.015em}
.sh-setpick span{color:var(--muted);font-size:13px}
.sh-setpick[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink);background:#f6f4f0}
.sh-setpick[hidden]{display:none}
@media (max-width:639px){.sh-seg button{min-height:34px;padding:0 11px;font-size:13.5px}.sh-setpick{flex:1;min-width:0}}

/* The hero's sample card */
.sh-sample .sh-sample-line{font-size:19px;line-height:1.5}
.sh-sample-bars{display:flex;align-items:center;gap:3px;height:26px}
.sh-sample-bars i{flex:1;max-width:6px;border-radius:2px;background:#d6d1ca}
.sh-sample-bars i:nth-child(3n){height:60%}.sh-sample-bars i:nth-child(3n+1){height:90%}.sh-sample-bars i:nth-child(3n+2){height:40%}
.sh-sample-bars i:nth-child(-n+6){background:#ea580c}

/* The line: marks and karaoke */
.sh-line{color:var(--ink);font:600 clamp(1.45rem,2.4vw,2rem)/1.45 var(--font-display);letter-spacing:-.02em}
.sh-w{border-radius:6px;transition:background-color .15s,color .15s}
.sh-w.is-said{color:var(--ink)}
.sh-line .sh-w:not(.is-said):not(.is-now){color:inherit}
.sh-talk .sh-line .sh-w{color:var(--ink)}
.st-t-body[data-phase="listening"] .sh-line .sh-w:not(.is-said):not(.is-now),.st-t-body[data-phase="recording"] .sh-line .sh-w:not(.is-said):not(.is-now){color:#a39d95}
.sh-w.is-now{background:#ffedd5;color:#9a3412}
.sh-sample .sh-w:not(.is-said):not(.is-now){color:#a39d95}
.sh-s{font-weight:800;color:inherit}
.sh-main{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:7px;text-decoration-color:#ea580c}
.sh-lk{display:inline-block;margin:0 -.08em;color:#ea580c;font-weight:700;transform:translateY(.32em)}
.sh-bar{color:#d6d1ca}
.sh-note{color:var(--ink-soft);font-size:15px}
.sh-key{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--muted);font-size:13px}
.sh-key .sh-main{text-underline-offset:3px;text-decoration-thickness:2px}
.sh-key .sh-lk{transform:none}

/* The controls */
.sh-card{gap:14px}
.sh-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.sh-play[data-state="playing"],.sh-play[data-state="loading"]{background:var(--ink);color:#fff!important;box-shadow:none}
.sh-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--field);color:var(--ink-soft);font:600 14px/1 var(--font-body);cursor:pointer}
.sh-toggle .tt-i{width:16px;height:16px}
.sh-toggle[aria-pressed="true"]{background:var(--ink);color:#fff}
.sh-micbtn{width:96px;height:96px}
.st-t-body[data-phase="recording"] .sh-micbtn{background:#e5484d;box-shadow:none;color:#fff}
@media (prefers-reduced-motion:no-preference){.st-t-body[data-phase="recording"] .sh-micbtn::after{animation:tt-ring 1.4s var(--ease-out) infinite}}
.st-t-body[data-phase="recording"] .st-phase{color:#c22a30}
.st-t-body[data-phase="checked"] .sh-micbtn{background:var(--ok-bg);box-shadow:none;color:var(--ok)}
.st-t-body[data-phase="checked"] .st-skip{display:none}
.st-t-body[data-phase="saving"] .st-act .tt-pill{visibility:hidden}

/* The side: the set's lines */
.sh-lines li{padding:0}
.sh-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:10px 12px;border:0;border-radius:14px;background:transparent;text-align:left;font:inherit;cursor:pointer}
.sh-lines [data-state="now"] .sh-step{background:#fff}
.sh-lines b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px}
.sh-finish{justify-self:start;padding:6px 0;border:0;background:none;color:var(--ink-soft);font:500 14px/1 var(--font-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.sh-talk .st-t-prog{grid-template-columns:repeat(8,26px)}

/* A take's result */
.sh-result{display:grid;gap:18px;padding:18px 20px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.sh-result[hidden]{display:none}
.sh-res-k{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:600}
.sh-res-k .is-model{color:#9a3412}
.sh-waves{display:block;width:100%;height:auto;margin-top:6px}
.sh-wave-model{fill:#ea580c}
.sh-wave-mine{fill:var(--ink)}
.sh-res-verdict{margin-top:6px!important;color:var(--ink-soft);font-size:15px}
.sh-res-verdict b{color:var(--ink)}
.sh-res-pace[data-pace="close"] .sh-res-verdict b{color:var(--ok)}
.sh-res-play{display:flex;flex-wrap:wrap;gap:8px}

/* The summary */
.sh-missed{display:flex;flex-wrap:wrap;gap:8px}
.sh-missed li{display:grid;gap:2px;padding:8px 12px;border-radius:12px;background:var(--bad-bg);color:#7f1d1d}
.sh-missed b{font:700 16px/1.2 var(--font-display)}
.sh-missed span{font-size:12.5px}
.sh-sum-lines{display:grid;gap:8px}
.sh-sum-lines li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.sh-sum-lines .st-n{width:28px;height:28px;background:var(--field);font-size:13px}
.sh-sum-text{color:var(--ink);font-weight:600}
.sh-sum-lines small{color:var(--muted);font-size:13px}
.sh-sum-lines .is-skip{opacity:.7}

@media (max-width:899px){
  .sh-micbtn{width:72px;height:72px}
  .sh-line{font-size:22px}
  .sh-key{display:none}
  .sh-controls{gap:8px}
  .sh-toggle{min-height:36px;padding:0 12px;font-size:13.5px}
  .sh-talk .st-t-prog{grid-template-columns:repeat(8,minmax(0,1fr))}
  .sh-result{padding:14px 16px}
}

/* ── Content ──────────────────────────────────────────────────────────── */
.sh-why{margin-top:28px;padding:20px 22px;border-radius:var(--r-card);background:#ffe7b3;color:#5c3700}
.sh-why h3{color:#5c3700;font-size:17px;font-weight:700}
.sh-why p{margin-top:6px!important;font-size:15px}
.sh-steps{margin-top:0!important}
.sh-sets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sh-sets button{display:grid;align-content:start;gap:6px;width:100%;height:100%;padding:20px;border:0;border-radius:var(--r-card);background:#fff;color:var(--ink-soft);text-align:left;font:inherit;cursor:pointer;transition:transform .2s var(--ease-out)}
.sh-sets b{color:var(--ink);font:700 17px/1.3 var(--font-display)}
.sh-sets span{font-size:14.5px}
.sh-lvl{justify-self:start;padding:3px 10px;border-radius:999px;background:var(--cat-btn);color:#fff!important;font:700 12.5px/1.3 var(--font-body)}
@media (hover:hover) and (pointer:fine){.sh-sets button:hover{transform:translateY(-3px)}}
@media (max-width:1023px){.sh-sets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:539px){.sh-sets{grid-template-columns:1fr;gap:10px}}
.sh-prose{display:grid;gap:16px;color:var(--ink-soft);font-size:16.5px}
.sh-prose a{color:var(--purple)}

.sh-lines li{display:block}
/* The summary card takes the score's colour: green when nearly every word got through. */
.sh-sum-card[data-score="high"]{background:#dff3e8}
.sh-sum-card[data-score="high"] .st-res-big{color:#065f46}
.sh-sum-card[data-score="mid"]{background:#fff1d6}
.sh-sum-card[data-score="mid"] .st-res-big{color:#7a4a00}