/* IELTS speaking mock test. Built on /english/tools.css and /english/ielts/ielts.css.
   Hero: copy left, the start card right (the tool high on a phone). The test
   opens full screen: the examiner on the left, your answer on the right. */

/* ── Felix, the Slova fox: his bars move while he speaks ───────────────── */
.st-felix{display:inline-grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:#fff}
.st-felix svg{width:72%;height:72%;overflow:visible}
.st-bars rect{fill:#6f05fc;transform-box:fill-box;transform-origin:center}
.st-fox{fill:#fc6325}
.st-felix-lg{width:88px;height:88px}
.is-talking .st-bars rect{animation:st-talk .9s var(--ease-out) infinite}
.is-talking .st-bars rect:nth-child(2){animation-delay:.15s}
.is-talking .st-bars rect:nth-child(3){animation-delay:.3s}
.is-talking .st-bars rect:nth-child(4){animation-delay:.45s}
.is-talking .st-bars rect:nth-child(5){animation-delay:.1s}
@keyframes st-talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@media (prefers-reduced-motion:reduce){.is-talking .st-bars rect{animation:none}}

/* ── Hero: the copy left, a cover picture with a sample cue card right ──
   (the speaking test's approved hero; picture and card rules copied from
   /english/speaking-practice/family.css on the speaking branch) */
.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}
.st-fine{font-size:13.5px;color:var(--muted)}
@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))}}
.st-visual{position:relative;justify-self:end;width:min(100%,400px)}
.st-visual-pic{aspect-ratio:4/5;overflow:hidden;border-radius:28px;background:var(--field)}
.st-visual-pic img{display:block;width:100%;height:100%;object-fit:cover}
.st-hcard{position:absolute;left:-64px;bottom:28px;display:grid;gap:10px;width:300px;padding:16px 18px 18px;border:1px solid var(--cue-line);border-radius:20px;background:var(--cue);box-shadow:0 18px 44px rgba(23,18,29,.16)}
.st-hcard-k{display:flex;justify-content:space-between;align-items:center;color:#7a5a00;font:700 13px/1.2 var(--font-body)}
.st-hcard-k span{display:inline-flex;align-items:center;gap:5px}
.st-hcard-k .tt-i{width:14px;height:14px}
.st-hcard-q{color:#2a1e00;font:700 18px/1.3 var(--font-display);letter-spacing:-.02em}
.st-hcard-say{color:#5c4500;font-size:14px}
@media (max-width:1023px){
  .st-visual{justify-self:center;width:min(100%,460px)}
  .st-visual-pic{aspect-ratio:4/3}
  .st-hcard{position:relative;left:auto;bottom:auto;width:auto;margin:-72px 20px 0}
}
@media (max-width:639px){
  .st-hero .ie-up{display:none}
  .st-hero-grid>.st-copy{display:contents}
  .tt-hero2 .st-hero-grid{gap:0}
  .st-hero-grid .st-visual{order:2;width:100%;margin-top:28px}
  .st-hero-grid .tt-facts-row{order:3;margin-top:28px}
  .st-visual-pic{aspect-ratio:2/1}
  .st-visual-pic img{object-position:50% 30%}
  .st-hcard{gap:8px;margin:-52px 14px 0;padding:12px 14px 14px}
  .st-hcard-q{font-size:16.5px}
  .st-hcard-say{display:none}
}

/* The choices in the test layer's setup screen */
.st-start{display:grid;gap:14px}
.st-start[hidden]{display:none}
.st-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0;min-width:0}
.st-mode{position:relative;cursor:pointer}
.st-mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.st-mode span{display:grid;gap:4px;height:100%;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #d6c8fb;transition:box-shadow .2s}
.st-mode b{font:700 16px/1.25 var(--font-display);letter-spacing:-.02em}
.st-mode small{font-size:13px;color:var(--muted)}
.st-mode input:checked+span{box-shadow:inset 0 0 0 2px var(--purple)}
.st-mode input:checked+span b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--purple);vertical-align:1px}
.st-mode input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px}
.st-topic-pick{display:grid;gap:6px;font:600 14px/1.2 var(--font-body);color:var(--speaking-ink)}
.st-topic-pick select{width:100%;min-height:48px;padding:0 44px 0 16px;border:0;border-radius:14px;background:#fff url(/english/shared/select-chevron.svg) no-repeat right 16px center;background-size:16px;color:var(--ink);font:500 16px/1.2 var(--font-body);-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px #d6c8fb;cursor:pointer}
.st-topic-pick select:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
@media (max-width:479px){.st-mode span{padding:12px}.st-mode b{font-size:15px}}

/* ── How it works: three numbered parts ───────────────────────────────── */
.st-steps{display:grid;gap:16px}
.st-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.st-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--speaking-bg);color:var(--speaking-ink);font:700 18px/1 var(--font-display)}
.st-step h3{font:700 19px/1.25 var(--font-display);letter-spacing:-.02em}
.st-step-time{margin-top:2px!important;font-size:14px;color:var(--muted)}
.st-step p+p{margin-top:10px!important}
.st-step>div>p:not(.st-step-time){color:var(--ink-soft)}
.st-step-here{padding:12px 14px;border-radius:12px;background:var(--surface);font-size:15px}
.st-step-here b{color:var(--ink)}

/* ── What the report shows (the category band) ────────────────────────── */
.st-limits{display:grid;gap:12px;margin-top:22px!important}
.st-limits li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:15px}
.st-limits .tt-i{flex:none;width:20px;height:20px;margin-top:1px;color:var(--exam-ink)}
.st-sample{padding:clamp(20px,3vw,28px);border-radius:var(--r-panel);background:#fff}
.st-sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.st-sample-head p{font:700 19px/1.2 var(--font-display);letter-spacing:-.02em}
.st-sample-head span{padding:5px 10px;border-radius:999px;background:var(--field);font:600 12.5px/1 var(--font-body);color:var(--ink-soft)}
.st-sample-rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.st-sample-rows b{display:block;font-weight:600;color:var(--ink)}
.st-sample-rows small{display:block;margin-top:2px;font-size:14px;color:var(--ink-soft)}
.st-sample-foot{margin-top:6px!important;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.st-dot{width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--line-strong)}
.st-dot.is-ok{background:#4f46e5}
.st-dot.is-work{background:#d97706}
.st-dot.is-strong{background:#059669}

/* ── Scoring: band descriptors ───────────────────────────────────────── */
.st-source{margin-top:16px!important;font-size:14.5px;color:var(--muted)}
.st-crit{margin-top:0}
.st-crit summary{flex-wrap:wrap;gap:4px 16px}
.st-crit summary h3{flex:0 0 100%}
.st-crit summary span{font-size:15px;color:var(--ink-soft)}
.st-bands{display:grid;gap:10px;padding:0 0 22px}
.st-bands div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface)}
.st-bands dt{font:700 15px/1.4 var(--font-display);color:var(--speaking-ink)}
.st-bands dd{margin:0;font-size:15px;color:var(--ink-soft)}

/* FAQ in the right column */
.st-faq{margin-top:0}

/* ── The test: full screen ────────────────────────────────────────────── */
body.st-open{overflow:hidden}
.st-screen{position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:auto auto minmax(0,1fr);background:#fff;color:var(--ink)}
.st-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.st-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border:0;border-radius:999px;background:var(--field);color:var(--ink);font:600 14px/1 var(--font-body);cursor:pointer}
.st-back .tt-i{width:18px;height:18px}
.st-bar-title{display:grid;gap:2px;min-width:0;text-align:center}
.st-bar-title b{font:700 16px/1.2 var(--font-display);letter-spacing:-.02em}
.st-bar-title span{overflow:hidden;font-size:13.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.st-clock{display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:999px;background:var(--exam-bg);color:var(--exam-ink);font-size:13px;font-variant-numeric:tabular-nums}
.st-clock b{font:700 17px/1 var(--font-display);color:var(--ink)}
.st-clock.is-low{background:var(--bad-bg);color:var(--bad)}
.st-clock.is-low b{color:var(--bad)}
.st-clock[hidden]{display:none}
.st-progress{display:flex;gap:6px;padding:10px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.st-progress span{flex:1;height:6px;border-radius:6px;background:var(--line)}
.st-progress span[data-state="now"]{background:#c4b5fd}
.st-progress span[data-state="done"]{background:var(--purple)}
.st-progress span[hidden]{display:none}

.st-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;width:100%;max-width:1280px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto;grid-auto-rows:max-content;align-items:stretch}
@media (max-width:899px){.st-body{grid-template-columns:1fr;gap:12px;padding-top:12px;padding-bottom:0;align-content:start;align-items:start}}

.st-examiner{display:flex;flex-direction:column;gap:14px;min-height:calc(100dvh - 150px);padding:clamp(20px,3vw,32px);border-radius:var(--r-panel);background:var(--speaking-bg)}
.st-examiner>*{flex:none}
.st-who{display:flex;align-items:center;gap:14px}
.st-who b{display:block;font:700 18px/1.2 var(--font-display)}
.st-who span:not(.st-felix){font-size:14px;color:var(--speaking-ink)}
.st-topic{font:600 14px/1.3 var(--font-body);color:var(--speaking-ink)}
.st-topic:empty{display:none}
.st-q{font:700 clamp(1.35rem,2.6vw,2rem)/1.22 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.st-again{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:var(--speaking-ink);font:600 14px/1 var(--font-body);cursor:pointer}
.st-again .tt-i{width:18px;height:18px}
.st-again[hidden]{display:none}
/* Where you are: every step of this test, bottom of the examiner panel */
.st-map{display:grid;gap:6px;margin-top:auto!important;padding-top:18px!important}
.st-map li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.55);color:var(--muted);font-size:14.5px}
.st-map b{margin-right:8px;color:var(--speaking-ink)}
.st-map-dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px #c4b5fd}
.st-map li[data-state="now"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 2px var(--purple)}
.st-map li[data-state="now"] .st-map-dot{background:var(--purple);box-shadow:none}
.st-map li[data-state="done"] .st-map-dot{background:#a78bfa;box-shadow:none}
.st-map li[data-state="done"]{color:var(--ink-soft)}
.is-setup .st-map li{background:#fff;color:var(--ink-soft)}
@media (max-width:899px){
  .st-felix-lg{width:52px;height:52px}
  .st-examiner{gap:10px;min-height:auto;padding:18px}
  .st-map{display:none}
  .is-setup .st-map{display:grid;padding-top:6px!important}
}

/* The cue card in the test */
.st-card{padding:20px 22px;border:1px solid var(--cue-line);border-radius:16px;background:var(--cue);color:#3f2d00}
.st-card-k{font:600 13px/1.2 var(--font-body);color:#7a5a00}
.st-card-title{margin-top:6px!important;font:700 20px/1.3 var(--font-display);letter-spacing:-.02em;color:#2a1e00}
.st-card-say{margin-top:10px!important;font-size:15px}
.st-card ul{margin:4px 0 0 20px!important;list-style:disc;font-size:16px}
.st-card-end{margin-top:6px!important;font-size:16px}

.st-you{display:flex;flex-direction:column;gap:16px;min-height:calc(100dvh - 150px);padding:clamp(18px,2.6vw,28px);border:1px solid var(--line-strong);border-radius:var(--r-panel);background:#fff}
.st-you-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.st-you-head b{font:700 18px/1.2 var(--font-display);letter-spacing:-.02em}
.st-you .tt-mic{padding:0;border:0;border-radius:0}
.st-you .tt-mic-btn{width:96px;height:96px}
.st-you .tt-mic-btn .tt-i{width:40px;height:40px}
.st-you .tt-mic-text{min-height:120px}
.st-you .tt-mic-type textarea{min-height:140px}
.is-setup .st-you .tt-mic-ask{padding:18px;border-radius:16px;background:var(--surface)}
.st-notes{display:grid;gap:10px;padding:18px;border:1px solid var(--cue-line);border-radius:var(--r-card);background:#fffdf3}
.st-notes label{font:600 15px/1.2 var(--font-body)}
.st-notes textarea{width:100%;min-height:120px;padding:12px 14px;border:1px solid var(--cue-line);border-radius:12px;background:#fff;color:var(--ink);font-size:16px;line-height:1.5;resize:vertical}
.st-notes textarea:focus{outline:2px solid var(--purple);outline-offset:1px}
.st-notes .tt-pill[hidden]{display:none}
.st-controls{display:grid;gap:12px;margin-top:auto}
.st-hint{font-size:15px;color:var(--ink-soft)}
.st-hint:empty{display:none}
.st-controls-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.st-controls-row:not(:has(button:not([hidden]))){display:none}
.st-answer-t{padding:6px 12px;border-radius:999px;background:var(--speaking-bg);color:var(--speaking-ink);font:700 16px/1 var(--font-display);font-variant-numeric:tabular-nums}
.st-answer-t:empty{display:none}
.st-controls .tt-pill[hidden]{display:none}
.st-end{justify-self:start;padding:6px 0;border:0;background:none;color:var(--muted);font:500 14px/1.3 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.st-end[hidden]{display:none}

.st-leave{max-width:min(420px,calc(100vw - 32px));padding:24px;border:0;border-radius:20px;box-shadow:0 20px 60px rgba(23,18,29,.24)}
.st-leave::backdrop{background:rgba(23,18,29,.42)}
.st-leave-title{font:700 20px/1.25 var(--font-display)}
.st-leave-text{margin-top:6px!important;color:var(--ink-soft)}
.st-leave-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ── The report ───────────────────────────────────────────────────────── */
.st-report-wrap{padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:var(--top-h)}
.st-report{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head next" "sum next" "crit next" "how next" "ans next";gap:24px clamp(24px,4vw,56px);align-items:start}
@media (max-width:1023px){.st-report{grid-template-columns:1fr;grid-template-areas:"head" "sum" "crit" "how" "next" "ans"}}
.st-r-head{grid-area:head}
.st-r-head h2:focus{outline:none}
.st-r-sum{grid-area:sum;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-r-crit{grid-area:crit;display:grid;gap:16px}
.st-r-how{grid-area:how}
.st-r-next{grid-area:next;position:sticky;top:calc(var(--top-h) + 24px);display:grid;gap:16px}
@media (max-width:1023px){.st-r-next{position:static}}
.st-r-answers{grid-area:ans}

.st-r-k{display:block;font:600 13px/1.2 var(--font-body);color:var(--muted)}
.st-r-est{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"k k" "n line" "n small";gap:2px 20px;align-items:center;padding:22px 24px;border-radius:var(--r-card);background:var(--exam-bg)}
.st-r-est .st-r-k{grid-area:k;color:var(--exam-ink)}
.st-r-est strong{grid-area:n;font:700 64px/1 var(--font-display);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.st-r-est span:not(.st-r-k){grid-area:line;font-weight:600;color:var(--ink)}
.st-r-est small{grid-area:small;font-size:14px;color:var(--exam-ink)}
.st-r-est.is-none strong{font-size:30px;letter-spacing:-.03em}
.st-r-tile{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.st-r-tile strong{font:700 26px/1.1 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.st-r-tile small{font-size:13px;color:var(--muted)}
@media (max-width:639px){.st-r-sum{grid-template-columns:1fr 1fr}.st-r-tile:last-child{grid-column:1/-1}.st-r-est strong{font-size:52px}}

.st-r-c{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden}
.st-r-c header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:16px 20px;background:var(--surface)}
.st-r-c h3{font:700 18px/1.25 var(--font-display);letter-spacing:-.02em}
.st-r-status{padding:6px 12px;border-radius:999px;font:600 13px/1 var(--font-body);background:var(--field);color:var(--ink-soft)}
.st-r-c.is-strong header{background:#d1fae5}.st-r-c.is-strong .st-r-status{background:#047857;color:#fff}
.st-r-c.is-ok header{background:#e0e7ff}.st-r-c.is-ok .st-r-status{background:#3730a3;color:#fff}
.st-r-c.is-work header{background:#fef3c7}.st-r-c.is-work .st-r-status{background:#92400e;color:#fff}
.st-r-c dl{display:grid;padding:4px 20px}
.st-r-row{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,5fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--line)}
.st-r-row:first-child{border-top:0}
.st-r-row dt{font-size:14.5px;color:var(--muted)}
.st-r-row dd{margin:0;font-weight:600;color:var(--ink)}
.st-r-row dd small{display:block;margin-top:2px;font-weight:400;font-size:14px;color:var(--ink-soft)}
.st-r-row-wide{grid-template-columns:1fr;border-top:0;padding-top:0}
@media (max-width:479px){.st-r-row{grid-template-columns:1fr}}
.st-r-structs{display:flex;flex-wrap:wrap;gap:6px}
.st-r-structs li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--field);color:var(--muted);font-size:13.5px}
.st-r-structs li.is-yes{background:#d1fae5;color:#065f46;font-weight:600}
.st-r-structs .tt-i{width:14px;height:14px}
.st-r-plain{padding:12px 0;color:var(--ink-soft)}
.st-r-tip{margin:0 20px 18px!important;padding:12px 14px;border-radius:12px;background:var(--surface);font-size:15px;color:var(--ink-soft)}
.st-r-tip b{color:var(--ink)}
.st-r-tip a{color:var(--purple);font-weight:600}

.st-r-how{padding:16px 20px;border-radius:var(--r-card);background:var(--surface)}
.st-r-how summary{cursor:pointer;font-weight:600;color:var(--ink)}
.st-r-how ul{display:grid;gap:8px;margin:12px 0 0 18px!important;list-style:disc;font-size:15px;color:var(--ink-soft)}
.st-r-how p{margin-top:10px!important;font-size:15px;color:var(--ink-soft)}

.st-r-again{display:grid;gap:14px;padding:4px 4px 0}
.st-r-again .tt-actions{margin:0}

.st-r-answers h3{font:700 22px/1.2 var(--font-display);letter-spacing:-.03em}
.st-r-legend{margin-top:6px!important;font-size:14px;color:var(--muted)}
.st-r-part{margin-top:24px}
.st-r-part h4{font:700 16px/1.2 var(--font-display);color:var(--speaking-ink);margin-bottom:8px}
.st-r-part ol{display:grid;gap:10px}
.st-r-part li{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.st-r-part li.is-follow{margin-left:24px;background:var(--surface)}
.st-r-q{font-size:14px;color:var(--muted)}
.st-r-a{margin-top:4px!important;color:var(--ink);line-height:1.55}
.st-r-a.is-empty{color:var(--muted);font-style:italic}
.st-r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px!important;font-size:13.5px;color:var(--muted)}
.st-r-verdict{padding:4px 10px;border-radius:999px;font-weight:600}
.st-r-verdict.is-on{background:#d1fae5;color:#065f46}
.st-r-verdict.is-short{background:#fef3c7;color:#78350f}
.st-r-verdict.is-unclear{background:#fee2e2;color:#991b1b}
.st-r-verdict.is-none{background:var(--field);color:var(--ink-soft)}
mark.st-m-rare{padding:0 2px;border-radius:4px;background:#ede4ff;color:#4c1d95;font-weight:600}
mark.st-m-link{padding:0 2px;border-radius:4px;background:#dbeafe;color:#1e3a8a}

/* The shared Slova card in the narrow column: text first, pictures under it */
.st-r-next .tt-result-cta{grid-template-columns:1fr;gap:20px}
.st-r-next .tt-result-fan{justify-content:center;padding-top:0}
.st-r-next .tt-result-fan img{width:84px}
.st-r-next .tt-result-fan img:nth-child(2){width:98px}
@media (max-width:1023px){.st-r-next .tt-result-cta{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:639px){.st-r-next .tt-result-cta{grid-template-columns:1fr}}

/* Phones: the actions stay at the bottom of the screen while you answer */
@media (max-width:899px){
  .st-you{min-height:auto;padding:16px;border-radius:20px}
  .st-you .tt-mic-btn{width:80px;height:80px}
  .st-you .tt-mic-text{min-height:84px}
  .st-you .tt-mic-type textarea{min-height:110px}
  .st-controls{position:sticky;bottom:0;z-index:2;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
  .st-controls-row .tt-pill{flex:1}
  .st-end{margin-bottom:16px}
}

/* While the cue card is on screen it takes the map's place */
.is-card .st-map{display:none}
#st-answer[hidden]{display:none}

/* Topic sets: one button per set starts the mock with it */
.st-set-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:639px){.st-set-chips{grid-template-columns:1fr}}
.st-set-chip{display:grid;gap:6px;width:100%;height:100%;padding:16px 18px;border:1px solid var(--cue-line);border-radius:18px;background:var(--cue);color:#3f2d00;text-align:left;font:inherit;cursor:pointer;transition:transform .16s var(--ease-out)}
.st-set-chip b{font:600 13px/1.2 var(--font-body);color:#7a5a00}
.st-set-chip span{font:700 16px/1.3 var(--font-display);letter-spacing:-.01em;color:#2a1e00}
@media (hover:hover) and (pointer:fine){.st-set-chip:hover{transform:translateY(-2px)}}


/* The report opens in the test layer: the Slova banner sticks to its top */
.st-sum{grid-row:3;min-height:0;overflow-y:auto;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));background:#fff}
.st-sum[hidden]{display:none}
.st-screen.is-summary .st-body,.st-screen.is-summary .st-progress{display:none}
.st-sum .sp-top-bar{top:0}
.st-sum .st-report{padding-top:8px}
.st-r-end{display:grid;gap:24px;margin-top:clamp(32px,5vw,56px)}
.st-r-end #st-email{max-width:720px}