/* ---------- design tokens ---------- */
:root {
  --bg: #f4f6ff;
  --bg-grad-1: #eef1ff;
  --bg-grad-2: #fdf0ff;
  --surface: #ffffff;
  --surface-2: #f7f8ff;
  --ink: #1f2340;
  --ink-2: #5a5f80;
  --muted: #9aa0c0;
  --line: #e6e8f5;

  --brand: #5b5bef;      /* indigo — primary */
  --brand-dark: #3f3fd0;
  --accent: #12b3a6;     /* teal — secondary */
  --accent-warm: #ff8c42;/* orange — energy */
  --gold: #f5b400;

  --good: #17a673;       /* status: correct */
  --good-bg: #e5f8f0;
  --bad: #e5484d;        /* status: incorrect */
  --bad-bg: #fdeaea;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(46, 50, 120, 0.10);
  --shadow-lg: 0 20px 50px rgba(46, 50, 120, 0.18);
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--bg-grad-2), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, var(--bg-grad-1), transparent 55%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
b { font-weight: 800; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 22px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand-logo { font-size: 28px; }
.brand-name { font-weight: 900; font-size: 22px; letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar-stats { display: flex; align-items: center; gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 6px rgba(46,50,120,0.05);
}
.chip-emoji { font-size: 16px; }
.chip-streak b { color: var(--accent-warm); }
.xp-meter { width: 90px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.xp-meter-fill { height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- layout ---------- */
main { max-width: 860px; margin: 0 auto; padding: 26px 20px 80px; }
.view { animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card + .card { margin-top: 18px; }

h1 { font-size: 30px; font-weight: 900; letter-spacing: -0.6px; margin: 0 0 6px; }
h2 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.subtle { color: var(--ink-2); }
.tiny { font-size: 13px; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer;
  border: none; border-radius: 14px; padding: 13px 22px; color: #fff;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  box-shadow: 0 8px 20px rgba(91,91,239,0.35); transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}
/* Links styled as buttons need these; <button> gets them for free. */
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(91,91,239,0.42); }
.btn:active { transform: translateY(0); filter: brightness(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-lg { font-size: 19px; padding: 17px 30px; border-radius: 16px; }
.btn-ghost { background: var(--surface-2); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btn-ghost:hover { box-shadow: 0 6px 16px rgba(46,50,120,0.08); }
.btn-accent { background: linear-gradient(180deg, var(--accent), #0e9488); box-shadow: 0 8px 20px rgba(18,179,166,.32); }
.btn-warm { background: linear-gradient(180deg, var(--accent-warm), #ef6f1e); box-shadow: 0 8px 20px rgba(255,140,66,.32); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- dashboard ---------- */
.hero { background: linear-gradient(135deg, #5b5bef, #7a5cf0 55%, #12b3a6);
  color: #fff; border: none; position: relative; overflow: hidden; }
.hero h1 { color: #fff; }
.hero .subtle { color: rgba(255,255,255,.9); }
.hero-mascot { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 96px; opacity: .95; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15)); }
.hero .btn { background: #fff; color: var(--brand-dark); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.hero .btn:hover { filter: brightness(1); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; box-shadow: 0 4px 12px rgba(46,50,120,0.05); }
.tile .tile-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.tile .tile-value { font-size: 30px; font-weight: 900; line-height: 1.1; margin-top: 4px; letter-spacing: -1px; }
.tile .tile-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

/* mastery bars — sequential single hue (magnitude) */
.mastery-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 12px; margin: 10px 0; }
.mastery-name { font-weight: 700; font-size: 14px; text-transform: capitalize; }
.mastery-track { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.mastery-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a9b0ff, var(--brand)); transition: width .7s ease; }
.mastery-pct { font-weight: 800; font-size: 14px; text-align: right; color: var(--ink-2); }
@media (max-width: 640px) { .mastery-row { grid-template-columns: 96px 1fr 40px; } .mastery-name { font-size: 12px; } }

/* badges */
.badge-shelf { display: flex; flex-wrap: wrap; gap: 12px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; text-align: center; }
.badge-coin { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #ffe08a); border: 2px solid var(--gold); box-shadow: 0 6px 14px rgba(245,180,0,.3); }
.badge.locked .badge-coin { background: var(--surface-2); border-color: var(--line); filter: grayscale(1); opacity: .5; }
.badge-name { font-size: 11px; font-weight: 800; color: var(--ink-2); line-height: 1.2; }

/* ---------- solve view ---------- */
.progress-dots { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dot { width: 30px; height: 8px; border-radius: 999px; background: var(--line); transition: background .3s; }
.dot.done { background: var(--good); }
.dot.current { background: var(--brand); }
.dot.wrong { background: var(--bad); }

.pill { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); text-transform: capitalize; }
.pill-diff { background: #eef0ff; color: var(--brand-dark); border-color: #dfe2ff; }

.problem-prompt { font-size: 21px; line-height: 1.5; margin: 14px 0 22px; font-weight: 600; }

.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px;
  font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: all .12s; color: var(--ink); }
.choice:hover { border-color: #c9cdf5; transform: translateY(-1px); }
.choice .letter { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--surface-2);
  display: grid; place-items: center; font-weight: 900; color: var(--brand-dark); }
.choice.selected { border-color: var(--brand); background: #f2f3ff; }
.choice.selected .letter { background: var(--brand); color: #fff; }
.choice.correct { border-color: var(--good); background: var(--good-bg); }
.choice.correct .letter { background: var(--good); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.choice.wrong .letter { background: var(--bad); color: #fff; }
.choice:disabled { cursor: default; }

.numeric-input { font-family: inherit; font-size: 22px; font-weight: 800; text-align: center;
  padding: 14px; width: 220px; border: 2px solid var(--line); border-radius: 14px; color: var(--ink); }
.numeric-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91,91,239,.15); }

.hint-box { background: #fff9e9; border: 1px solid #ffe6a3; border-radius: 12px; padding: 12px 16px; margin-top: 12px;
  animation: rise .3s ease both; }
.hint-box .hint-label { font-weight: 800; color: #b8860b; font-size: 13px; }

.feedback { border-radius: 14px; padding: 16px 18px; margin-top: 16px; font-weight: 700; animation: rise .3s ease both; }
.feedback.good { background: var(--good-bg); border: 1px solid #b7ecd6; color: #0c7a54; }
.feedback.bad { background: var(--bad-bg); border: 1px solid #f6c5c6; color: #b3272c; }
.feedback-title { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; }

.solution { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 12px; padding: 16px 18px; margin-top: 14px; line-height: 1.6; animation: rise .3s ease both; }
.solution h3 { margin: 0 0 8px; font-size: 15px; color: var(--brand-dark); }
.review-answer { font-size: 17px; font-weight: 600; padding: 10px 2px; }


.mini-lesson { background: linear-gradient(135deg, #f0f4ff, #f7f0ff); border: 1px solid #e2e6ff; }
.mini-lesson ol { margin: 8px 0 0; padding-left: 20px; }
.mini-lesson li { margin: 6px 0; }

/* ---------- results view ---------- */
.result-hero { text-align: center; }
.result-score { font-size: 64px; font-weight: 900; letter-spacing: -2px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.earned-badges { display: flex; justify-content: center; gap: 18px; margin: 18px 0; flex-wrap: wrap; }
.pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(31,35,64,.5); backdrop-filter: blur(4px);
  display: grid; place-items: center; z-index: 40; animation: rise .2s ease both; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 30px; max-width: 440px; width: 100%; text-align: center; }
.modal .numeric-input { width: 100%; text-align: left; font-size: 18px; margin: 14px 0; }

/* ---------- toast ---------- */
#toast-layer { position: fixed; top: 74px; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; z-index: 50; pointer-events: none; }
.toast { background: var(--ink); color: #fff; font-weight: 800; padding: 12px 20px; border-radius: 999px;
  box-shadow: var(--shadow-lg); animation: toastIn .3s ease both; }
.toast.xp { background: linear-gradient(90deg, var(--brand), var(--accent)); }
.toast.badge { background: linear-gradient(90deg, var(--gold), var(--accent-warm)); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

.center { text-align: center; }
.mt { margin-top: 16px; }

/* ---------- profile picker (main page) ---------- */
.chip-user { cursor: pointer; font-family: inherit; }
.chip-user:hover { border-color: var(--brand); }

/* The account menu's own button. Deliberately small and quiet: the avatar beside
   it is the one a child taps, and this must not compete with it. */
.chip-menu {
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 900;
  color: var(--muted); padding-left: 8px; padding-right: 8px; line-height: 1;
}
.chip-menu:hover { border-color: var(--brand); color: var(--brand); }

.user-menu { position: fixed; z-index: 30; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 190px; animation: rise .15s ease both; }
.user-menu-head { padding: 8px 10px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.user-menu-item { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 10px 12px; border: none; background: transparent; border-radius: 10px; cursor: pointer; color: var(--ink); }
.user-menu-item:hover { background: var(--surface-2); }
#um-logout { color: var(--bad); }

.landing { max-width: 720px; }
.landing-hero { text-align: center; padding: 26px 0 6px; }
.landing-logo { font-size: 68px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(91,91,239,0.25)); animation: floaty 3.5s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
.landing-title { font-size: 46px; font-weight: 900; letter-spacing: -1.5px; margin: 6px 0 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent) 60%, var(--accent-warm));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-tag { color: var(--ink-2); font-weight: 600; font-size: 16px; margin: 0; }

.picker { padding: 30px 24px; }
.picker-q { text-align: center; font-size: 24px; margin-bottom: 2px; }
.profile-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 22px; }
.profile-card { position: relative; width: 140px; padding: 22px 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(46,50,120,0.06);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), border-color .14s, box-shadow .14s; }
.profile-card:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: var(--shadow-lg); }
.profile-avatar { font-size: 46px; line-height: 1; width: 84px; height: 84px; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eef1ff, #e3e7ff);
  box-shadow: inset 0 0 0 3px #fff, 0 6px 14px rgba(91,91,239,.18); }
.profile-name { font-weight: 800; font-size: 18px; margin-top: 4px; }
.profile-meta { font-size: 12px; color: var(--muted); font-weight: 700; }
.profile-card.add { border-style: dashed; color: var(--ink-2); justify-content: center; box-shadow: none; }
.profile-card.add .profile-avatar { background: var(--surface-2); color: var(--brand); font-weight: 900; font-size: 40px; box-shadow: inset 0 0 0 3px #fff; }
.profile-lock { position: absolute; top: 10px; left: 10px; font-size: 14px; opacity: .8; }
.profile-del { position: absolute; top: 6px; right: 8px; font-size: 13px; font-weight: 900; color: var(--muted);
  opacity: 0; transition: opacity .12s; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.profile-card:hover .profile-del { opacity: 1; }
.profile-del:hover { background: var(--bad-bg); color: var(--bad); }

.avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.avatar-opt { font-size: 26px; width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface); cursor: pointer; transition: all .1s; }
.avatar-opt:hover { border-color: #c9cdf5; }
.avatar-opt.selected { border-color: var(--brand); background: #f2f3ff; transform: scale(1.05); }

/* ---------- PIN keypad ---------- */
.pin-modal { max-width: 320px; }
.pin-lock { font-size: 40px; }
.pin-modal h1 { font-size: 22px; margin: 6px 0 2px; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 16px 0 6px; }
.pin-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); background: transparent; transition: all .12s; }
.pin-dot.filled { background: var(--brand); border-color: var(--brand); transform: scale(1.1); }
.pin-error { color: var(--bad); font-size: 13px; font-weight: 700; min-height: 18px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.key { font-family: inherit; font-size: 24px; font-weight: 800; height: 62px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; transition: all .1s; }
.key:hover { border-color: var(--brand); background: #f2f3ff; }
.key:active { transform: scale(.94); background: #e7e9ff; }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.empty-state { text-align: center; color: var(--ink-2); padding: 30px; }
.empty-state .big { font-size: 54px; }

/* ---------- parent dashboard ---------- */
.reason-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: var(--surface-2); }
.reason-prompt { font-weight: 600; margin: 6px 0; }
.reason-said { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* ---------- mock exam ---------- */
.mock-topbar { position: sticky; top: 66px; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); }
.mock-timer { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 1px; color: var(--ink); }
.mock-timer.urgent { color: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.pal { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface);
  font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; color: var(--ink-2); position: relative; transition: all .1s; }
.pal:hover { border-color: #c9cdf5; }
.pal.answered { background: #eef2ff; border-color: #c7ccff; color: var(--brand-dark); }
.pal.current { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91,91,239,.18); }
.pal.flagged::after { content: "🚩"; position: absolute; top: -8px; right: -6px; font-size: 12px; }

/* ---------- printable worksheet ---------- */
#print-region { display: none; }
@media print {
  body { background: #fff; }
  .no-print, .topbar { display: none !important; }
  #print-region { display: block; }
  .ws-page { page-break-after: always; padding: 8px; color: #000; }
  .ws-keypage { page-break-after: auto; }
  .ws-head { border-bottom: 2px solid #000; margin-bottom: 16px; padding-bottom: 8px; }
  .ws-head h1 { font-size: 20px; margin: 0 0 6px; }
  .ws-name { font-size: 13px; }
  .ws-problem { margin: 0 0 22px; break-inside: avoid; }
  .ws-q { font-size: 15px; line-height: 1.5; }
  .ws-choices { margin: 8px 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 24px; }
  .ws-choice { font-size: 14px; }
  .ws-work { margin: 10px 0 0 18px; font-size: 14px; }
  .ws-space { height: 70px; border-bottom: 1px dotted #bbb; margin-top: 8px; }
  .ws-key-item { font-size: 14px; margin: 8px 0; line-height: 1.5; break-inside: avoid; }
}

/* ---------- app top bar: back to QubitKid ---------- */
.topbar-left { display: flex; align-items: center; gap: 12px; }
.back-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; font-weight: 900; font-size: 17px;
  transition: background 0.15s ease, color 0.15s ease;
}
.back-link:hover { background: var(--brand); color: #fff; border-color: transparent; }

/* =====================================================================
   MOBILE
   The app is used on phones as much as laptops, so everything below
   reflows rather than shrinking. Three steps: small laptop, tablet,
   phone — plus fixes for touch devices, which have no hover at all.
   ===================================================================== */

/* Nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Long equations scroll inside their own box instead of stretching the page. */
.problem-prompt, .solution, .reason-prompt, .mini-lesson, .review-answer, .hint-box {
  overflow-x: auto;
  overflow-wrap: break-word;
}
.choice, .feedback, .card { overflow-wrap: break-word; }

/* Parent dashboard: the detailed mastery row (5 columns on a laptop). */
.mastery-row-detail { grid-template-columns: 150px 1fr 46px auto auto; }
.m-right { width: 70px; text-align: right; }
.m-hints { width: 90px; text-align: right; }
.hero-sub { max-width: 70%; }
.ws-pin-input { width: 120px; font-size: 14px; padding: 6px; text-align: left; }

/* ---------- small laptops / large tablets ---------- */
@media (max-width: 860px) {
  main { padding: 22px 16px 70px; }
  .hero-mascot { font-size: 72px; right: 10px; opacity: .5; }
  .hero-sub { max-width: 78%; }
}

/* ---------- tablets and big phones ---------- */
@media (max-width: 700px) {
  main { padding: 16px 13px 64px; }
  .card { padding: 17px 15px; }
  .card + .card { margin-top: 14px; }

  h1 { font-size: 25px; }
  h2 { font-size: 18px; }
  .problem-prompt { font-size: 19px; margin: 12px 0 18px; }

  /* Top bar: keep the brand, shrink the stats, never wrap. */
  .topbar { padding: 10px 13px; gap: 10px; }
  .brand-logo { font-size: 23px; }
  .brand-name { font-size: 18px; }
  .topbar-stats { gap: 6px; }
  .chip { padding: 6px 9px; font-size: 13px; gap: 6px; }
  .xp-meter { width: 54px; }
  .chip-user span:not(.chip-emoji) { min-width: 0; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The mascot competes with the greeting on a narrow screen. */
  .hero-mascot { font-size: 56px; right: 4px; opacity: .32; }
  .hero-sub { max-width: 100%; }

  .result-score { font-size: 52px; }
  .modal { padding: 22px 18px; }
  .landing-title { font-size: 36px; }
  .landing-logo { font-size: 54px; }

  /* Mock test: title, clock and submit stack rather than squeeze. */
  .mock-topbar { flex-wrap: wrap; justify-content: center; text-align: center; padding: 10px 12px; top: 60px; }
  .mock-timer { font-size: 22px; }

  /* Dashboard detail row drops the two right-hand stats onto their own line. */
  .mastery-row-detail {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name pct" "track track" "right hints";
    gap: 4px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .mastery-row-detail .mastery-name { grid-area: name; }
  .mastery-row-detail .mastery-track { grid-area: track; }
  .mastery-row-detail .mastery-pct { grid-area: pct; }
  .mastery-row-detail .m-right { grid-area: right; width: auto; text-align: left; }
  .mastery-row-detail .m-hints { grid-area: hints; width: auto; }
}

/* ---------- phones ---------- */
@media (max-width: 460px) {
  body { font-size: 15.5px; }
  main { padding: 14px 11px 60px; }
  .card { padding: 15px 13px; border-radius: 14px; }

  h1 { font-size: 22px; }
  .problem-prompt { font-size: 18px; }

  /* Two tiles per row already; tighten them so nothing clips. */
  .tiles { gap: 10px; }
  .tile { padding: 12px 11px; }
  .tile .tile-value { font-size: 25px; }
  .tile .tile-sub { font-size: 11px; }

  /* Full-width buttons are far easier to hit with a thumb. */
  .btn { padding: 13px 18px; font-size: 15.5px; }
  .btn-lg { font-size: 17px; padding: 15px 20px; width: 100%; }
  .row > .btn, .row-between > .btn { flex: 1 1 auto; }

  .choice { padding: 12px 13px; font-size: 16px; gap: 11px; }
  .choice .letter { width: 28px; height: 28px; flex: 0 0 28px; }

  /* The answer box should fill the width on a phone, not sit at 220px. */
  .numeric-input { width: 100%; font-size: 20px; padding: 13px; }

  /* Profile cards: two per row, whatever the phone width. */
  .profile-grid { gap: 12px; }
  .profile-card { width: calc(50% - 6px); padding: 16px 8px 14px; }
  .profile-avatar { width: 66px; height: 66px; font-size: 36px; }
  .profile-name { font-size: 16px; }

  .badge { width: 68px; }
  .badge-coin { width: 48px; height: 48px; font-size: 23px; }
  .badge-name { font-size: 10px; }

  .dot { width: 22px; }
  .pal { width: 36px; height: 36px; font-size: 14px; }

  .landing-title { font-size: 30px; }
  .landing-tag { font-size: 14.5px; }
  .picker { padding: 20px 14px; }
  .picker-q { font-size: 20px; }

  .result-score { font-size: 44px; }
  .hero-mascot { display: none; }

  /* Keypad keys stay big — they're the main control on the PIN screen. */
  .key { height: 56px; font-size: 22px; }
  .keypad { gap: 10px; }
  .modal { padding: 20px 15px; }

  #toast-layer { top: 64px; }

  /* ---- top bar ----
     Measured at 320px the bar wanted 538px of the 294px it had, so it was
     silently clipped by the overflow-x guard on <body>. On a phone the logo
     alone identifies the app, and the user chip becomes its avatar. Level and
     streak stay — they are the numbers a child actually looks at. XP steps
     aside; the dashboard shows it in full. */
  .topbar { padding: 9px 11px; gap: 8px; }
  body:not(.lp) .brand-name { display: none; }
  .topbar-left { gap: 8px; }
  .topbar-stats { gap: 6px; }
  .chip { padding: 6px 8px; font-size: 12.5px; gap: 5px; }
  .chip-emoji { font-size: 14px; }
  .chip-xp { display: none; }
  .chip-user span:not(.chip-emoji) { display: none; }
  .chip-menu { padding-left: 6px; padding-right: 6px; }
  .topbar .btn { padding: 9px 12px; font-size: 13.5px; border-radius: 11px; }

  /* Landing keeps its name — "QubitKid" is the brand and it is short. */
  .lp .brand-name { font-size: 16px; }
  .lp-nav { gap: 6px; }
  .lp-nav .btn { padding: 8px 10px; font-size: 12.5px; }

  /* Safety net: if a bar ever still runs out of room — a longer name, a third
     button, a larger system font — it wraps to a second line instead of being
     clipped by the overflow guard on <body>. */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .brand { min-width: 0; }
  .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- practice calendar ----
     Cells were 15px, which is a poor tap target, and the calendar is
     full-width on a phone so the room was there all along. */
  .overtime { --pc-cell: 24px; --pc-gap: 4px; --pc-gutter: 30px; }
  .pc-dows span { font-size: 10px; }
  .toast { font-size: 14px; padding: 10px 16px; max-width: 92vw; }

  .ws-pin-input { width: 100%; }
}

/* ---------- touch devices ---------- */
/* Hover doesn't exist here, so anything hover-only is unreachable. The ✕ that
   removes a learner was invisible on a phone until this. */
@media (hover: none) {
  .profile-del { opacity: .55; width: 26px; height: 26px; font-size: 15px; }
  .profile-card:active { transform: scale(.98); }
  .btn:hover, .choice:hover, .profile-card:hover, .pal:hover, .key:hover {
    transform: none;
    box-shadow: inherit;
  }
}

/* Respect people who ask for less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- parent dashboard: coach's notes & messages ---------- */
.next-focus {
  margin-top: 14px; padding: 14px 16px;
  background: linear-gradient(135deg, #f0f4ff, #eefbf8);
  border: 1px solid #dbe3ff; border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
}
.next-focus-label {
  font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 6px;
}
.md { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.md h3, .md h4, .md h5 { font-size: 14px; font-weight: 900; color: var(--ink); margin: 14px 0 4px; }
.md p { margin: 6px 0; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md strong { color: var(--ink); }
.md code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: .88em; }
.md > :first-child { margin-top: 0; }

.plan-more { margin-top: 14px; }
.plan-more summary {
  cursor: pointer; font-weight: 800; font-size: 14px; color: var(--brand);
  padding: 8px 0; list-style: none;
}
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::before { content: '▸ '; display: inline-block; transition: transform .15s ease; }
.plan-more[open] summary::before { content: '▾ '; }
.plan-more summary:hover { text-decoration: underline; }
.plan-more > .md { padding-top: 6px; border-top: 1px solid var(--line); }

.note-form textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px;
  border: 2px solid var(--line); border-radius: 12px; resize: vertical;
  color: var(--ink); background: var(--surface); min-height: 76px;
}
.note-form textarea:focus { outline: none; border-color: var(--brand); }

.note-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.note-history-head { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.note-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 13px; margin-bottom: 8px; }
.note-item-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.note-text { font-size: 14.5px; color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; }
.note-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em; }
.note-badge.new { background: #fff3d9; color: #a5741a; }
.note-badge.done { background: var(--good-bg); color: var(--good); }
.note-del { margin-left: auto; border: none; background: none; cursor: pointer;
  color: var(--muted); font-weight: 900; font-size: 13px; padding: 2px 5px; border-radius: 6px; }
.note-del:hover { background: var(--bad-bg); color: var(--bad); }

/* ---------- attendance strip ---------- */
.att-strip { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.att-day {
  flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 8px 0 6px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
}
.att-day.done {
  background: linear-gradient(160deg, #d9f7ec, #b9f0dc);
  border-color: var(--good);
}
.att-day.today { box-shadow: 0 0 0 2px var(--brand); }
.att-mark { font-size: 15px; font-weight: 900; color: var(--good); line-height: 1; min-height: 15px; }
.att-dow { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.att-day.done .att-dow { color: #0c7a54; }
@media (max-width: 460px) { .att-day { min-width: 0; padding: 6px 0 5px; } .att-dow { font-size: 9px; } }

/* ---------- parent dashboard: mock re-sits ---------- */
.mock-row { padding: 7px 0; border-top: 1px solid var(--line); }
.mock-row.is-replay { opacity: .6; }
.mock-tag {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}

/* ---------- coach card: show, don't tell ---------- */
.coach-block { margin-top: 18px; }
.coach-label {
  font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

/* the skill map */
.skill-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.skill-bar .seg { display: block; height: 100%; }
.skill-bar .seg.solid    { background: var(--good); }
.skill-bar .seg.learning { background: var(--gold); }
.skill-bar .seg.shaky    { background: var(--bad); }
.skill-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--ink-2); font-weight: 700; }
.skill-key .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.skill-key .dot.solid { background: var(--good); }
.skill-key .dot.learning { background: var(--gold); }
.skill-key .dot.shaky { background: var(--bad); }

/* skill chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-chip {
  font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  text-transform: capitalize;
}
.skill-chip.is-shaky { background: var(--bad-bg); border-color: #f6c5c6; color: #b3272c; }
.skill-chip.is-solid { background: var(--good-bg); border-color: #b7ecd6; color: #0c7a54; }
.skill-chip.is-due   { background: #fff6e2; border-color: #ffe0a8; color: #8a6100; }

/* trend sparklines */
.trend-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trend { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.trend-head b { font-size: 20px; font-weight: 900; color: var(--ink); }
.spark { width: 100%; height: 34px; display: block; margin: 2px 0 6px; }
.spark-empty { font-size: 12px; color: var(--muted); padding: 12px 0; }
@media (max-width: 560px) { .trend-row { grid-template-columns: 1fr; } }

/* ---------- coach card: the verdict ---------- */
.verdict { margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); }
.verdict-good { background: linear-gradient(135deg, #eafaf3, #f2fbf7); border-color: #b7ecd6; }
.verdict-easy { background: linear-gradient(135deg, #fff7e6, #fffaf0); border-color: #ffe0a8; }
.verdict-hard { background: linear-gradient(135deg, #fdeeee, #fef5f5); border-color: #f6c5c6; }
.verdict-unknown { background: var(--surface-2); }
.verdict-title { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.verdict-good .verdict-title { color: #0c7a54; }
.verdict-easy .verdict-title { color: #8a6100; }
.verdict-hard .verdict-title { color: #b3272c; }
.verdict-sub { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

/* the challenge meter: where they sit against the 65-90% sweet spot */
.meter { position: relative; height: 12px; border-radius: 999px; margin: 18px 0 6px;
  background: linear-gradient(90deg, #f6c5c6 0%, #ffe0a8 40%, #ffe0a8 60%, #cfe6ff 100%); }
.meter-band { position: absolute; left: 65%; width: 25%; top: -3px; bottom: -3px;
  background: rgba(23,166,115,.28); border-left: 2px solid var(--good); border-right: 2px solid var(--good);
  border-radius: 3px; }
.meter-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.meter-mark::before { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.meter-mark span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.meter-scale { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--muted); font-weight: 700; margin-top: 20px; }

.coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .coach-grid { grid-template-columns: 1fr; gap: 4px; } }
.skill-chip b { font-weight: 900; }

/* difficulty moves */
.moves { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.move { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.move b { font-size: 14px; }
.move-up   { background: #eef2ff; border-color: #c7ccff; color: var(--brand-dark); }
.move-down { background: #fff4e6; border-color: #ffd9a8; color: #8a5a00; }

/* ---------- coach diary ---------- */
.diary { display: flex; flex-direction: column; gap: 4px; }
.diary-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.diary-item summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; list-style: none; font-size: 14px;
}
.diary-item summary::-webkit-details-marker { display: none; }
.diary-item[open] summary { border-bottom: 1px solid var(--line); }
.diary-date { font-size: 12px; font-weight: 800; color: var(--muted); min-width: 48px; }
.diary-icon {
  width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.diary-icon.k-up { background: #eef2ff; border-color: #c7ccff; color: var(--brand-dark); }
.diary-icon.k-down { background: #fff4e6; border-color: #ffd9a8; color: #8a5a00; }
.diary-title { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.diary-body { padding: 10px 12px 12px; font-size: 14px; }

/* ======================================================================
   PARENT DASHBOARD — one visual language
   One tag component, one card rhythm, one label style. Everything else
   (pill, skill-chip, mock-tag, act-chart) has been retired.
   ====================================================================== */

/* cards sit in a consistent rhythm */
#parent .card + .card { margin-top: 16px; }
#parent .card h2 {
  font-size: 16px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 4px;
}
#parent .card > .subtle { font-size: 14px; margin-bottom: 12px; }

/* the one tag/chip component */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  text-transform: capitalize; max-width: 100%; overflow-wrap: anywhere;
}
.tag b { font-weight: 900; font-variant-numeric: tabular-nums; }
.tag-good  { background: var(--good-bg); border-color: #b7ecd6; color: #0c7a54; }
.tag-bad   { background: var(--bad-bg);  border-color: #f6c5c6; color: #b3272c; }
.tag-warn  { background: #fff6e2; border-color: #ffe0a8; color: #8a6100; }
.tag-muted { background: var(--surface-2); color: var(--muted); text-transform: none; }

/* header card: identity + the numbers that matter */
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.who-select {
  font-family: inherit; font-size: 19px; font-weight: 900; letter-spacing: -.3px;
  color: var(--ink); background: transparent; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: 10px;
}
.who-select:hover { background: var(--surface-2); }
.who-select:focus-visible { outline: 3px solid rgba(91,91,239,.4); }
.who-name { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }

.figs { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.fig { display: flex; flex-direction: column; gap: 1px; }
.fig b { font-size: 22px; font-weight: 900; letter-spacing: -.6px; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.fig span { font-size: 11px; font-weight: 700; color: var(--muted); }

/* talking to the coach, inside the coach card */
.coach-talk { border-top: 1px solid var(--line); padding-top: 16px; }

@media (max-width: 460px) {
  .figs { gap: 10px 18px; }
  .fig b { font-size: 19px; }
}

/* ======================================================================
   PRACTICE CALENDAR
   A contributions-style grid. Cells flow down each column (Mon→Sun) so a
   column is one week; CSS grid keeps the month captions perfectly aligned
   to the columns beneath them.
   ====================================================================== */
.pcal { margin-top: 4px; }

.pc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.pc-title { font-size: 14px; font-weight: 800; letter-spacing: -.1px; color: var(--ink); }
.pc-stat { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pc-stat b { color: var(--ink-2); font-weight: 900; font-variant-numeric: tabular-nums; }

.pc-body {
  display: flex; gap: 8px; align-items: flex-start;
  /* visible, NOT auto: a hovered cell scales up and must be allowed to paint
     outside this box rather than triggering a horizontal scrollbar. */
  overflow: visible;
}

/* weekday gutter — only Mon/Wed/Fri/Sun labelled, so it reads cleanly */
.pc-dows {
  display: grid; grid-template-rows: repeat(7, var(--pc-cell)); gap: var(--pc-gap);
  margin-top: 18px; /* clears the month caption row */
}
.pc-dows span {
  font-size: 11px; font-weight: 700; color: var(--muted);
  line-height: var(--pc-cell); text-align: right; padding-right: 2px; white-space: nowrap;
}

.pc-cols { display: flex; flex-direction: column; gap: 4px; }
.pc-months {
  display: grid; grid-template-columns: repeat(8, var(--pc-cell));
  gap: var(--pc-gap); height: 14px;
}
.pc-months span {
  font-size: 11px; font-weight: 800; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap; overflow: visible;
}

.pc-grid {
  display: grid;
  grid-template-rows: repeat(7, var(--pc-cell));
  grid-template-columns: repeat(8, var(--pc-cell));
  grid-auto-flow: column;              /* fill down each week, then across */
  gap: var(--pc-gap);
}

/* one square = one day */
.pc-day {
  width: var(--pc-cell); height: var(--pc-cell);
  border-radius: 6px; position: relative; display: block;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .1s ease, box-shadow .1s ease;
}
.pc-day.is-weekend:not([class*="lvl-"]), .pc-day.lvl-0.is-weekend { background: #eef0f8; }
.pc-day.lvl-1 { background: #d4f0e2; border-color: #bfe8d3; }
.pc-day.lvl-2 { background: #97dcbb; border-color: #7fd2ab; }
.pc-day.lvl-3 { background: #4fc294; border-color: #3bb686; }
.pc-day.lvl-4 { background: var(--good); border-color: #128a5f; }
.pc-day.is-future { background: transparent; border-color: transparent; }

/* today: a ring. the only ring in the grid. */
.pc-day.is-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--brand); }

/* a coach change: a corner dot. deliberately NOT a ring. */
.pc-day.has-note::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-warm); border: 1.5px solid var(--surface);
}



.pc-legend {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px; flex-wrap: wrap; margin-top: 12px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.pc-scale, .pc-note-key { display: inline-flex; align-items: center; gap: 5px; }
.pc-legend .pc-day { width: 11px; height: 11px; border-radius: 4px; }

@media (max-width: 460px) {
  .pc-dows span { font-size: 10px; }
  .pc-legend { font-size: 11px; }
}

/* ======================================================================
   OVER TIME — calendar and trend charts share one row
   A heatmap is narrow by nature; on its own it looked marooned in a wide
   card. Pairing it with the trend charts fills the row and groups the
   "how are things going over time" question in one place.
   ====================================================================== */
.overtime {
  /* Cell metrics live here so the left column can be computed from them. */
  --pc-cell: 20px;
  --pc-gap: 5px;
  --pc-gutter: 38px;                 /* the Mon/Wed/Fri labels + their gap */
  --pc-col: calc(8 * var(--pc-cell) + 7 * var(--pc-gap) + var(--pc-gutter));

  display: grid;
  /* FIXED left column. Previously `auto`, which meant the caption text below the
     grid could stretch it — so picking a day with a long description visibly
     resized both panels. The calendar's width is knowable, so state it. */
  grid-template-columns: var(--pc-col) minmax(190px, 1fr);
  gap: 20px 24px;
  align-items: start;
}
.overtime-cal { min-width: 0; }
.overtime-trends { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.overtime-trends .trend { margin: 0; }

/* the caption spans both columns, so its length can never affect their widths */
.overtime > .pc-detail { grid-column: 1 / -1; margin-top: 0; }

@media (max-width: 720px) {
  .overtime { grid-template-columns: 1fr; gap: 16px; }
}


/* days are buttons now — reset the browser chrome, keep the square */
button.pc-day {
  padding: 0; margin: 0; font: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
button.pc-day:hover { transform: scale(1.18); box-shadow: 0 3px 10px rgba(31,35,64,.22); z-index: 2; }
button.pc-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); z-index: 3; }
/* the selected day keeps a dark ring so you can see what the caption refers to */
button.pc-day.is-picked {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink);
  z-index: 3;
}

/* the caption under the grid: this is what a tap actually produces */
.pc-detail {
  padding: 10px 13px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center;
  /* room for two lines up front, so switching between a short and a long
     description doesn't make the block grow and shove the page around */
  min-height: 44px;
}
.pc-detail.has-pick { color: var(--ink); background: #f2f4ff; border-color: #dde2ff; }


/* ---------- ability radar ---------- */
.ability { display: grid; grid-template-columns: 340px minmax(190px, 1fr); gap: 22px; align-items: start; }
.ability-lists { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.ability-group .coach-label { margin-bottom: 6px; }
.ability-chart { display: flex; flex-direction: column; align-items: center; }

/* The SVG measures itself around its labels and carries its own width, so it
   renders 1:1 and the text is exactly the size set below. max-width is the
   backstop on narrow screens; overflow:hidden guarantees nothing paints out. */
.radar { max-width: 100%; height: auto; display: block; overflow: hidden; }
.radar-label {
  font-family: inherit; font-size: 11px; font-weight: 800;
  fill: var(--ink-2); text-transform: capitalize;
}
.radar-empty {
  font-size: 12.5px; color: var(--muted); background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: 10px; padding: 22px 16px;
  text-align: center; line-height: 1.5;
}
.radar-key {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px;
}
.rk-shape, .rk-target { display: inline-block; width: 14px; height: 0; flex: none; }
.rk-shape { border-top: 3px solid var(--brand); }
.rk-target { border-top: 2px dashed var(--good); margin-left: 8px; }

@media (max-width: 720px) {
  .ability { grid-template-columns: 1fr; gap: 16px; }
  .ability-chart { align-items: flex-start; }
}
@media (max-width: 460px) {
  .ability-chart { align-items: center; }
}

/* small layout utilities, so markup stops carrying style="" */
.stack-sm { margin-top: 8px; }
.stack-md { margin-top: 12px; }
.flush { margin: 0; }
.inset-top { padding-top: 8px; }

/* ---------- hero card: the first thing you see ---------- */
.hero-card { border-color: #d9deff; box-shadow: 0 8px 26px rgba(46,50,120,.10); }
.hero-card .verdict { margin-top: 14px; }
.hero-card .figs { margin-top: 16px; }

/* the card stack reads as one rhythm */
#parent .view > .card:first-child { margin-top: 0; }
#parent .card > h2 + .subtle { margin-top: 0; }
#parent .coach-block:first-of-type { margin-top: 14px; }
.ws-select { width: auto; text-align: left; font-size: 14px; padding: 10px 12px; }

/* ---------------------------------------------------------------------------
   Saved questions — the ♥ on a problem, and the shortlist it feeds.
   --------------------------------------------------------------------------- */
.head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.save-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.save-btn:hover { color: #d64258; border-color: #f3c2ca; background: #fff5f6; }
.save-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(214,66,88,.28); }
.save-btn.is-saved { color: #d64258; border-color: #f3c2ca; background: #fff1f3; }
.save-heart { font-size: 15px; line-height: 1; }
/* one bump when it is hearted, so the tap is felt as well as seen */
.save-btn.pop .save-heart { animation: heart-pop .4s cubic-bezier(.2,.9,.3,1); }
@keyframes heart-pop { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } }

.saved-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.saved-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.saved-item[open] { background: var(--surface); border-color: #dfe2ff; }
.saved-item > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 13px; list-style: none; border-radius: 10px;
}
.saved-item > summary::-webkit-details-marker { display: none; }
.saved-item > summary::after {
  content: '›'; margin-left: auto; flex: none;
  font-size: 18px; font-weight: 900; color: var(--muted);
  transition: transform .18s ease;
}
.saved-item[open] > summary::after { transform: rotate(90deg); }
.saved-item > summary:hover { background: #f4f6ff; }
.saved-topic {
  flex: none; font-size: 11px; font-weight: 800; text-transform: capitalize;
  padding: 3px 9px; border-radius: 999px;
  background: #eef0ff; color: var(--brand-dark); border: 1px solid #dfe2ff;
}
.saved-q {
  min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saved-body { padding: 2px 13px 14px; border-top: 1px solid var(--line); }
.saved-body .problem-prompt { font-size: 17px; margin: 12px 0 14px; }
.saved-body .numeric-input { width: 100%; max-width: 220px; }
.saved-actions { margin-top: 14px; gap: 8px; flex-wrap: wrap; }
.saved-actions .btn { font-size: 14px; padding: 10px 16px; }
.saved-feedback:not(:empty) { margin-top: 12px; }
.saved-feedback .feedback { margin-top: 0; }

@media (max-width: 460px) {
  /* the word is a luxury; the heart is the control */
  .save-word { display: none; }
  .save-btn { padding: 6px 10px; }
  .save-heart { font-size: 17px; }
  .saved-body .numeric-input { max-width: 100%; }
  .saved-actions .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   Phone form controls — last in the file on purpose.
   iOS silently zooms the whole page when you focus a control under 16px, and
   never zooms back out. Some of these controls are declared further down the
   stylesheet than the phone block above, so at equal specificity source order
   would undo the fix. Stating it last is what makes it stick.
   --------------------------------------------------------------------------- */
@media (max-width: 460px) {
  .note-form textarea,
  .ws-pin-input, .ws-select, .who-select,
  input[type="text"], input[type="email"],
  input[type="password"], input[type="number"] { font-size: 16px; }
}

/* ---------- age -> competition track ---------- */
.field-label { margin: 14px 0 6px; }
.stack-lg { margin-top: 18px; }

/* The live preview under the age box: shows the parent which competition the
   age lands on before they commit, so the choice is never invisible. */
.track-preview {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 10px 12px; min-height: 44px;
  border-radius: 10px; border: 1px dashed var(--line); background: var(--surface-2);
  text-align: left;
}
.track-preview.is-set { border-style: solid; border-color: #dde2ff; background: #f2f4ff; }
.track-preview.is-bad { border-color: #f3c9c9; background: #fdf3f3; }
.tp-emoji { font-size: 22px; line-height: 1; flex: none; }
.tp-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-body b { font-size: 14px; color: var(--ink); }
.tp-blurb, .tp-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tp-hint { font-weight: 600; }

/* The target strip: what this child is being aimed at, and whether the aim
   still fits. Sits under the verdict in the hero card. */
.target-strip {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.target-strip.is-unset { border-color: #f0d9a8; background: #fdf8ec; }
.ts-emoji { font-size: 21px; line-height: 1; flex: none; }
.ts-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-name {
  font-size: 14px; font-weight: 800; color: var(--ink);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.ts-age {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 999px;
}
.ts-fit { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.ts-fit.is-up { color: var(--good); }
.ts-fit.is-down, .ts-fit.is-warn { color: var(--bad); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; flex: none; }

/* the level editor is a form, not a celebration — left-aligned, no big emoji */
.modal-form { text-align: left; }
.modal-form h1 { font-size: 20px; margin-bottom: 2px; }

@media (max-width: 460px) {
  .target-strip { flex-wrap: wrap; }
  .target-strip .btn-sm { width: 100%; }
}
/* a select inside a form modal matches the inputs above it, full width */
.form-select { width: 100%; text-align: left; font-size: 15px; padding: 11px 12px; }

/* ---------- "want to do more?" outlets ---------- */
.more-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.more-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s, transform .08s;
}
.more-row:hover { border-color: var(--brand); transform: translateY(-1px); }
.more-row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,91,239,.28); }
.more-emoji { font-size: 24px; flex: none; line-height: 1; }
.more-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-body b { font-size: 15px; color: var(--ink); }
.more-body span { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.35; }
.more-go { font-size: 18px; color: var(--brand); font-weight: 900; flex: none; }

/* ---------- practice zone ---------- */
.prac-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.prac-chip {
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); cursor: pointer; transition: all .12s;
}
.prac-chip:hover { border-color: var(--brand); color: var(--brand); }
.prac-score { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; }
.prac-solution { margin-top: 6px; font-weight: 600; line-height: 1.5; }
.hint-box {
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: #fff8e6; border: 1px solid #f3e2b8; font-size: 14px; font-weight: 600;
}

/* ---------- diagrams ---------- */
.vis-wrap {
  margin: 14px 0 4px; padding: 12px 10px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  overflow-x: auto;
}
.vis { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.solution .vis-wrap { background: var(--surface); }

/* ---------- "how did you do it?" ---------- */
.reflect {
  margin-top: 14px; padding: 13px 14px; border-radius: 12px;
  background: #f4f6ff; border: 1px solid #dde2ff;
}
.reflect.compare { background: var(--surface-2); border-color: var(--line); }
.reflect-q { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.reflect-box {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); resize: vertical; line-height: 1.5;
}
.reflect-box:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91,91,239,.16); }
.reflect-actions { margin-top: 10px; gap: 8px; }
.reflect-note { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 8px 0; line-height: 1.45; }
.cmp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-btn {
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); cursor: pointer; transition: all .12s;
}
.cmp-btn:hover { border-color: var(--brand); color: var(--brand); }
.reflect-hint { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.reflect-nudge {
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: #fff8e6; border: 1px solid #f3e2b8; color: #7a5a12;
  font-size: 13.5px; font-weight: 700; line-height: 1.45;
}
.cmp-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.more-row.is-challenge { background: linear-gradient(135deg,#fff6ec,#fff1f6); border-color: #f4d9bd; }
.more-row.is-challenge:hover { border-color: var(--accent-warm); }
.more-row.is-ask { background: linear-gradient(135deg,#f2f4ff,#f7f0ff); border-color: #dde2ff; }
.more-row.is-asked { background: var(--surface-2); border-style: dashed; cursor: default; }
.more-row.is-asked:hover { transform: none; border-color: var(--line); }
.mock-done { color: var(--muted); font-weight: 700; margin-top: 3px; line-height: 1.45; }

/* the last three practice days, spelled out under the meter — an average alone
   let two very different children read identically */
.day-strip { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.day-chip {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 11px;
  border-radius: 9px; background: var(--surface); border: 1px solid var(--line); min-width: 0;
}
.day-chip b { font-size: 14px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.day-chip i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.day-chip.is-low b { color: var(--bad); }
.day-chip.is-mid b { color: var(--good); }
.day-chip.is-high b { color: var(--gold); }
.verdict-mixed { background: #fff8e6; border-color: #f0dfb4; }

/* ---------- "in their own words": a quote, not a data row ---------- */
.said {
  margin: 14px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
}
.said blockquote {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--ink);
  line-height: 1.6; overflow-wrap: anywhere;
}
.said blockquote::before { content: '“'; color: var(--brand); font-size: 22px; line-height: 0; }
.said blockquote::after  { content: '”'; color: var(--brand); font-size: 22px; line-height: 0; }
.said figcaption {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px;
}
.said-topic {
  font-size: 11px; font-weight: 800; color: var(--brand);
  background: #ececff; padding: 3px 9px; border-radius: 999px; text-transform: capitalize;
}
.said-meta { font-size: 12px; font-weight: 600; color: var(--muted); }
.said-used {
  font-size: 11.5px; font-weight: 800; color: #7a5a12;
  background: #fff8e6; border: 1px solid #f3e2b8; padding: 3px 9px; border-radius: 999px;
}
.add-note { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.profile-card.add.is-full { opacity: .55; }
.more-row.is-boost { background: linear-gradient(135deg,#eef6ff,#e9fbf6); border-color: #bfe3dc; }
.more-row.is-boost:hover { border-color: var(--accent); }

/* Where a badge was earned. Small and muted — it is context, not a score. */
.badge-where {
  font-size: 9.5px; font-weight: 800; color: var(--muted);
  letter-spacing: .02em; margin-top: 1px; line-height: 1.2;
}
.badge.locked .badge-where { display: none; }

/* The dashboard boost line. Same row as the extras panel so it reads as part of
   the app, with a little breathing room and a warm edge — it is an offer of
   help, so it must not look like a warning. */
.boost-nudge {
  margin-top: 14px; background: var(--surface);
  border-color: #ffd9bd; box-shadow: 0 2px 10px rgba(255, 140, 66, .10);
}
.boost-nudge:hover { border-color: var(--accent-warm); }
.boost-nudge .more-go { color: #e0741f; }

/* A way back on the solving screen. Sits above the progress dots, left-aligned,
   so it reads as "leave" rather than as one of the answer controls. */
.solve-back { display: flex; margin-bottom: 10px; }

/* ---------- boost round: the idea, before the questions ---------- */
.boost-intro { text-align: center; }
.boost-idea {
  font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--ink);
  margin: 12px 0 4px; letter-spacing: -.2px;
}
.boost-why { font-size: 13.5px; font-weight: 600; color: var(--muted); margin: 10px 0 16px; }
.boost-intro .vis-wrap { margin: 0 auto; }
@media (max-width: 460px) { .boost-idea { font-size: 17px; } }