/* Engineering pass 2026-10-25: game picker on the child home, "See my progress" after a practice, accessibility. */

/* Game for this practice (child home, beside the length picker). */
.game-pick { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.game-pick select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; padding: 0 8px; max-width: 11rem; }
@media (max-height: 420px) { .game-pick > span { display: none; } }

/* See my progress: a small map of the facts from this practice, coloured by speed now. */
.progress-view .prog-title { font-size: clamp(1.2rem, 4dvh, 1.6rem); margin: 0; }
.progress-view .prog-sub { margin: 0; }
.prog-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 640px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.prog-c { border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; gap: 1px; align-items: center; justify-content: center; min-height: 58px;
  background: var(--st-locked); color: var(--ink); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.prog-c b { font-size: 1rem; }
.prog-c .prog-t, .prog-c .prog-d, .prog-c .prog-up { font-size: .78rem; line-height: 1.2; }
.prog-c .prog-up { font-weight: 700; }
.prog-c[data-b="0"] { background: var(--sp0); color: var(--sp-ink-dark); } .prog-c[data-b="1"] { background: var(--sp1); color: var(--sp-ink-dark); }
.prog-c[data-b="2"] { background: var(--sp2); color: var(--sp-ink-dark); } .prog-c[data-b="3"] { background: var(--sp3); color: var(--sp-ink-light); }
.prog-c[data-b="4"] { background: var(--sp4); color: var(--sp-ink-light); } .prog-c[data-b="5"] { background: var(--sp5); color: var(--ink); }
body[data-palette=ttrs] .prog-c[data-b="2"] { color: #1a1a1a; } body[data-palette=ttrs] .prog-c[data-b="5"] { color: #fff; }
@media (max-height: 420px) {
  .prog-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
  .prog-c { min-height: 44px; padding: 3px; }
  .prog-c .prog-up { display: none; }
}
@media (max-width: 360px) { .prog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prog-c .prog-t { font-size: .72rem; } }

/* Accessibility (WCAG 2.2 AA): a visible focus ring on everything that takes focus, keyboard or not mouse. */
:focus-visible { outline: 3px solid var(--focus, #1a56b8); outline-offset: 2px; }
.key:focus-visible, .seg:focus-visible, .cell:focus-visible, .c:focus-visible, .tab:focus-visible { outline-offset: -3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:root { --focus: #1a56b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --focus: #9cc2ff; } }
:root[data-theme="dark"] { --focus: #9cc2ff; }

/* Fit fixes found by scripts/fitcheck.mjs (2026-10-25). */
.progress-view { width: 100%; }
.len .seg { min-width: 44px; }
body.fit .summary > .row:last-child { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; max-width: 520px; margin: 0 auto; gap: 8px; }
body.fit .summary > .row:last-child .btn { padding: 0 8px; line-height: 1.15; }
@media (max-height: 700px) {
  body.fit .summary { gap: 8px; }
  body.fit .summary h1 { font-size: 1.35rem; margin: 0; }
  body.fit .summary .stat { padding: 6px 4px; }
  body.fit .summary .stat b { font-size: 1.3rem; }
  body.fit .summary p { margin: 0; }
  body.fit .summary .facts-list { gap: 4px; }
  body.fit .summary .facts-list span { padding: 2px 8px; font-size: .9rem; }
  body.fit .summary .btn.big { min-height: 48px; font-size: 1rem; }
}
@media (max-height: 420px) {
  body.fit .summary { gap: 4px; max-width: 720px; }
  body.fit .summary h1 { font-size: 1.15rem; }
  body.fit .summary .stats { gap: 6px; }
  body.fit .summary .stat { padding: 2px 4px; display: flex; gap: 6px; align-items: baseline; justify-content: center; }
  body.fit .summary .stat b { font-size: 1.1rem; display: inline; }
  body.fit .summary .facts-list span { font-size: .8rem; padding: 1px 6px; }
  body.fit .summary .btn.big { min-height: 44px; }
}
/* My tables on short portrait phones: the "Next up" facts are already named on the button, so the list goes. */
@media (max-width: 700px) and (max-height: 700px) { body.fit .me-next .next-list { display: none; } }
/* Hygiene P2s (2026-10-25): the "i" 44px tap areas were cut. In the scrolling tab bar the "i" sat at the top, so the
   bar's overflow clipped its hit area (45x33); centre it. Under "Table order" the strip began 2px inside it (45x41). */
.tabs { align-items: center; min-height: 46px; }
.tabs > .it-btn { align-self: center; flex: none; margin-inline: 12px; }
h2 + .order-strip { margin-top: 6px; }

/* Colour contrast (WCAG 2.2 AA 1.4.3), measured by scripts/contrast.mjs on 2026-10-25; see ACCESSIBILITY.md.
   Small text needs 4.5:1, large text 3:1. Old value → new value, with the ratio it fixes. */
:root {
  --ink-3: #5f6676;        /* #7b8292 was 3.51:1 on the page and 3.85:1 on cards; now 5.24 / 5.76 */
  --good: #1a7a50;         /* #1f8a5b text was 4.33:1 on white; now 5.33 */
  --st-mastered: #237a4f;  /* white numbers were 4.30:1; now 5.29 */
  --sp2: #256fc8;          /* blue scale, white numbers were 4.42:1 on #2a78d6; now 5.02 */
  --tier-ink: #8a5a12;     /* hint tags were 3.38:1 (#b7791f on the hint yellow); now 5.48 */
  --star-ink: #8a6500;     /* table stars were 2.38:1 (#d4a017 on white); now 5.33 */
  --sp-ink-3: var(--sp-ink-light);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3: #959cab; --good: #4cc38a; --st-mastered: #5fd39a; --sp2: #6da7ec; --tier-ink: #d9a04a; --star-ink: #e0b43a; --sp-ink-3: var(--sp-ink-dark); } }
:root[data-theme="dark"] { --ink-3: #959cab; --good: #4cc38a; --st-mastered: #5fd39a; --sp2: #6da7ec; --tier-ink: #d9a04a; --star-ink: #e0b43a; --sp-ink-3: var(--sp-ink-dark); }
/* TTRS palette: red was 4.36:1 with white numbers (#d9433b → #c93a32, 5.08); light green needs dark numbers (6.26). */
body[data-palette=ttrs] { --sp5: #c93a32; --sp-ink-3: #1a1a1a; }
body[data-palette=ttrs] .heat .c[data-mode=speed][data-b="1"], body[data-palette=ttrs] .heat .c.avg[data-b="1"], body[data-palette=ttrs] .rep-grid .rc[data-b="1"], body[data-palette=ttrs] .prog-c[data-b="1"] { color: #1a1a1a; }
/* Dark blue scale: band 3 (#3987e5) needs dark numbers (white was 3.64:1; #0d1117 is 5.20). */
.heat .c[data-mode=speed][data-b="3"], .heat .c.avg[data-b="3"], .rep-grid .rc[data-b="3"], .prog-c[data-b="3"] { color: var(--sp-ink-3); }
.hint .tier { color: var(--tier-ink); }
.me-t span { color: var(--star-ink); }
/* The ★ on My tables squares takes the square's number colour (white on light squares was 1.81–2.51:1). */
.me-c[data-b="0"], .me-c[data-b="1"], .me-c[data-b="2"] { color: var(--sp-ink-dark); }
.me-c[data-b="3"] { color: var(--sp-ink-3); } .me-c[data-b="4"] { color: var(--sp-ink-light); } .me-c[data-b="5"] { color: var(--ink); }
body[data-palette=ttrs] .me-c[data-b="1"], body[data-palette=ttrs] .me-c[data-b="2"] { color: #1a1a1a; } body[data-palette=ttrs] .me-c[data-b="5"] { color: #fff; }
.me-c[data-b=none], .me-c[data-b=wrong] { color: var(--ink); }
/* Faded (opacity .55) text failed: locked tables 1.94:1, thin squares 2.75–3.03:1. They keep full-strength text and
   show their state another way: locked tables a dashed edge, squares with fewer than 3 right answers a dashed ring. */
.order-strip .t.locked { opacity: 1; border-style: dashed; background: var(--surface-2); }
.heat .c.thin, .legend .sw.thin-sw { opacity: 1; }
.heat .c.thin:not(:focus-visible) { outline: 2px dashed var(--ink); outline-offset: -4px; }
.legend .sw.thin-sw { outline: 2px dashed var(--ink); outline-offset: -3px; }
.early-stage.locked { opacity: 1; border-style: dashed; }
/* Dark: the secure green (#2f8a5c) gave 3.75:1 with light numbers and 4.43:1 with #0d1117; black is 4.92:1. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .heat .c[data-mode=stage][data-s=secure] { color: #000; } }
:root[data-theme="dark"] .heat .c[data-mode=stage][data-s=secure] { color: #000; }
/* The page itself takes focus on every screen change (for screen readers); it is not a control, so no ring. */
main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }
/* A focus ring drawn inside a chosen (blue) option would vanish (1.08:1): there it is drawn in the option's text colour. */
.seg[aria-checked=true]:focus-visible, .btn.primary:focus-visible { outline-color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent); }
.btn.primary:focus-visible { outline-offset: -5px; }
/* Landscape phones (740 × 360): the game picker sits on the same line as the length choices. */
@media (max-height: 420px) and (min-width: 600px) { body.fit .len { flex-wrap: nowrap; align-items: center; } body.fit .len .segs { margin: 0; } }