/* ===================== v0.3 (2026-10-24) ===================== */
/* Fonts (setting: font) */
body[data-font=system] { --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body[data-font=dyslexic] { --font: "Comic Sans MS", "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: .03em; word-spacing: .12em; }
body { font-family: var(--font); }

/* Child screens fit the screen: no page scroll on any device (NK 2026-10-24 #6) */
body.fit { height: 100dvh; overflow: hidden; }
body.fit main { height: calc(100dvh - 57px); overflow: hidden; display: flex; flex-direction: column; padding-top: 10px; padding-bottom: 10px; }
body.fit .topbar { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
body.fit .play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.2dvh, 14px); width: 100%; max-width: 560px; }
body.fit .qwrap { flex: 0 1 auto; min-height: 0; padding: clamp(6px, 1.6dvh, 16px); }
body.fit .question { font-size: calc(clamp(2rem, min(11vw, 9dvh), 4.4rem) * var(--qscale, 1)); line-height: 1.05; }
body.fit .answer { font-size: calc(clamp(1.8rem, min(9vw, 7dvh), 3.6rem) * var(--qscale, 1)); }
body.fit .hint { flex: 1 1 auto; min-height: 0; overflow: hidden; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 6px 10px; }
body.fit .hint:not(.on) { padding: 0; }
body.fit .keypad { flex: 0 0 auto; gap: clamp(6px, 1dvh, 10px); max-width: min(380px, 100%); margin: 0 auto; }
body.fit .key { min-height: 44px; height: clamp(44px, 9dvh, 76px); font-size: calc(clamp(1.3rem, 4dvh, 1.9rem) * var(--qscale, 1)); }
.qbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.qbar > :last-child { justify-self: end; }
.qbar .btn { min-height: 44px; padding: 0 12px; }
.preview { font-size: .95rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.hline { display: flex; gap: 10px; align-items: baseline; font-size: calc(1.05rem * var(--qscale, 1)); line-height: 1.3; }
.hline.old { opacity: .6; font-size: .95rem; }
.hline .tier { min-width: 3.6em; }
.hline.k-check { color: var(--good); font-weight: 700; }
.hline.k-check .tier { color: var(--good); }
.answer.hintok { color: var(--good); border-color: var(--good); }
.see-btn { align-self: flex-start; min-height: 44px; }
/* Landscape phones: question left, keypad right */
@media (orientation: landscape) and (max-height: 520px) {
  body.fit .play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 40%); grid-template-rows: auto auto auto 1fr; column-gap: 16px; max-width: 900px; }
  body.fit .play > .progress, body.fit .play > .qbar, body.fit .play > .qrow, body.fit .play > .game-strip, body.fit .play > .hint, body.fit .play > .why { grid-column: 1; }
  body.fit .play > .keypad { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  body.fit .key { height: clamp(40px, 15dvh, 64px); }
}
/* Dual-screen and foldable devices: one half each (Viewport Segments) */
@media (horizontal-viewport-segments: 2) {
  body.fit .play { display: grid; grid-template-columns: env(viewport-segment-width 0 0, 50%) env(viewport-segment-width 1 0, 50%); max-width: none; column-gap: calc(env(viewport-segment-left 1 0, 50%) - env(viewport-segment-right 0 0, 50%)); }
  body.fit .play > :not(.keypad) { grid-column: 1; }
  body.fit .play > .keypad { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
}
@media (vertical-viewport-segments: 2) {
  body.fit .play { display: grid; grid-template-rows: env(viewport-segment-height 0 0, 50%) env(viewport-segment-height 0 1, 50%); }
  body.fit .play > .keypad { grid-row: 2; align-self: center; }
}
/* Home fits too */
body.fit .child-home { flex: 1; min-height: 0; justify-content: center; gap: clamp(8px, 2dvh, 20px); padding-top: 0; }
body.fit .child-home .hello { font-size: clamp(1.4rem, 4dvh, 2rem); }
body.fit .home-actions .btn { min-height: clamp(64px, 12dvh, 110px); font-size: clamp(1rem, 2.6dvh, 1.35rem); }
.len { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
body.fit .summary { flex: 1; min-height: 0; justify-content: center; gap: clamp(8px, 1.8dvh, 16px); padding-top: 0; overflow: hidden; }

/* Segmented controls that wrap */
.segs.wrap { flex-wrap: wrap; }

/* TTRS-style speed colours (NK decision 5b). Times are always printed in the squares, so colour never carries the
   meaning alone (the colour-blind caveat). Blue stays available in Settings → Display. */
body[data-palette=ttrs] { --sp0: #1b7a3d; --sp1: #4caf50; --sp2: #a5cf3c; --sp3: #f4c430; --sp4: #f08a2c; --sp5: #d9433b; --sp-ink-dark: #ffffff; --sp-ink-light: #1a1a1a; }
body[data-palette=ttrs] .heat .c[data-mode=speed][data-b="2"], body[data-palette=ttrs] .heat .c.avg[data-b="2"] { color: #1a1a1a; }
body[data-palette=ttrs] .heat .c[data-mode=speed][data-b="5"], body[data-palette=ttrs] .heat .c.avg[data-b="5"] { color: #ffffff; }
.heat .c.void { visibility: hidden; }

/* Settings */
.set-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.set-search { max-width: 360px; width: 100%; }
.set-group { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
.set-group > summary { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; cursor: pointer; font-weight: 700; }
.set-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(0, 1.6fr) 44px; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); }
.set-row.changed { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.set-label { display: flex; align-items: center; gap: 4px; font-size: .92rem; }
.numctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.numctl input[type=range] { flex: 1; min-width: 80px; min-height: 44px; }
.numctl input[type=number] { width: 110px; }
.unit { color: var(--ink-3); font-size: .85rem; }
.reset { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.switch { position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 52px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { width: 52px; height: 30px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-3); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(22px); background: var(--accent-ink); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .set-row { grid-template-columns: minmax(0, 1fr) 44px; } .set-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }

/* Hint library */
.hl-fact { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 8px; }
.hl-fact > summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; cursor: pointer; }
table.hl input[type=text] { min-width: 150px; width: 100%; }
table.hl tr.approved td { background: var(--good-soft); }
.hl-custom { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.hl-custom input[type=text] { flex: 1; min-width: 180px; }

/* Pictures */
.see { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.see-controls { justify-content: center; }
.scene-wrap { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.scene { width: 100%; flex: 1 1 auto; min-height: 0; max-height: 48dvh; }
.scene .dot { transition: transform .5s ease, opacity .45s ease, fill .4s ease; }
.scene .d-a { fill: var(--accent); }
.scene .d-b { fill: #e08a2e; }
.scene .d-c { fill: var(--bad); }
.scene.faded .dot { opacity: .35 !important; }
.scene .cut { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 6 5; }
.scene .axis { stroke: var(--ink-2); stroke-width: 2; }
.scene .hop { fill: none; stroke: var(--accent); stroke-width: 3; transition: stroke-dashoffset .5s ease; }
.scene .tick { fill: var(--ink-2); font-size: 12px; text-anchor: middle; font-family: var(--font); }
.scene-cap { min-height: 1.6em; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.scene-eq { min-height: 1.6em; font-size: 1.6rem; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.see-ask { width: 100%; display: flex; justify-content: center; }
.see-ask .play { max-width: 420px; }
.trick.picture { max-width: 620px; }
.big-fact { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .scene .dot, .scene .hop { transition: none; } }

/* My tables */
.me { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.me-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.me-goal { display: flex; align-items: center; gap: 12px; }
.ring { width: 64px; height: 64px; }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .6s; }
.ring-fg.done { stroke: var(--good); }
.ring-t { font-size: 24px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.me-next { display: flex; flex-direction: column; gap: 6px; }
.me-praise { display: flex; align-items: center; font-weight: 700; color: var(--good); }
.me-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.me-main .card { min-height: 0; overflow: hidden; }
.me-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.me-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 8px auto; aspect-ratio: 1; max-height: 46dvh; max-width: 100%; }
.me-c { border-radius: 5px; background: var(--st-locked); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; }
.me-c[data-b="0"] { background: var(--sp0); } .me-c[data-b="1"] { background: var(--sp1); } .me-c[data-b="2"] { background: var(--sp2); }
.me-c[data-b="3"] { background: var(--sp3); } .me-c[data-b="4"] { background: var(--sp4); } .me-c[data-b="5"] { background: var(--sp5); }
.me-c[data-b=wrong] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--st-learning); }
.me-c.star { outline: 2px solid gold; outline-offset: -2px; }
.me-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 6px; }
.me-t { border: 1px solid var(--line); border-radius: 10px; padding: 4px; text-align: center; font-size: .85rem; }
.me-t.cur { border: 2px solid var(--accent); }
.me-t span { display: block; color: #d4a017; letter-spacing: 1px; }
.trend { width: 100%; height: 60px; }
.trend-l { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.trend-best { fill: var(--good); }
@media (max-width: 700px) { .me-main { grid-template-columns: minmax(0, 1fr); } .me-side { display: none; } .me-grid { max-height: 38dvh; } }
/* Text settings (the Recite practice plan, 2026-10-27) */
.set-textctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.set-text { width: 100%; font: .85rem/1.45 ui-monospace, Consolas, monospace; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; box-sizing: border-box; }
.set-text-note { margin: 0; font-size: .8rem; color: var(--ink-2); }
.set-text-note.bad { color: var(--bad); font-weight: 700; }
.set-textctl .btn { align-self: flex-start; }