/* Recite (voice, 2026-10-26): the counting hands, the number strip and the listening meter. Fits one screen. */
:root { --skin: #e9b48f; --skin-line: #b97e5a; --skin-up: #f2c39f; }
:root[data-theme="dark"] { --skin-line: #8a5a3c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --skin-line: #8a5a3c; } }

.recite { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.6dvh, 14px); width: 100%; max-width: 640px; margin: 0 auto; min-height: 0; }
.r-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.r-table { font: inherit; font-size: 1.1rem; font-weight: 700; padding: 8px 12px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.r-level { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.r-level .dots { display: inline-flex; gap: 3px; }
.r-level .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.r-level .dots i.on { background: var(--good); }

.r-hands { width: min(100%, 420px); transition: opacity .3s; }
.r-hands.off { opacity: .25; }
.hands { width: 100%; height: auto; max-height: 34dvh; display: block; margin: 0 auto; }
.hands .palm { fill: var(--skin); stroke: var(--skin-line); stroke-width: 2.5; }
.hands .knuckles { fill: none; stroke: var(--skin-line); stroke-width: 2; opacity: .5; }
.hands .finger { fill: var(--skin); stroke: var(--skin-line); stroke-width: 2.5; transition: transform .22s ease-out, fill .22s; }
.hands .finger.up { fill: var(--skin-up); }
.hands .finger.newest { stroke: var(--accent); stroke-width: 4; }
.hands .plus-ten { font-weight: 800; font-size: 22px; fill: var(--accent); transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .hands .finger { transition: none; } }

.r-num { font-size: clamp(2.4rem, 9dvh, 4.5rem); font-weight: 800; line-height: 1; min-height: 1em; font-variant-numeric: tabular-nums; }
.r-strip-host { width: 100%; }
.r-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.r-block { display: flex; gap: 8px; padding: 4px 6px; border-radius: 12px; background: var(--surface-2); transition: opacity .2s; }
.r-block.dim { opacity: .35; }
.r-chunk { display: flex; gap: 3px; }
/* The pause line sits at the end of a chunk, so a wrapped row ends with it (NK 2026-10-28: "it should be at the end of the sequence on the top line"). */
.r-chunk:not(:last-child) { padding-right: 8px; border-right: 2px dashed var(--line); }
.r-pill { min-width: 2.2em; padding: 3px 6px; border-radius: 8px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); }
.r-pill.now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.r-pill.ok { background: var(--good-soft); border-color: var(--good); }
.r-pill.bad { background: var(--bad-soft); border-color: var(--bad); }

.r-meter { width: min(100%, 260px); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .2s; }
.r-meter.on { opacity: 1; }
.r-meter i { display: block; height: 100%; width: 0; background: var(--good); transition: width .1s; }
.r-status { margin: 0; text-align: center; color: var(--ink-2); min-height: 1.4em; }
.r-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.r-actions .btn.big { min-width: 160px; }

/* Grown-ups */
.r-said { display: flex; flex-wrap: wrap; gap: 3px; }
.r-said span { padding: 0 5px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.r-said .ok { background: var(--good-soft); }
.r-said .bad { background: var(--bad-soft); font-weight: 700; }
.section label.btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.section label.btn { position: relative; }

/* Practise drill (NK 2026-10-27): reps-right dots, the step line, the speed button and the exact-mistake row. */
.r-speed { min-height: 44px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.r-progress { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; }
.r-progress:empty { display: none; }
.r-count { font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink-2); font-weight: 700; }
.r-count b { font-size: clamp(2rem, 6dvh, 3rem); color: var(--good); }
.r-count span { font-size: clamp(1.1rem, 3dvh, 1.5rem); }
.r-reps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.r-reps i { width: 22px; height: 22px; border-radius: 50%; background: var(--line); border: 2px solid transparent; transition: background .15s, transform .15s; }
.r-reps i.on { background: var(--good); transform: scale(1.12); }
.r-reps.many i { width: 14px; height: 14px; }
.r-step { margin: 0; font-size: .85rem; color: var(--ink-3); text-align: center; }
.r-mistake-host:empty { display: none; }
.r-diff { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); }
.r-diff-title { font-size: .75rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.r-diff-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.r-d { display: flex; flex-direction: column; align-items: center; min-width: 2.2em; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-variant-numeric: tabular-nums; }
.r-d b { font-size: 1.05rem; }
.r-d small { font-size: .7rem; line-height: 1.1; color: var(--bad); font-weight: 700; white-space: nowrap; }
.r-d.ok { opacity: .7; }
.r-d.bad { background: var(--bad-soft); border-color: var(--bad); border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .r-reps i { transition: none; } }

/* 2026-10-27 (NK): the full form, the pattern's missing pause, options, and nothing covering the page. */
.r-form { font: inherit; font-weight: 700; padding: 8px 10px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.r-strip.long .r-pill { min-width: 0; font-size: .85rem; padding: 3px 5px; white-space: nowrap; }
.r-gap { align-self: center; font-size: .7rem; font-weight: 800; color: var(--bad); border: 2px dashed var(--bad); border-radius: 8px; padding: 2px 5px; }
.r-d.late { border-color: var(--warn, var(--bad)); }
.r-d.late small { color: var(--ink-2); }
.r-options { display: flex; gap: 8px 12px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: .9rem; color: var(--ink-2); }
.r-options:empty { display: none; }
.r-options .btn.small { min-height: 44px; }
.r-reps-set { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.r-reps-set input[type=range] { width: min(40vw, 180px); accent-color: var(--good); min-height: 44px; }
/* Everything shares one screen: the hands shrink first, so a mistake row never covers the numbers or the buttons. */
body.fit .recite { flex: 1 1 auto; min-height: 0; }
body.fit .r-hands { flex: 1 1 0; min-height: 48px; display: flex; justify-content: center; }
body.fit .r-hands .hands { height: 100%; width: auto; max-width: 100%; max-height: 34dvh; }
body.fit .recite > :not(.r-hands) { flex: 0 0 auto; }
/* Short screens (a laptop browser is often ~600px tall): tighter, and the page may scroll rather than hide a button. */
body.fit main:has(.recite) { overflow-y: auto; }
@media (max-height: 720px) {
  .recite { gap: 4px; }
  .r-num { font-size: clamp(1.6rem, 7dvh, 2.6rem); }
  .r-count b { font-size: 1.8rem; }
  .r-reps i { width: 16px; height: 16px; }
  .r-step { font-size: .78rem; }
  .r-meter:not(.on) { display: none; }
  .r-options .btn.small, .r-options .r-reps-set { min-height: 40px; }
}
.r-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (min-width: 700px) { .r-controls { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 16px; } }

/* 2026-10-27 (NK): Steps at the side (where the child is going, tap to go there), What the app heard, Pauses on/off. */
.recite-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-height: 0; flex: 1 1 auto; }
.r-pauses { min-height: 44px; padding: 0 12px; }
.r-pauses.off { opacity: .75; text-decoration: line-through; text-decoration-thickness: 2px; }
.r-side { width: min(100%, 640px); display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.r-side details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.r-side summary { cursor: pointer; padding: 10px 12px; min-height: 44px; box-sizing: border-box; font-weight: 700; display: flex; align-items: center; }
.r-map-host { max-height: 46dvh; overflow-y: auto; padding: 0 10px 10px; }
.r-stage h4 { margin: 8px 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.r-map { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.r-map li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.r-row-l { min-width: 6.5em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r-stepbtn { font: inherit; font-size: .85rem; font-weight: 700; min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.r-stepbtn.done { background: var(--good-soft); border-color: var(--good); color: var(--ink); }
.r-stepbtn.now { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.r-stepbtn:disabled { cursor: default; }
.r-stepbtn:not(:disabled):hover { border-color: var(--accent); }
.r-heard-host { padding: 0 10px 10px; }
.r-h-help { margin: 0 10px 6px; color: var(--ink-3); font-size: .8rem; }
.r-h-none { margin: 0; color: var(--ink-3); }
.r-h-list { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 6px; }
.r-h-list li { padding: 4px 6px; border-radius: 8px; }
.r-h-list li.ok { background: var(--good-soft); }
.r-h-list li.bad { background: var(--bad-soft); }
.r-h-list li.pause { background: var(--surface-2); }
.r-h-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-variant-numeric: tabular-nums; }
.r-h-nums b.bad { color: var(--bad); text-decoration: underline; }
.r-h-gap { font-size: .7rem; color: var(--ink-3); }
.r-h-gap.brk { color: var(--ink); font-weight: 800; background: var(--surface-2); border-radius: 4px; padding: 0 3px; outline: 1px dashed var(--line); }
.r-h-list small { display: block; color: var(--ink-2); }
@media (min-width: 1000px) {
  .recite-wrap { flex-direction: row; align-items: stretch; justify-content: center; gap: 20px; }
  .recite-wrap > .recite { margin: 0; flex: 1 1 640px; }
  .r-side { width: 280px; flex: 0 0 280px; overflow-y: auto; min-height: 0; }
  .r-map-host { max-height: none; }
}
/* The side panels sit below on narrow screens: nothing may shrink under its content, or the panels would cover the buttons (the page scrolls instead). */
body.fit .recite-wrap > .recite { min-height: auto; }
@media (min-width: 1000px) { body.fit .recite-wrap > .recite { min-height: 0; } }

/* 2026-10-27 (NK): the mistake is marked on the numbers themselves, not in a separate box; Steps in the plan's two parts. */
.r-pill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.r-pill.slip { background: var(--bad-soft); border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad); border-radius: 999px; }
.r-pill.slow { box-shadow: 0 0 0 3px var(--warn, #d08a00); border-radius: 999px; }
.r-said { display: block; font-size: .65rem; line-height: 1.1; font-weight: 800; color: var(--bad); white-space: nowrap; }
.r-chunk { position: relative; }
.r-chunk.nopause { border-right-color: var(--bad) !important; border-right-style: solid !important; border-right-width: 3px !important; }
.r-chunk.nopause::before { content: ''; position: absolute; right: -13px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border: 3px solid var(--bad); border-radius: 50%; pointer-events: none; }
.r-part h5 { margin: 8px 0 4px; font-size: .85rem; color: var(--ink); }
.r-part + .r-part { border-top: 1px dashed var(--line); margin-top: 6px; }
.r-map { list-style: decimal; padding-left: 1.6em; }
.r-map li { display: list-item; }
.r-map li > * { vertical-align: middle; margin-right: 4px; }
.r-row-l { display: inline-block; }

/* 2026-10-27 (NK): tables as buttons (several in a row), a child's words for the step, the strip wraps, parts open
   and close, how each step was finished, Alone times. */
.r-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.r-tables { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.r-tchip { font: inherit; font-weight: 800; min-width: 48px; min-height: 44px; padding: 4px 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; position: relative; font-variant-numeric: tabular-nums; }
.r-tchip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.r-tchip.current { box-shadow: 0 0 0 3px var(--accent); }
.r-tchip::after { content: ''; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.r-tchip.lv1::after, .r-tchip.lv2::after { background: var(--warn, #d08a00); }
.r-tchip.lv3::after, .r-tchip.lv4::after { background: var(--good); }
.r-pick-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; font-size: .9rem; color: var(--ink-2); }
.r-several { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.r-several input { width: 20px; height: 20px; }
.r-order { font-weight: 700; color: var(--ink); }
.r-voice.off { opacity: .75; }
.r-voice { min-height: 44px; padding: 0 12px; }
.r-say { margin: 0; text-align: center; font-size: clamp(1rem, 2.6dvh, 1.3rem); font-weight: 800; color: var(--ink); }
/* The strip wraps instead of running off the page (NK: "when this gets to 9 numbers or more it overlaps the page"). */
.r-strip-host { max-width: 100%; min-width: 0; }
.r-strip, .r-block, .r-chunk { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.r-block { justify-content: center; row-gap: 6px; }
.r-chunk { row-gap: 4px; }
/* Steps: parts open and close; how each step was finished */
.r-part > summary { cursor: pointer; font-weight: 800; font-size: .9rem; padding: 6px 0; min-height: 36px; display: flex; align-items: center; gap: 6px; }
.r-part > summary small { color: var(--ink-3); font-weight: 700; }
.r-then h5 { margin: 8px 0 4px; }
.r-stepbtn.marked { background: color-mix(in srgb, var(--good) 12%, var(--surface)); border-color: var(--good); border-style: dashed; color: var(--ink); }
.r-stepbtn.skipped { background: var(--surface-2); border-style: dashed; color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.r-stepbtn.was-back { border-color: var(--warn, #d08a00); }
.r-back { color: var(--warn, #d08a00); font-weight: 800; }
/* Alone: your times */
.r-times { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: clamp(48px, 9dvh, 84px); width: min(100%, 420px); }
.r-tbar { flex: 1 1 0; max-width: 34px; min-width: 14px; background: var(--good); border-radius: 6px 6px 2px 2px; position: relative; display: flex; align-items: flex-start; justify-content: center; opacity: .75; }
.r-tbar.wrong { background: var(--line); }
.r-tbar.best { opacity: 1; box-shadow: 0 0 0 2px var(--good); }
.r-tbar.last { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.r-tbar small { font-size: .6rem; font-weight: 800; color: var(--ink); margin-top: -1.2em; white-space: nowrap; }
@media (max-width: 480px) { .r-tables { gap: 4px; } .r-tchip { min-width: 44px; padding: 2px 0; font-size: .95rem; } }
/* Several tables (2026-10-27): first 10 / 12 / 20, numbers or in full */
.r-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.r-seg .btn[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.r-seg .btn { min-height: 44px; }

/* 2026-10-27 (NK): a cleaner screen. Smaller table buttons, bigger hands, a narrower steps list, the less used
   settings in a drop-down (Options). */
.r-tables { gap: 4px; }
.r-tchip { min-width: 38px; min-height: 36px; padding: 2px 4px; font-size: .85rem; border-radius: 10px; border-width: 1.5px; }
.r-tchip::after { width: 6px; height: 6px; right: 3px; top: 3px; }
@media (max-width: 480px) { .r-tables { gap: 3px; } .r-tchip { min-width: 36px; min-height: 36px; padding: 0; font-size: .82rem; } }
.r-pick { gap: 4px; }
.r-top { gap: 8px; }
.r-more { position: relative; }
.r-more > summary { list-style: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; cursor: pointer; }
.r-more > summary::-webkit-details-marker { display: none; }
.r-more[open] > summary { border-color: var(--accent); }
/* Opens in the flow (pushes the page down) rather than floating over it, so it never covers anything. */
.r-more-body { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; padding: 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); max-width: min(92vw, 560px); }
.r-top:has(.r-more[open]) { flex-wrap: wrap; }
.r-top .r-more[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; }
.r-speed, .r-voice, .r-pauses { min-height: 40px; }
/* Bigger hands */
.hands { max-height: 42dvh; }
body.fit .r-hands { min-height: 110px; }
body.fit .r-hands .hands { max-height: 42dvh; }
@media (max-height: 720px) { body.fit .r-hands { min-height: 84px; } }
/* A narrower steps list */
@media (min-width: 1000px) {
  .r-side { width: 220px; flex: 0 0 220px; }
}
.r-side { font-size: .82rem; }
.r-stepbtn { font-size: .78rem; min-height: 30px; padding: 2px 8px; }
.r-row-l { min-width: 4.8em; }
.r-map { padding-left: 1.3em; gap: 3px; }
.r-part > summary { font-size: .82rem; min-height: 32px; padding: 4px 0; }
.r-side summary { min-height: 36px; padding: 6px 10px; }

/* 2026-10-27: why the microphone did not start, in words, instead of a silent switch to taps */
.r-error { flex-basis: 100%; max-width: 560px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--bad); background: var(--bad-soft); color: var(--ink); text-align: left; font-size: .95rem; line-height: 1.35; }

/* 2026-10-28 (NK: "some sort of obvious tick after each iteration"): a big tick, or a question mark when a time
   through was not counted, that pops beside the count and fades. The 3-2-1 countdown with the voice off. */
.r-progress-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.r-flash { position: absolute; right: 8%; top: -6px; font-size: 3rem; font-weight: 900; line-height: 1; opacity: 0; pointer-events: none; }
.r-flash.ok { color: var(--good, #1a8f4c); }
.r-flash.miss { color: var(--warn, #d08a00); }
.r-flash.go { animation: r-flash .9s ease-out; }
@keyframes r-flash { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.15); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .r-flash.go { animation: r-flash-still .9s linear; } @keyframes r-flash-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } }
.r-num.count { color: var(--accent, #3b6fd8); }
.r-talk.off { opacity: .75; }
/* 2026-10-28 user test: step buttons were 31px tall at 375px; 44px on touch screens so a tap lands on the right one. */
@media (pointer: coarse) { .r-stepbtn { min-height: 44px; } }

/* 2026-10-28: a hidden number (Hide numbers: some, part, all) */
.r-pill.hid { color: var(--ink-3, #8a8f98); background: transparent; border-style: dashed; }

/* 2026-10-28 round 10 (NK: "make the green circles a bit bigger"): the times-right circles, about a third bigger at
   every size. regression: 2026-10-28-bigdots */
.r-reps { gap: 8px; }
.r-reps i { width: 30px; height: 30px; }
.r-reps.many i { width: 20px; height: 20px; }
@media (max-height: 720px) { .r-reps i { width: 22px; height: 22px; } .r-reps.many i { width: 16px; height: 16px; } }
/* 13–20 fold away behind one button (NK: "1x-20x tables can hide 13-20 with expandable tab") */
.r-tchip.r-more-t { min-width: 64px; font-weight: 700; color: var(--ink-2); border-style: dashed; }
/* A new part: where to start (one suggested); after ×12 alone: what next */
.r-start-at { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; max-width: 620px; }
.r-start-at .btn.small { min-height: 44px; min-width: 64px; }

/* 2026-10-28 round 10: home order (See it, Learn rote, Practise, Test), then How I'm doing and Grown-ups apart */
.home-more { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 10px; border-top: 1px solid var(--line); width: min(100%, 720px); }
.home-more .btn { min-height: 44px; }
/* See it as an activity: one dot per fact, the line above the picture */
.see-dots { display: inline-flex; gap: 6px; align-items: center; }
.see-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--line); }
.see-dots i.now { box-shadow: 0 0 0 3px var(--accent); }
.see-dots i.ok { background: var(--good); }
.see-dots i.miss { background: var(--warn, #d08a00); }
.see-head { margin: 0; text-align: center; color: var(--ink-2); }
.facts-list span.ok { border-color: var(--good); }
/* How I'm doing: four tabs */
body.fit main:has(.me-body) { overflow-y: auto; }
.me-body { width: 100%; }
.me-act { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 10px 0; }
.me-act .stats { width: min(100%, 560px); }
.me-empty { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 16px auto; max-width: 360px; }
.me-rote { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; width: min(100%, 720px); }
.me-rt { display: flex; flex-direction: column; gap: 2px; align-items: center; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.me-rt b { font-size: 1.4rem; }
.me-rt .dots i { display: inline-block; width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; background: var(--line); }
.me-rt .dots i.on { background: var(--good); }
.me-tests { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; width: min(100%, 560px); }
.me-tests li { display: flex; gap: 10px; align-items: baseline; }
.me-tests li small { margin-left: auto; color: var(--ink-2); }
/* Grown-ups: the sections, then the tabs inside one */
.tabs.subtabs { min-height: 40px; border-top: none; }
.tabs.subtabs .tab { font-size: .92rem; }
/* See it: the picture keeps a usable size while the keypad is up (Work it out needs the picture to count from) */
.see .scene { min-height: min(30dvh, 220px); }
body.fit main:has(.see) { overflow-y: auto; }
@media (min-width: 900px) and (min-height: 600px) {
  .see:has(.see-ask .play) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-rows: auto auto 1fr; align-items: start; column-gap: 16px; }
  .see:has(.see-ask .play) > .see-controls, .see:has(.see-ask .play) > .see-head { grid-column: 1 / -1; justify-self: center; }
  .see:has(.see-ask .play) > .scene-wrap { grid-column: 1; }
  .see:has(.see-ask .play) > .see-ask { grid-column: 2; grid-row: 3; }
}
/* Phone: the picture block keeps its own height (it overlapped the answer box at 375px) and the page scrolls */
@media (max-width: 899px), (max-height: 599px) {
  .see:has(.see-ask .play) > .scene-wrap { flex: 0 0 auto; }
  .see:has(.see-ask .play) .scene { flex: none; height: min(30dvh, 220px); }
}

/* Round 11 (NK 2026-10-29): Alone's starting point, ✓ on tables said alone, Part 4 = everything from ×13. */
.r-pill.start { border-style: dashed; border-color: var(--accent); font-weight: 700; }
.r-tdone { color: var(--good); font-weight: 700; }
.r-part4 .r-sub h5 { margin: 6px 0 2px; font-size: .78rem; color: var(--ink-2); }
.r-part4 .r-subpart h6 { margin: 4px 0 2px; font-size: .72rem; font-weight: 600; color: var(--ink-3); }

/* Round 11: Next for me (How I'm doing) and How to help (Grown-ups): one card per activity. */
.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: min(100%, 980px); margin: 10px auto; }
.help-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.help-card h2 { margin: 0; font-size: 1.15rem; }
.help-card p { margin: 0; overflow-wrap: anywhere; }
.help-status { color: var(--ink-2); }
.help-next { font-size: 1.05rem; }
.help-adult { font-size: .92rem; color: var(--ink-2); }
.help-card .row { margin-top: auto; gap: 8px; flex-wrap: wrap; }
.help-praise { width: min(100%, 980px); margin: 10px auto 0; text-align: center; }
/* 2026-10-29: Alone shows each number as soon as it is said right. */
.r-pill.said { background: var(--good-soft); border-color: var(--good); }