:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #1c1440;
  --muted: #4b4470;
  --line: #e6e1fa;
  --brand: #5b3df5;
  --brand-dark: #3520a3;
  --brand-soft: #efebff;
  --hot: #e8452c;
  --hot-dark: #a82a16;
  --bad: #a82a16;
  --bad-soft: #ffe9e4;
  --bad-ink: #5a1e12;
  --weak: #7a4b00;
  --weak-soft: #fff3d6;
  --weak-ink: #4a3a12;
  --good: #0a5a41;
  --good-soft: #ddf5e9;
  --night: #1c1440;
  --night-soft: #2e2466;
  --lime: #c9f24a;
  --display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lift: 0 8px 0 var(--line), 0 0 0 2px var(--line);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #f3f0ff;
  color: var(--ink);
  font: 600 16px/1.5 var(--body);
}

main.phone { max-width: 520px; min-height: 100vh; margin: 0 auto; background: var(--bg); }
main.wide { max-width: 1040px; min-height: 100vh; margin: 0 auto; background: var(--bg); }

h1 { margin: 0; font: 800 clamp(1.7rem, 7vw, 2rem)/1.05 var(--display); }
h2 { margin: 22px 0 8px; font: 800 1.25rem/1.2 var(--display); }
h2:first-child { margin-top: 0; }
h3 { margin: 0 0 8px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
p { margin: 0 0 10px; }
a { color: var(--brand-dark); font-weight: 800; }
.note { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.empty { color: var(--muted); margin: 0 0 12px; }
.error { color: var(--bad); }

/* ---------- hero (the coloured block at the top of every screen) ---------- */

.hero { padding: 18px 20px 26px; border-radius: 0 0 32px 32px; background: var(--brand); color: #fff; }
.hero.night { background: var(--night); }
/* room for the card that overlaps the bottom of the hero */
.hero:has(+ .card.lift) { padding-bottom: 58px; }
.hero-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.brand { font: 800 1.25rem/1 var(--display); }
.hero-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: #fff; font: 800 0.95rem var(--body); text-decoration: none; cursor: pointer; }
.hero-link.back { margin: -6px 0 2px; }
.hero-sub { margin: 6px 0 0; font-size: 0.9rem; font-weight: 700; }
.hero-question { margin: 8px 0 0; font-size: 0.95rem; font-weight: 700; line-height: 1.35; opacity: 0.92; }
.hero-question:empty { display: none; }
.pill-white { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.82rem; font-weight: 800; }
.pill-white:empty { display: none; }
.hero-actions { display: flex; align-items: center; gap: 12px; }
.outline-light { min-height: 44px; padding: 0 14px; border: 2px solid var(--muted); border-radius: 14px; background: transparent; box-shadow: none; color: #fff; font-size: 0.9rem; }

.hero-center { padding: 52px 24px 72px; text-align: center; }
.hero-center p { margin: 10px 0 0; font-weight: 600; }
.hero-title { margin-top: 16px; font: 800 2rem/1 var(--display); }

/* ---------- cards, forms, buttons ---------- */

.card { margin: 0 20px 16px; padding: 18px; border-radius: 22px; background: var(--bg); box-shadow: 0 0 0 2px var(--line); }
.card.lift { position: relative; margin-top: -36px; box-shadow: var(--lift); }
.panel { padding: 18px 20px 28px; }
.panel > .card { margin-left: 0; margin-right: 0; }

label { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 800; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field { margin-bottom: 14px; }

textarea, input, select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font: 700 1rem var(--body);
}
textarea { resize: vertical; }
textarea:focus, input:focus { outline: none; border-color: var(--brand); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

button {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--brand);
  box-shadow: 0 5px 0 var(--brand-dark);
  color: #fff;
  font: 800 1rem var(--body);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--brand-dark); }
button:disabled { opacity: 0.5; cursor: default; }
button.big { width: 100%; min-height: 60px; border-radius: 18px; font: 800 1.2rem var(--display); }
button.ghost, button.danger, button.warn { border: 2px solid var(--line); background: var(--bg); box-shadow: none; color: var(--ink); }
button.ghost:active:not(:disabled), button.danger:active:not(:disabled), button.warn:active:not(:disabled) { transform: scale(0.97); box-shadow: none; }
button.danger { color: var(--bad); }
button.warn { color: var(--weak); }
button.small { min-height: 44px; padding: 0 12px; border-radius: 14px; font-size: 0.9rem; }
button.small:not(.ghost):not(.danger):not(.warn) { box-shadow: none; }
.text-button { min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--brand-dark); font: 800 0.9rem var(--body); }
.text-button:active:not(:disabled) { transform: none; box-shadow: none; }

.alert { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--bad-soft); color: var(--bad-ink); font-size: 0.92rem; font-weight: 700; }
.alert:empty { display: none; }

/* ---------- sign in ---------- */

.signin .card { margin-top: -40px; }
.signin h1 { margin-bottom: 14px; font-size: 1.4rem; }
.foot-note { margin: 22px 24px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* the sound wave: bars that breathe on their own; .voice scales the whole wave with the microphone */
.wave { display: flex; align-items: center; justify-content: center; gap: 6px; }
.wave i { width: 7px; border-radius: 4px; background: #fff; animation: wave 1.2s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.logo-wave { height: 64px; }
.logo-wave i:nth-child(1) { height: 28px; }
.logo-wave i:nth-child(2) { height: 48px; animation-delay: 0.15s; }
.logo-wave i:nth-child(3) { height: 64px; animation-delay: 0.3s; background: #ffd45e; }
.logo-wave i:nth-child(4) { height: 40px; animation-delay: 0.45s; }
.logo-wave i:nth-child(5) { height: 22px; animation-delay: 0.6s; }

/* ---------- question picker ---------- */

.picker h3 { margin: 0 0 8px; }
.picker .note { margin: 8px 0 0; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; }
.picker-head h3 { margin: 0; }
.picker input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.picker label { position: relative; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }

.segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#engine-label { margin-top: 16px; }
.segmented.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.segmented.five span { font-size: 0.8rem; }
.segmented.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented span, .chip span { display: flex; align-items: center; justify-content: center; border: 2px solid var(--line); background: var(--bg); font-size: 0.88rem; font-weight: 800; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s; }
.segmented span { height: 48px; border-radius: 14px; }
.segmented label:active span, .chip:active span { transform: scale(0.95); }
.picker input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); animation: pop 0.3s ease; }
.picker input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
@keyframes pop { 50% { transform: scale(1.06); } }

/* topics: one row of tiles that scrolls sideways; "More topics" opens it into a grid */
.chips { display: flex; gap: 6px; margin: 0 -18px; padding: 4px 18px 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; width: 96px; }
.chip span { flex-direction: column; gap: 2px; height: 74px; padding: 0 6px; border-radius: 16px; font-size: 0.8rem; line-height: 1.15; text-align: center; }
.chip b { font-size: 1.35rem; line-height: 1.2; font-weight: 400; }
.chips.open { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); overflow: visible; }
.chips.open .chip { width: auto; }

#random-question { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 12px; font: 800 1.05rem var(--display); }
#random-question.fresh .dice { animation: roll 0.5s ease; }
@keyframes roll { to { transform: rotate(360deg); } }

.question-card { margin: 22px 20px 0; padding: 16px 18px 18px; border-radius: 22px; background: var(--weak-soft); }
.question-card label { margin-bottom: 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--weak); }
.question-card textarea { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: 700 1.15rem/1.35 var(--display); color: var(--ink); resize: none; overflow: hidden; }
.question-card textarea::placeholder { font: 600 0.95rem/1.5 var(--body); color: var(--weak-ink); opacity: 0.85; }
#question.fresh { animation: arrive 0.4s ease; }
@keyframes arrive { from { opacity: 0.35; transform: translateY(8px); } }

.account { margin: 0; padding: 4px 20px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted); font-size: 0.88rem; }

/* ---------- mock test: a card on the practise screen, and the dark screen of the test itself ---------- */

.mock-card { margin: 6px 20px 18px; padding: 16px 18px 18px; border: 2px solid var(--line); border-radius: 22px; }
.mock-card h3 { margin: 0 0 6px; }
.mock-card p { margin: 0 0 12px; font-size: 0.92rem; }
.mock-card button { width: 100%; }
.mock-card .band-rule { padding: 10px 12px; border-radius: 14px; background: var(--weak-soft); color: var(--weak-ink); font-size: 0.88rem; font-weight: 700; line-height: 1.4; }
.mock-card .note, .mock-card .alert { margin: 10px 0 0; }
.mock-card .alert:empty { display: none; }

.view.mock { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 20px 30px; background: var(--night); color: #fff; overflow-y: auto; }
.view.mock[hidden] { display: none; }
.mock-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 480px; }
.mock-middle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; max-width: 480px; }
#mock-status, #coach-status { color: var(--lime); font: 800 1.5rem/1.15 var(--display); text-align: center; }
.mock .voice { --level: 0; display: flex; height: 80px; transform: scaleY(calc(0.18 + var(--level) * 0.82)); transition: transform 0.1s linear; }
.mock.examiner-speaking .voice { transform: none; }
.mock.examiner-speaking .voice i { background: #fff; }
.mock-line { width: 100%; margin: 0; color: #b9b2e6; font-size: 0.95rem; text-align: center; max-height: 6em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.mock-line.examiner { max-height: 40vh; overflow-y: auto; display: block; padding: 14px 18px; border-radius: 22px; background: var(--weak-soft); color: var(--ink); font: 700 1.05rem/1.35 var(--display); text-align: left; }
.mock-line:empty { display: none; }
#mock-end, #coach-end { width: 100%; max-width: 480px; min-height: 60px; border-radius: 22px; background: var(--hot); box-shadow: 0 6px 0 var(--hot-dark); font: 800 1.15rem var(--display); }
/* Part 2: the cue card under a ring that empties over the preparation minute */
.mock-prep { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.mock.preparing .voice, .mock.preparing .mock-line { display: none; }
.prep-ring { --left: 1; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--left) * 1turn), rgba(255, 255, 255, 0.14) 0); }
.prep-ring span { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--night); font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.prep-ring.soon { background: conic-gradient(#ffb547 calc(var(--left) * 1turn), rgba(255, 255, 255, 0.14) 0); }
.prep-ring.soon span { color: #ffd45e; }
.cue-card { width: 100%; padding: 16px 18px; border-radius: 22px; background: var(--weak-soft); color: var(--ink); }
.cue-card b { display: block; font: 800 1.1rem/1.3 var(--display); }
.cue-card p { margin: 10px 0 4px; color: var(--weak-ink); font-size: 0.88rem; font-weight: 800; }
.cue-card ul { margin: 0; padding-left: 20px; font-weight: 700; line-height: 1.45; }
.mock-prep button { width: 100%; border-color: rgba(255, 255, 255, 0.25); background: transparent; color: #fff; }
.mock-substatus { min-height: 1.4em; margin-top: -8px; color: #b9b2e6; font-size: 0.9rem; font-weight: 700; text-align: center; }
.mock-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 480px; }
.mock-controls button { min-height: 52px; border-color: #6d63a8; border-radius: 18px; font-weight: 800; }
.mock-controls button.nudge { border-color: var(--lime); color: var(--lime); animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.04); } }
.mock.preparing .mock-controls, .mock.preparing .mock-substatus { display: none; }
.mock-top #mock-timer.low, .mock-top #coach-timer.low { background: var(--hot); }
.mock-controls.single { grid-template-columns: 1fr; }
.coach-question { width: 100%; max-width: 480px; margin: 0; color: #b9b2e6; font-size: 0.9rem; font-weight: 700; text-align: center; }
.coach-card { margin: 24px 0 0; border-color: var(--brand); background: var(--brand-soft); }
.coach-session { margin-top: 10px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 16px; }
.coach-session summary { cursor: pointer; font-weight: 800; }
.coach-summary > p { margin: 10px 0 0; }
.coach-summary h3 { margin: 14px 0 6px; }
.coach-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.coach-list.better li::marker { color: var(--good); }
.coach-list.focus li::marker { color: var(--hot); }
.coach-talk { margin-top: 14px; }
.coach-talk summary { cursor: pointer; color: var(--muted); font-weight: 800; }
.mock-hint { margin: 0; color: #b9b2e6; font-size: 0.85rem; text-align: center; max-width: 480px; }

.dialogue { margin: 12px 0 0; display: grid; gap: 10px; }
.dialogue p { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--brand-soft); line-height: 1.5; }
.dialogue p.you { background: var(--good-soft); }
.dialogue b { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* ---------- recorder: a button while idle, a full dark screen while recording ---------- */

.recorder { --level: 0; padding: 22px 20px 12px; }
.rec-top, .rec-question, .recorder .voice, #timer, .progress, .rec-hint { display: none; }
/* the overlay is styled from body.rec-open; .is-recording and .is-preparing say which of its two uses it is */
#status { display: block; margin-bottom: 12px; color: var(--muted); font-size: 0.95rem; font-weight: 700; text-align: center; }
#status:empty { display: none; }
#status.error { padding: 12px 14px; border-radius: 16px; background: var(--bad-soft); color: var(--bad-ink); text-align: left; }

#record {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  border-radius: 22px;
  background: var(--hot);
  box-shadow: 0 6px 0 var(--hot-dark);
  font: 800 1.3rem var(--display);
}
#record:active:not(:disabled) { box-shadow: 0 2px 0 var(--hot-dark); }
#record svg { width: 26px; height: 26px; }
#record .icon-stop { display: none; }

body.rec-open { overflow: hidden; }
body.rec-open .recorder {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 30px;
  background: var(--night);
  color: #fff;
  overflow-y: auto;
}
body.rec-open .rec-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 480px; }
.rec-part { padding: 5px 12px; border-radius: 999px; background: var(--night-soft); font-size: 0.82rem; font-weight: 800; }
.rec-part:empty { display: none; }
body.rec-open .rec-question { display: block; width: 100%; max-width: 480px; margin: 0; padding: 14px 18px; border-radius: 22px; background: var(--weak-soft); color: var(--ink); font: 700 1.05rem/1.35 var(--display); white-space: pre-line; max-height: 30vh; overflow-y: auto; }
body.rec-open .rec-question:empty { display: none; }
.rec-middle { width: 100%; }
body.rec-open .rec-middle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; max-width: 480px; }
body.rec-open #status { margin: 0; color: #b9b2e6; font-size: 1rem; }
body.rec-open #status.go { color: var(--lime); font: 800 1.9rem/1.1 var(--display); animation: pop 0.35s ease; }
body.rec-open #status.error { background: none; padding: 0; color: #ff8a78; text-align: center; }

body.is-recording .voice { display: flex; height: 96px; transform: scaleY(calc(0.18 + var(--level) * 0.82)); transition: transform 0.1s linear; will-change: transform; }
.voice i { background: var(--lime); }
.voice i:nth-child(-n+2), .voice i:nth-last-child(-n+2) { background: var(--brand); }
.voice i:nth-child(3), .voice i:nth-last-child(3) { background: #7c63ff; }
.voice i:nth-child(1) { height: 30%; animation-duration: 1.1s; }
.voice i:nth-child(2) { height: 54%; animation-duration: 1.1s; animation-delay: 0.1s; }
.voice i:nth-child(3) { height: 72%; animation-duration: 0.9s; animation-delay: 0.2s; }
.voice i:nth-child(4) { height: 46%; animation-duration: 1.3s; animation-delay: 0.05s; }
.voice i:nth-child(5) { height: 100%; animation-duration: 1s; animation-delay: 0.3s; }
.voice i:nth-child(6) { height: 64%; animation-duration: 1.2s; animation-delay: 0.15s; }
.voice i:nth-child(7) { height: 88%; animation-duration: 0.8s; animation-delay: 0.4s; }
.voice i:nth-child(8) { height: 40%; animation-duration: 1.1s; animation-delay: 0.25s; }
.voice i:nth-child(9) { height: 78%; animation-duration: 1s; animation-delay: 0.1s; }
.voice i:nth-child(10) { height: 58%; animation-duration: 1.3s; animation-delay: 0.35s; }
.voice i:nth-child(11) { height: 94%; animation-duration: 0.9s; animation-delay: 0.2s; }
.voice i:nth-child(12) { height: 50%; animation-duration: 1.2s; animation-delay: 0.45s; }
.voice i:nth-child(13) { height: 68%; animation-duration: 1.1s; animation-delay: 0.3s; }
.voice i:nth-child(14) { height: 36%; animation-duration: 1s; animation-delay: 0.15s; }
.voice i:nth-child(15) { height: 24%; animation-duration: 1.2s; animation-delay: 0.5s; }

body.rec-open #timer { display: block; font: 800 2.7rem/1 var(--display); font-variant-numeric: tabular-nums; }
body.rec-open .progress { display: block; width: min(250px, 70%); height: 8px; border-radius: 4px; background: var(--night-soft); }
#progress { width: 0; height: 100%; border-radius: 4px; background: var(--lime); transition: width 0.25s linear; }

body.is-recording #record { position: relative; flex: none; width: 92px; height: 92px; min-height: 0; padding: 0; border-radius: 50%; }
body.is-recording #record::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--hot); animation: ring 1.6s ease-out infinite; }
body.rec-open .recorder { isolation: isolate; }
@keyframes ring { from { transform: scale(1); opacity: 0.5; } to { transform: scale(1.5); opacity: 0; } }
body.is-recording #record svg { width: 32px; height: 32px; }
body.is-recording #record-label, body.is-recording #record .icon-mic { display: none; }
body.is-recording #record .icon-stop { display: block; }
body.rec-open .rec-hint { display: block; margin: 0; color: #b9b2e6; font-size: 0.92rem; font-weight: 700; text-align: center; }

/* after the answer the same screen waits for its results: the wave breathes on its own, nothing to tap */
body.is-analysing .voice { display: flex; height: 96px; transform: scaleY(0.45); }
body.is-analysing #timer, body.is-analysing .progress, body.is-analysing #record { display: none; }
/* the transcript as it is recognised: the newest lines stay in view */
.live { display: none; }
body.is-analysing .live { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; max-height: 7.5em; overflow: hidden; color: #b9b2e6; font-size: 0.95rem; text-align: center; }
body.is-analysing .live:empty { display: none; }

/* the one minute of preparation before a Part 2 answer uses the same screen, without the wave */
#prep-cancel { display: none; }
/* the way forward is the big bright button with its words on it; Cancel is the quiet one underneath */
body.is-preparing #record { flex: none; max-width: 480px; background: var(--lime); box-shadow: 0 6px 0 #8fb022; color: var(--night); }
body.is-preparing #record:active:not(:disabled) { box-shadow: 0 2px 0 #8fb022; }
body.is-preparing #prep-cancel { display: block; color: #b9b2e6; }
body.is-preparing #record.time-up { animation: pop 0.9s ease infinite; }

/* ---------- results ---------- */

.score-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.score-tile { padding: 10px 0; border-radius: 18px; background: #fff; color: var(--ink); text-align: center; }
.score-tile .value { font: 800 1.9rem/1 var(--display); color: var(--muted); }
.score-tile.good .value { color: var(--good); }
.score-tile.weak .value { color: #8a5200; }
.score-tile.bad .value { color: var(--bad); }
.score-tile .name { font-size: 0.75rem; font-weight: 800; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 16px 20px 0; padding: 4px; border-radius: 16px; background: var(--brand-soft); }
.tabs button { position: relative; min-height: 44px; padding: 0 6px; border-radius: 12px; background: transparent; box-shadow: none; color: var(--brand-dark); font-size: 0.88rem; }
.tabs button:active:not(:disabled) { transform: scale(0.97); box-shadow: none; }
.tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
.tabs button.busy::after, .tabs button.ready::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); }
.tabs button.busy::after { background: #ffb547; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.h2-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 8px; }
.h2-row h2 { margin: 0; }
.h2-row span { color: var(--muted); font-size: 0.82rem; font-weight: 700; }

.sound-list, .practise, .tips, .pairs, .steps, .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sound-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px; border-radius: 22px; background: var(--weak-soft); color: var(--weak-ink); }
.sound-list li.bad { background: var(--bad-soft); color: var(--bad-ink); }
.sound-list .symbol { grid-row: span 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #c47a00; color: #fff; font: 800 1.5rem var(--display); }
.sound-list li.bad .symbol { background: var(--hot); }
.sound-list .name { color: var(--ink); font-weight: 800; }
.sound-list .name small { display: block; font-size: 0.8rem; font-weight: 700; opacity: 0.8; }
.sound-list p { grid-column: 2; margin: 0; font-size: 0.9rem; line-height: 1.45; }
.sound-list:empty::after, .practise:empty::after, .pairs:empty::after { content: "Nothing to flag here."; color: var(--muted); }
.sound-list:empty::after { content: "No sound was weak often enough to single out."; }

.practise details { border: 2px solid var(--line); border-radius: 18px; }
.practise summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; cursor: pointer; list-style: none; }
.practise summary::-webkit-details-marker { display: none; }
.practise summary::after { content: ""; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; }
.practise details[open] summary::after { transform: rotate(45deg); }
.practise .word { flex: 1; font-size: 1.05rem; font-weight: 800; }
.practise .detail { padding: 4px 10px; border-radius: 999px; background: var(--weak-soft); color: var(--weak); font-size: 0.8rem; font-weight: 800; }
.practise .detail.bad { background: var(--bad-soft); color: var(--bad); }
.practise .word-sounds { padding: 0 16px 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 8px; }
.stats > div { padding: 10px 14px; border-radius: 16px; background: var(--brand-soft); }
.stats dt { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.stats dd { margin: 0; font-weight: 800; }
.tips li { padding: 12px 16px; border-radius: 18px; background: var(--brand-soft); color: var(--brand-dark); font-size: 0.9rem; font-weight: 700; line-height: 1.45; }

/* ---------- transcript and the word sheet ---------- */

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 0.82rem; font-weight: 800; }
.transcript { margin: 12px 0 0; font-size: 1.1rem; line-height: 2.15; }
.w { padding: 4px 6px; border-radius: 9px; }
.w.weak { background: #ffe3a3; color: #5e3900; font-weight: 800; }
.w.bad { background: #ffd0c7; color: #7a1a0c; font-weight: 800; }
.transcript .w { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.transcript .w.selected { box-shadow: 0 0 0 3px var(--brand); }
/* while the recording plays the transcript follows it: words to come are faded, each lights up as it is said */
.transcript-wrap.playing .w { opacity: 0.35; transition: opacity 0.15s; }
.transcript-wrap.playing .w.said { opacity: 1; }
.transcript-wrap.playing .w.said:not(.weak, .bad) { background: var(--good-soft); color: var(--good); }
.transcript-wrap.playing .w.now { box-shadow: 0 0 0 3px var(--brand); }
.transcript .w:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.pause { display: inline-block; width: 22px; height: 4px; margin: 0 2px; border-radius: 2px; background: #9a93c4; vertical-align: middle; }
.transcript-wrap:has(.word-detail:not([hidden])) { padding-bottom: 250px; }

.word-detail {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 520px);
  transform: translateX(-50%);
  padding: 22px 20px 26px;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
  box-shadow: 0 -2px 0 var(--line), 0 -18px 40px rgb(28 20 64 / 18%);
  animation: sheet 0.25s ease;
  transition: transform 0.2s ease;
  touch-action: none; /* a downward drag moves the sheet, not the page */
  cursor: grab;
}
.word-detail.dragging { transition: none; cursor: grabbing; }
@keyframes sheet { from { transform: translate(-50%, 100%); } }
.word-detail::before { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #d9d3f5; }
.word-detail .head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; }
.word-detail .word { font: 800 1.7rem/1 var(--display); overflow-wrap: anywhere; }
.word-detail button { margin-left: auto; }
.pill-score { padding: 4px 10px; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.pill-score.good { background: var(--good-soft); color: var(--good); }
.pill-score.weak { background: var(--weak-soft); color: var(--weak); }
.pill-score.bad { background: var(--bad-soft); color: var(--bad); }

.sound-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sound { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 10px; border-radius: 16px; background: var(--brand-soft); font: 800 1.25rem/1.15 var(--display); }
.sound .value { font: 800 0.8rem var(--body); }
.sound.good { background: var(--good-soft); color: var(--good); }
.sound.weak { background: #ffe3a3; color: #5e3900; }
.sound.bad { background: var(--hot); color: #fff; }
.advice { margin: 10px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--brand-soft); font-size: 0.92rem; line-height: 1.5; }
.advice strong { font-weight: 800; }

/* ---------- AI feedback ---------- */

.ai-warning { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--weak-soft); color: var(--weak-ink); font-size: 0.85rem; font-weight: 700; line-height: 1.45; }
#feedback-status { margin: 14px 0 0; color: var(--muted); font-weight: 700; }
#feedback-status:empty { display: none; }
#feedback-status.error { color: var(--bad); }
#feedback { margin-top: 18px; }
.steps { counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--brand-soft); font-weight: 700; line-height: 1.45; }
.steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.95rem; font-weight: 800; }
.pairs li { padding: 12px 14px; border: 2px solid var(--line); border-radius: 18px; }
.pairs .arrow { display: none; }
.pairs .original { display: block; color: var(--muted); text-decoration: line-through; }
.pairs .improved { display: block; margin-top: 2px; font-size: 1.02rem; font-weight: 800; color: var(--good); }
.pairs .why { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.answers { display: grid; gap: 14px; }
.answer { display: grid; gap: 8px; padding: 14px; border: 2px solid var(--line); border-radius: 20px; }
.answer p { margin: 0; }
.answer .asked { font: 700 1.02rem/1.4 var(--display); }
.answer .asked .pill { margin-right: 8px; }
.answer .why { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.answer b { margin-top: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pairs .example { display: block; margin-top: 4px; font-style: italic; }
.sample { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--brand-soft); white-space: pre-line; line-height: 1.6; }
.sample.strong-sample { background: var(--good-soft); }
.notes { margin-top: 8px; }
.notes li { padding-left: 14px; border-left: 0; color: var(--muted); font-size: 0.88rem; position: relative; }
.notes li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* ---------- saved answers ---------- */

.history-list { display: grid; gap: 10px; }
.history-list h3 { margin: 8px 0 0; }
.history-list h3:first-child { margin-top: 0; }
.history-more { display: block; margin: 14px auto 0; }
.history-more[hidden] { display: none; }
.history-item { border: 2px solid var(--line); border-radius: 20px; }
.history-item[open] { border-color: var(--brand); }
.history-item .summary { display: grid; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none; }
.history-item .summary::-webkit-details-marker { display: none; }
button.history-item { display: block; width: 100%; min-height: 0; padding: 0; background: var(--bg); box-shadow: none; color: var(--ink); font: inherit; text-align: left; }
button.history-item:active:not(:disabled) { transform: scale(0.98); box-shadow: none; border-color: var(--brand); }
.history-item .top { display: flex; align-items: center; gap: 8px; }
.history-item .top::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; }
.history-item[open] .top::after { transform: rotate(45deg); }
.history-item .when { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.history-item .question { font-weight: 800; line-height: 1.3; }
.history-item .chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.history-body { padding: 0 16px 16px; }
.history-block { margin-top: 14px; }
#recording:not(:empty) { margin-bottom: 14px; }

/* ---------- recording player: a round play button, a bar to drag, the time ---------- */

.player { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px 10px; border-radius: 22px; background: var(--brand-soft); }
.player-button { flex: none; display: grid; place-items: center; width: 48px; padding: 0; border-radius: 50%; }
.player-button svg { width: 22px; height: 22px; }
.player-button .icon-pause, .player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }
.player-bar { --played: 0%; flex: 1; width: auto; min-width: 0; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.player-bar::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--brand) var(--played), #fff var(--played)); }
.player-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border: 3px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 2px 0 var(--brand-dark); }
.player-bar::-moz-range-track { height: 8px; border-radius: 4px; background: #fff; }
.player-bar::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--brand); }
.player-bar::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 2px 0 var(--brand-dark); }
.player-bar:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 10px; }
.player-bar:disabled { cursor: default; opacity: 0.5; }
.player-time { flex: none; color: var(--brand-dark); font: 800 0.95rem/1 var(--display); font-variant-numeric: tabular-nums; }
.history-block p, .history-block ul { margin: 0; }
.history-block ul:not(.pairs) { padding-left: 20px; list-style: disc; display: block; }
.facts { color: var(--muted); font-size: 0.9rem; }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.pill.part { background: var(--brand-soft); color: var(--brand-dark); }
.pill.weak { background: var(--weak-soft); color: var(--weak); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.off { background: var(--line); color: var(--muted); }

/* ---------- a mock test's estimated band ---------- */

.band-overall { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 18px; border-radius: 22px; background: var(--night); color: #fff; }
.band-number { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--lime); color: var(--night); font: 800 2.2rem/1 var(--display); }
.band-label b { display: block; font: 800 1.15rem/1.2 var(--display); }
.band-label small { display: block; margin-top: 4px; color: #b9b2e6; font-size: 0.85rem; font-weight: 700; line-height: 1.35; }
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.band-tile { padding: 12px 10px; border-radius: 18px; background: var(--brand-soft); text-align: center; }
.band-tile .value { font: 800 1.8rem/1 var(--display); color: var(--brand-dark); }
.band-tile.off { background: #f3f0ff; }
.band-tile.off .value { color: var(--muted); }
.band-tile .name { margin-top: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 800; line-height: 1.25; }
.band-summary { margin: 16px 0 0; font-weight: 700; }
.band-criterion { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line); }
.band-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.band-head h2 { margin: 0; }
.band-criterion h3 { margin: 10px 0 4px; }
.band-criterion p { margin: 0; }

/* ---------- admin ---------- */

.admin-page .hero h1 { font-size: 1.4rem; white-space: nowrap; }
.admin-page .hero-link, .admin-page .outline-light { font-size: 0.85rem; white-space: nowrap; }
.admin-page .outline-light { padding: 0 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; margin-top: 14px; }
.tile { display: block; padding: 10px 4px; border-radius: 16px; background: var(--night-soft); color: #fff; text-align: center; text-decoration: none; }
.tile .value { font: 800 1.5rem/1 var(--display); }
.tile .name { font-size: 0.66rem; font-weight: 800; line-height: 1.2; }
.tile.warn .value { color: #ffd45e; }
.tile.bad .value { color: #ff8a78; }
.admin-tabs { max-width: 560px; }
.hero-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.version-pill { padding: 3px 10px; border-radius: 999px; background: var(--night-soft); color: #b9b2e6; font-size: 0.75rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help; }
.admin-page main.wide { max-width: 1360px; }
.admin-page .alert, .notice { margin: 16px 20px 0; }
.notice { padding: 14px 16px; border-radius: 18px; background: var(--good-soft); color: var(--good); }
.notice p { margin: 0 0 6px; }
.notice code { display: inline-block; padding: 2px 8px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 1rem; user-select: all; }

/* the search, the filter, the order and the Add button above the list */
.student-tools { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
.student-tools select { min-height: 48px; padding: 0 10px; font-size: 0.92rem; cursor: pointer; }
.student-tools #add-open { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { min-height: 48px; padding-left: 42px; padding-right: 42px; }
.search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 1px 8px; border: 2px solid var(--line); border-radius: 8px; color: var(--muted); font: 800 0.8rem var(--body); pointer-events: none; }
.search input:focus + kbd, .search input:not(:placeholder-shown) + kbd { display: none; }
select:focus { outline: none; border-color: var(--brand); }
.list-top { position: sticky; top: 0; z-index: 5; margin: -18px -20px 0; padding: 14px 20px 8px; background: var(--bg); box-shadow: 0 2px 0 var(--line); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 0 2px 0 14px; color: var(--muted); font-size: 0.88rem; font-weight: 800; }
.list-head .text-button { min-height: 32px; }
.student-list { margin-top: 10px; }
/* the headings line up with the rows: the same columns, inside the same border and padding */
.student-row.list-columns { align-items: center; }
.list-columns .pick, .list-columns #select-all { margin-top: 0; }
.columns { display: grid; grid-template-columns: var(--student-columns); gap: 12px; align-items: center; padding: 0 16px; }
.columns > * { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; }
.columns .select-hint { visibility: hidden; }
.columns button { min-height: 32px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.columns button:hover { color: var(--brand-dark); }
.columns button:active:not(:disabled) { transform: none; box-shadow: none; }
.columns button.sorted { color: var(--brand-dark); }
.columns button.sorted::after { content: " ↓"; }
.columns button.reverse::after { content: " ↑"; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; }

/* one row per student: a tick box, and a card that opens */
.student-list { display: grid; gap: 6px; --student-columns: 40px minmax(150px, 1.3fr) minmax(0, 1.6fr) 72px 140px 96px 12px; }
.list-top { --student-columns: 40px minmax(150px, 1.3fr) minmax(0, 1.6fr) 72px 140px 96px 12px; }
.student-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding-left: 14px; }
.student-row .pick { margin-top: 24px; }
.student { border: 2px solid var(--line); border-radius: 18px; background: var(--bg); }
.student-row.picked .student { border-color: var(--brand); background: var(--brand-soft); }
.student[open] { border-color: var(--brand); background: var(--bg); }
.student summary { display: grid; grid-template-columns: var(--student-columns); align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; cursor: pointer; list-style: none; }
.student summary:hover { background: #f8f6ff; }
.student .answers { font-weight: 800; font-variant-numeric: tabular-nums; }
.student summary::-webkit-details-marker { display: none; }
.student summary::after { content: ""; width: 8px; height: 8px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.student[open] summary::after { transform: rotate(-135deg); }
.avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font: 800 1rem var(--display); text-transform: uppercase; }
.student .who { min-width: 0; }
.student .who b { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student .who small { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student.inactive .avatar, .student.inactive .who, .student.inactive .today { opacity: 0.55; }
.student .today { display: flex; flex-wrap: wrap; gap: 4px; }
.use-chip { display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 8px; border-radius: 999px; background: #f3f0ff; color: var(--muted); font-size: 0.78rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.use-chip i { font-style: normal; font-weight: 700; }
.use-chip.some { background: var(--brand-soft); color: var(--brand-dark); }
.use-chip.full { background: var(--bad-soft); color: var(--bad); }
.use-chip.off { opacity: 0.6; }
.student .seen { color: var(--muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.student summary .pill { justify-self: start; }
.student-body { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 12px 24px; align-items: start; padding: 4px 16px 16px 66px; }
.student-side { display: grid; gap: 12px; }
.show-more { width: 100%; margin-top: 10px; }
@media (min-width: 1200px) {
  .student-side .actions { display: flex; flex-wrap: wrap; }
  .student-side .actions button { padding: 0 16px; white-space: nowrap; }
}
.meter { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 800; }
.meter .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--brand-soft); overflow: hidden; }
.meter .bar span { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.student .facts { margin: 0; font-size: 0.82rem; font-weight: 700; line-height: 1.6; }
.limits { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px; gap: 8px 10px; align-items: center; font-size: 0.88rem; font-weight: 800; }
.limits .head { color: var(--muted); font-size: 0.78rem; text-align: right; }
.limits small { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.limits input { width: 100%; min-height: 44px; padding: 6px 8px; text-align: right; }
.card .limits { max-width: 460px; margin-bottom: 14px; }
.limits-buttons { display: flex; gap: 6px; margin: 10px 0 0; }
.limits-buttons button { min-width: 96px; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 50; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px; border-radius: 16px; background: var(--good-soft); color: var(--good); box-shadow: 0 6px 20px rgba(28, 20, 64, 0.25); font-size: 0.95rem; font-weight: 800; }
.toast.bad { background: var(--bad-soft); color: var(--bad-ink); }
.toast[hidden] { display: none; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.actions button { padding: 0 4px; }

#tab-students > .note { margin-top: 18px; }

/* the admin's list is grouped by who the students belong to: their own, then each teacher's */
.student-tools.with-groups { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 2px; padding: 0 2px 0 14px; color: var(--muted); font-size: 0.85rem; font-weight: 800; }
.group-head:first-child { margin-top: 0; }
.group-head b { color: var(--ink); font: 800 1.05rem var(--display); }
.group-head .text-button { min-height: 28px; }
.teachers-head { margin: 0 0 10px; }
.student.teacher .avatar { background: var(--night); color: #fff; }

/* a teacher's quota and how much of it is used */
.quota-table table, .student.teacher table { min-width: 0; max-width: 520px; }
.quota-table tr.full td, .student.teacher tr.full td { color: var(--bad); }
.quota-card h2 { margin-top: 0; }
#tab-students > .quota-card { margin: 0 0 34px; }
.bulk-bar select { min-height: 36px; padding: 0 8px; border-radius: 12px; font-size: 0.85rem; }

/* what is done to the ticked students: a bar that stays at the bottom of the screen */
.bulk-bar { position: fixed; left: 50%; bottom: 16px; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--night); color: #fff; box-shadow: 0 8px 28px rgba(28, 20, 64, 0.35); }
.bulk-bar b { white-space: nowrap; }
.bulk-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-bar button.ghost, .bulk-bar button.warn { border-color: var(--night-soft); background: var(--night-soft); color: #fff; }
.bulk-bar button.warn { color: #ffd45e; }
body.with-bulk-bar main { padding-bottom: 90px; }
body.with-bulk-bar .toast { bottom: 90px; }

/* pop-up sheets: adding a student, editing one, their history, limits for many */
.sheet { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 24px; background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(28, 20, 64, 0.35); }
.sheet.wide-sheet { width: min(760px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(28, 20, 64, 0.5); }
.sheet[open] { display: flex; flex-direction: column; animation: pop 0.2s ease; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 2px solid var(--line); }
.sheet-head h2 { margin: 0; overflow-wrap: anywhere; }
.sheet-head .close { flex: none; width: 44px; padding: 0; }
.sheet-body { padding: 20px; overflow-y: auto; }
.sheet-body .limits { margin-bottom: 4px; }
.sheet-body > .note:last-child { margin-bottom: 0; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.form-row button { min-height: 52px; }
.usage-line { margin: 0 0 14px; color: var(--muted); }
.usage-line strong { color: var(--ink); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th { text-align: left; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 10px 8px 0; }
td { padding: 10px 10px 10px 0; border-top: 2px solid var(--line); vertical-align: middle; font-size: 0.92rem; }
td, th { white-space: nowrap; }
td.strong { font-weight: 800; }
td .pill { margin-left: 4px; }
.card > .table-wrap + .note { margin-top: 12px; }

@media (max-width: 860px) {
  .student-tools { grid-template-columns: 1fr 1fr; }
  .student-tools.with-groups { grid-template-columns: 1fr 1fr; }
  .student-tools .search { grid-column: 1 / -1; }
  .list-top { position: static; box-shadow: none; }
  .columns > :not(.select-hint) { display: none; }
  .columns .select-hint { visibility: visible; text-transform: none; letter-spacing: 0; font-size: 0.88rem; }
  .student .answers { display: none; }
  .student-tools select { font-size: 0.88rem; }
  .student-tools #add-open { grid-column: 1 / -1; justify-content: center; }
  .student summary { grid-template-columns: 40px minmax(0, 1fr) auto 12px; row-gap: 6px; }
  .student summary .today { grid-column: 2 / -1; grid-row: 2; }
  .student summary .seen { grid-column: 2 / -1; grid-row: 3; }
  .student summary .pill { grid-column: 3; grid-row: 1; }
  .student summary::after { grid-column: 4; grid-row: 1; }
  .student-body { grid-template-columns: 1fr; padding-left: 16px; }
}

@media (max-width: 760px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row button { width: 100%; }

  /* tables turn into a list of cards: no sideways scrolling */
  .table-wrap { overflow-x: visible; }
  table { min-width: 0; }
  table, tbody, tr, td { display: block; }
  thead { display: none; }
  tbody tr { padding: 14px 0; border-top: 2px solid var(--line); }
  tbody tr:first-child { padding-top: 0; border-top: 0; }
  tbody tr:last-child { padding-bottom: 0; }
  td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 3px 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 0.82rem; font-weight: 700; text-align: left; }
  td:first-child { margin-bottom: 4px; font-size: 1.02rem; font-weight: 800; text-align: left; }
  td:first-child::before, td.actions-cell::before { display: none; }
  td.actions-cell { display: block; padding-top: 10px; }
  td.actions-cell > button { width: 100%; }
}

@media (max-width: 520px) {
  .student-row { gap: 8px; padding-left: 4px; }
  .student summary { column-gap: 10px; padding: 10px 12px; }
  .student summary .today { grid-column: 1 / -1; }
  .student summary .seen { grid-column: 1 / -1; }
  .use-chip { padding: 2px 7px; font-size: 0.75rem; }
  .student-body { padding: 4px 12px 14px; }
  .limits { grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 8px; }
  .list-head { padding-left: 4px; }
  .search kbd { display: none; }
  .bulk-bar { flex-direction: column; align-items: stretch; gap: 8px; width: calc(100vw - 32px); padding: 12px; }
  .bulk-buttons { display: grid; grid-template-columns: repeat(2, 1fr) 44px; }
  .bulk-buttons #bulk-limits { grid-column: 1 / -1; }
  body.with-bulk-bar main { padding-bottom: 170px; }
  body.with-bulk-bar .toast { bottom: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wave i { transform: scaleY(0.7); }
}

/* ---------- my progress, and what the feedback says about it ---------- */

.hero-links { display: flex; gap: 14px; }
.hero-links .hero-link { white-space: nowrap; }
.wins { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--good-soft); color: var(--good); }
.wins b { font: 800 1.05rem var(--display); }
.wins ul { margin: 4px 0 0; padding-left: 20px; font-weight: 700; line-height: 1.45; }
.strengths, .better, .habits, .facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.strengths li { padding: 12px 14px; border-radius: 18px; background: var(--good-soft); line-height: 1.45; }
.strengths li b, .better li b { display: block; color: var(--good); }
.strengths .quote, .habits .quote { display: block; margin-top: 2px; font-style: italic; color: var(--ink); }
.strengths small { display: block; margin-top: 4px; color: var(--muted); font-weight: 700; }
.better li { padding: 12px 14px; border-radius: 18px; background: var(--good-soft); font-weight: 700; }
.habits li { padding: 12px 14px; border: 2px solid var(--line); border-radius: 18px; }
.habits .note, .habits .quote { margin: 4px 0 0; }
.habit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.strengths li.empty, .better li.empty, .habits li.empty, .facts-list li.empty { border: 0; background: none; padding: 0; color: var(--muted); font-weight: 600; }
.band-trail { display: flex; flex-wrap: wrap; gap: 8px; }
.band-step { display: grid; justify-items: center; min-width: 64px; padding: 8px 10px; border-radius: 16px; background: var(--brand-soft); }
.band-step b { font: 800 1.4rem/1.1 var(--display); color: var(--brand-dark); }
.band-step small { color: var(--muted); font-weight: 700; }
.trend-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.trend-list li { padding: 12px 14px; border-radius: 16px; background: var(--brand-soft); }
.trend-list li.up { background: var(--good-soft); }
.trend-list li.down { background: var(--bad-soft); }
.trend-list li.empty { background: none; padding: 0; }
.trend-list b { display: block; }
.trend-list span { display: block; font-weight: 700; }
.trend-list li.up span { color: var(--good); }
.trend-list li.down span { color: var(--bad); }
.trend-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; }
.card.goal { margin: 0; }
.goal-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.goal button { width: 100%; }
.facts-list li { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 2px dashed var(--line); border-radius: 16px; font-weight: 700; }
.facts-list li.confirmed { border-style: solid; }
.facts-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.facts-list li.empty { display: block; }
.fact-form { display: flex; gap: 8px; margin-top: 10px; }
.fact-form input { flex: 1; min-width: 0; }
#progress-overused { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 430px) {
  .hero-bar .brand { font-size: 1.1rem; }
  .hero-links { gap: 12px; }
  .hero-links .hero-link { font-size: 0.88rem; }
  .hero-links .hero-link svg { display: none; }
}
@media (max-width: 360px) {
  .goal-row { grid-template-columns: 1fr; }
}
.teacher-note { margin-bottom: 4px; padding: 12px 14px; border-radius: 18px; background: var(--weak-soft); color: var(--weak-ink); }
.teacher-note b { font: 800 1.05rem var(--display); }
.teacher-note p { margin: 4px 0 0; font-weight: 700; white-space: pre-line; }
.teacher-form { display: grid; gap: 8px; margin: 12px 0 18px; padding: 14px; border-radius: 18px; background: var(--brand-soft); }
.teacher-form label { font-weight: 800; }
.teacher-form .note { margin: 0; }
.teacher-form button { justify-self: start; }
#profile-sheet h3 { margin: 18px 0 8px; }
#profile-sheet .habits .text-button { min-height: 36px; }
#profile-sheet .facts-list .text-button { flex: none; min-height: 36px; color: var(--bad); }
#profile-overused { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- desktop: the student app spreads out instead of staying a phone-sized column ---------- */

@media (min-width: 960px) {
  body:not(.admin-page) { padding: 0 24px; }
  main.phone { max-width: 1120px; box-shadow: 0 0 0 2px var(--line); }
  h1 { font-size: 2.4rem; }
  .hero { padding: 26px 40px 34px; border-radius: 0 0 40px 40px; }
  .hero:has(+ .card.lift) { padding-bottom: 72px; }
  .panel { padding: 24px 40px 40px; }
  .tabs { max-width: 680px; margin: 20px 40px 0; }

  /* sign in: the form stays a comfortable width in the middle */
  .hero-center { padding: 80px 40px 96px; }
  .signin .card, .signin .foot-note { max-width: 440px; margin-left: auto; margin-right: auto; }

  /* practise: the choices on the left, the question and the record button on the right */
  #view-practise:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "hero hero" "picker question" "picker recorder" "picker mock" "account account";
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 28px;
    padding-bottom: 12px;
  }
  #view-practise > .hero { grid-area: hero; }
  #view-practise > .picker { grid-area: picker; align-self: start; margin: -48px 0 24px 40px; }
  #view-practise > .question-card { grid-area: question; position: relative; margin: -48px 40px 0 0; box-shadow: var(--lift); }
  #view-practise > .recorder { grid-area: recorder; padding: 22px 40px 12px 0; }
  #view-practise > .mock-card { grid-area: mock; align-self: start; margin: 6px 40px 18px 0; }
  #view-practise > .account { grid-area: account; padding: 8px 40px 28px; }
  /* every topic in view at once: no sideways scrolling with a mouse */
  .chips, .chips.open { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); margin: 0; padding: 4px 0 6px; overflow: visible; }
  .chip { width: auto; }
  #more-topics { visibility: hidden; }

  /* results: the score tiles sit beside the title, and lists of cards fill the width in columns */
  #results .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: 32px; align-items: end; }
  #results .hero > * { grid-column: 1; }
  #results .hero > .score-tiles { grid-column: 2; grid-row: 1 / span 5; align-self: end; margin-top: 0; }
  .sound-list, .practise, .pairs, .tips, .steps,
  .strengths, .better, .habits, .trend-list, .history-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    align-items: start;
  }
  .history-list h3, .strengths li.empty, .better li.empty, .habits li.empty, .trend-list li.empty { grid-column: 1 / -1; }
  .sample, #feedback-summary, .ai-warning, .note { max-width: 860px; }
  .answers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); align-items: start; }

  /* progress: the goal and the facts side by side with the rest above */
  .card.goal { max-width: 720px; }
  .fact-form { max-width: 720px; }

  /* the dark screens of the recorder, the mock test and the coach use more of the screen */
  body.rec-open .rec-top, body.rec-open .rec-question, body.rec-open .rec-middle,
  .mock-top, .mock-middle, .mock-controls, .coach-question, .mock-hint, #mock-end, #coach-end { max-width: 640px; }
  body.rec-open .rec-question, .mock-line.examiner { font-size: 1.25rem; }
  .view.mock, body.rec-open .recorder { padding: 28px 40px 40px; }
}

@media (min-width: 960px) and (hover: hover) {
  .chip span:hover, .segmented span:hover { border-color: var(--brand); }
  .history-item:hover { border-color: var(--brand); }
}

/* on a phone the version goes on its own line under the title and the buttons */
@media (max-width: 759px) {
  .hero-title-row { display: contents; }
  .admin-page .hero-bar { flex-wrap: wrap; row-gap: 2px; }
  .admin-page .hero-bar::after { content: ""; order: 2; flex-basis: 100%; }
  .version-pill { order: 3; }
}

/* ---------- costs and prices (admin) ---------- */

.cost-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cost-list li { list-style: none; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--brand-soft); }
.cost-list li::marker { content: none; }
.cost-list li.estimated { background: var(--weak-soft); }
.cost-list li.failed { background: var(--bad-soft); }
.failed-note { display: block; color: var(--bad); font-size: 0.75rem; white-space: nowrap; }
.cost-list li.empty { background: none; padding: 0; color: var(--muted); }
.cost-head { display: flex; justify-content: space-between; gap: 10px; }
.cost-list small { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.prices-form { display: grid; gap: 12px; }
.prices-form fieldset { margin: 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.prices-form legend { padding: 0 6px; font-weight: 800; }
.prices-form legend small { color: var(--muted); font-weight: 700; }
.prices-form fieldset .note { flex-basis: 100%; margin: 0; }
.prices-form label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 800; }
.prices-form input { width: 130px; }
.prices-form button { justify-self: start; }