/* Times Tables Games: one stylesheet for every screen.

   The palette and fonts match the worksheet site so the two read as one
   family of tools. Fonts are served from fonts/, not a font service, so the
   page contacts no other site. Licenses: fonts/OFL-*.txt. */

@font-face { font-family: "Andika"; font-weight: 400; font-display: swap; src: url("fonts/andika-400.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 700; font-display: swap; src: url("fonts/andika-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2"); }

:root {
  --desk: #e7ecf2;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --text: #17202b;
  --muted: #586473;
  --line: #c9d2dd;
  --accent: #f5c13e;        /* pencil yellow, the brand color */
  --accent-ink: #2a2206;
  --blue: #2c5ba6;
  --blue-soft: #e3ecfa;
  --good: #1a7f45;        /* 5:1 on white, so the green text passes AA */
  --good-soft: #e1f4e8;
  --bad: #b42318;
  --bad-soft: #fde8e6;
  --level-new: #d7dee7;
  --level-learning: #f5c13e;
  --level-known: #7cc3f0;
  --level-fast: #2fa866;
  --dog-evening: #f3c9a6;   /* the sky on an evening street */
  --dog-road: #8f98a5;      /* the road, darker than the line color so what lies on it shows */
  --dog-wall: #ffffff;      /* house walls, lighter than the sky behind them */
  --font-num: "Andika", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(23, 32, 43, 0.06), 0 8px 24px rgba(23, 32, 43, 0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desk: #0f141b;
    --surface: #161d26;
    --surface-2: #1d2631;
    --text: #e4e9ef;
    --muted: #98a4b2;
    --line: #2b3542;
    --blue: #8eb2ef;
    --blue-soft: #1d2b42;
    --good: #5fd48f;
    --good-soft: #143322;
    --bad: #ff8f86;
    --bad-soft: #3b1a17;
    --level-new: #2b3542;
    --dog-evening: #4a3340;
    --dog-road: #3a4452;
    --dog-wall: #2a3340;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk);
  color: var(--text);
  font: 17px/1.45 var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
a.btn { text-decoration: none; color: inherit; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Frame ---------- */
.frame { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-num); font-weight: 700; font-size: 1.15rem;
  text-decoration: none; color: inherit;
}
.topbar .brand svg { width: 28px; height: 28px; flex: none; }
.topbar .spacer { flex: 1; }
main#screen {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: 8px 16px 40px;
  display: flex; flex-direction: column; gap: 20px;
}
footer.site {
  margin-top: auto; padding: 24px 16px; text-align: center;
  color: var(--muted); font-size: 0.85rem;
}
footer.site a { color: inherit; }

h1 { font-family: var(--font-num); font-size: 1.9rem; line-height: 1.15; margin: 8px 0 0; text-wrap: balance; }
h2 { font-size: 1.1rem; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.lead { font-size: 1.05rem; color: var(--muted); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font-weight: 700;
  transition: transform 0.08s, background-color 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.big { min-height: 60px; font-size: 1.15rem; }
/* A link that leads nowhere yet (no tables picked) looks and acts inert. */
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn:focus-visible, .table-pick:focus-visible, .key:focus-visible, a:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { flex: 1 1 160px; }

/* ---------- Home: table picker ---------- */
.table-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px;
}
.table-pick {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-num); font-size: 1.7rem; font-weight: 700;
  transition: transform 0.08s, border-color 0.15s, background-color 0.15s;
}
.table-pick:active { transform: scale(0.96); }
.table-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.table-pick .bar {
  width: 70%; height: 6px; border-radius: 3px; background: var(--level-new); overflow: hidden;
}
.table-pick .bar i { display: block; height: 100%; background: var(--level-fast); }
.table-pick[aria-pressed="true"] .bar { background: rgba(42, 34, 6, 0.18); }
.table-pick[aria-pressed="true"] .bar i { background: var(--accent-ink); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets .btn { min-height: 38px; padding: 6px 14px; font-weight: 400; font-size: 0.95rem; }

/* ---------- Settings: switch rows ---------- */
.settings { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Label and hint on the left, the control on the right. The row wraps, so
   on a phone a wide control (three pills) drops under the words instead of
   squeezing them into a column or running off the edge. */
.switch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; cursor: pointer; }
.switch-row .text { flex: 1 1 11em; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.switch-row .hint { font-size: 0.85rem; color: var(--muted); }
/* The switch: a pill with a knob that slides right when on. Color plus
   position, so it reads in grayscale and in dark mode. */
.switch {
  position: relative; flex: none;
  width: 52px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--level-new);
  transition: background-color 0.15s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.switch[aria-checked="true"] { background: var(--good); border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
/* A few joined choices, one on: the same row shape as a switch. */
.choice-group { display: inline-flex; flex: 0 1 auto; margin-left: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.choice-pill {
  min-height: 38px; padding: 4px 12px; border: 0;
  background: var(--surface-2); font-weight: 700; font-size: 0.95rem;
}
.choice-pill + .choice-pill { border-left: 1px solid var(--line); }
.choice-pill[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.choice-pill:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
/* The typed range, shown under "Multiply by" when Other is chosen. */
.range-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-left: 4px; }
.range-inputs label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; color: var(--muted); }
.range-inputs input {
  width: 4.2em; min-height: 38px; padding: 4px 8px;
  font: inherit; font-family: var(--font-num); font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.range-inputs input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.range-inputs .hint { flex-basis: 100%; color: var(--bad); font-size: 0.85rem; min-height: 1.2em; }

/* ---------- Quiz ---------- */
.quiz { gap: 18px; }
.quiz-head { display: flex; align-items: center; gap: 12px; }
.quiz-head .progress { flex: 1; height: 8px; border-radius: 4px; background: var(--level-new); overflow: hidden; }
.quiz-head .progress i { display: block; height: 100%; background: var(--blue); transition: width 0.2s; }
.quiz-head .count, .quiz-head .clock { font-family: var(--font-num); font-weight: 700; min-width: 3.5em; text-align: right; }
.quiz-head .clock.low { color: var(--bad); }

.question {
  display: flex; align-items: center; justify-content: center; gap: 0.3em;
  font-family: var(--font-num); font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 4.5rem); line-height: 1.1;
  min-height: 1.3em;
}
.question .sign { color: var(--muted); font-weight: 400; }
.question .entry {
  min-width: 1.6em; padding: 0 0.1em;
  border-bottom: 0.08em solid var(--line);
  text-align: center; color: var(--blue);
  transition: border-color 0.15s, color 0.15s;
}
.question .entry.empty::after { content: "?"; color: var(--level-new); }
.question.right .entry { color: var(--good); border-color: var(--good); }
.question.wrong .entry { color: var(--bad); border-color: var(--bad); }
.feedback { min-height: 1.6em; text-align: center; font-weight: 700; }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.feedback .num { font-size: 1.2em; }

/* On-screen number pad: for phones and tablets, and anyone who likes it.
   Physical keyboards work the same way; the pad mirrors what they type. */
.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-width: 320px; width: 100%; margin: 0 auto;
}
.key {
  min-height: 56px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--font-num); font-size: 1.5rem; font-weight: 700;
  transition: transform 0.06s, background-color 0.1s;
}
.key:active { transform: scale(0.95); background: var(--blue-soft); }
.key.go { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.key.back { font-family: var(--font-ui); font-size: 1rem; font-weight: 400; }

/* ---------- Speed test ---------- */
.settings.first { border-top: 0; padding-top: 0; }
/* The ghost of the best run: fill is this run, the end marker is the best. */
.ghost { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.ghost-bar { flex: 1; position: relative; height: 6px; border-radius: 3px; background: var(--level-new); }
.ghost-bar i { display: block; height: 100%; max-width: 100%; border-radius: 3px; background: var(--level-known); transition: width 0.2s; }
.ghost-bar .mark { position: absolute; right: 0; top: -4px; width: 3px; height: 14px; border-radius: 2px; background: var(--muted); }
.ghost.beaten { color: var(--good); font-weight: 700; }
.ghost.beaten .ghost-bar i { background: var(--good); }
/* Ten seconds a question: a thin bar under the question that drains. */
.cap { width: 100%; max-width: 320px; height: 4px; margin: -6px auto 0; border-radius: 2px; background: var(--level-new); overflow: hidden; }
.cap i { display: block; height: 100%; background: var(--accent); transition: width 0.1s linear; }
.best-note { text-align: center; font-weight: 700; color: var(--good); }

/* Four answers to pick from, in place of the keypad. The small corner
   number is the key that picks it, shown only where a keyboard is likely. */
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; }
.choice {
  position: relative; min-height: 64px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--surface-2);
  font-family: var(--font-num); font-size: 1.6rem; font-weight: 700;
  transition: transform 0.06s, border-color 0.15s, background-color 0.15s;
}
.choice:active { transform: scale(0.97); }
.choice.picked { border-color: var(--blue); background: var(--blue-soft); }
.choice.right { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.choice:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (min-width: 600px) {
  .choice::after { content: attr(data-key); position: absolute; top: 4px; left: 8px; font-size: 0.7rem; font-weight: 400; color: var(--muted); }
}

/* ---------- Learn a table ---------- */
/* The step strip sits where the progress bar would: five names, the done
   ones green, the current one blue and bold. */
.steps { flex: 1; display: flex; gap: 4px; min-width: 0; }
.step {
  flex: 1; min-width: 0; padding: 4px 2px 6px; text-align: center;
  font-size: 0.78rem; color: var(--muted);
  border-bottom: 4px solid var(--level-new);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step.done { border-color: var(--level-fast); color: var(--text); }
.step[aria-current="step"] { border-color: var(--blue); color: var(--text); font-weight: 700; }
.learn-body { display: flex; flex-direction: column; gap: 16px; }
.learn-done { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.learn-done .btn { min-width: 220px; }
/* Stage 1: the table laid out to read. */
.table-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px;
  font-family: var(--font-num); font-size: 1.45rem; font-weight: 700;
}
.table-list .row { display: flex; justify-content: center; gap: 0.3em; font-variant-numeric: tabular-nums; }
.table-list .sign { color: var(--muted); font-weight: 400; }
.table-list .ans { color: var(--blue); }
/* Stage 3: questions down the left, answers down the right. */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; max-width: 480px; width: 100%; margin: 0 auto; }
.match-item {
  min-height: 48px; padding: 6px 10px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--surface-2);
  font-family: var(--font-num); font-size: 1.25rem; font-weight: 700;
  transition: border-color 0.15s, background-color 0.15s;
}
.match-item.selected { border-color: var(--blue); background: var(--blue-soft); }
.match-item.wrong { border-color: var(--bad); background: var(--bad-soft); }
.match-item.locked { border-color: var(--good); background: var(--good-soft); color: var(--good); cursor: default; }
.match-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* A tick in the corner of a tile whose check is done. */
.table-pick.learned::after {
  content: "✓"; position: absolute; top: 4px; right: 7px;
  font-size: 0.85rem; line-height: 1; color: var(--level-fast);
}
.table-pick[aria-pressed="true"].learned::after { color: var(--accent-ink); }

/* ---------- Diplomas and the certificate ---------- */
.diploma-card h2 { font-family: var(--font-num); font-size: 1.3rem; }
.diploma-card .earned { color: var(--good); font-weight: 700; }
.name-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.name-field input {
  font: inherit; font-weight: 400; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--muted); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
}
.name-field input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
/* The certificate is paper: white with dark ink whatever the color scheme,
   so the screen shows what the printer will. Sized like the printed sheet
   (7.5 in by 9.5 in, inside letter margins) and scaled to the screen. */
.certificate-wrap { display: flex; justify-content: center; }
.certificate {
  --paper: #ffffff; --ink: #17202b; --ink-soft: #586473;
  box-sizing: border-box; width: 100%; max-width: 7.5in; aspect-ratio: 7.5 / 9.5;
  background: var(--paper); color: var(--ink);
  border: 3px double var(--ink); outline: 8px solid var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(14px, 6%, 56px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55em;
  text-align: center; font-family: var(--font-ui);
  font-size: clamp(0.85rem, 2.4vw, 1.1rem); line-height: 1.4;
}
.certificate p, .certificate h2 { margin: 0; }
/* Auto margins on the brand and the footer line hold them at the top and
   bottom of the sheet, with everything else centered between. */
.cert-brand { display: flex; align-items: center; gap: 8px; margin-bottom: auto; font-family: var(--font-num); font-weight: 700; }
.cert-brand svg { width: 1.8em; height: 1.8em; }
.cert-kicker { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8em; color: var(--ink-soft); }
.cert-title { font-family: var(--font-num); font-size: 2.4em; line-height: 1.1; }
/* A border, not a background, so it prints even with "background graphics" off. */
.cert-rule { width: 28%; height: 0; border-top: 0.3em solid var(--accent); border-radius: 0.15em; }
.cert-name {
  min-width: 60%; max-width: 100%; min-height: 1.5em; padding: 0.1em 0.5em;
  overflow-wrap: anywhere;
  font-size: 2em; font-weight: 700; line-height: 1.3;
  border-bottom: 0.08em solid var(--ink);
}
.cert-date { color: var(--ink-soft); }
.cert-sign { margin-top: 1.6em; width: 55%; padding-top: 0.3em; border-top: 1px solid var(--ink); font-size: 0.8em; color: var(--ink-soft); }
.certificate .cert-foot { margin-top: auto; font-size: 0.7em; color: var(--ink-soft); }

/* ---------- Dog to the park ---------- */
/* The scene strip sits between the quiz head and the question. The world
   inside is drawn in fixed units (240 tall) and scaled to the strip, so the
   same numbers work on a phone and a wide screen. Only transforms animate. */
.dog-scene { --k: 0.75; position: relative; height: 180px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(var(--blue-soft), var(--surface) 75%); cursor: pointer; }
.dog-scene[data-light="evening"] { background: linear-gradient(var(--dog-evening), var(--surface) 75%); }
.dog-world { position: absolute; left: 0; bottom: 0; width: calc(100% / var(--k)); height: 240px; transform: scale(var(--k)); transform-origin: 0 100%; }
.dog-world .layer { position: absolute; left: 0; top: 0; }
.dog-world .dog-leo { position: absolute; left: var(--dog-x, 28%); bottom: 12px; width: 100px; height: 70px; overflow: visible; transform-origin: 50% 100%; }
.dog-world .pal { position: absolute; left: calc(var(--dog-x, 28%) - 56px); bottom: 14px; width: 40px; height: 36px; display: none; }
.dog-world .pal.shown { display: block; }
.dog-leo * { transform-box: fill-box; }
.dog-leo .body { transform-origin: 50% 55%; }
.dog-leo .leg { transform-origin: 50% 5%; }
.dog-leo .tail { transform-origin: 100% 100%; }
.dog-leo .ear { transform-origin: 80% 0; }
.dog-leo .head { transform-origin: 20% 90%; }
.dog-leo .eye, .dog-leo .halo, .dog-leo .spark { transform-origin: 50% 50%; }
.dog-leo .halo, .dog-leo .spark, .dog-leo .smile { opacity: 0; }
.dog-leo.happy .smile { opacity: 1; }
.dog-leo.happy .eye { opacity: 0; }
/* Coats: three looks through four classes on the dog's shapes. */
[data-coat="blonde"] .coat { fill: #e8c87a; } [data-coat="blonde"] .coat-d { fill: #c9a45a; } [data-coat="blonde"] .coat-l { fill: #f9ecc9; } [data-coat="blonde"] .coat-s { stroke: #e8c87a; }
[data-coat="brown"] .coat { fill: #c58b55; } [data-coat="brown"] .coat-d { fill: #a46f3f; } [data-coat="brown"] .coat-l { fill: #f1dcc0; } [data-coat="brown"] .coat-s { stroke: #c58b55; }
[data-coat="grey"] .coat { fill: #9aa3ad; } [data-coat="grey"] .coat-d { fill: #717b86; } [data-coat="grey"] .coat-l { fill: #dfe4ea; } [data-coat="grey"] .coat-s { stroke: #9aa3ad; }
/* Theme classes the art uses, so every drawing follows light and dark mode. */
.f-sur { fill: var(--surface); } .f-sur2 { fill: var(--surface-2); } .f-line { fill: var(--line); } .f-muted { fill: var(--muted); }
.f-text { fill: var(--text); } .f-acc { fill: var(--accent); } .f-blue { fill: var(--blue); } .f-bsoft { fill: var(--blue-soft); }
.f-good { fill: var(--good); } .f-gsoft { fill: var(--good-soft); } .f-bad { fill: var(--bad); }
.s-line { stroke: var(--line); } .s-blue { stroke: var(--blue); } .s-sur { stroke: var(--surface); } .s-text { stroke: var(--text); } .s-muted { stroke: var(--muted); }
.f-ink { fill: var(--accent-ink); } .f-road { fill: var(--dog-road); } .f-wall { fill: var(--dog-wall); }
.dog-world text { font-family: var(--font-num); }
/* Two lines are reserved so the question below does not jump between states. */
.dog-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 2.9em; font-weight: 700; }
.dog-status .words { flex: 1 1 auto; min-width: 0; }
.paws { display: inline-flex; gap: 5px; flex: none; }
.paw { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.paw.on { background: var(--good); border-color: var(--good); }
.dog-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.dog-choice .btn { flex: 1 1 140px; }
.dog-preview { width: 120px; height: 84px; margin: 0 auto; }
.dog-preview svg { width: 100%; height: 100%; overflow: visible; }
.dog-name-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dog-name, .dog-name-typed { font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.dog-name-typed { width: 11em; }
.dog-street { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.dog-street:first-of-type { border-top: 0; }
.dog-street .text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 14em; }
.dog-street .name { font-weight: 700; }
.dog-street .hint { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 480px) { .dog-scene { --k: 0.62; height: 150px; } }
@media (min-width: 720px) { .dog-scene { --k: 0.85; height: 204px; } }
/* A short screen (most phones held upright) keeps the keypad in reach: a lower strip and tighter gaps. */
@media (max-height: 720px) {
  .dog-scene { --k: 0.5; height: 120px; }
  .dog-run main#screen { gap: 10px; padding-top: 0; }
  .dog-run main#screen > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* still read aloud */
  .dog-run .quiz { gap: 10px; }
  .dog-run .key { min-height: 44px; }
  .dog-run .question { font-size: clamp(2.2rem, 9vw, 3.4rem); }
}

/* ---------- Results ---------- */
.stars { font-size: 2.4rem; letter-spacing: 0.1em; line-height: 1; }
.stars .off { color: var(--level-new); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat {
  background: var(--surface-2); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.stat .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat .value { font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; }
.fact-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fact-chip {
  font-family: var(--font-num); font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bad-soft); color: var(--bad);
}
.fact-chip.slow { background: var(--blue-soft); color: var(--blue); }

/* ---------- Chart ---------- */
.chart { overflow-x: auto; }
.chart table { border-collapse: collapse; font-family: var(--font-num); font-variant-numeric: tabular-nums; min-width: 100%; }
.chart th, .chart td { text-align: center; padding: 6px 4px; min-width: 2.4em; border: 1px solid var(--line); }
.chart th { background: var(--surface-2); font-weight: 700; }
.chart td { cursor: default; }
.chart td.hl, .chart th.hl { background: var(--blue-soft); }
.chart td.pick { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chart td[data-level="fast"] { color: var(--level-fast); font-weight: 700; }
.chart td[data-level="known"] { color: var(--blue); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.9rem; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; background: var(--sw); }

/* ---------- Prose pages (privacy) ---------- */
/* One readable column instead of the app's cards. */
.doc { width: 100%; max-width: 44rem; margin: 0 auto; padding: 16px 16px 48px; line-height: 1.6; }
.doc h1 { margin-bottom: 6px; }
.doc .lede { color: var(--muted); margin-bottom: 24px; }
.doc h2 { font-family: var(--font-num); font-size: 1.3rem; margin: 0; }
.doc h3 { font-size: 1rem; margin: 28px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 1.3em; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--blue); }
.doc code {
  font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere;
}
/* The short version, set apart so a parent or teacher can stop there. */
.doc .short { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px 8px; margin-bottom: 20px; }
.doc .meta { color: var(--muted); font-size: 0.88rem; }
/* ---------- Print: the certificate alone, one letter page ----------
   The same path as the worksheet site: letter paper with 0.5 in margins,
   the sheet 7.5 in wide and well inside the 10 in of height, so phones and
   iPhone Safari's footer still keep it to one page. Fonts are this site's
   own files, so printing needs nothing from anywhere else. */
@media print {
  @page { size: letter; margin: 0.5in; }
  html, body { background: #fff; color: #000; }
  .topbar, footer.site, .no-print { display: none !important; }
  main#screen { display: block; max-width: none; padding: 0; }
  .doc { max-width: none; padding: 0; }
  .doc a { color: inherit; }
  .certificate-wrap { display: block; }
  .certificate {
    width: 7.5in; max-width: none; height: 9.25in; aspect-ratio: auto;
    margin: 0 auto; padding: 0.5in; font-size: 13pt;
    box-shadow: none; outline: none;
    break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 480px) {
  .card { padding: 16px; }
  .table-grid { grid-template-columns: repeat(4, 1fr); }
  /* Narrow screens: only the current step keeps its name, and most of the
     room; the rest are bars. */
  .step:not([aria-current]) { font-size: 0; }
  .step[aria-current="step"] { flex: 4 1 auto; }
  .match { gap: 6px 10px; }
  /* Two quiet links in the top bar: tighter padding so the brand stays on one line. */
  .topbar { gap: 6px; }
  .topbar .brand { white-space: nowrap; }
  .topbar .btn.quiet { padding: 10px 10px; }
}
@media (max-width: 360px) {
  /* The narrowest phones: the brand keeps its icon and its aria-label, not its words. */
  .topbar .brand span { display: none; }
  /* Pills take a full line of their own and share it equally. */
  .choice-group { flex: 1 1 100%; }
  .choice-pill { flex: 1 1 0; padding-left: 6px; padding-right: 6px; }
}