/* The grown-up's companion page. Phone first; light and dark follow the device.
   Used by: parent.html, index.html. */

/* Anything marked hidden stays hidden, whatever display a class gives it (a cover shown by mistake blocks every tap). */
[hidden] { display: none !important; }

:root {
  --bg: #f6f5fb;
  --card: #fff;
  --ink: #1d1b29;
  --muted: #6b6784;
  --line: #e3e0ef;
  --accent: #5b4fe0;
  --good: #1f9d55;
  --good-bg: #e3f6ea;
  --warn: #b7791f;
  --warn-bg: #fdf1dc;
  --idle-bg: #efedf6;
  --danger: #c53030;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14121f; --card: #1f1c2e; --ink: #f1eff9; --muted: #a29dbd; --line: #2f2b45;
    --accent: #8f86ff; --good: #5ad28b; --good-bg: #16301f; --warn: #f0b458; --warn-bg: #33270f; --idle-bg: #29253b; --danger: #ff7a7a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 8px 16px 48px; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 28px 0 8px; }
h3 { font-size: 16px; margin: 0 0 8px; }
button, .button {
  font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
}
.note { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

.bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.back { color: var(--accent); text-decoration: none; font-weight: 600; }
.name { margin-left: auto; min-width: 0; width: 45%; max-width: 220px; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.now { font-size: 17px; margin: 0; }

.together { display: grid; gap: 12px; }
.try { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.try dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; }
.try dt { color: var(--muted); font-size: 14px; }
.try dd { margin: 0; }
.previous { color: var(--warn); font-size: 14px; margin: 0 0 8px; }
.try-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.try-actions .did { background: var(--good); color: #fff; border-color: transparent; font-weight: 600; }

.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.finding { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 14px; }
.finding.capacity, .finding.skip { border-left-color: var(--warn); }
.finding.rug, .finding.order { border-left-color: var(--good); }
.finding.empty { border-left-color: var(--line); color: var(--muted); }
.evidence { color: var(--muted); font-size: 13px; }

.map { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.skill { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.skill.locked { opacity: .6; }
.skill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.skill-title { font-weight: 600; }
.pill { font-size: 12px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--idle-bg); color: var(--muted); }
.pill.open { background: var(--warn-bg); color: var(--warn); }
.pill.waiting { white-space: normal; font-style: italic; } /* a game built but not on the tablet until its voice is recorded */
.pill.placed, .pill.implied, .pill.mastered { background: var(--good-bg); color: var(--good); }
.for-parent { margin: 4px 0 8px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; border-radius: 8px; padding: 3px 8px; background: var(--idle-bg); color: var(--muted); border: 1px solid transparent; }
.chip.parent { border-style: dashed; border-color: var(--line); }
.chip.passed { background: var(--good-bg); color: var(--good); }
.chip.passed::before { content: "✓ "; }
.chip.tried, .chip.helped { background: var(--warn-bg); color: var(--warn); }
.source { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.data-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.danger { color: var(--danger); }

/* index.html */
.landing { min-height: 100dvh; display: grid; place-content: center; gap: 16px; padding: 24px; text-align: center; }
.landing a { display: block; padding: 18px 28px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 600; }
.landing a.primary { background: var(--accent); color: #fff; border-color: transparent; }

/* Household, children, today and over time */
.where { margin-left: auto; font-size: 13px; color: var(--muted); }
.welcome { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 16px; display: grid; gap: 12px; }
.welcome[hidden] { display: none; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); margin: 8px 0; }
label.check { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); }
input:not([type]), input[inputmode] { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.primary { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.kids { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; }
.kid { gap: 8px; white-space: nowrap; }
.kid.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kid.add { color: var(--accent); }
.avatar { width: 28px; height: 28px; object-fit: contain; }
.avatar.big { width: 56px; height: 56px; }
.test-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.child-head { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.child-name { font-size: 22px; font-weight: 700; border: 0 !important; background: transparent !important; padding: 4px 0 !important; min-width: 0; width: 12ch; }
.child-age { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.child-age-note { flex-basis: 100%; margin: 4px 0 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.switch button { border: 0; border-radius: 0; min-height: 36px; font-size: 14px; }
.switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.days, .milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.day { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .8fr; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.day-date { font-weight: 600; }
.muted { color: var(--muted); }
.milestones li { font-size: 15px; }
.milestones li.remembered::before { content: "★ "; color: var(--good); }
.milestones li.placed::before { content: "✓ "; color: var(--good); }
.undo { font-size: 14px; color: var(--muted); margin: 0; }
.link { border: 0; background: none; color: var(--accent); padding: 0 4px; min-height: 0; text-decoration: underline; }
dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); max-width: min(92vw, 520px); padding: 16px; }
dialog::backdrop { background: #0008; }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pick { justify-content: center; padding: 6px; min-height: 64px; }
.pick .avatar { width: 44px; height: 44px; }
.pick.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* lab.html */
.lab-list { display: grid; gap: 8px; }
.lab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lab-name { flex: 1 1 100%; font-size: 15px; }
.lab-value { font-variant-numeric: tabular-nums; min-width: 60px; }
.lab-row input[type="range"] { flex: 1; min-width: 160px; }
.lab-status { position: sticky; top: 60px; z-index: 1; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 600; }
.lab-row select { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); max-width: 100%; }
.score-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.score { width: 100%; height: 380px; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.legend { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; margin: 10px 0 16px; }
.legend dt { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.legend dd { margin: 0; color: var(--muted); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.score { cursor: pointer; }
.influences { background: var(--card); border: 2px solid var(--accent); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.influences h3 { margin: 0 0 6px; }
.influences p { margin: 4px 0; font-size: 14px; }
.lab-row.affects { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

/* The lab as one screen: the drawing pinned on top, the options scrolling underneath. */
body.lab { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.lab .bar { flex: none; }
.bench { flex: 1; min-height: 0; max-width: 1200px; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 0; }
.bench-top { flex: none; display: grid; gap: 8px; }
.bench-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bench-controls button, .bench-controls select { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.bench-controls select { max-width: 340px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.bench .lab-status { position: static; margin: 0; padding: 6px 12px; font-size: 14px; }
.bench .score { height: min(340px, 40dvh); }
.bench-options { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px 24px; border-top: 1px solid var(--line); }
.bench-options details { margin: 6px 0; }
.bench-options summary { cursor: pointer; font-weight: 600; padding: 8px 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.bench-options .influences { position: sticky; top: 0; z-index: 1; }
.knobs .lab-row { display: grid; grid-template-columns: minmax(200px, 320px) 1fr 64px repeat(3, auto); align-items: center; gap: 8px; padding: 6px 10px; }
.knobs .lab-name { display: grid; line-height: 1.25; min-width: 0; }
.knobs .lab-name b { font-size: 14px; }
.knobs .why { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knobs button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .knobs .lab-row { grid-template-columns: repeat(3, 1fr); }
  .knobs .lab-name { grid-column: 1 / -1; }
  .knobs input[type="range"] { grid-column: span 2; min-width: 0; }
  .knobs button { justify-content: center; }
}
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.compare-wide { grid-column: 1 / -1; }
.compare-card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.compare-card figcaption { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.compare-card .note { margin: 6px 0 0; font-size: 12px; }
.spectrogram { width: 100%; height: 150px; display: block; border-radius: 6px; cursor: pointer; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* The test bench: controls beside the real tablet page in a frame. */
.testbench [hidden] { display: none !important; }
.testbench { max-width: 1400px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 16px; align-items: start; }
.tb-controls { display: grid; gap: 12px; }
.tb-group { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.tb-group h2 { margin: 0 0 4px; }
.tb-group label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-group select, .tb-group input:not([type="checkbox"]), .tb-group textarea {
  font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); max-width: 100%; }
.tb-group textarea { width: 100%; }
.tb-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-said { margin: 0; padding-left: 22px; font-size: 14px; max-height: 240px; overflow: auto; }
.tb-json { margin: 0; font-size: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
/* The two screens: the tablet upright (played) and on its side (the same card, watched), each a real tablet size
   scaled down to fit (src/app/bench.js sets the size and the scale). */
.tb-screens { display: grid; gap: 12px; align-content: start; }
.tb-size { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.tb-screen { margin: 0; display: grid; gap: 4px; }
.tb-screen figcaption { color: var(--muted); font-size: 13px; }
.tb-fit { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #14121f; }
.tb-fit iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }
.tb-note { display: grid; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 14px; }
.tb-note .when { color: var(--muted); font-size: 12px; }
.tb-parts { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-parts span { font-size: 12px; background: var(--idle-bg); border-radius: 999px; padding: 2px 8px; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 900px) {
  .testbench { grid-template-columns: 1fr; }
  .tb-screens { order: -1; }
}

/* What each skill covers in the curriculum, on the map. */
.covers-title { margin: 8px 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.covers { margin: 0 0 6px; padding-left: 18px; font-size: 14px; }
.covers li { margin: 2px 0; }

/* Live with the tablet. */
.live { background: var(--card); border: 2px solid var(--accent); border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.live h2 { margin-top: 0; }
.live-now { font-weight: 600; margin: 0 0 6px; }
/* The card itself, drawn again from what the tablet sends (mirror.html): look, don't touch. */
/* The frame is the tablet's own size (so the card lays out as it does there), scaled down to fit the box. */
.live-card-box { position: relative; width: min(100%, 420px); overflow: hidden; border-radius: 12px; margin: 6px 0 10px; background: #14121f; }
.live-card { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.live-answers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 10px; }
.live-answers li { border-radius: 999px; padding: 2px 10px; font-size: 14px; }
.live-answers .right { background: var(--good-bg); color: var(--good); }
.live-answers .wrong { background: var(--warn-bg); color: var(--warn); }
.live-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-catalogue details { margin: 4px 0; }
.tb-entry { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); }
.tb-entry img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.tb-entry .note { margin: 0; font-size: 13px; }
.live-help { background: var(--warn-bg); color: var(--warn); font-weight: 700; border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.live-send { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.live-send select { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

/* The curriculum, statement by statement. */
.curriculum .framework { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.curriculum summary { font-weight: 600; cursor: pointer; }
.statements { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.statements li { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid var(--line); }
.statements li.done .statement::before { content: "✓ "; color: var(--good); font-weight: 700; }
.statements .games { display: flex; flex-wrap: wrap; gap: 4px; }

/* Every card (record.html): one lane per day, each card a block in its skill's colour. */
body.record main { max-width: 1200px; }
.rec-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.rec-key-item { display: inline-flex; align-items: center; gap: 6px; }
.rec-swatch { display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
.rec-zoom { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.rec-zoom button { min-height: 36px; padding: 4px 14px; }
.rec-days { overflow-x: auto; border-top: 1px solid var(--line); }
.rec-day { display: grid; grid-template-columns: 84px auto; align-items: end; border-bottom: 1px solid var(--line); }
.rec-day-name { position: sticky; left: 0; z-index: 1; background: var(--bg); font-size: 13px; color: var(--muted); padding: 0 8px 8px 0; align-self: stretch; display: flex; align-items: flex-end; }
.rec-lane { position: relative; height: 92px; }
.rec-sitting { position: absolute; top: 2px; font-size: 11px; color: var(--muted); border-bottom: 1px dashed var(--line); height: 14px; white-space: nowrap; }
.rec-card { position: absolute; bottom: 4px; min-height: 0; padding: 0; border-radius: 3px; border: 2px solid var(--c); background: var(--c); }
.rec-helped { background: repeating-linear-gradient(135deg, var(--c) 0 4px, transparent 4px 8px); }
.rec-missed { background: transparent; border-color: var(--danger); }
.rec-skipped { background: transparent; border-style: dashed; }
.rec-shown { background: color-mix(in srgb, var(--c) 25%, transparent); border-style: dotted; }
.rec-swatch.rec-right, .rec-swatch.rec-helped, .rec-swatch.rec-missed, .rec-swatch.rec-skipped, .rec-swatch.rec-shown { border: 2px solid var(--c); }
.rec-swatch.rec-right { background: var(--c); }
.rec-tap { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .7; }
.rec-mark { position: absolute; top: -18px; left: 0; font-size: 13px; color: var(--ink); }
.rec-detail { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.rec-detail h2 { margin-top: 0; }
.rec-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 8px; }
.rec-facts dt { color: var(--muted); font-size: 14px; }
.rec-facts dd { margin: 0; overflow-wrap: anywhere; }
.rec-json { font-size: 12px; overflow-x: auto; background: var(--bg); padding: 8px; border-radius: 8px; }

/* The bench's axis menus sit among the other controls as if written there. */
.tb-axes { display: contents; }

/* The sticker gallery (stickers.html): every sticker, by kind, on the tablet's dark ground. */
body.gallery-page main { max-width: 1200px; }
.gallery-find { display: block; margin: 0 0 12px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.gallery-card { margin: 0; padding: 8px; border-radius: 12px; background: #14121f; color: #f1eff9; text-align: center; }
.gallery-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.gallery-card figcaption { display: grid; gap: 2px; font-size: 13px; }
.gallery-card .note { font-size: 11px; margin: 0; overflow-wrap: anywhere; }
.gallery-counted { font-size: 11px; color: #5ad28b; }
.gallery-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 12px; }
.gallery-tools .gallery-find { margin: 0; }
.gallery-card { display: grid; gap: 6px; align-content: start; min-width: 0; border: 2px solid transparent; }
.gallery-card.flagged { border-color: var(--danger); }
.gallery-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; text-align: left; font-size: 12px; }
.gallery-notes li { background: #221f33; border-radius: 8px; padding: 4px 6px; overflow-wrap: anywhere; }
.gallery-notes li.redo { box-shadow: inset 3px 0 0 var(--danger); }
.gallery-notes li.done { color: #5ad28b; }
.gallery-notes li.old { opacity: .6; }
.gallery-add { font-size: 12px; padding: 4px 8px; }
.gallery-notebox { display: grid; gap: 6px; text-align: left; font-size: 13px; }
.gallery-notebox textarea, .gallery-by { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; padding: 6px; border-radius: 8px; border: 1px solid #3a3552; background: #221f33; color: #f1eff9; }
.rec-card.rec-faded { opacity: .18; }
.rec-zoom label { margin-right: auto; font-size: 14px; color: var(--muted); }
.live-answers .misclick { min-height: 0; padding: 0 8px; font-size: 12px; border-radius: 999px; }
.rec-struck { background: transparent; border-style: dashed; opacity: .35; }

/* The owner's to-do page (admin.html). */
.admin-items { display: grid; gap: 12px; margin-bottom: 12px; }
.admin-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.admin-item.answered { border-color: var(--good); }
.admin-item h2 { margin-top: 0; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 17px; }
.admin-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.admin-command { display: block; width: 100%; padding: 8px; border-radius: 8px; background: var(--bg); font-size: 13px; overflow-wrap: anywhere; }
.admin-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; width: 100%; font-size: 14px; }
/* Picture cards, three across (two, then one, on narrower screens): the picture and words on top, the buttons in
   a footer pinned to the bottom, full width, so every card's buttons line up. */
.admin-pictures { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .admin-pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .admin-pictures { grid-template-columns: minmax(0, 1fr); } }
.admin-pictures li { background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* A card's border, like the games' cards: amber once tested here, green once played with Lucian, red to redo. */
.admin-pictures li.tested { border-color: var(--warn); }
.admin-pictures li.played { border-color: var(--good); box-shadow: 0 0 12px color-mix(in srgb, var(--good) 35%, transparent); }
.admin-pictures li.vetoed { border-color: var(--danger); box-shadow: none; }
/* A fix is waiting for him to try (blue, over the other marks: it's what needs him next). */
.admin-pictures li.retest { border-color: #3d9bff; box-shadow: 0 0 12px #3d9bff55; }
.test-fix { margin: 6px 0 2px; padding: 8px 10px; border-left: 3px solid #3d9bff; background: #3d9bff14; border-radius: 6px; font-size: .92em; }
.test-fix-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.test-fix-row .button, .test-fix-row button { padding: 4px 10px; font-size: .9em; }
.test-verdict.works.on { border-color: var(--good); color: var(--good); }
.test-verdict.still.on { border-color: var(--danger); color: var(--danger); }
.admin-page main { max-width: 1040px; } /* room for three cards across */
.admin-pictures label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14px; min-width: 0; }
.admin-pictures img { width: 100%; height: 120px; min-width: 0; object-fit: contain; }
.admin-card-top { flex: 1; align-content: start; }
.admin-card-foot { display: grid; gap: 8px; }
.admin-card-foot .admin-try { justify-content: center; text-decoration: none; }
.admin-pictures .admin-veto { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.admin-play { min-width: 36px; padding: 4px 8px; }
.admin-how { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.admin-answered { color: var(--good); font-weight: 600; }
.admin-comment { display: flex; gap: 8px; align-items: flex-start; }
.admin-comment textarea, #anything { flex: 1; width: 100%; font: inherit; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

/* Teach together (teach.html): the whole and the part, the split as dots, the facts, the activities. */
.teach-pick { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper strong { min-width: 2.2em; text-align: center; font-size: 24px; }
.teach-split { display: grid; grid-template-columns: repeat(5, 36px); gap: 8px; padding: 12px; border-radius: 14px; background: var(--card); width: max-content; margin: 8px 0; }
.teach-split .dot { width: 36px; height: 36px; border-radius: 50%; }
.teach-split .part-a { background: #e8262d; }
.teach-split .part-b { background: #00aeef; }
.teach-split .covered { background: repeating-linear-gradient(45deg, #8a8499 0 6px, #a29dbd 6px 12px); border-radius: 8px; }
.teach-facts { list-style: none; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: 22px; font-weight: 600; }
.teach-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
.teach-activity { background: var(--card); border-radius: 14px; padding: 16px; }
.teach-answer { font-weight: 600; }



/* The test run on the bench: the four steps, the one playing now marked; the owner's two marks. */
.tb-run { border-color: var(--accent); }
.tb-run-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.tb-run-steps li { cursor: pointer; color: var(--muted); }
.tb-run-steps li.now { color: var(--ink); font-weight: 600; }
.tb-run-steps li.done { text-decoration: line-through; }
.admin-tests { display: grid; gap: 8px; }
.admin-tests button { width: 100%; justify-content: center; min-height: 40px; padding: 6px 10px; font-size: 14px; }
.admin-tests button.on.ok { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.admin-tests button.on.tablet { background: var(--good-bg); border-color: var(--good); color: var(--good); }

.tb-run-note { display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.tb-run-notes, .admin-game-notes { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.admin-game-notes:empty { display: none; }
.admin-card-foot > button { width: 100%; justify-content: center; }

/* The accounts pages (join, log in, pair a tablet): one card in the middle of the phone. */
.auth-page main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.auth-card { width: min(100%, 420px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 20px; box-shadow: 0 10px 30px #0002; }
.auth-logo { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 8px; }
.auth-card h1 { text-align: center; margin-bottom: 12px; }
.auth-form { display: grid; gap: 6px; }
.auth-form input[type="password"], .auth-form input { font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%; }
.auth-form button { justify-content: center; margin-top: 8px; }
.auth-code { font-size: 28px !important; letter-spacing: .3em; text-align: center; }
.auth-error { color: var(--danger); margin: 6px 0 0; }
.qr-box { background: #fff; border-radius: 12px; padding: 10px; width: min(100%, 280px); margin: 8px auto; }
.qr-box svg { display: block; width: 100%; height: auto; }

/* The parents' page (family.html): the live card fills the top half of the phone and stays there; everything else
   folds open and shut beneath it. */
.fam-live { position: sticky; top: 0; z-index: 5; height: 50vh; height: 50dvh; background: #15131f; display: grid; grid-template-rows: 1fr auto auto; box-shadow: 0 6px 18px #0005; }
.fam-live-box { position: relative; overflow: hidden; }
.fam-live-card { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.fam-live-idle { position: absolute; inset: 0; display: grid; place-items: center; color: #a29dbd; margin: 0; padding: 16px; text-align: center; }
.fam-live-now { margin: 0; padding: 6px 12px; color: #f1eff9; font-size: 14px; background: #1f1c2e; min-height: 1.5em; }
.fam-live-help { margin: 0; padding: 6px 12px; background: #f0b458; color: #1d1b29; font-weight: 600; }
.fam-main { max-width: 720px; margin: 0 auto; padding: 4px 12px 64px; }
.fam-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 4px 4px; }
.fold { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; overflow: hidden; overflow: clip; }
.fold > summary { list-style: none; padding: 14px 16px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "⌄"; font-size: 20px; color: var(--muted); transition: transform .2s; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > :not(summary) { margin: 0 12px 12px; }
/* Only the page scrolls (a box scrolling inside it traps a thumb). An open section's header stays just under what's
   pinned at the top (--fold-top, measured by src/ui/folds.js), so it can be closed from anywhere in a long section. */
.fold[open] > summary { position: sticky; top: var(--fold-top, 0px); z-index: 4; background: var(--card); border-bottom: 1px solid var(--line); }
.fold > summary { scroll-margin-top: var(--fold-top, 0px); }
.fold > .today-more { width: calc(100% - 24px); justify-content: center; min-height: 48px; }
/* A remote: a neat grid of big buttons, two across (four in a row on a wide screen). */
.remote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .fold .remote-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.remote-button { flex-direction: column; justify-content: center; gap: 6px; min-height: 80px; border-radius: 14px; font-weight: 600; text-align: center; line-height: 1.2; }
.remote-glyph { font-size: 24px; line-height: 1; color: var(--accent); }
.remote-button.good .remote-glyph { color: var(--good); }
.remote-button.warn .remote-glyph { color: var(--danger); }
/* The history: icon, the card as it looked, what happened, the button. */
.history { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.fold > .history { width: calc(100% - 24px); } /* a table's width leaves out its margins: 100% plus the fold's 12px each side ran 24px past the edge */
.history td { vertical-align: middle; padding: 0 4px; }
.h-icon { width: 40px; }
.h-icon img { width: 36px; height: 36px; object-fit: contain; display: block; }
.h-look { width: 92px; }
.card-look { width: 88px; height: 66px; border-radius: 8px; overflow: hidden; position: relative; background: #1d1a2b; }
.card-look iframe { position: absolute; top: 0; left: 0; width: 1024px; height: 768px; border: 0; transform: scale(.0859); transform-origin: 0 0; pointer-events: none; }
.card-look-icon { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.h-what > * { display: block; }
.h-what strong { font-size: 15px; }
.h-result { font-size: 14px; }
.h-result.good { color: var(--good); }
.h-result.warn { color: var(--warn); }
.h-tag { font-size: 12px; background: var(--idle-bg); border-radius: 999px; padding: 1px 8px; width: fit-content; margin-top: 2px; }
.h-more { width: 48px; text-align: right; }
.h-button { min-width: 44px; justify-content: center; font-size: 22px; padding: 6px; }
.day > summary { padding: 10px 0; cursor: pointer; }
/* The mini remote and the games picker: a dialog over the page. */
.remote-dialog { border: 0; border-radius: 18px; padding: 16px; width: min(94vw, 480px); max-height: 92vh; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px #0008; }
.remote-dialog::backdrop { background: #000a; }
.remote-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.remote-icon { width: 56px; height: 56px; object-fit: contain; flex: none; }
.remote-top h2 { margin: 0; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 18px; }
.remote-top .note { margin: 2px 0 0; }
.remote-text { display: grid; gap: 8px; margin-top: 12px; }
.remote-text textarea { font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%; }
.remote-text button { justify-content: center; }
.remote-close { width: 100%; justify-content: center; margin-top: 12px; }
.picker-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 56vh; overflow-y: auto; }
.picker-game { flex-direction: column; justify-content: flex-start; gap: 4px; font-size: 12px; min-height: 100px; text-align: center; line-height: 1.2; }
.picker-game img { width: 48px; height: 48px; object-fit: contain; }
.steer-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.steer-line img { width: 32px; height: 32px; object-fit: contain; }
.steer-line span { flex: 1; }
#family { display: grid; gap: 8px; }
.kid-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.kid-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pair-code { font-size: 22px; letter-spacing: .2em; }
.add-child { display: flex; gap: 8px; }
.add-child input { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); min-width: 0; }
/* The dials (more or less of each area) and the skills list. */
.dial { margin: 10px 0; }
.dial-name { font-weight: 600; display: block; margin-bottom: 4px; }
.dial-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.dial-step { font-size: 12px; padding: 6px 2px; min-height: 40px; justify-content: center; text-align: center; line-height: 1.1; }
.dial-step.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.skill-area > summary { padding: 10px 0; font-weight: 600; cursor: pointer; }
.skill-strand { font-size: 14px; color: var(--muted); margin: 10px 0 6px; }
.skill-list { display: grid; gap: 6px; }
.skill-game { display: grid; grid-template-columns: 36px 1fr auto; gap: 4px 10px; align-items: center; text-align: left; padding: 6px 10px; }
.skill-game img { width: 36px; height: 36px; object-fit: contain; grid-row: span 2; }
.skill-game .h-tag { grid-column: 2 / -1; }
.skill-where { font-size: 12px; border-radius: 999px; padding: 2px 8px; background: var(--idle-bg); white-space: nowrap; }
.skill-where.good { background: var(--good-bg); color: var(--good); }
.skill-where.now { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.skill-where.next { background: var(--warn-bg); color: var(--warn); }
.admin-reports { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.admin-report { border-left: 3px solid var(--warn); padding: 4px 10px; }
.admin-report.fix { border-left-color: var(--accent); }
.admin-report .note { display: block; margin: 2px 0 0; }
.remote-button.on { box-shadow: inset 0 0 0 3px var(--accent); }
.history tr.fresh td { animation: fresh-row 2.4s ease-out; }
@keyframes fresh-row { from { background: color-mix(in srgb, var(--accent) 28%, transparent); } to { background: transparent; } }
.admin-controls button.chosen { box-shadow: inset 0 0 0 3px var(--accent); }
/* The to-do page: every item a fold, as on the parents' page, with a mark on the side (src/app/admin.js). */
.admin-items { gap: 0; }
.fold-head { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; }
.fold-head-text { display: grid; gap: 2px; min-width: 0; }
.fold-head-text .note { margin: 0; font-weight: 400; }
.fold[open] > summary + * { margin-top: 12px; }
.admin-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.admin-mark.waiting { background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--warn); }
.admin-mark.pending { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 2px var(--good); }
.admin-mark.done { background: var(--good); color: #fff; }
.admin-reply { border-left: 3px solid var(--good); padding-left: 10px; }
.admin-group { margin: 18px 0 4px; font-size: 15px; color: var(--muted); }
/* The letter-sound review (sounds.html): switches and the owner's keyboard pinned under the bar, the letter below. */
.sounds-page { --key-bg: var(--card); --key-line: var(--line); --key-ink: var(--ink); --key-selected: color-mix(in srgb, var(--accent) 25%, var(--card)); }
.sr-pinned { position: sticky; z-index: 3; background: var(--bg); padding: 8px 12px 4px; display: grid; gap: 8px; justify-items: center; border-bottom: 1px solid var(--line); }
.sr-modes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sr-mode { display: flex; gap: 8px; align-items: baseline; border-radius: 999px; padding: 6px 12px; }
.sr-mode.on { background: var(--accent); color: #fff; border-color: transparent; }
.sr-mode-count { font-size: 12px; opacity: .8; }
.sr-keys { width: 100%; display: grid; justify-items: center; }
.sr-keys g[data-key] { cursor: pointer; }
.sr-legend { margin: 0; font-size: 12px; text-align: center; }
.sr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--line); margin: 0 3px 0 8px; vertical-align: -1px; }
.sr-dot.right { border-color: var(--good); } .sr-dot.wrong { border-color: var(--danger); } .sr-dot.changed { border-color: var(--warn); }
.sr-main { max-width: 720px; margin: 0 auto; padding: 12px; }
.sr-now { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
.sr-now-head { display: flex; gap: 14px; align-items: center; }
.sr-now-head h2 { margin: 0; font-size: 20px; }
.sr-now-head .note { margin: 2px 0 0; }
.sr-letter { width: 72px; height: 80px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.sr-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.sr-actions button { min-height: 48px; justify-content: center; font-weight: 600; }
.sr-right { border-color: var(--good); color: var(--good); }
.sr-wrong { border-color: var(--danger); color: var(--danger); }
.sr-note { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.sr-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* The introductions pass (intros.html): the tablet upright in a frame, an arrow either side, a big x underneath. */
.iv-progress { height: 4px; background: var(--line); }
.iv-progress span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.iv { max-width: 980px; margin: 0 auto; padding: 12px; display: grid; gap: 10px; justify-items: center; }
.iv-passes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.iv-passes button { border-radius: 999px; padding: 6px 14px; }
.iv-passes button.on { background: var(--accent); color: #fff; border-color: transparent; }
.iv-stage { display: flex; align-items: center; gap: 14px; width: 100%; justify-content: center; }
.iv-arrow { width: 56px; height: 120px; font-size: 44px; justify-content: center; border-radius: 16px; flex: none; }
.iv-fine { border-color: var(--good); color: var(--good); }
.iv-screen { position: relative; overflow: hidden; border: 2px solid var(--line); border-radius: 16px; background: #14121f; }
.iv-screen.is-fine { border-color: var(--good); }
.iv-screen.is-bad { border-color: var(--danger); }
.iv-screen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }
.iv-caption { text-align: center; max-width: 640px; }
.iv-caption h2 { margin: 2px 0; font-size: 18px; }
.iv-caption .note { margin: 0; }
.iv-words { margin: 4px 0; font-style: italic; }
.iv-controls { display: flex; gap: 12px; align-items: center; }
.iv-bad { width: 72px; height: 72px; border-radius: 50%; font-size: 34px; justify-content: center; border-color: var(--danger); color: var(--danger); }
.iv-why { width: min(640px, 100%); display: grid; gap: 8px; }
.iv-why-buttons { display: flex; gap: 8px; }
.iv-done { font-weight: 600; text-align: center; }
.iv-keys { font-size: 12px; }
.sr-head-buttons { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sr-items { display: grid; gap: 10px; }
.sr-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.sr-item.focus { box-shadow: inset 0 0 0 2px var(--accent); }
.sr-item.chosen { border-color: var(--good); }
.sr-item.none { border-color: var(--danger); }
.sr-item.changed { border-color: var(--warn); }
.sr-item h3 { margin: 0; font-size: 16px; }
.sr-item-state { margin: 0; }
.sr-versions { display: grid; gap: 6px; }
.sr-version { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sr-version .sr-hear { justify-content: flex-start; min-height: 44px; }
.sr-version.chosen .sr-hear { border-color: var(--good); }
.sr-version.chosen .sr-use { background: var(--good); color: #fff; border-color: transparent; }
.iv-ai-notes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; text-align: left; }
.iv-ai-notes li { border-left: 3px solid var(--warn); padding-left: 8px; }
.iv-ai-notes li.fixed { border-left-color: var(--good); color: var(--muted); }