/* ===================== v0.6 client (2026-10-25) ===================== */

/* Theme switch (setting theme): dark on request, whatever the device says. Same tokens as the device-dark blocks. */
:root[data-theme="dark"] {
  --bg: #14171d; --surface: #1d2129; --surface-2: #262b35; --ink: #eef0f4; --ink-2: #b9bfcc; --ink-3: #8a91a0;
  --line: #333946; --accent: #6b9be0; --accent-ink: #0d1117; --good: #4cc38a; --good-soft: #17392a; --bad: #e07a70;
  --bad-soft: #3d1f1c; --hint-bg: #332c17; --hint-line: #6b5a24;
  --st-locked: #262b35; --st-new: #5c4a24; --st-learning: #8a6424; --st-review: #285c41; --st-secure: #2f8a5c; --st-mastered: #5fd39a; --st-mastered-ink: #0d1117;
  --sp0: #cde2fb; --sp1: #9ec5f4; --sp2: #6da7ec; --sp3: #3987e5; --sp4: #256abf; --sp5: #4a4f5c; --sp-ink-dark: #0d1117; --sp-ink-light: #ffffff;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Tap to answer: 2–4 big buttons in one row instead of the keypad */
.tap-host { width: 100%; display: flex; justify-content: center; }
.tappad { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 440px; touch-action: manipulation; user-select: none; }
.tappad[data-n="2"] { --n: 2; } .tappad[data-n="4"] { --n: 4; }
.tap { min-height: 72px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); font-size: calc(2rem * var(--qscale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink); }
.tap:active { transform: scale(.97); background: var(--surface-2); }
.tap.ok { background: var(--good-soft); border-color: var(--good); }
.tap.no, .tap:disabled { opacity: .35; text-decoration: line-through; cursor: default; }
body.fit .tap { height: clamp(56px, 16dvh, 120px); }
body.fit .play.has-hints .tap { height: clamp(48px, 11dvh, 96px); }
@media (orientation: landscape) and (max-height: 520px) {
  body.fit .play > .tap-host { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  body.fit .tappad { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.fit .tap { height: clamp(44px, 17dvh, 72px); }
}
@media (horizontal-viewport-segments: 2) { body.fit .play > .tap-host { grid-column: 2; grid-row: 1 / span 5; align-self: center; } }
@media (vertical-viewport-segments: 2) { body.fit .play > .tap-host { grid-row: 2; align-self: center; } }

/* Early-number pictures (dots, one more, doubles, tens) */
.question .qprompt { display: block; font-size: .32em; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.question .qsmall { display: block; font-size: .5em; color: var(--ink-2); }
.question .epic { display: block; margin: 4px auto; height: clamp(48px, 16dvh, 150px); width: auto; max-width: 100%; }
.play.is-early .question { text-align: center; }
.edot.ea { fill: var(--accent); }
.edot.eb { fill: #e08a2e; }
.eplus { font-size: 20px; font-weight: 700; fill: var(--ink-2); text-anchor: middle; }
.estick { fill: var(--accent); }
.estick.q { fill: none; stroke: var(--accent); stroke-dasharray: 3 2; }

/* Variation chain: small, above the question */
.chainline { font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.chainline:empty { display: none; }
.chainline b { color: var(--ink); }

/* Voice answers: a small mic mark while listening */
.qwrap .mic { display: none; position: absolute; top: 8px; right: 10px; font-size: .9rem; opacity: .7; }
.voice-on .qwrap .mic { display: block; }

/* Home: up to six buttons; three across in landscape */
@media (orientation: landscape) and (max-height: 520px) {
  body.fit .home-actions[data-n="5"], body.fit .home-actions[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.fit .home-actions[data-n="5"] .btn, body.fit .home-actions[data-n="6"] .btn { min-height: 48px; }
  body.fit .test-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; max-width: 720px; }
  body.fit .test-pick h1, body.fit .test-pick > p { grid-column: 1 / -1; margin: 0; }
}
body.fit .home-actions[data-n="5"] .btn, body.fit .home-actions[data-n="6"] .btn { min-height: clamp(52px, 9.5dvh, 100px); }
@media (max-height: 600px) and (orientation: portrait) {
  body.fit .home-actions[data-n="5"] .btn small, body.fit .home-actions[data-n="6"] .btn small { display: none; }
  body.fit .child-home { gap: 6px; }
  body.fit .len .seg { min-height: 44px; padding: 0 10px; }
  body.fit .test-pick .btn small { display: none; }
}

/* Speed trend chart (grown-ups map, weekly report) */
.trend-box { margin: 8px 0 18px; max-width: 760px; }
.trendchart { width: 100%; height: auto; display: block; }
.tc-grid { stroke: var(--line); stroke-width: 1; }
.tc-tick { fill: var(--ink-3); font-size: 11px; font-family: var(--font); }
.tc-target { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tc-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.tc-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.tc-pt.good { fill: var(--accent); }
.legend .lg-line { display: inline-block; width: 18px; height: 3px; background: var(--accent); vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.legend .lg-dash { display: inline-block; width: 18px; height: 0; border-top: 2px dashed var(--ink-2); vertical-align: middle; margin-right: 4px; }

/* Fact family */
.family { margin: 10px 0; }
.family .routes li b { font-variant-numeric: tabular-nums; }

/* Grown-ups tabs: the report link */
.tab.report-tab { margin-left: auto; color: var(--accent); }

/* My numbers (early strand) */
.early { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.4dvh, 12px); width: 100%; max-width: 720px; margin: 0 auto; justify-content: center; }
.early-stages { display: flex; flex-direction: column; gap: clamp(6px, 1.2dvh, 10px); min-height: 0; }
.early-stage { display: flex; gap: 10px; align-items: flex-start; }
.early-stage.locked { opacity: .55; }
.early-h { display: flex; flex-direction: column; align-items: center; min-width: 44px; gap: 2px; }
.early-h b { font-size: 1.3rem; }
.early-items { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.early-it { min-width: 44px; height: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.early-it.done { background: var(--good-soft); border-color: var(--good); color: var(--ink); }
.early-it i { font-style: normal; color: #d4a017; font-size: .75rem; }
.early .btn.big { align-self: center; min-height: clamp(48px, 9dvh, 72px); }

/* Thin games added in v0.6 */
.g-stave { stroke: var(--line); stroke-width: .6; }
.g-note { fill: var(--accent); }
.g-ghost { text-anchor: start; opacity: .6; transition: x .3s linear; }
.g-garden { width: 100%; height: auto; max-height: 46dvh; display: block; margin: 8px auto; aspect-ratio: 1; }
.g-soil { fill: #e9dcc5; }
.g-stem { fill: none; stroke: #2f8a3c; stroke-width: .9; stroke-linecap: round; }
.g-flower { fill: #e0569b; }
:root[data-theme="dark"] .g-soil { fill: #3a3126; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-soil { fill: #3a3126; } }
.me-maphead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.me-maphead .segs { margin: 0; }
@media (max-width: 700px) { .g-garden { max-height: 38dvh; } }

/* Account */
#app p.bad { color: var(--bad); }
.kv dt { display: flex; align-items: center; gap: 4px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
a.btn.primary { color: var(--accent-ink); }

/* Weekly report: a page that also prints on one or two sheets */
.report { display: flex; flex-direction: column; gap: 12px; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.rep-grid { display: grid; grid-template-columns: 22px repeat(12, minmax(0, 1fr)); gap: 2px; margin: 8px 0; }
.rep-grid .rh { font-size: .7rem; color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rep-grid .rc { aspect-ratio: 1; border-radius: 3px; background: var(--st-locked); font-size: .55rem; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; color: var(--ink); }
.rep-grid .rc[data-b="0"] { background: var(--sp0); color: var(--sp-ink-dark); } .rep-grid .rc[data-b="1"] { background: var(--sp1); color: var(--sp-ink-dark); }
.rep-grid .rc[data-b="2"] { background: var(--sp2); color: var(--sp-ink-dark); } .rep-grid .rc[data-b="3"] { background: var(--sp3); color: var(--sp-ink-light); }
.rep-grid .rc[data-b="4"] { background: var(--sp4); color: var(--sp-ink-light); } .rep-grid .rc[data-b="5"] { background: var(--sp5); color: var(--ink); }
body[data-palette=ttrs] .rep-grid .rc[data-b="2"] { color: #1a1a1a; } body[data-palette=ttrs] .rep-grid .rc[data-b="5"] { color: #fff; }
.rep-grid .rc[data-b=wrong] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--crit); }
.rep-list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
@media print {
  @page { margin: 12mm; }
  .topbar, .no-print, .it-btn, .it-trigger, [class*="info-tip"] button, #overlay { display: none !important; }
  html, body { background: #fff !important; color: #000; }
  main { max-width: none; padding: 0; }
  .card, .tile { break-inside: avoid; border-color: #bbb; }
  .rep-grid .rc, .sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* My tables: the map (or the garden) takes the room that is left, so the page never scrolls (fit check 2026-10-25:
   the 12 × 12 ran 30–140 px below the screen at 320×568, 375×667 and 740×360). */
body.fit .me-main { grid-template-rows: minmax(0, 1fr); }
body.fit .me-main > .card:first-child { display: flex; flex-direction: column; }
body.fit .me-maphost { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center; }
body.fit .me-maphost .me-grid { height: 100%; max-height: 100%; width: auto; margin: 4px auto; }
body.fit .me-garden { height: 100%; display: flex; justify-content: center; }
body.fit .me-garden .g-garden { height: 100%; width: auto; max-height: 100%; margin: 0 auto; }
body.fit .me-main .legend { margin: 4px 0 0; row-gap: 4px; }
/* Landscape phones: My tables in two columns (the day's cards left, the map right); the side cards hide as on a
   portrait phone, so nothing is clipped. */
@media (orientation: landscape) and (max-height: 520px) {
  body.fit .me { display: grid; grid-template-columns: minmax(180px, 32%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  body.fit .me-top { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; }
  body.fit .me-top .card { padding: 8px 10px; }
  body.fit .me .ring { width: 44px; height: 44px; }
  body.fit .me-next .big-fact { font-size: 1.1rem; }
  body.fit .me-main { grid-template-columns: minmax(0, 1fr); }
  body.fit .me-side { display: none; }
}

/* Hygiene lane fixes (2026-10-25): 44 px targets for the map layer switch, and room round each "i" hit area. */
.seg.layer { min-width: 44px; font-size: 1.1rem; }
.trend-box .legend { margin-top: 14px; }
.trend-box > h2 { margin-bottom: 4px; }
.set-row { padding-top: 12px; padding-bottom: 12px; }
.seg.layer { font-size: inherit; }
.trend-box { padding-top: 14px; }
@media (max-width: 640px) { .set-row { row-gap: 14px; } }
.trend-box { margin-bottom: 48px; } /* room below the last chart, so its "i" can scroll clear of the screen edge */
.trend-box .legend { margin-top: 26px; } /* the title's "i" and the legend's "i"s each need 44 px of their own */
/* Account status rows: one per line, 44 px each so every "i" keeps its own tap area (hygiene lane 2026-10-25). */
.acct-kv { display: flex; flex-direction: column; max-width: 560px; }
.acct-row { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: .92rem; gap: 8px; }
.acct-row .k { color: var(--ink-2); }
.acct-row .v { display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }