/* English speaking test (/english/speaking-test/), on top of /english/tools.css
   and /english/speaking-practice/family.css.
   The hero: the copy on the left, a picture and a sample task card on the
   right (.st-visual, in family.css). "Start the test" opens a full-screen layer: the task on a lilac
   side panel, the timer, the words you say and the actions on white. The
   result opens in that layer (or on the page with ?result=page).
   Solid colours, no inline styles. */

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

@media (max-width:1023px){
  .st-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .st-copy .tt-facts-row{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
}
@media (max-width:639px){.st-copy .tt-facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The test layer itself (top bar, side, stage, timer ring, actions) is in
   /english/speaking-practice/family.css: the accent test uses it too. */

/* The result card, measures and review are in /english/speaking-practice/family.css
   (the accent test and shadowing use them too). */

/* ── Content sections ─────────────────────────────────────────────────── */
.st-measures{display:grid;gap:12px}
.st-measures li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card)}
.st-measures h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.st-measures p{margin-top:2px!important;color:var(--ink-soft);font-size:15.5px}
.st-not{margin-top:16px;padding:20px 22px;border-radius:var(--r-card);background:#fff1d6;color:#5c3700}
.st-not h3{color:#5c3700;font-size:17px;font-weight:700}
.st-not p{margin-top:6px!important;font-size:15.5px}
.st-task-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.st-task-cards li{display:grid;align-content:start;gap:10px;padding:22px 20px;border-radius:var(--r-card);background:#fff}
.st-task-cards .st-n{background:var(--purple-deep);color:#fff}
.st-task-cards h3{font-size:18px;font-weight:700;letter-spacing:-.02em}
.st-task-cards p{color:var(--ink-soft);font-size:15px}
.st-task-cards small{color:var(--cat-ink);font-size:13.5px;font-weight:600}
@media (max-width:1023px){.st-task-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.st-task-cards{grid-template-columns:1fr;gap:10px}}
.st-levels{display:grid;gap:10px}
.st-levels li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card)}
.st-levels b{display:grid;place-items:center;height:48px;border-radius:12px;background:var(--tests-bg);color:var(--purple-deep);font:800 20px/1 var(--font-display)}
.st-levels h3{font-size:17px;font-weight:700}
.st-levels p{margin-top:2px!important;color:var(--ink-soft);font-size:15px}
.st-panel{scroll-margin-top:calc(var(--top-h) + 8px)}
.st-review .is-skip .st-review-points li{background:var(--field);color:var(--muted)}

/* How it works: four steps in a row (one column on phones) */
.st-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:none}
.st-flow li{position:relative;display:grid;align-content:start;gap:8px;padding:22px;border-radius:20px;background:#f6f4f0;color:var(--ink-soft)}
.st-flow li:not(:last-child)::after{content:"";position:absolute;top:38px;right:-13px;z-index:1;width:10px;height:10px;border:solid var(--ink-soft);border-width:2px 2px 0 0;transform:rotate(45deg)}
.st-flow-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.st-flow-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font:800 15px/1 var(--font-display)}
.st-flow-ico{display:grid;place-items:center;width:32px;height:32px;color:var(--ink)}
.st-flow-ico .tt-i{width:22px;height:22px}
.st-flow h3{color:var(--ink);font:700 17px/1.3 var(--font-display);letter-spacing:-.02em}
.st-flow p{font-size:15px;line-height:1.5}
@media (max-width:1023px){.st-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.st-flow li::after{display:none}}
@media (max-width:639px){.st-flow{grid-template-columns:minmax(0,1fr);gap:10px}.st-flow li{padding:18px}}

/* The example result: the result card, not sticky, with a small "Example" tag */
.st-example{position:relative;display:grid;gap:12px;min-width:0}
.st-example-tag{justify-self:start;padding:5px 12px;border-radius:999px;background:var(--ink);color:#fff;font:700 13px/1.2 var(--font-body)}
.st-example .st-example-card{position:static}
.st-example-next{margin-top:14px!important;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
/* More tasks: the way on into Slova under the answers */
.st-more{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:22px 24px;border-radius:20px;background:var(--tint)}
.st-more h3{color:var(--ink);font:700 19px/1.25 var(--font-display);letter-spacing:-.02em}
.st-more p{margin-top:6px!important;color:var(--ink-soft);font-size:15px}
@media (max-width:640px){.st-more{grid-template-columns:1fr}.st-more .tt-pill{width:100%}}