/* PiSteps: theme tokens. Lessons only use semantic color names
   (ink, muted, accent, good, warn), which map to these variables, so a
   theme swap is a single attribute change on <html>.
   Palette taken from the PiSteps logo (img/brand/): navy "Pi", blue to teal
   pi, amber to orange to coral stairs. Text pairs meet WCAG AA (4.5:1) in
   both themes; the bright logo orange is only used for the wordmark and
   decoration, never for body text (--warn is its darker, readable cousin). */

/* UI font: Nunito, a rounded sans-serif under the SIL Open Font License 1.1
   (fonts/nunito/OFL.txt), self-hosted so the strict CSP stays 'self' only.
   Variable weight 200-1000. Math keeps KaTeX's own TeX fonts. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito/nunito-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito/nunito-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito/nunito-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand colors straight from the logo (decoration, logo, gradients). */
  --brand-navy: #0e3173;
  --brand-blue: #1a5fa0;
  --brand-teal: #45bfbd;
  --brand-amber: #fcb738;
  --brand-orange: #f26a10;
  --brand-coral: #fd715a;
  --grad-pi: linear-gradient(135deg, #14467f, #1a63a6 45%, #45bfbd);
  --grad-steps: linear-gradient(160deg, #fdb53a, #fd8f3f 55%, #fd6a5a);
  --grad-cta: linear-gradient(135deg, #fdbb45, #fd8a3f); /* navy text on it is 5.2:1 or better */
  --cta-ink: #0e3173;
  --wm-pi: #0e3173;
  --wm-steps: #f26a10;
  --heading: #0e3173;

  --bg: #f5f7fb;
  --surface: #ffffff;
  --board: #fffdf7;
  --ink: #14234a;
  --muted: #536079; /* 5.6:1 or better on tinted cards too */
  --line: #c5cbd8; /* dark enough that card and input edges show on classroom screens */
  --accent: #1a5fa0; /* logo blue: 6.6:1 on white, white text on it 6.6:1 */
  --good: #0f6a41;
  --warn: #c2410c; /* logo orange, darkened to 5.2:1 */
  --hl: rgba(252, 183, 56, 0.40); /* stair amber */
  --grid: #e6e9f0;
  --axis: #858c9c;
  --shadow: 0 1px 2px rgba(14, 49, 115, .06), 0 4px 16px rgba(14, 49, 115, .07);
  --radius: 14px;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --wm-pi: #ffffff;
  --wm-steps: #ff8a3d;
  --heading: #f2f6fd;
  --bg: #0b1326; /* deep logo navy */
  --surface: #131d36;
  --board: #101a30;
  --ink: #e8eef9;
  --muted: #9eabc5;
  --line: #283554;
  --accent: #6fb4f5;
  --good: #4ade94;
  --warn: #ff9152;
  --hl: rgba(252, 183, 56, 0.28);
  --grid: #1f2a44;
  --axis: #6a7690;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  min-height: 100vh;
  transition: background .25s, color .25s;
}
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
/* Slow network: a thin moving bar under the top bar while a page loads (js/app.js route). */
body.loading .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: loadbar 1.1s linear infinite; }
@keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.loading .topbar::after { animation: none; background: var(--accent); opacity: .5; } }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { color: inherit; text-decoration: none; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* Header logo: the pi-and-stairs mark (img/brand/pisteps-mark.svg) plus the
   wordmark set in Nunito, navy "Pi" and orange "steps" as in the logo.
   20px extra-bold counts as large text, where the orange passes 3:1. */
.brand .logo { width: 40px; height: 30px; flex: none; display: block; }
.wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.wordmark .wm-pi { color: var(--wm-pi); }
.wordmark .wm-steps { color: var(--wm-steps); margin-left: .22em; }
/* Full logo, swapped for the light or dark artwork with the theme. */
.brand-full { display: block; height: auto; max-width: 100%; }
.brand-full.on-dark, .logo.on-dark, :root[data-theme="dark"] .brand-full.on-light, :root[data-theme="dark"] .logo.on-light { display: none; }
:root[data-theme="dark"] .brand-full.on-dark, :root[data-theme="dark"] .logo.on-dark { display: block; }
.auth-logo { width: 220px; margin: 0 0 18px; }
.foot-logo { width: 170px; margin-bottom: 8px; }
.spacer { flex: 1; }
/* A long or emoji-heavy child name ends in … instead of widening the top bar. */
#switch { min-width: 0; max-width: min(40vw, 240px); }
#switch .switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.btn {
  border: 1px solid var(--line); background: var(--surface);
  padding: 8px 14px; border-radius: max(6px, calc(var(--radius) - 4px)); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; /* smallest comfortable tap target for kids on an iPad */
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 15px; }
.pill { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); white-space: nowrap; }
.pill.offline { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 104px; } /* room below for the Ask button */
h1, h2, h3 { letter-spacing: -.01em; line-height: 1.2; }
h1, h2 { color: var(--heading); font-weight: 800; }

/* Login */
.auth-wrap { max-width: 420px; margin: 8vh auto 0; }
/* Demo only: one-tap sample views on the sign-in screen and in the demo menu. */
.demo-view-list { display: grid; gap: 8px; }
.btn.demo-view { display: grid; gap: 2px; justify-items: start; text-align: left; width: 100%; height: auto; padding: 10px 12px; white-space: normal; }
.btn.demo-view .note { font-weight: 400; }
.demo-views { margin-top: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.note { color: var(--muted); font-size: 14px; }
.error { color: var(--warn); font-size: 14px; min-height: 1.2em; }

/* Sign-up, learner picker, parent area */
.btn.wide { width: 100%; justify-content: center; }
.btn.danger { color: var(--warn); }
.btn.danger:hover { border-color: var(--warn); }
.linkish { background: none; border: 0; padding: 2px 0; min-height: 24px; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: inherit; } /* 24px: WCAG 2.2 smallest target */
.notice { border-color: var(--warn); margin-bottom: 12px; }
.demo-code { background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 8px 10px; border-radius: 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 15px; min-height: 28px; }
.check input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.field select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.consent-box { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; font-size: 14px; max-height: 260px; overflow-y: auto; }
.consent-box p, .consent-box ul { margin: 6px 0; }
.age-band { border: 0; padding: 0; margin: 0 0 8px; display: flex; gap: 18px; flex-wrap: wrap; }
.age-band legend { font-size: 15px; margin-bottom: 6px; padding: 0; }
.age-band .check { margin: 0; }
.child-notice ul { padding-left: 20px; line-height: 1.5; }
.edit-child { margin-top: 8px; display: grid; gap: 8px; }
.wide-wrap { max-width: 560px; }
.legal { text-align: center; margin-top: 14px; }
.plain { list-style: none; padding: 0; margin: 0; }
.who { max-width: 720px; margin: 6vh auto 0; text-align: center; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 20px 0; }
.who-card { display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.who-card:hover { border-color: var(--accent); }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 28px; flex: none; }
.avatar.small { width: 38px; height: 38px; font-size: 17px; }
.avatar.tiny { width: 22px; height: 22px; font-size: 12px; }
.parent { max-width: 760px; margin: 0 auto; }
.row-between { display: flex; justify-content: space-between; gap: 8px; }
.kids li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kids li:last-child { border-bottom: 0; }
.grow { flex: 1; min-width: 0; }
code.ref { font-weight: 700; font-size: 15px; }

/* Catalog */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }
.tab { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.unit { margin-bottom: 26px; }
.unit h3 { margin: 0 0 10px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lesson-card { cursor: pointer; display: grid; gap: 6px; text-align: left; }
.lesson-card:hover { border-color: var(--accent); }
.lesson-card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; }
.lesson-card.locked { opacity: .55; cursor: default; }
.done-mark { color: var(--good); font-weight: 700; }

/* Player */
.player { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; } /* lessons read best at a book-like width */
/* A wide laptop or a sideways iPad: a bigger frame, so pictures and words
   sit side by side with room to spare. On a one-column board the words keep
   a book-like line length. */
@media (min-width: 1180px) and (min-height: 600px) {
  .player { max-width: 1000px; }
  .stage.board .col { max-width: calc(780px / var(--fit, 1)); } /* 780px on screen, zoomed or not */
}
.player-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.player-head h2 { margin: 0; font-size: 22px; }
/* The stage is a fixed frame, like a video: js/engine.js (fitFrame) measures
   the tallest the lesson ever gets and sets --frame-h once, so the frame does
   not grow as lines appear and the controls below it never jump. Lines fill
   it from the top; the caption has its own band at the bottom (--cap-h), so
   it never covers a line. */
.stage {
  position: relative; background: var(--board); border: 1px solid var(--line);
  border-radius: var(--radius); min-height: 420px; padding: 24px 28px 14px;
  height: var(--frame-h, auto); box-sizing: border-box;
  display: flex; flex-direction: column;
  overflow: hidden; box-shadow: var(--shadow);
}
.stage .scene-title { flex: none; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.stage > .cols { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
/* --fit: fitFrame draws a tall scene slightly smaller (not below 80%) on a
   laptop or tablet so it shows whole instead of scrolling inside the frame. */
.stage > .cols { zoom: var(--fit, 1); }
/* When a scene is taller than the frame and the board has scrolled, a soft
   shade at the top edge shows there are earlier lines above. */
.cols-shade { flex: none; position: relative; height: 0; z-index: 1; pointer-events: none; }
.cols-shade::after { content: ""; position: absolute; left: -28px; right: -28px; top: 0; height: 14px; opacity: 0; transition: opacity .2s;
  background: linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent), transparent); }
.stage.scrolled .cols-shade::after { opacity: 1; }
.stage .cols { display: grid; gap: 20px; }
.stage.split .cols { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .stage.split .cols { grid-template-columns: 1fr; } .stage { padding: 18px 16px 12px; } }
/* Phone held sideways: a shorter frame that fits under the top bar, and
   pictures beside the words again, since the screen is wide. */
@media (max-height: 500px) and (orientation: landscape) {
  .stage { min-height: 220px; }
  .stage.split .cols { grid-template-columns: 1fr 1fr; }
}
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.el { position: relative; transition: transform .45s ease, opacity .35s ease; }
.el.text { font-size: 19px; }
.el.math { font-size: 24px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px; line-height: 1.5; }
/* Lesson equations: centered like display math, but wrap after = + − on a
   narrow screen (js/engine.js tex), with the operator starting the new line. */
.math-flow { display: block; text-align: center; margin: .3em 0; }
/* A table too wide even after shrinking (js/engine.js fitWide) scrolls inside
   its box; a soft shadow at the edge shows there is more to swipe to. */
.stage .el.math, .stage .math-wide {
  background:
    linear-gradient(to right, var(--board) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--board) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) right / 10px 100% no-repeat scroll;
}
.math-flow > .katex { white-space: normal; }
.math-flow > .katex .base { margin: .1em 0; }
.math-wide { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; padding-bottom: 2px; }
.el.svg svg, .el.shape svg { width: 100%; max-width: 440px; height: auto; display: block; }
.c-ink { color: var(--ink); } .c-muted { color: var(--muted); } .c-accent { color: var(--accent); }
.c-good { color: var(--good); } .c-warn { color: var(--warn); }
.hl { background: var(--hl); border-radius: 6px; box-shadow: 0 0 0 3px var(--hl); transition: background .3s, box-shadow .3s; }
.struck { position: relative; opacity: .6; }
.struck::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%;
  height: 2.5px; background: var(--warn); transform-origin: left; animation: strike .45s ease forwards;
}
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.caption {
  flex: none; margin-top: 12px; min-height: var(--cap-h, 0px); box-sizing: border-box;
  background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--bg);
  border-radius: 10px; padding: 8px 12px; font-size: 15px; line-height: 1.4; text-align: center;
  transition: opacity .3s;
}
.caption:empty { opacity: 0; }
.ask { border: 2px solid var(--accent); border-radius: 12px; padding: 14px; background: var(--surface); }
.ask .choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ask .choice { max-width: 100%; }
.choice-text { min-width: 0; overflow-wrap: anywhere; }
.ask .choice.right { border-color: var(--good); color: var(--good); font-weight: 600; }
.ask .choice.wrong { border-color: var(--warn); color: var(--warn); }

.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controls input[type=range] { flex: 1; min-width: 140px; min-height: 44px; accent-color: var(--accent); }
.controls #play { min-width: 104px; justify-content: center; font-size: 17px; }
.controls #prev, .controls #next { min-width: 48px; justify-content: center; }
.voice-toggle input { width: 18px; height: 18px; margin: 0; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; min-width: 88px; text-align: right; }

/* Practice */
.practice { display: grid; gap: 10px; }
.practice .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.practice input { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); min-width: 120px; }
.ok { color: var(--good); } .bad { color: var(--warn); }

/* Assistant */
.assist-fab { position: fixed; right: 18px; bottom: 18px; z-index: 20; border-radius: 99px; padding: 12px 18px; box-shadow: var(--shadow); }
.assist {
  position: fixed; right: 18px; bottom: 76px; z-index: 20; width: min(380px, calc(100vw - 32px));
  max-height: min(560px, 70vh); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.assist header { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.assist .log { padding: 12px 14px; overflow-y: auto; display: grid; gap: 10px; flex: 1; }
.msg { padding: 8px 12px; border-radius: 12px; max-width: 92%; font-size: 15px; }
.msg.me { background: var(--accent); color: var(--surface); justify-self: end; }
.msg.bot { background: var(--bg); border: 1px solid var(--line); }
.assist form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.assist form input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }

.devices li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); max-width: calc(100vw - 32px);
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Gamified learner pages ---------- */
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.big { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.pill.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.game-chip { gap: 10px; font-weight: 700; }
.hello { margin: 4px 0 12px; }

.stats-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; align-items: center; padding: 16px 20px; margin-bottom: 16px; }
@media (max-width: 720px) { .stats-strip { grid-template-columns: 1fr 1fr; } .stats-strip .level-stat { grid-column: 1 / -1; } }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.level-stat { flex-direction: row; gap: 12px; text-align: left; align-items: center; }
.level-badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--surface);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--good))); box-shadow: var(--shadow); flex: none; }
.xpbar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 4px 0 2px; }
.xpbar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--good)); transition: width .6s ease; }
.flame-off { filter: grayscale(1); opacity: .6; }
.ring { display: block; }

.quick { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 18px; }
.quick-card, .action-card { display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; padding: 14px 16px; }
.quick-card:hover:not([disabled]), .action-card:hover:not([disabled]), .course-card:hover, .topic-node:hover { border-color: var(--accent); transform: translateY(-1px); }
.quick-card[disabled], .action-card[disabled] { opacity: .55; cursor: default; }
.quick-icon { font-size: 28px; flex: none; }
.continue-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; padding: 16px; margin-bottom: 14px; border: 2px solid var(--accent); }
.continue-card .grow { min-width: 0; }
.quest-card { margin: 14px 0; }
.reward-card { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.reward-dots { display: flex; gap: 6px; }
.reward-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.reward-dots i.on { background: var(--good); }
.habit-row input { width: 14em; max-width: 100%; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit; }
.built-from { margin-top: 0; }
.quests { margin: 8px 0 0; display: grid; gap: 6px; }
.quests li { display: flex; gap: 8px; align-items: center; }
.quests li.done .grow { text-decoration: line-through; opacity: .7; }
.course-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.course-card { display: grid; gap: 6px; text-align: left; cursor: pointer; transition: transform .15s; }
.course-card .meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* course map: a winding path of topic nodes */
.map-unit { margin: 22px 0; }
.map-unit h2 { font-size: 19px; }
.unit-num { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: block; }
.path { position: relative; display: grid; gap: 12px; padding-left: 4px; }
.path::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; border-left: 3px dashed var(--line); z-index: 0; }
.topic-node { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; width: min(520px, 100%); transition: transform .15s; }
.topic-node.left { justify-self: start; } .topic-node.right { justify-self: end; }
.topic-node.soon { opacity: .7; }
@media (max-width: 720px) { .path::before { left: 34px; } .topic-node.left, .topic-node.right { justify-self: stretch; } }
.boss-chip { font-size: 26px; flex: none; }
.boss-chip.won { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--good) 60%, transparent)); }

/* topic hub */
.topic-head { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.topic-head h1 { margin-bottom: 4px; }
.actions-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 12px 0 8px; }
.class-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; margin: 12px 0 0; }
.class-row input[type=date] { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line, #ccc); background: transparent; color: inherit; }
a.btn { text-decoration: none; }
.boss-card { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.big-face { font-size: 38px; }
.lesson-list { display: grid; gap: 8px; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.lesson-row.locked { opacity: .6; }
.lesson-row.next { border: 2px solid var(--accent); }
.lesson-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--bg); border: 2px solid var(--line); flex: none; }
.lesson-num.done { background: var(--good); border-color: var(--good); color: var(--surface); }
.skill-rows { display: grid; gap: 8px; }
.skill-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mastery { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.mastery i { width: 16px; height: 8px; border-radius: 3px; background: var(--line); }
.mastery i.on { background: var(--accent); }
.mastery.m4 i.on { background: var(--good); }
.mastery em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 6px; }
.after { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-color: var(--good); }

/* quiz */
.quiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 820px; margin: 0 auto; }
.quiz-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quiz-title { font-size: 17px; }
.dots { display: flex; gap: min(6px, 0.8vw); } /* 54 exam questions still fit a phone */
.dots span { flex: 1; height: 8px; border-radius: 99px; background: var(--line); transition: background .3s; }
.dots span.ok { background: var(--good); } .dots span.meh { background: color-mix(in srgb, var(--good) 45%, var(--line)); } .dots span.bad { background: var(--warn); }
.combo { font-weight: 800; color: var(--warn); }
.combo.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.35); } }
.qcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; position: relative; }
.qmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill.lvl1 { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.pill.lvl3 { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 82%, var(--ink)); } /* 4.5:1 on its tint */
.qprompt { font-size: 20px; line-height: 1.5; }
.qprompt .katex { font-size: 1.1em; }
.choices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.choice { justify-content: flex-start; text-align: left; padding: 12px 14px; font-size: 17px; min-height: 52px; }
.choice .key { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); font-weight: 700; font-size: 13px; flex: none; }
.choice.picked { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.choice.right, .order-item.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.choice.wrong { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); animation: shake .4s; }
.choice.dim { opacity: .55; }
.choice:disabled { cursor: default; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.typed { display: flex; gap: 8px; }
.answer-input { flex: 1; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); min-width: 0; }
.answer-input:focus { outline: none; border-color: var(--accent); }
.keypad { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.keypad .key { min-width: 44px; justify-content: center; font-size: 17px; }
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: step; }
.order-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); counter-increment: step; }
.order-item::before { content: counter(step); font-weight: 800; color: var(--muted); width: 18px; }
.order-text { flex: 1; }
.order-btns { display: flex; gap: 4px; }
.error-lines { display: grid; gap: 8px; }
.error-line { justify-content: flex-start; font-size: 18px; }
.error-line.picked { border-color: var(--accent); }
.error-line.wrong { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.graph-input svg { width: 100%; max-width: 380px; height: auto; display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--board); touch-action: manipulation; }
.qfeedback { min-height: 1.4em; font-size: 16px; padding: 0; border-radius: 12px; }
.qfeedback.ok, .qfeedback.bad, .qfeedback.hint { padding: 10px 14px; }
.qfeedback.ok { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--ink); }
.qfeedback.bad { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.qfeedback.hint { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.xp-pop { display: inline-block; font-weight: 800; color: var(--good); animation: pop-up .8s ease; }
@keyframes pop-up { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 60% { transform: translateY(-4px) scale(1.15); opacity: 1; } 100% { transform: none; } }
.qactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pulse { animation: pulse 1.6s ease 2; border-color: var(--accent); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } }

/* boss battle */
.boss-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 2px solid color-mix(in srgb, var(--warn) 45%, var(--line)); }
.boss-avatar { font-size: 46px; line-height: 1; }
.boss-avatar.hit { animation: hit .5s ease; }
.boss-avatar.defeated { filter: grayscale(1); transform: rotate(-20deg) scale(.8); transition: all .6s; }
@keyframes hit { 25% { transform: translateX(-8px) rotate(-8deg); filter: brightness(1.8); } 60% { transform: translateX(6px) rotate(6deg); } }
.boss-hp { flex: 1; position: relative; height: 22px; border-radius: 99px; background: var(--line); overflow: hidden; }
.boss-hp-fill { height: 100%; background: linear-gradient(90deg, var(--warn), #e11d48); transition: width .5s ease; }
.boss-hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--ink); }
.hearts { font-size: 22px; letter-spacing: 2px; }
.hearts.shake { animation: shake .45s; }
.boss-blurb { margin: 0; }

/* results, badges, trophies */
.results { display: grid; gap: 14px; text-align: center; }
.results h2 { margin: 6px 0 0; font-size: 26px; }
.result-stats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.result-stats > div { display: grid; }
.result-stats .big { font-size: 32px; }
.xp-text { color: var(--good); }
.results .skill-rows { text-align: left; }
.badge-grid, .new-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.badge { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 14px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.badge.earned { border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.badge.locked { opacity: .5; }
.badge-icon { font-size: 34px; }
.new-badges .badge { animation: pop-up .7s ease; }
.cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; max-width: 460px; }
.cal i { aspect-ratio: 1; border-radius: 5px; background: var(--line); }
.cal i.some { background: color-mix(in srgb, var(--good) 45%, var(--line)); }
.cal i.full { background: var(--good); }
.cal i.frozen { background: #7dd3fc; }
.ranks { display: flex; flex-wrap: wrap; gap: 8px; }
.ranks span { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.ranks span.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.league { list-style: none; padding: 8px 16px; display: grid; }
.league li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.league li:last-child { border-bottom: none; }
.league li.me { font-weight: 700; color: var(--accent); }
.league .rank { width: 30px; text-align: center; font-weight: 800; }

/* modal (step-by-step explanation) */
.modal-back { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, #000 45%, transparent); display: grid; place-items: center; padding: 16px; }
.modal { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px; display: grid; gap: 10px; }
.modal-head { display: flex; align-items: center; gap: 8px; }
.explain-modal .stage { min-height: 340px; }

.toast-badge, .toast-level { background: linear-gradient(135deg, var(--accent), var(--good)); color: #fff; font-weight: 700; }
.toast-streak { background: var(--warn); color: #fff; font-weight: 700; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 105vh; transform: translateX(40px) rotate(720deg); } }
#toasts { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
#toasts .toast { position: static; transform: none; animation: pop-up .5s ease; }

/* Course access and buying */
.course-card.not-mine { opacity: .75; }
.access-list li { padding: 4px 0; }
.buy-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; align-items: end; }
.buy-form .error, .buy-form button { grid-column: 1 / -1; }
.buy-form .field { margin: 0; min-width: 0; }
.buy-form select { width: 100%; min-width: 0; }
/* Plan configurator (parent area): pick Course, Grade or Family, then configure. */
.configurator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* WebKit: without this the plan cards pushed a phone page 90px sideways */
.plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.plan-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; margin: 0; }
.plan-opt input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.plan-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.price-sm { font-size: 20px; font-weight: 700; }
.configurator [hidden] { display: none !important; }
.addons summary { cursor: pointer; font-weight: 600; }
summary.note { cursor: pointer; padding: 6px 0; } /* a tappable height, not 21px */
.addon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin-top: 8px; max-height: 260px; overflow: auto; }
.addon-list label.included { opacity: .55; }
.addon-list label.included::after { content: ' (included)'; }
.quote:empty { display: none; }
.quote-lines { width: 100%; border-collapse: collapse; }
.quote-lines td { padding: 4px 0; border-top: 1px solid var(--line); vertical-align: top; }
.quote-lines td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.quote-lines td[colspan] { white-space: normal; text-align: left; padding-left: 0; } /* the note row is also a last child: it must wrap */
.quote-lines td:first-child { overflow-wrap: anywhere; } .quote-lines .pill { white-space: normal; } /* long discount names wrap on a phone */
.quote-lines tr.total td { font-weight: 700; font-size: 18px; }
.plan .bands { margin: 6px 0 0; padding: 0; list-style: none; }
.plan .bands li { padding: 2px 0; }
.orders li { padding: 8px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.orders li:first-child { border-top: 0; }
.stars { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; color: var(--warn, #b45309); }
.vote { margin-top: 8px; }
.field textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; resize: vertical; }

/* Campaign trials (js/trial.js): sign-up banner, course picker, plans, install help. */
.join-card { border-color: var(--accent); margin-bottom: 12px; }
.section-title { font-size: 18px; margin: 18px 0 8px; }
.choose h2 { font-size: 17px; margin: 20px 0 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pick { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.pick input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.pick:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.pick.off { opacity: .55; cursor: default; }
.pick-bar { position: sticky; bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; z-index: 5; }
.plans { max-width: 720px; margin: 0 auto; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 16px 0; }
.plan h2 { margin: 0 0 6px; font-size: 18px; }
.plan.best { border-color: var(--accent); }
.plan .price { font-size: 30px; font-weight: 700; }
.install-card ol { margin: 8px 0 0; padding-left: 20px; }
.install-card li { margin: 4px 0; }
.share-ico { display: inline-block; min-width: 1.4em; text-align: center; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* Parent progress report (js/report.js) */
.report h2 { margin-top: 24px; }
.rp-stats { display: grid; grid-template-columns: repeat(4, 1fr) 2fr; gap: 12px; align-items: end; }
.rp-stats .stat b { font-size: 26px; }
.rp-stats .stat b small { font-size: 14px; color: var(--muted); font-weight: 500; }
.rp-stats .stat span { font-size: 13px; color: var(--muted); }
.rp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 72px; }
.rp-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rp-bar { flex: 1; width: 100%; max-width: 22px; display: flex; align-items: flex-end; background: var(--line); border-radius: 4px; overflow: hidden; }
.rp-bar i { width: 100%; background: var(--accent); min-height: 0; }
.rp-day:not(.on) .rp-bar i { background: transparent; }
.rp-dl { font-size: 12px; color: var(--muted); }
.rp-talk { margin-top: 16px; border-left: 4px solid var(--accent); }
.rp-warn { border-left: 4px solid var(--warn); }
.rp-topic { border-bottom: 1px solid var(--line); padding: 8px 0; }
.rp-topic:last-of-type { border-bottom: 0; }
.rp-topic summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; }
.rp-topic summary::-webkit-details-marker { display: none; }
.rp-topic summary::before { content: '▸'; color: var(--muted); }
.rp-topic[open] summary::before { content: '▾'; }
.rp-email { margin-top: 8px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: 15px; }
.rp-email ul { padding-left: 20px; }
@media (max-width: 640px) {
  .rp-stats { grid-template-columns: repeat(2, 1fr); }
  .rp-week { grid-column: 1 / -1; }
}
/* Report a problem (js/quiz.js reportBox) */
.report-box { margin-top: 10px; padding: 10px 12px; }
.report-box .row-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill.preview { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--ink); }
.facts { max-width: 520px; margin: 12px auto; text-align: center; padding: 20px; }
.facts-top { display: flex; align-items: center; }
.facts-q { font-size: 3rem; font-weight: 700; margin: 24px 0 16px; }
.facts form { display: flex; gap: 10px; justify-content: center; }
.facts input { font: inherit; font-size: 1.8rem; width: 6ch; text-align: center; padding: 6px 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: inherit; }
.facts .note { min-height: 1.4em; margin-top: 10px; }

/* ---------- Look and feel (js/prefs.js) ----------
   Mode is data-theme. Looks (data-look) only change accent colors, corner
   roundness and surface tint; --good, --warn and --board never change, so
   right/try-again and the lesson board read the same in every look. */
:root[data-look="blocky"] { --accent: #3f7d20; --radius: 6px; --bg: #f5f6f0; }
:root[data-look="blocky"][data-theme="dark"] { --accent: #7cc34f; --bg: #12160f; --surface: #1c2218; --line: #33402b; }
:root[data-look="storm"] { --accent: #6a3fd1; --radius: 18px; --bg: #f6f5fb; }
:root[data-look="storm"][data-theme="dark"] { --accent: #a68bff; --bg: #110f22; --surface: #1b1836; --line: #312b5c; }
:root[data-look="arcade"] { --accent: #c21d8f; --radius: 10px; --bg: #f8f5f8; }
:root[data-look="arcade"][data-theme="dark"] { --accent: #ff4fd8; --bg: #0d0b1e; --surface: #18143a; --line: #2f2766; }

/* Text size: zoom keeps every px-based size in proportion. */
:root[data-size="l"] body { zoom: 1.12; }
:root[data-size="xl"] body { zoom: 1.25; }

/* Calm mode: the in-app version of the device's reduce-motion setting. */
:root[data-calm] *, :root[data-calm] *::before, :root[data-calm] *::after { animation: none !important; transition: none !important; }
:root[data-calm] .confetti { display: none; }

/* TEKS codes are for parents and teachers; shown from the Look sheet. */
.teks { display: none; }
:root[data-teks] .teks { display: inline; }
:root[data-teks] p.teks { display: block; }

/* the Look sheet */
.modal.sheet { width: min(520px, 100%); gap: 16px; padding: 18px; }
.sheet-sec { display: grid; gap: 8px; }
.sheet-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { min-height: 48px; border: 0; background: var(--surface); cursor: pointer; font-weight: 600; padding: 6px 8px; }
.seg button + button { border-left: 1.5px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--surface); }
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.look-tile { display: grid; gap: 6px; justify-items: center; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 700; }
.look-tile[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.look-tile:disabled { opacity: .55; cursor: default; }
.look-sw { width: 100%; aspect-ratio: 1.3; border-radius: 8px; }
.look-sw-blocky { border-radius: 3px; }
.sheet-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .2s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: left .2s; }
.switch:checked { background: var(--good); }
.switch:checked::after { left: 25px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* trophies: nearly-earned badges first */
.close-badges { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.close-badge { display: flex; gap: 12px; align-items: center; }
.close-badge .xpbar { display: block; margin-top: 6px; }
.more-badges summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; }

/* home cards built by the learner-loop work: one obvious next step */
.continue-card { border: 2px solid var(--accent); }
.continue-card .btn.primary { min-height: 52px; font-size: 17px; justify-content: center; }

/* Avatars (picked in the Look sheet) */
.avatar.animal { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-size: 38px; }
.avatar.small.animal { font-size: 22px; }
.avatar.tiny.animal { font-size: 14px; }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.avatar-pick { min-height: 48px; font-size: 26px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.avatar-pick[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Focus mode: learning only, no points, streaks, trophies or bosses.
   Default for grade 9 and up; anyone can switch it in the Look sheet. */
:root[data-focus] #gamechip, :root[data-focus] .stats-strip, :root[data-focus] .boss-card,
:root[data-focus] .xp-pop, :root[data-focus] .combo, :root[data-focus] .confetti,
:root[data-focus] .toast-badge, :root[data-focus] .toast-level, :root[data-focus] .toast-streak,
:root[data-focus] .quick-card[data-nav="#/me"], :root[data-focus] .quick-card[data-nav="#/group"] { display: none !important; }
.bench { padding: 10px 14px; margin: 12px 0 0; }
.bench-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* "Build it" answers (js/interact.js): shade parts, place a point. */
.build { margin: 8px 0; }
.build-model { width: 100%; max-width: 440px; touch-action: none; user-select: none; -webkit-user-select: none; }
.build-model text { pointer-events: none; }
.build-model [data-part] { fill: var(--board); cursor: pointer; transition: fill .12s; }
.build-model [data-part]:hover { fill: color-mix(in srgb, var(--accent) 14%, var(--board)); }
.build-model [data-part].on { fill: color-mix(in srgb, var(--accent) 50%, transparent); }
.build-model [data-part]:focus-visible { outline: none; stroke: var(--accent); stroke-width: 3; }
.build-model [data-part].want { stroke: var(--good); stroke-width: 3.5; }
.build-model.numberline { cursor: pointer; }
.build-model.numberline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ask.build-ask { max-width: 480px; }
.ask.build-ask .row { margin-top: 6px; }
.qmodel { margin: 6px 0 10px; }
.qmodel .model { width: 100%; max-width: 440px; }
.auto-hint { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mis-fix { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.mis-fix .row-wrap { margin-top: 8px; }
.b10-pic .build-model { max-width: 100%; touch-action: auto; }
.b10-ctl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0; }
.b10-row { display: flex; align-items: center; gap: 6px; }
.b10-row .btn { min-width: 40px; min-height: 40px; font-size: 1.2em; }
.b10-n { min-width: 1.6em; text-align: center; font-weight: 700; font-size: 1.1em; }
.b10-total { font-weight: 600; color: var(--muted); }
.rp-home ul.plain { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.rp-home li { margin: 4px 0; }

/* Kid UI: check mark on a right answer, read-aloud button, no-hearts boss, Now you try. */
.tick { position: absolute; right: 18px; top: 12px; font-size: 54px; font-weight: 800; color: var(--good); pointer-events: none; animation: tick-pop .9s ease forwards; }
@keyframes tick-pop { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.say-btn { margin-left: auto; font-size: 18px; min-width: 44px; min-height: 36px; }
.hearts.no-hearts { font-size: 22px; }
.now-try { position: absolute; inset: 0; z-index: 5; background: var(--board); padding: 24px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.now-try h3 { margin: 0; }
.now-try .prompt { font-size: 20px; }
.now-try .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.now-try input { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit; min-width: 140px; }
.now-try .fb.ok { color: var(--good); font-weight: 700; } .now-try .fb.bad { color: var(--warn); font-weight: 700; }
@media (max-width: 720px) { .now-try { padding: 18px 16px; } }

/* Practice test clock, pacing note, Words page */
.exam-timer { font-variant-numeric: tabular-nums; }
.exam-timer.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); }
.words-search { width: 100%; max-width: 420px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; margin-bottom: 12px; }
.words { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.word { display: grid; gap: 6px; padding: 14px 16px; }
.word-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 18px; }
.pill.tier-draft { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.pill.tier-core { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.pill.tier-exam-ready { background: color-mix(in srgb, var(--good) 16%, var(--surface)); }

/* Chromebook and touch check (npm run chromebook): every tap target at least 44 px,
   and the lesson controls stay on screen in a short Chromebook window. */
.tab, .say-btn { min-height: 44px; }
select { min-height: 44px; background-color: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
input[type=checkbox]:not(.switch) { width: 22px; height: 22px; }
label:has(> input[type=checkbox]:not(.switch)) { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
@media (max-height: 700px) { .stage { min-height: 320px; padding-bottom: 56px; } }
/* Learner control (js/learn.js): picture recaps, warm-up, test out, test day */
.lesson-num.skipped { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.recap-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); margin: 12px 0; }
.recap-card { display: grid; gap: 8px; padding: 12px; align-content: start; }
.recap-head, .recap-foot { display: flex; gap: 8px; align-items: center; }
.recap-foot { align-items: flex-start; }
.recap-points ul { margin: 4px 0 0; font-size: 14px; }
.recap-pic { border-radius: var(--radius); overflow: hidden; pointer-events: none; }
.recap-pic .stage { min-height: 0; padding: 12px 14px 12px; box-shadow: none; font-size: 14px; }
.recap-pic .stage .scene-title { display: none; }
.recap-pic .stage .caption { position: static; margin-top: 8px; }
.recap-pic .stage.split .cols { grid-template-columns: 1fr; }
.recap-pic svg { max-width: 100%; height: auto; }
.warmup-offer, .td-plan, .warmup-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.testout-rules { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.testout-rules ul li { margin: 4px 0; }
.retry-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.proof-bar { display: flex; gap: 4px; margin: 6px 0 10px; }
.proof-bar i { flex: 1; height: 12px; border-radius: 6px; background: var(--line); max-width: 48px; }
.proof-bar i.on { background: var(--good); }
.td-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.td-count { display: grid; text-align: center; min-width: 72px; }
.td-days { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.td-day { display: grid; place-items: center; width: 34px; }
.td-day b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); font-size: 13px; }
.td-day.today b { border-color: var(--accent); }
.td-day.done b { background: var(--good); border-color: var(--good); color: var(--surface); }
.td-day.test b { border-color: var(--warn); }
.td-day small { font-size: 11px; color: var(--muted); }
.td-plan.done { opacity: .85; }
.td-topics { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.td-topic { display: flex; gap: 10px; align-items: center; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 4px; border-radius: 8px; }
.td-topic:hover { background: var(--bg); }
.td-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 520px; }
.td-form label { display: grid; gap: 4px; }
.td-form select, .td-form input[type=date] { max-width: 100%; min-width: 0; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: inherit; }
.td-scope { border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.td-scope label { display: flex; gap: 6px; align-items: center; }
.recap-pic .stage .caption:empty { display: none; }
/* ---------- state + school district picker (js/school.js) ---------- */
.school-picker { display: grid; gap: 14px; }
.school-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .school-kinds { grid-template-columns: repeat(4, 1fr); } }
.sp-standards:empty { display: none; }
.school-kind {
  display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 10px; font: inherit; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.school-kind:hover { border-color: var(--accent); transform: translateY(-2px); }
.school-kind[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.school-kind .note { font-size: 13px; }
.sk-icon { font-size: 30px; line-height: 1; }
.school-more { display: grid; gap: 10px; }
.sp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-row .grow { flex: 1; min-width: 200px; }
.sp-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-areas .chip {
  font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.sp-areas .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.district-list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; margin: 0; padding: 2px; }
.district {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink);
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); cursor: pointer;
}
.district:hover, .district:focus-visible { border-color: var(--accent); }
.district .sk-icon { font-size: 22px; }
.district .grow, .sp-chosen-card .grow, .school-card .grow { flex: 1; min-width: 0; }
.sp-chosen-card, .school-card { display: flex; align-items: center; gap: 12px; }
.sp-chosen-card { padding: 12px; border: 2px solid var(--good); border-radius: var(--radius); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.sp-cal summary { cursor: pointer; }
.sp-privacy { margin: 0; }

.year-plan ul { display: grid; gap: 8px; margin: 8px 0; }
.year-plan .yp-row { display: flex; gap: 10px; align-items: flex-start; }
/* State standards page and course marks (js/app.js renderStandards, js/play.js stateBanner) */
.standards-page .faq details { padding: 6px 0; border-bottom: 1px solid var(--line); }
.standards-page .faq details:last-child { border-bottom: 0; }
.standards-page .faq summary { cursor: pointer; }
.std-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.std-table th, .std-table td { overflow-wrap: anywhere; text-align: left; padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.std-table .std-ev { display: block; color: var(--muted, #667); font-size: 12px; }
.standards-page h2 { margin-top: 24px; }
.sp-pathway { margin: 8px 0 12px; }
.sp-pw { display: block; padding: 4px 0; }
.pill.state-check { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); white-space: normal; }
.pill.state-moved { white-space: normal; }
.pill.state-extra { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); color: var(--ink); white-space: normal; }

/* Phones: keep the top bar on one line (it pushed the page wider than the
   screen, so every page scrolled sideways), and keep the floating helper
   button from covering the last lines of a page. */
@media (max-width: 520px) {
  .topbar { gap: 6px; padding: 8px 10px; }
  .topbar .brand > span:not(.logo) { display: none; }
  .topbar .btn { white-space: nowrap; flex-shrink: 0; }
  .topbar .btn.small { padding: 6px 9px; }
  .topbar .game-chip { gap: 6px; }
  #switch { max-width: 34vw; flex-shrink: 1; overflow: hidden; }
  .assist-fab { right: 12px; bottom: 12px; padding: 10px 14px; }
}
/* In a lesson the wide Ask pill sat on the caption and the controls: there it
   is a round button, and the controls keep clear of it. */
.assist-fab .fab-icon { display: none; }
body.in-lesson .assist-fab .fab-icon { display: inline; }
body.in-lesson .assist-fab { width: 52px; height: 52px; min-height: 52px; padding: 0; justify-content: center; font-size: 22px; }
body.in-lesson .assist-fab .fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1000px) { body.in-lesson .player > .controls { padding-right: 60px; } }

/* ---------- Public website: homepage, About, pricing (js/site.js) ----------
   A shared link opens here for anyone not signed in. Laptop and iPad first;
   the menu folds into "Menu" on narrow screens. */
.sitenav { display: flex; align-items: center; gap: 6px; }
.sitenav-links { display: flex; gap: 2px; margin-right: 6px; }
.sitenav-links a, .sitemenu-list a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 500; }
.sitenav-links a:hover, .sitemenu-list a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sitenav-links a.on, .sitemenu-list a.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sitenav a.btn { text-decoration: none; }
.sitemenu { display: none; position: relative; }
.sitemenu summary { list-style: none; cursor: pointer; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
.sitemenu summary::-webkit-details-marker { display: none; }
.sitemenu-list { position: absolute; right: 0; top: calc(100% + 6px); display: grid; min-width: 210px; padding: 6px; z-index: 20; }
.sitemenu-list a { padding: 12px; }
@media (max-width: 860px) { .sitenav-links { display: none; } .sitemenu { display: block; } }
@media (max-width: 560px) { body.site-page #theme { display: none; } .sitenav .btn.ghost.signed-out { display: none; } }

body.site-page main { max-width: none; padding: 0; }
.site { --wrap: 1120px; }
.site-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.site h1 { font-size: clamp(34px, 4.6vw, 54px); margin: 8px 0 16px; letter-spacing: -.03em; line-height: 1.06; }
.site h2 { font-size: clamp(26px, 3vw, 36px); margin: 4px 0 14px; letter-spacing: -.02em; }
.site h3 { font-size: 18px; margin: 0 0 6px; }
.site .accent { color: var(--accent); }
.site .eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.site .lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink); opacity: .86; margin: 0 0 18px; }
.site .narrow { max-width: 720px; }
.site .center { text-align: center; margin-left: auto; margin-right: auto; }
.site .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.site .cta-row.center { justify-content: center; }
.btn.lg { padding: 12px 22px; font-size: 17px; min-height: 50px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-sec { padding: clamp(44px, 7vw, 84px) 0; }
.site-sec.alt { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }

/* Hero */
.site-hero { padding: clamp(36px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-pic { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; display: grid; gap: 16px; }
.hp-q { font-size: 18px; text-align: center; }
.hp-q strong { color: var(--accent); }
.hp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-item { display: grid; justify-items: center; gap: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.hp-item svg { width: 100%; max-width: 170px; height: auto; }
.hp-wide svg { max-width: 100%; }
.hp-on { fill: var(--accent); }
.hp-on2 { fill: var(--good); }
.hp-off { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 1; }
.hp-cut { stroke: var(--surface); stroke-width: 2; }
.hp-bar .hp-cut, .why-pic .hp-cut { stroke: color-mix(in srgb, var(--accent) 45%, var(--surface)); stroke-width: 1.5; }
.hp-stroke { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.hp-pan { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
.hp-dash { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 5; }
.hp-arrow { stroke: var(--warn); stroke-width: 2.5; stroke-linecap: round; }
.hp-eq { font-size: 20px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.frac { display: inline-grid; text-align: center; line-height: 1.05; font-size: .85em; }
.frac span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px; }
/* The shading draws in: grid squares one by one, then the slice and the bar. */
.hp-grid .hp-on { opacity: 0; animation: hp-in .25s ease-out forwards; animation-delay: calc(var(--i) * 45ms + .3s); }
.hp-slice { transform-origin: 0 0; transform: scale(0); animation: hp-grow .7s cubic-bezier(.2, .8, .2, 1) 1.6s forwards; }
.hp-fill { transform-origin: 0 50%; transform: scaleX(0); animation: hp-grow .7s cubic-bezier(.2, .8, .2, 1) 2.1s forwards; transform-box: fill-box; }
@keyframes hp-in { to { opacity: 1; } }
@keyframes hp-grow { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hp-grid .hp-on, .hp-slice, .hp-fill { opacity: 1; transform: none; animation: none; } }
:root[data-calm] .hp-grid .hp-on, :root[data-calm] .hp-slice, :root[data-calm] .hp-fill { opacity: 1; transform: none; animation: none; }

/* School strip */
.site-band { padding: 0 0 8px; }
.school-row { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; }
.school-row .grow { flex: 1; min-width: 0; }
.school-row .note { margin: 2px 0 0; }
.school-ic { font-size: 28px; }
@media (max-width: 560px) { .school-row { flex-wrap: wrap; } .school-row .btn { width: 100%; justify-content: center; } }

/* Numbers */
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .fact-grid { grid-template-columns: 1fr 1fr; } }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 16px; text-align: center; display: grid; gap: 4px; }
.fact b { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.03em; color: var(--accent); line-height: 1.1; }
.fact span { color: var(--muted); font-size: 15px; }
.site .note.center { max-width: 760px; margin-top: 18px; }

/* Why visual */
.why-grid, .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 18px; }
.feat-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .feat-grid { grid-template-columns: 1fr; } }
.why, .feat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.why p, .feat p { margin: 0; color: var(--muted); }
.why-pic { height: 96px; display: grid; place-items: center; margin-bottom: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: 12px; }
.why-pic svg { height: 74px; width: auto; }

/* From first lesson to test day */
.journey { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
@media (max-width: 980px) { .journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .journey { grid-template-columns: 1fr; } }
.journey li { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.journey p { margin: 0; color: var(--muted); }
.journey-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--surface); }
.journey li:last-child { border-color: var(--accent); }

/* Course tiles */
.course-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 18px; }
@media (max-width: 980px) { .course-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .course-tiles { grid-template-columns: 1fr; } }
.ctile { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ctile-top { display: flex; gap: 12px; align-items: center; }
.ctile-top h3 { margin: 0; }
.ctile-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); flex: none; }
.ctile-n { font-size: 15px; color: var(--muted); }
.ctile-n b { color: var(--ink); font-size: 22px; }
.ctile-list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 15px; }
.ctile-list li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ctile-list .pill { font-size: 12px; }
.exam-explain summary { cursor: pointer; }
.exam-explain p { color: var(--muted); }

/* Founder */
.founder-row { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; }
.founder-row h2 { font-size: clamp(22px, 2.4vw, 30px); }
.founder-sm { width: 180px; height: 225px; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); background: var(--line); }
@media (max-width: 640px) { .founder-row { grid-template-columns: 1fr; } .founder-sm { width: 140px; height: 175px; } }
.cta-band { text-align: center; }

/* About */
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.about-side { position: sticky; top: 90px; text-align: left; }
.founder-lg { width: 100%; max-width: 300px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); background: var(--line); display: block; }
.site h1.about-name { font-size: 28px; margin: 18px 0 4px; }
.about-body { max-width: 720px; }
.about-body h2 { margin-top: 36px; font-size: clamp(24px, 2.6vw, 30px); }
.about-body h2:first-of-type { margin-top: 6px; }
.about-body p { font-size: 17px; line-height: 1.7; }
.about-body .disclaimer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-side { position: static; display: grid; grid-template-columns: 120px 1fr; gap: 0 16px; align-items: center; } .founder-lg { grid-row: span 2; max-width: 120px; border-radius: 16px; } .site .about-name { margin: 0; font-size: 22px; } }

/* Pricing */
.site-plans { margin: 24px 0; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .site-plans { grid-template-columns: 1fr; max-width: 560px; } }
.site-plans .plan { padding: 22px; border-radius: 18px; }
.site-plans .plan h2 { font-size: 22px; }
.site-plans .bands li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.site-plans .pr-label { display: grid; font-weight: 600; }
.site-plans .price { font-size: 26px; }
.site-plans .pr-price s { margin-left: 4px; }
.site-plans .pr-price .pill { margin-left: 4px; }
.card.founding { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--surface)); max-width: 720px; }
.site .faq { max-width: 760px; margin-top: 40px; }
.site .faq dt { font-weight: 700; margin-top: 16px; }
.site .faq dd { margin: 4px 0 0; color: var(--muted); }
.narrow-wrap { max-width: 760px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 36px 0 48px; background: var(--surface); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.foot-grid nav { display: grid; gap: 8px; align-content: start; }
.foot-grid a { color: var(--ink); text-decoration: none; }
.foot-grid a:hover { color: var(--accent); }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot > .site-wrap > .note { margin-top: 24px; font-size: 13px; }

/* Phones held upright: lessons are drawn for a wide frame, so ask for
   landscape. Only in lessons, only on phone widths (an iPad in portrait is
   768px and keeps its layout), and the student can wave it away. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  body.in-lesson:not(.rotate-ok) .rotate-hint { display: grid; place-items: center; position: fixed; inset: 0; z-index: 60; padding: 24px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(3px); }
  body.in-lesson:not(.rotate-ok) .assist-fab { visibility: hidden; }
}
.rotate-card { max-width: 320px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px 22px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); }
.rotate-card h2 { margin: 8px 0 6px; font-size: 22px; }
.rotate-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }
.rotate-phone { width: 72px; height: 72px; color: var(--accent); transform-origin: 50% 50%; animation: rotate-phone 2.4s ease-in-out infinite; }
@keyframes rotate-phone { 0%, 25% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; } }

/* ---------- PiSteps playful layer (js/site.js) ----------
   A few friendly colors, rounded headings and faint floating math doodles.
   Kept light: doodles sit behind the text at low opacity, and stop moving
   for reduced motion or the calm Look setting. */
/* Card colors follow the logo: blue, orange, coral, teal (plus one purple).
   Light values are 4.5:1 or better on white because some color text. */
.site { --c1: var(--accent); --c2: #b8500a; --c3: #c8374f; --c4: #0b7b78; --c5: #7c4ddb; --crust: #e2a54b; --filling: #c9473f; --filling2: #e0675d; }
:root[data-theme="dark"] .site { --c2: #fdb53a; --c3: #fd8a7a; --c4: #5fd0cb; --c5: #b69bff; --crust: #f0b964; --filling: #e0675d; --filling2: #f08c82; }
/* The main "Start free" buttons wear the stair gradient from the logo. */
.site .btn.primary.lg { background: var(--grad-cta); border-color: transparent; color: var(--cta-ink); font-weight: 800; }
.site .btn.primary.lg:hover { border-color: var(--brand-navy); }
.site h1, .site h2, .site h3, .site .fact b, .about-name { font-family: var(--font); }
.playful { position: relative; overflow: hidden; isolation: isolate; }
.playful > .site-wrap { position: relative; z-index: 1; }
.doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dd { position: absolute; font-weight: 800; line-height: 1; opacity: .24; transform: rotate(var(--r)); animation: dd-float 9s ease-in-out infinite; animation-delay: var(--d); user-select: none; font-family: var(--font); }
:root[data-theme="dark"] .dd { opacity: .26; }
.cta-band .lead { margin-left: auto; margin-right: auto; }
.dd.c1 { color: var(--c1); } .dd.c2 { color: var(--c2); } .dd.c3 { color: var(--c3); } .dd.c4 { color: var(--c4); } .dd.c5 { color: var(--c5); }
@keyframes dd-float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-10px) rotate(calc(var(--r) + 6deg)); } }
@media (prefers-reduced-motion: reduce) { .dd { animation: none; } }
:root[data-calm] .dd { animation: none; }
@media (max-width: 760px) { .dd { opacity: .1; } .dd:nth-child(n+5) { display: none; } }
/* Colors that change from card to card, so pages feel friendly, not corporate. */
.fact:nth-child(2) b { color: var(--c4); } .fact:nth-child(3) b { color: var(--c5); } .fact:nth-child(4) b { color: var(--c2); }
.fact { border-radius: 22px; border-width: 2px; border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.journey li:nth-child(2) .journey-n { background: var(--c4); } .journey li:nth-child(3) .journey-n { background: var(--c5); }
.journey li:nth-child(4) .journey-n { background: var(--c2); } .journey li:nth-child(5) .journey-n { background: var(--c3); }
:root[data-theme="dark"] .journey-n { color: #0b1326; }
.ctile:nth-child(6n+2) .ctile-ic { background: color-mix(in srgb, var(--c4) 16%, var(--surface)); }
.ctile:nth-child(6n+3) .ctile-ic { background: color-mix(in srgb, var(--c5) 16%, var(--surface)); }
.ctile:nth-child(6n+4) .ctile-ic { background: color-mix(in srgb, var(--c2) 18%, var(--surface)); }
.ctile:nth-child(6n+5) .ctile-ic { background: color-mix(in srgb, var(--c3) 14%, var(--surface)); }
.why, .feat, .journey li, .ctile { border-radius: 22px; }
.why:hover, .ctile:hover, .feat:hover { transform: translateY(-2px); transition: transform .2s; }

/* The pie mark */
.pie-svg { width: 100%; height: auto; display: block; }
.pie-crust { fill: var(--crust); }
.pie-fill { fill: var(--filling); }
.pie-fill2 { fill: var(--filling2); }
.pie-cut { stroke: var(--crust); stroke-width: 2.5; }
.pie-slice { transform: translate(8px, 9px); }
.pie-pi { font: 800 30px var(--font); fill: #fff; }
.name-band { background: color-mix(in srgb, var(--c2) 9%, var(--bg)); }
.name-row { display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: center; }
.name-pie { width: 150px; transition: transform .6s; }
.name-pie:hover { transform: rotate(-12deg); }
@media (max-width: 640px) { .name-row { grid-template-columns: 1fr; } .name-pie { width: 110px; } }

/* About us: pi you can see */
.about-us h2 { margin-top: 40px; }
.about-us p { font-size: 17px; line-height: 1.7; }
.pi-fig { margin: 18px 0 22px; background: var(--surface); border: 2px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 22px; padding: 18px; }
.pi-fig figcaption { color: var(--muted); font-size: 15px; margin-top: 8px; }
.pi-roll { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.pr-ground { stroke: var(--line); stroke-width: 2; }
.pr-tick { stroke: var(--muted); stroke-width: 2; }
.pr-lab { font: 600 14px var(--font); fill: var(--muted); }
.pr-pi { fill: var(--c3); font-weight: 800; font-size: 16px; }
.pr-trail { stroke: var(--c3); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--len) 1000; stroke-dashoffset: var(--len); animation: pr-draw 4s ease-in-out infinite; }
.pr-wheel { animation: pr-move 4s ease-in-out infinite; }
.pr-spin { animation: pr-turn 4s ease-in-out infinite; }
.pr-circle { fill: color-mix(in srgb, var(--c1) 14%, var(--surface)); stroke: var(--c1); stroke-width: 3; }
.pr-diam { stroke: var(--c1); stroke-width: 2; stroke-dasharray: 4 4; }
.pr-dot { fill: var(--c3); }
@keyframes pr-draw { 0%, 10% { stroke-dashoffset: var(--len); } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes pr-move { 0%, 10% { transform: translateX(0); } 70%, 100% { transform: translateX(var(--len)); } }
@keyframes pr-turn { 0%, 10% { transform: rotate(0); } 70%, 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-trail { animation: none; stroke-dashoffset: 0; } .pr-wheel, .pr-spin { animation: none; } }
:root[data-calm] .pr-trail { animation: none; stroke-dashoffset: 0; }
:root[data-calm] .pr-wheel, :root[data-calm] .pr-spin { animation: none; }
.pi-squeeze-fig { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
@media (max-width: 600px) { .pi-squeeze-fig { grid-template-columns: 1fr; } .pi-squeeze { max-width: 200px; } }
.pi-squeeze { width: 100%; height: auto; }
.ps-out { fill: none; stroke: var(--c2); stroke-width: 3; }
.ps-circle { fill: color-mix(in srgb, var(--c1) 10%, var(--surface)); stroke: var(--c1); stroke-width: 3; }
.ps-in { fill: none; stroke: var(--c4); stroke-width: 3; stroke-linejoin: round; }
.ps-key { margin: 0 0 8px; font-size: 15px !important; }
.sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.sw-in { background: var(--c4); } .sw-out { background: var(--c2); }
.ps-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 760px) { .ps-steps { grid-template-columns: 1fr 1fr; } }
.ps-steps li { display: grid; text-align: center; background: color-mix(in srgb, var(--c4) 10%, var(--surface)); border-radius: 14px; padding: 8px; font-size: 14px; color: var(--muted); }
.ps-steps b { font-size: 20px; color: var(--ink); }
.pie-card { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; margin-top: 40px; padding: 24px; border-radius: 24px; border: 2px dashed color-mix(in srgb, var(--c2) 60%, transparent); background: color-mix(in srgb, var(--c2) 7%, var(--surface)); }
.pie-card h2 { margin-top: 0 !important; }
@media (max-width: 600px) { .pie-card { grid-template-columns: 1fr; } .pie-card-pic { width: 90px; } }
.site p.about-name { font-size: 26px; font-weight: 800; margin: 16px 0 4px; letter-spacing: -.02em; }
.admin-title { display: flex; align-items: center; gap: 10px; }
.admin-mark { width: 40px; height: 30px; flex: none; }