/* MindMettle — minimal, readable, phone-friendly */
:root {
  --bg: #07152B; --card: #0E203B; --text: #EAF2FF; --muted: #93A5C4;
  --accent: #3285FF; --good: #3ecf8e; --ok: #f5b942; --bad: #f26d6d;
  --border: #1E3A5F;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}
header {
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; position: sticky; top: 0; background: var(--bg); z-index: 10;
}
header h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.alpha { font-size: .65rem; font-weight: 700; background: var(--accent); color: #fff; border-radius: 6px; padding: 3px 8px; vertical-align: middle; }
nav button {
  background: transparent; border: none; color: var(--text);
  padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer; margin-left: .4rem;
  font-size: .95rem; font-weight: 600;
}
nav button.active { background: var(--accent); color: #fff; }
#nav-profile { padding: .3rem .6rem; display: inline-flex; align-items: center; gap: .3rem; }
#nav-profile::after { content: "▾"; color: var(--muted); font-size: .8rem; }
main { max-width: 720px; margin: 0 auto; padding: 1rem 1.25rem; }
.view { display: none; }
.view.active { display: block; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1rem 1.25rem; margin: 1rem 0;
}
.card.note { border-color: var(--accent); }
.muted { color: var(--muted); }
.warning { background: #3a2b12; border: 1px solid var(--ok); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
button {
  font-size: 1rem; padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: #16294B; color: var(--text);
}
button:disabled { opacity: .4; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.big { font-size: 1.15rem; padding: .8rem 1.6rem; }
button.danger { background: none; border-color: var(--bad); color: var(--bad); }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.pills { display: flex; gap: .6rem; flex-wrap: wrap; }
.pill.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.center { text-align: center; }
.pills-center { justify-content: center; }
.pill-round {
  border-radius: 50%; width: 128px; height: 128px; padding: 10px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  line-height: 1.3;
}
.pill-label { font-weight: 700; font-size: 1.05rem; }
.pill-sub { font-size: .72rem; color: var(--muted); }
.pill-round.selected .pill-sub { color: rgba(255,255,255,.85); }
.stats-centered { justify-content: center; }
.stats-centered .stat { align-items: center; text-align: center; }
.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .75rem 0; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-size: 1.8rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: .85rem; }
.steps li { margin-bottom: .5rem; }
.source, .transcript {
  background: #101625; border: 1px solid var(--border); border-radius: 8px;
  padding: .8rem 1rem; min-height: 3.5rem; white-space: pre-wrap;
}
.transcript.placeholder { color: var(--muted); font-style: italic; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #444; margin-left: .4rem; }
.dot.on { background: #ff4d4d; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.score-row { display: grid; grid-template-columns: 90px 1fr 45px; gap: .75rem; align-items: center; margin: .6rem 0; }
.bar { background: #101625; border-radius: 6px; height: 14px; overflow: hidden; }
.fill { height: 100%; border-radius: 6px; transition: width .6s ease; }
.fill.good { background: var(--good); } .fill.ok { background: var(--ok); } .fill.bad { background: var(--bad); }
.hist-row {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 0; border-bottom: 1px solid var(--border); font-size: .95rem;
}
.hist-detail {
  background: #101625; border: 1px solid var(--border); border-radius: 8px;
  padding: .25rem 1rem 1rem; margin: .25rem 0 .75rem;
}
.hist-detail h4 { margin: .75rem 0 .25rem; color: var(--accent); font-size: .9rem; }
.hist-detail p { margin: 0; white-space: pre-wrap; }
input[type="password"], input[type="text"] {
  flex: 1; min-width: 200px; padding: .6rem .8rem; border-radius: 8px;
  border: 1px solid var(--border); background: #101625; color: var(--text); font-size: 1rem;
}
input[type="range"] { width: 200px; }
.audio-bar { margin: .7rem 0 .2rem; }
.audio-bar .fill { background: var(--accent); transition: width .3s ease; }
/* --- timer strip (practice view) --- */
.timer-strip {
  border-bottom: 1px solid var(--border);
  padding-bottom: .8rem; margin-bottom: .9rem;
}
.timer-top { display: flex; justify-content: space-between; align-items: center; }
.timer-label { font-weight: 700; }
.timer-readout {
  font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.timer-readout.prep { color: var(--accent); }
.timer-readout.overtime { color: var(--ok); }
.timer-readout.grace { color: var(--bad); animation: timer-pulse 1s infinite; }
@keyframes timer-pulse { 50% { opacity: .5; } }
.timer-bar { margin: .5rem 0; }
.timer-bar .fill { background: var(--accent); transition: width .25s linear; }
/* .fill.ok / .fill.bad are the theme's yellow/red — reused for phases */
#timer-status { min-height: 1.3em; }
/* Deep Research: the research card reuses the timer strip's readout/bar
   classes above. The term gets a display treatment; the I'm Ready button
   gets breathing room. */
.research-term { font-size: 1.35rem; font-weight: 800; margin: .4rem 0 .6rem; }
#research-card .timer-top { margin-top: .8rem; }
#research-status { min-height: 1.3em; }
#btn-research-ready { margin-top: .9rem; }
.speed-row { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.speed-row label { color: var(--muted); font-size: .9rem; }
.speed-row input[type="range"] { width: 160px; }
.ok-text { color: var(--good); } .warn-text { color: var(--ok); }
ul { padding-left: 1.25rem; } li { margin-bottom: .35rem; }
code { background: #101625; padding: 1px 6px; border-radius: 4px; font-size: .9em; }
footer { text-align: center; padding: 2rem 1rem; }
/* --- auth + write mode (supabase build) --- */
.login-card { max-width: 480px; margin: 4rem auto; text-align: center; }
.login-card .btn-row { justify-content: center; }
/* #90: OTP code entry */
#login-code {
  font-size: 1.7rem; letter-spacing: .45rem; text-align: center; text-indent: .45rem;
  width: 13rem; max-width: 100%; padding: .55rem .5rem; margin: .6rem 0;
  background: #101625; border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
#login-code::placeholder { letter-spacing: .45rem; color: var(--muted); opacity: .5; }
#code-step .btn-row { margin-top: .4rem; }
.linklike {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}
input[type="email"] {
  flex: 1; min-width: 200px; padding: .6rem .8rem; border-radius: 8px;
  border: 1px solid var(--border); background: #101625; color: var(--text); font-size: 1rem;
}
.answer-box {
  width: 100%; box-sizing: border-box; padding: .8rem; border-radius: 8px;
  border: 1px solid var(--border); background: #101625; color: var(--text);
  font-size: 1rem; font-family: inherit; resize: vertical;
}
.stimulus-img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.btn-row-center { justify-content: center; }

/* ============================================================
   THEME v2 — dashboard (mockup) theme. Edit the :root values
   to retheme the whole app; components below consume them.
   ============================================================ */
:root {
  --bg: #07152B;
  --card: #0E203B;
  --card-2: #0A1B33;
  --text: #EAF2FF;
  --muted: #93A5C4;
  --accent: #3285FF;
  --accent-2: #8b5cf6;
  --gradient: linear-gradient(135deg, #3285FF, #1F6FEB);
  --border: #1E3A5F;
  --radius: 16px;
  --good: #3ecf8e; --ok: #f5b942; --bad: #f26d6d;
}

/* --- icon chips (see js/icons.js to swap packs / recolor) --- */
.icon-chip {
  --chip: #3285FF;
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--chip) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  font-size: 1.5rem; flex: none;
}
.icon-chip-sm { width: 30px; height: 30px; font-size: 1rem; }
.icon-chip-lg { width: 64px; height: 64px; font-size: 2rem; }
[data-chip-lg].icon-chip { width: 64px; height: 64px; font-size: 2rem; }
[data-chip-sm].icon-chip { width: 30px; height: 30px; font-size: 1rem; }

/* --- header nav pills --- */
header nav { display: flex; gap: .5rem; align-items: center; }
header nav button {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 999px; padding: .5rem 1.1rem; margin-left: 0;
  background: var(--card); font-weight: 600;
}
header nav button.active { background: var(--accent); border-color: var(--accent); }
header nav button .icon-chip { width: 22px; height: 22px; font-size: .85rem; border: none; background: transparent; }
header h1 .icon-chip { width: 30px; height: 30px; font-size: 1.1rem; vertical-align: -6px; margin-right: .35rem; }

/* --- dashboard layout --- */
main { max-width: 1280px; }
.dash { display: grid; grid-template-columns: 2.2fr 1fr; gap: 1.4rem; align-items: stretch; }
.dash-side { display: flex; flex-direction: column; gap: 1.25rem; }
.dash-side .card { margin: 0; padding: 1.25rem 1.4rem; }
.dash-main { display: flex; flex-direction: column; }
.dash-side .card:last-child { flex: 1 1 auto; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } }

.hero-card {
  position: relative; overflow: hidden;
  display: flex; gap: 1.1rem; align-items: center;
  background: linear-gradient(115deg, #0E2A52 0%, #0C2142 55%, #1550A8 130%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.75rem; margin-bottom: 1.25rem;
}
/* Soft diagonal sheen across the banner — a faint silhouette, not line art. */
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 50%, rgba(50,133,255,.10) 68%, rgba(255,255,255,.05) 76%, transparent 88%);
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card h2 { margin: 0; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; }
.hero-card p { margin: .3rem 0 0; font-size: 1rem; }
.hero-card .icon-chip { width: 76px; height: 76px; font-size: 2.1rem; }
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-go { margin-left: auto; flex: none; display: flex; align-items: center; gap: .7rem; }
.btn-go-circle {
  position: relative; flex: none;
  width: 104px; height: 104px; border-radius: 50%;
  background: #22C55E; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 12px 36px rgba(34,197,94,.55);
  animation: go-pulse 2s ease-out infinite;
}
.btn-go-circle .go-play { color: #fff; font-size: 47px; line-height: 1; padding-left: 4px; }
.btn-go-circle:hover { filter: brightness(1.06); }
.btn-go-circle:disabled { opacity: .55; cursor: not-allowed; animation: none; }
@keyframes go-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6), 0 12px 36px rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 32px rgba(34,197,94,0), 0 12px 36px rgba(34,197,94,.55); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 12px 36px rgba(34,197,94,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-go-circle { animation: none; }
  .drill-card.selected::after { animation: none; }
}
@media (max-width: 640px) {
  .hero-card { padding: 1rem 1.25rem; }
  .hero-card h2 { font-size: 1.5rem; }
  .hero-card .icon-chip { width: 56px; height: 56px; font-size: 1.6rem; }
  .btn-go-circle { width: 76px; height: 76px; }
  .btn-go-circle .go-play { font-size: 33px; }
}
.accent-text { color: var(--accent); }

.section-title, .card-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; margin: 1.5rem 0 .9rem;
}
.section-title { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .9rem; }

/* --- drill mode switch (dashboard) --- */
/* The switch sits on the section-title row under the hero banner. Same
   container pattern as the card level switches (.lvl-switch): the selected
   segment takes its own accent via --mode-accent, like L1/L2/L3. */
.section-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  margin: 1.5rem 0 .9rem;
}
.section-row .section-title { margin: 0; }
.mode-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px; background: #0A1930;
}
.mode-switch button {
  background: transparent; color: var(--muted); border: 0; border-radius: 999px;
  padding: 7px 18px; font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.mode-switch button:hover { color: var(--text); }
.mode-switch button.sel { background: var(--mode-accent, var(--accent)); color: #fff; }
.mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Set-drill count badge on the Go button (Build-a-set mode only). */
.hero-go { position: relative; }
.go-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: #0f766e; color: #fff; font-size: .8rem; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(15,118,110,.6);
  border: 2px solid var(--bg);
}
.section-title .icon-chip { width: 36px; height: 36px; font-size: 1.05rem; }
.card .card-title { margin-top: 0; font-size: 1.1rem; font-weight: 700; }
.card .card-title .icon-chip { width: 32px; height: 32px; font-size: 1rem; }

/* --- drill picker: rectangular card grid (redesign) ---
   3 columns on desktop, 2 on small tablets, 1 on phones. Content is
   left-aligned; the level switch and caption sit at the card bottom
   (margin-top: auto) so rows line up even when descriptions wrap. */
/* Flex, not grid, so a short bottom row stretches: with 5 cards, row 1
   holds 3 and row 2's 2 cards grow to fill the same width. */
.drill-grid { display: flex; flex-wrap: wrap; gap: .9rem; flex: 1 1 auto; }
.drill-grid .drill-card { flex: 1 1 calc(33.333% - 0.6rem); min-width: 0; }
@media (max-width: 600px) { .drill-grid .drill-card { flex-basis: calc(50% - 0.45rem); } }
@media (max-width: 400px) { .drill-grid .drill-card { flex-basis: 100%; } }
.drill-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.1rem 1.3rem; cursor: pointer; min-height: 210px;
  color: var(--text); text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden; /* clips the selection sheen to the rounded card */
}
/* Continuous glass sheen on the selected card: a diagonal light band that
   sweeps across on a loop — sweep ~1s, rest ~2s parked off-screen. A periodic
   glint, not a strobe. Transform-only, so it stays on the compositor. */
.drill-card.selected::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.20), transparent);
  transform: translateX(-180%) skewX(-14deg);
  pointer-events: none;
  animation: sheen-sweep 3.2s ease-in-out infinite;
}
@keyframes sheen-sweep {
  0% { transform: translateX(-180%) skewX(-14deg); }
  32% { transform: translateX(380%) skewX(-14deg); }
  100% { transform: translateX(380%) skewX(-14deg); }
}
/* Build-a-set queue: teal ring + run-order number badge (tap again to remove). */
.drill-card.in-set {
  border-color: #0f766e;
  box-shadow: 0 0 0 1px #0f766e, 0 10px 28px rgba(15,118,110,.22);
}
.order-badge {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: #0f766e; color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px rgba(15,118,110,.5);
}
.drill-card:hover { transform: translateY(-2px); border-color: rgba(50,133,255,.45); }
.drill-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 28px rgba(50,133,255,.22); background: linear-gradient(180deg, rgba(50,133,255,.12), rgba(50,133,255,.03)), var(--card); }
.drill-card.soon { cursor: default; }
.drill-card.soon:hover { transform: none; border-color: var(--border); }
.drill-card .icon-chip { width: 48px; height: 48px; font-size: 1.35rem; }
.drill-name { font-weight: 700; font-size: 1.02rem; }
.drill-desc { color: var(--muted); font-size: .9rem; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lvl-switch { margin-top: auto; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: #0A1930; }
.lvl-switch button { background: transparent; color: var(--muted); border: 0; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.lvl-switch button.sel { background: var(--type-accent, var(--accent)); color: #fff; }
.lvl-caption { display: inline-flex; align-items: center; gap: .4rem; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.lvl-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.lvl-caption.lvl-1 { color: var(--good); }
.lvl-caption.lvl-2 { color: var(--ok); }
.lvl-caption.lvl-3 { color: var(--bad); }
.check-badge { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px rgba(50,133,255,.5); }
.coming-soon { margin-top: auto; display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); background: rgba(255,255,255,.03); }

/* --- CTA buttons --- */

button.big { padding: 1rem 1.4rem; font-size: 1.1rem; border-radius: 14px; font-weight: 700; }
.btn-gradient {
  background: var(--gradient); border: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  box-shadow: 0 8px 28px rgba(50,133,255,.35);
}
.btn-gradient:hover:not(:disabled) { filter: brightness(1.08); }
.btn-outline {
  background: #16233f; border: 1px solid var(--border); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn-outline:hover:not(:disabled) { border-color: var(--accent); }

.modality-switch {
  display: block; width: 100%; padding: .7rem; margin-bottom: .2rem;
  border: 1px solid var(--border); border-radius: 10px; background: transparent;
  color: var(--muted); font-weight: 600; cursor: pointer;
}
.modality-switch:hover { color: var(--text); border-color: var(--accent); }

/* --- stats --- */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center; }
.stats-row .stat-new + .stat-new { border-left: 1px solid var(--border); }
.stat-new { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .6rem .25rem; }
.stat-new .stat-num { font-size: 1.7rem; font-weight: 800; }
.stat-new .stat-label { color: var(--muted); font-size: .82rem; }
.score-ring {
  --p: 0;
  width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(from -90deg, #3ecf8e, #22d3ee calc(var(--p) * 1%), rgba(62,207,142,.16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}

/* --- how-it-works steps --- */
.steps-new { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.steps-new li { display: flex; gap: .9rem; align-items: flex-start; position: relative; }
.steps-new li:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 38px; bottom: -18px;
  border-left: 2px dashed var(--border);
}
.step-num {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: var(--accent); color: #fff;
}
.steps-new li:nth-child(2) .step-num { background: #22c55e; }
.steps-new li:nth-child(3) .step-num { background: #a855f7; }
.steps-new .icon-chip { width: 44px; height: 44px; font-size: 1.3rem; }
.steps-new b { display: block; margin-bottom: .15rem; font-size: 1rem; }
.steps-new p { margin: 0; font-size: .9rem; line-height: 1.5; }

/* ============================================================
   THEME v2 — remaining views (practice / results / progress /
   settings / login). Same tokens as the dashboard section above.
   ============================================================ */

/* backdrop art (falls back to --bg when the file is missing) */
/* Backdrop waves kept, but veiled to ~22% so they sit behind the content. */
body {
  background: linear-gradient(rgba(7,21,43,.78), rgba(7,21,43,.78)), var(--bg) url("assets/relayai/background.svg") center top / cover fixed no-repeat;
}

/* inline SVGs inside icon chips */
.icon-chip svg { width: 55%; height: 55%; }
.icon-chip { color: var(--chip); }
/* plain inline icons (not in a chip) size to the surrounding text */
[data-icon] svg { width: 1.25em; height: 1.25em; vertical-align: -0.22em; }

/* icon chips + step numbers inside card headings */
.card h3 { display: flex; align-items: center; gap: .55rem; }
.card h3 .icon-chip { width: 28px; height: 28px; flex: none; }
.card h3 .icon-chip svg { width: 60%; height: 60%; }
.card h3 .step-num { width: 28px; height: 28px; font-size: .85rem; flex: none; }

/* page titles */
.page-head { display: flex; align-items: center; gap: .7rem; margin: 0 0 .4rem; }
.page-head .icon-chip { width: 40px; height: 40px; }
.page-head .icon-chip svg { width: 60%; height: 60%; }

/* score bars */
.score-row { grid-template-columns: minmax(120px, 150px) 1fr auto; }
.score-row > span:first-child { font-size: .92rem; }
.score-row > b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.score-row > b small { display: block; font-size: .68rem; font-weight: 400; color: var(--muted); }
.bar { background: #0b1428; border: 1px solid var(--border); border-radius: 999px; height: 12px; }
.fill.good { background: linear-gradient(90deg, #3ecf8e, #22c55e); }
.fill.ok { background: linear-gradient(90deg, #f5b942, #f59e0b); }
.fill.bad { background: linear-gradient(90deg, #f26d6d, #ef4444); }

/* delivery facts — measured, not judged: monospace numbers, no bars, no colors */
#delivery-facts { font-size: .92rem; }
.df-label { font-weight: 600; margin-right: .5rem; cursor: help; }
.df-nums { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.df-empty { color: var(--muted); font-style: italic; }
.df-caveat { margin-top: .5rem; font-size: .8rem; color: var(--muted); }

/* why-lines: subordinate evidence under each score bar, never the headline */
.score-why { font-size: .82rem; color: var(--muted); margin: -.15rem 0 .7rem; line-height: 1.45; }
.score-native { display: block; margin-top: .15rem; }

/* progress history rows */
.hist-row {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .8rem 1rem; margin-bottom: .6rem;
}
.hist-detail { background: var(--card-2); }

/* transcript / source boxes */
.source, .transcript { background: var(--card-2); }

/* inputs on the new palette */
input[type="password"], input[type="text"], input[type="email"], .answer-box {
  background: var(--card-2);
}
.answer-box:focus, input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* login */
.login-card { text-align: center; }
.login-card .icon-chip { width: 72px; height: 72px; margin-bottom: .4rem; }
.login-card .icon-chip svg { width: 55%; height: 55%; }
.login-card h2 { margin-top: .4rem; }

/* practice stimulus image */
.stimulus-img { display: block; margin: 0 auto; }

/* nav logout */
#btn-logout { opacity: .85; }

/* ============================================================
   Profile dashboard
   ============================================================ */
.profile-head { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.avatar-lg {
  width: 120px; height: 120px; border-radius: 50%; flex: none;
  border: 3px solid var(--accent);
  background: var(--gradient); color: #fff;
  font-size: 3rem; font-weight: 800;
  display: grid; place-items: center; overflow: hidden;
  cursor: pointer; padding: 0;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg:hover { filter: brightness(1.12); }
.avatar-lg:active { transform: scale(.97); }
.profile-id { flex: 1; min-width: 230px; }
.profile-id .btn-row { margin: 0 0 .35rem; }
.profile-id p { margin: .2rem 0; }
#display-name { max-width: 280px; }

/* circular avatar button in the nav */
#nav-profile { padding: .3rem; border-radius: 999px; line-height: 0; }
.nav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: inline-grid; place-items: center;
  font-weight: 800; font-size: 1rem; overflow: hidden; flex: none;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Profile drawer (pull-out, < half screen)
   ============================================================ */
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: min(400px, 92vw);
  background: var(--card); border-left: 1px solid var(--border);
  transform: translateX(105%); transition: transform .28s ease;
  z-index: 60; overflow-y: auto; padding: 1.25rem;
  box-shadow: -24px 0 60px rgba(0,0,0,.45);
}
.drawer.open { transform: none; }
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(2,6,18,.55);
  opacity: 0; pointer-events: none; transition: opacity .28s; z-index: 55;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem;
}
.icon-btn {
  background: var(--card-2); border: 1px solid var(--border); color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; padding: 0;
  display: grid; place-items: center; flex: none;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }

/* ============================================================
   Guest mode
   ============================================================ */
.guest-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0 .9rem; color: var(--muted); font-size: .85rem;
}
.guest-divider::before, .guest-divider::after {
  content: ""; flex: 1; border-top: 1px solid var(--border);
}
#btn-guest { width: 100%; }
.muted.small { font-size: .85rem; margin-top: .6rem; }

.guest-cta {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.2rem 1rem; text-align: center;
  grid-column: 1 / -1; /* span all columns of the home stats grid */
  width: 100%;         /* fill the progress stats row */
  margin: 0 auto;
}
.guest-cta p { margin: 0; }

/* ============================================================
   Practice page — 3-step layout
   ============================================================ */
.practice-head {
  display: flex; align-items: center; gap: .9rem; margin-top: 1rem;
}
.practice-titles { flex: 1; min-width: 0; }
.practice-titles h2 { margin: 0; font-size: 1.6rem; }
.practice-titles p { margin: .15rem 0 0; }
.pill-blue {
  background: rgba(59,130,246,.16); border: 1px solid var(--accent);
  color: #7db4ff; border-radius: 999px; padding: .3rem .8rem;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}
/* question pill as an eyebrow above the lesson title — never squeezes it */
.qpill-eyebrow { display: inline-block; margin: 0 0 .35rem; font-size: .78rem; padding: .22rem .7rem; }
.practice-nav-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: .6rem 0 .2rem;
}
button.ghost {
  background: none; border: none; color: var(--text);
  padding: .4rem .3rem; font-weight: 600;
}
button.ghost:hover:not(:disabled) { color: var(--accent); }
button.ghost.sm { font-size: .88rem; font-weight: 500; color: var(--muted); }

.step-card { padding: 1.4rem; }
.step-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .8rem; }
.step-badge {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.step-titles h3 { margin: 0; font-size: 1.15rem; }
.step-sub { margin: .15rem 0 0; font-size: .92rem; }
.step-side { margin-left: auto; font-size: 1.3rem; opacity: .85; }
.step-dim { opacity: .55; }

/* step 1 — opinion: the two sides as separate panels */
.facts-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 620px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
.fact-panel {
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border);
  border-top: 3px solid var(--accent); border-radius: 10px; padding: .8rem .95rem;
}
.fact-panel.side-b { border-top-color: var(--ok); }
.fact-panel h4 {
  margin: 0 0 .45rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.fact-panel.side-b h4 { color: var(--ok); }
.fact-list { margin: 0; padding-left: 1.05rem; }
.fact-list li { margin: .35rem 0; }
.fact-list li:first-child { margin-top: 0; }
.fact-list li:last-child { margin-bottom: 0; }
.q-block {
  margin-top: .9rem; padding: .75rem .95rem; border-left: 3px solid var(--accent);
  background: rgba(91, 140, 255, .07); border-radius: 0 8px 8px 0;
}
.q-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .2rem;
}
.q-block p { margin: 0; }

/* retake: the one fix, pinned at the top of the answer card */
.retake-banner {
  display: flex; gap: .6rem; align-items: baseline;
  border: 1px solid var(--accent); border-radius: 8px;
  background: rgba(91, 140, 255, .08);
  padding: .6rem .8rem; margin-bottom: .9rem;
}
.retake-label { font-weight: 700; white-space: nowrap; color: var(--accent); }
#onefix-block .primary { display: block; margin: .6rem auto 0; }
.verdict-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
/* center only the verdict buttons (heading + text stay left-aligned) */
#verdict-buttons { justify-content: center; }
/* unchosen options recede once one is picked; still tappable to change your mind */
.verdict-btn.dimmed { opacity: .45; }

/* step 1 — audio player */
.audio-row { display: flex; gap: 1rem; align-items: center; }
.play-btn {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--accent); border: none; color: #fff;
  font-size: 1.25rem; display: grid; place-items: center; padding: 0;
}
.play-btn:hover { filter: brightness(1.12); }
.audio-main { flex: 1; min-width: 0; }
.audio-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 600; margin-bottom: .45rem;
}
/* tappable speed indicator — cycles 0.8× → 1.0× → 1.2× → 1.4× */
.rate-cycle {
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); font: inherit; font-weight: 600;
  padding: .15rem .5rem; margin-right: -.5rem; cursor: pointer;
}
.rate-cycle:hover { color: var(--text); border-color: var(--border); background: rgba(255,255,255,.05); }
.rate-cycle:active { transform: scale(.96); }
.audio-bar { height: 8px; }
.audio-time { font-size: .83rem; margin-top: .35rem; }
.audio-subrow { margin-top: .9rem; }
/* (speed-label removed 2026-10-30 — slider replaced by tappable rate indicator) */
.hint-ok { color: var(--good); font-size: .9rem; margin: .8rem 0 0; }

/* step 2 — answer */
.mic-big {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); border: none; color: #fff; padding: 0;
  margin: .6rem auto .4rem;
}
.mic-big [data-icon] svg { width: 34px; height: 34px; }
.mic-big.live { background: #dc2626; animation: pulse 1.2s infinite; }
.mic-big:disabled { opacity: .4; cursor: not-allowed; }
.rec-status { text-align: center; font-weight: 700; font-size: 1.15rem; margin: .4rem 0 .2rem; }
button.full { width: 100%; }
button.danger-outline {
  background: none; border: 1px solid var(--bad); color: var(--bad); font-weight: 700;
}
#speak-box .transcript { margin-top: 1rem; }

/* ============================================================
   Dashboard
   Graphics are driven by CSS variables (--chart-line, --chart-area,
   --heat-*) so the look can be restyled without touching code.
   ============================================================ */
:root {
  --chart-line: #3285FF;
  --chart-area: rgba(50, 133, 255, 0.18);
  --chart-dot: #3285FF;
  --heat-0: #16233f;
  --heat-1: #1d4ed8;
  --heat-2: #3b82f6;
  --heat-3: #93c5fd;
}
.dash-overview {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem; text-align: center;
}
.dash-overview .stat-new { padding: .4rem 0; }
.dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }
.chart { width: 100%; height: auto; display: block; margin-top: .4rem; }
.chart-line {
  fill: none; stroke: var(--chart-line); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart-area { fill: var(--chart-area); stroke: none; }
.chart-dot { fill: var(--chart-dot); }
.rec-list { display: flex; flex-direction: column; gap: .7rem; }
.rec { display: flex; gap: .8rem; align-items: flex-start; }
.rec p { margin: .15rem 0 0; font-size: .92rem; }
.type-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.type-stat:last-child { border-bottom: none; }
.heat-grid {
  display: grid; grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column; gap: 3px; justify-content: start;
  margin-top: .4rem; overflow-x: auto; padding-bottom: .2rem;
}
.heat-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--heat-0); }
.heat-cell.l1 { background: var(--heat-1); }
.heat-cell.l2 { background: var(--heat-2); }
.heat-cell.l3 { background: var(--heat-3); }


/* Prep modal — full-screen during the prep countdown. */
.prep-modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4, 10, 24, 0.82);
  display: grid; place-items: center; padding: 1rem;
}
.prep-modal-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.75rem 1.5rem;
  width: min(430px, 94vw); text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.prep-modal-card #btn-prep-skip { margin-top: .6rem; }
.prep-eyebrow { margin: 0; font-weight: 700; letter-spacing: .04em; }
.prep-count {
  font-size: 5.2rem; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--accent);
  margin: .35rem 0 .15rem;
}
.prep-notes {
  text-align: left; border-top: 1px solid var(--border);
  margin: 1rem 0 1.1rem; padding-top: .85rem;
}
.prep-notes h4 { margin: 0 0 .45rem; font-size: .95rem; }
.prep-notes ul { margin: 0; padding-left: 1.15rem; }
.prep-notes li { margin-bottom: .35rem; font-size: .93rem; color: var(--muted); }

/* Floating timer bar — answer-phase companion to the in-card strip. */
.timer-float {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 14px; z-index: 50;
  display: flex; align-items: center; gap: .7rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: .45rem .5rem .45rem .9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  width: max-content; max-width: 94vw;
}
.timer-float-readout {
  font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.timer-float-readout.overtime { color: var(--ok); }
.timer-float-readout.grace { color: var(--bad); animation: timer-pulse 1s infinite; }
.timer-float-bar { width: 110px; flex-shrink: 1; }
.timer-float-bar .fill { background: var(--accent); transition: width .25s linear; }
.timer-float.paused { border-color: var(--ok); }
.timer-float.paused .timer-float-readout { color: var(--ok); }
body.float-on { padding-bottom: 84px; }

/* ============================================================
   Mobile layout pass (phone screens) — 2026-10-29
   The v8 desktop design is approved and stays pixel-identical:
   every rule below lives inside a max-width media query, except
   the single GLOBAL overflow guard at the top of this section.
   ============================================================ */

/* GLOBAL: no element may ever push the page sideways again.
   `clip` (not `hidden`) does not create a scroll container, so
   the sticky header keeps working. */
html, body { overflow-x: clip; }

@media (max-width: 640px) {
  /* --- header: compact, wrappable nav (was clipping the profile) --- */
  header {
    padding: max(.7rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .7rem max(1rem, env(safe-area-inset-left));
    gap: .6rem;
  }
  header h1 { font-size: 1.15rem; }
  header nav { flex-wrap: wrap; gap: .35rem; }
  header nav button { padding: .45rem .8rem; font-size: .85rem; gap: .35rem; }
  header nav button .icon-chip { width: 18px; height: 18px; font-size: .75rem; }
  #nav-profile { padding: .25rem .5rem; }

  /* --- hero: compact single row; the heading gets a guaranteed
     minimum width so it always wraps cleanly and stays visible --- */
  .hero-card { flex-wrap: wrap; gap: .75rem; padding: 1rem 1.1rem; }
  .hero-card .icon-chip { width: 48px; height: 48px; font-size: 1.4rem; }
  .hero-text { flex: 1 1 180px; }
  .hero-card h2 { font-size: 1.3rem; }
  .hero-card p { font-size: .9rem; }
  .btn-go-circle { width: 64px; height: 64px; }
  .btn-go-circle .go-play { font-size: 28px; }

  /* --- mode switch: slimmer so it fits beside the section title --- */
  .mode-switch button { padding: 6px 12px; font-size: .8rem; }

  /* --- drill cards: phone-sized, single column --- */
  .drill-grid { gap: .75rem; }
  .drill-grid .drill-card {
    flex: 1 1 100%;
    min-height: 154px;
    padding: 1rem 1.1rem;
    gap: .45rem;
  }
  .drill-card .icon-chip { width: 44px; height: 44px; font-size: 1.25rem; }
  .drill-name { font-size: 1rem; }
  .drill-desc { font-size: .85rem; }
  .lvl-switch button { padding: 6px 14px; font-size: 13px; }
}

@media (max-width: 400px) {
  /* --- mode switch: full width, three equal segments --- */
  .mode-switch { display: flex; width: 100%; }
  .mode-switch button { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: .78rem; }
}

/* ============================================================
   Competitor UI v1 — results headline, timer signals, rec ring
   ============================================================ */

/* results: big number + headline verdict (Vervo-style) */
.headline-card { display: flex; align-items: center; gap: 1.1rem; }
.headline-num {
  font-size: 3.2rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; flex: none;
}
.headline-verdict { font-size: 1.12rem; font-weight: 700; }

/* timer: contest timing signals, inline in the strip's top row (mock v5) */
.timer-signal-inline {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: .98rem;
}
.timer-signal-inline[hidden] { display: none; }
.timer-signal-inline .sig-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.timer-signal-inline[data-state="on-target"] .sig-dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
.timer-signal-inline[data-state="wrap-up"] .sig-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.timer-signal-inline[data-state="overtime"] .sig-dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.timer-signal-inline[data-state="on-target"] { color: var(--good); }
.timer-signal-inline[data-state="wrap-up"] { color: var(--ok); }
.timer-signal-inline[data-state="overtime"] { color: var(--bad); }
.timer-signal-inline[data-state="wrap-up"],
.timer-signal-inline[data-state="overtime"] { animation: sig-pulse 1.2s ease-in-out infinite; }
@keyframes sig-pulse { 50% { opacity: .5; } }
.timer-readout-wrap { display: flex; align-items: center; gap: .55rem; }
.timer-play {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: none; border: 1px solid var(--border); color: var(--text);
  font-size: .85rem; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.timer-play:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.timer-play:disabled { opacity: .35; cursor: not-allowed; }
.timer-top { align-items: center; }

/* practice: voice-reactive recording ring (Blune-inspired) */
.mic-ring { position: relative; display: grid; place-items: center; width: max-content; margin: .6rem auto .4rem; --ring-color: #dc2626; }
.mic-ring .mic-big { margin: 0; }
.mic-halo {
  position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid var(--ring-color); opacity: 0; pointer-events: none;
}
.mic-ring.rec .mic-halo { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  .mic-halo { display: none; }
}

/* ============================================================
   Practice redesign (2026-10-29) — two-column layout, dynamic
   answer states, inline timer signals. Approved mock v5.
   ============================================================ */
.practice-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem; align-items: start; margin-top: .6rem;
}
.practice-side {
  position: sticky; top: 1rem; display: grid; gap: 1rem;
}
.practice-side h4 { margin: 0 0 .6rem; font-size: 1rem; }
.side-rows { display: grid; gap: .35rem; }
.side-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .95rem; color: var(--muted);
}
.side-row b { color: var(--text); font-size: 1.05rem; }
.tips-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--muted); font-size: .93rem; }
.progress-strip {
  display: none; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .6rem .9rem; margin: .6rem 0;
  font-size: .9rem; color: var(--muted);
}

/* step 2 header row: title left, write-instead top-right */
.s2-top { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .4rem; }
.s2-top .step-head { flex: 1; margin-bottom: 0; }
.s2-top .modality-switch { margin-left: auto; flex: none; width: auto; }

/* mic controls: re-record | mic | grade */
.mic-controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: .6rem 0 .2rem;
}
.side-cell { display: flex; }
.side-left { justify-content: flex-end; padding-right: 1rem; }
.side-right { justify-content: flex-start; padding-left: 1rem; }
.ghost-circle {
  width: 76px; height: 76px; border-radius: 50%; flex: none;
  background: none; border: 1px solid var(--border); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.ghost-circle:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ghost-circle[hidden] { display: none; }
/* NOTE: id+class selector — must beat the `button` element's border-radius. */
#btn-grade.round-btn {
  width: 76px; height: 76px; border-radius: 50%; padding: 0; flex: none;
  display: grid; place-items: center; font-size: .95rem;
  background: #16a34a; border: none; color: #fff; font-weight: 800;
}
#btn-grade.round-btn:hover:not(:disabled) { background: #15803d; }
#btn-grade.round-btn:disabled { opacity: .45; cursor: not-allowed; }
#btn-grade.round-btn[hidden] { display: none; }

/* recording indicator + done line */
.rec-ind {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .95rem; margin: .2rem 0 .4rem;
}
.rec-ind[hidden] { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: sig-pulse 1.2s infinite; }
.done-line {
  text-align: center; font-weight: 700; color: var(--good); margin: .6rem 0 .2rem;
}
.done-line[hidden] { display: none; }
#grade-status:empty { display: none; }
#grade-status { margin: .6rem 0 0; }

/* write mode foot: word count + grade */
.write-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; }
.write-foot p { margin: 0; }
#btn-grade-write { min-width: 130px; }

/* phone: no sidebar — one-line progress strip instead */
@media (max-width: 900px) {
  .practice-cols { grid-template-columns: 1fr; }
  .practice-side { display: none; }
  .progress-strip { display: block; }
  .s2-top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .timer-signal-inline[data-state="wrap-up"],
  .timer-signal-inline[data-state="overtime"],
  .rec-dot { animation: none; }
}

/* ============================================================
   Web grading redesign (2026-10-30) — single column, headline +
   measured side by side, paired takeaways, compact fairness.
   ============================================================ */
.top-row {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem;
  margin-bottom: 1rem;
}
.top-row .card { margin: 0; }
.measured-card h3 { margin-bottom: .8rem; }
.facts-col { display: grid; gap: .65rem; }
.fact-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .95rem; color: var(--muted);
}
.fact-row b { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.df-empty { color: var(--muted); font-size: .9rem; }

.pair-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1rem;
}
.pair-row .card { margin: 0; }

/* bottom row: fairness + coverage side by side, action stack beside them.
   Flex so conditional cards (display:none) reflow automatically; the stack
   is fixed-width and stretches to the row height. */
.bottom-row {
  display: flex; gap: 1rem; align-items: stretch;
}
.bottom-row .card { flex: 1 1 0; margin: 0; min-width: 0; }
.fair-card { padding: 1rem 1.1rem; }
.fair-card h3 { font-size: .95rem; }
.action-stack {
  flex: 0 0 210px; display: flex; flex-direction: column; gap: .65rem;
}
.action-stack button { width: 100%; flex: 1; }

/* theme-consistency: the headline number and per-dimension band words
   wear their band color (green/yellow/red signal language) */
.headline-num.band-good { color: var(--good); }
.headline-num.band-ok { color: var(--ok); }
.headline-num.band-bad { color: var(--bad); }
.score-row > b small.band-good { color: var(--good); }
.score-row > b small.band-ok { color: var(--ok); }
.score-row > b small.band-bad { color: var(--bad); }

@media (max-width: 900px) {
  .top-row, .pair-row { grid-template-columns: 1fr; }
  .bottom-row { flex-direction: column; }
  .action-stack { flex: none; }
}

/* ============================================================
   Phone shell (2026-10-30) — bottom-tab app shell at ≤640px.
   view-home becomes the phone landing; practice/results adapt
   per the approved phone mocks. New PWA-direction surface.
   ============================================================ */
#phone-apphead, #phone-tabbar, #phone-fab-dock { display: none; }

@media (max-width: 640px) {
  /* phone type scale: 14px root shrinks all rem-based type to fit small screens */
  html { font-size: 14px; }
  /* --- shell: desktop header off, apphead + tabbar on (logged in only) --- */
  body.logged-in header { display: none; }
  body.logged-in #phone-apphead {
    display: flex; align-items: center; gap: 8px;
    padding: max(.7rem, env(safe-area-inset-top)) 1rem .7rem;
  }
  .ph-logo {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: rgba(50,133,255,.18); display: grid; place-items: center; font-size: 17px;
  }
  .ph-brand { font-weight: 800; font-size: 17px; }
  .ph-right { margin-left: auto; display: flex; }
  #phone-avatar { cursor: pointer; }
  body.logged-in #phone-tabbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #0a1428; border-top: 1px solid var(--border);
    padding: 10px 0 max(14px, env(safe-area-inset-bottom));
  }
  #phone-tabbar button {
    background: none; border: none; color: var(--faint); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11.5px; font-weight: 600; font-family: inherit; padding: 2px 0;
  }
  #phone-tabbar button.active { color: var(--accent); }
  #phone-tabbar .tic { font-size: 20px; }
  body.logged-in main { padding-bottom: 88px; } /* clear the fixed tabbar */
  /* floating timer bar floats above the tabbar, not behind it */
  body.logged-in .timer-float { bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* --- FAB dock: landing only, right edge, 60% depth --- */
  body.logged-in.phone-on-home #phone-fab-dock {
    display: block; position: fixed; right: 0; top: 60%; z-index: 41;
    background: #0E203B; border: 1px solid var(--border); border-right: none;
    border-radius: 20px 0 0 20px; padding: 12px 18px 12px 14px;
    box-shadow: -6px 8px 24px rgba(0,0,0,.45);
  }
  #phone-fab-dock .fab {
    width: 52px; height: 52px; border-radius: 50%; background: #22c55e; border: none;
    color: #fff; font-size: 22px; display: grid; place-items: center; padding: 0 0 0 4px;
    box-shadow: 0 6px 20px rgba(34,197,94,.5); cursor: pointer;
  }
  #phone-fab-dock .fab:active { transform: scale(.93); }
  #phone-fab-dock .fab:disabled { opacity: .45; box-shadow: none; }
  @media (prefers-reduced-motion: no-preference) {
    #phone-fab-dock .fab { animation: fab-glow 2.4s ease-in-out infinite; }
  }
  @keyframes fab-glow {
    0%, 100% { box-shadow: 0 6px 20px rgba(34,197,94,.5); }
    50% { box-shadow: 0 6px 32px rgba(34,197,94,.85); }
  }

  /* --- landing: view-home restyled (hero, stats, drills, how-it-works) --- */
  #view-home .hero-go { display: none; }   /* the FAB is the start action */
  /* phone: mode switch visible, compact — full-width equal segments */
  #view-home #mode-switch { display: flex; flex: 1 1 100%; }
  #view-home #mode-switch button { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: .78rem; }
  #view-home .dash { display: flex; flex-direction: column; gap: 1rem; }
  #view-home .dash-main, #view-home .dash-side { display: contents; }
  #view-home .hero-card { order: 1; margin: 0; }
  #home-stats-card { order: 2; }
  #view-home .section-row { order: 3; }
  #view-home #type-pills { order: 4; margin: 0; }
  #home-how-card { order: 5; }
  #view-home .drill-grid .drill-card { flex: 1 1 calc(50% - .375rem); min-height: 0; }
  #view-home .drill-grid .drill-card.selected { flex-basis: 100%; }

  /* --- practice: speaking only on phone --- */
  #btn-write-instead { display: none; }
  /* phone practice order (per mock): steps → answer → tips → Today, as
     stacked cards. Overrides the ≤900px "strip instead of sidebar" rule. */
  #view-practice .practice-cols { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
  #view-practice .practice-main,
  #view-practice .practice-side,
  #view-practice #p-stimulus { display: contents; }
  #view-practice #p-stimulus > .card { order: 2; margin: 0; }
  #view-practice #answer-card { order: 3; margin: 0; }
  #view-practice #side-tips { order: 4; margin: 0; }
  #view-practice #side-progress { order: 5; margin: 0; }
  #view-practice .progress-strip { display: none; }
  #view-practice .practice-head {
    background: linear-gradient(135deg,#123362,#0b2145);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 18px 18px 0 0; padding: 1rem 1rem .4rem; margin: 0;
  }
  #view-practice .practice-nav-row {
    background: #0b2145; border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 18px 18px; padding: .4rem 1rem 1rem; margin: 0 0 1rem;
  }
  #view-practice .practice-nav-row .btn-row { flex-wrap: wrap; }
  /* question position ("1 of 27") hidden on phone — numbering was removed from the card */
  #view-practice #p-count { display: none; }
  .mic-blocked {
    border: 1px solid var(--bad); background: rgba(242,109,109,.08);
    border-radius: 12px; padding: .8rem 1rem; margin: .8rem 0 0;
  }
  .mic-blocked[hidden] { display: none; }
  .mic-blocked b { display: block; margin-bottom: .25rem; }
  .mic-blocked p { margin: 0; color: var(--muted); font-size: .9rem; }

  /* --- results: score-hero treatment, single column --- */
  #view-results .page-head { display: none; } /* the score hero is the header */
  #view-results #result-headline {
    flex-direction: column; text-align: center; gap: .35rem;
    background: linear-gradient(135deg,#123362,#0b2145);
    padding: 1.4rem 1rem;
  }
  #view-results #result-headline .headline-num { font-size: 3.5rem; }
  #view-results .facts-col {
    grid-template-columns: repeat(3, 1fr); text-align: center; gap: .5rem;
  }
  #view-results .fact-row { flex-direction: column-reverse; align-items: center; gap: 2px; }
}