/* ============================================================================
   TopClass Kids — LAYOUT
   ----------------------------------------------------------------------------
   DELIBERATELY PLAIN. This is a working skeleton, not a finished design.

   Claude Code: this file is yours to replace. It exists so the prototype is
   usable, not so it is beautiful. Read CLAUDE.md before you start.
============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);background:var(--royal);color:var(--cream);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:var(--s3) var(--s2) var(--s6);line-height:1.55;
}
.wrap{width:100%;max-width:420px}

header{text-align:center;margin-bottom:var(--s4)}
.mark{display:block;margin:0 auto var(--s1);width:34px;height:34px}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.wordmark em{font-style:normal;color:var(--mango)}
.tagline{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6;margin-top:2px}

.screen{text-align:center}
.progress{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.55;margin-bottom:var(--s2)}
.progress span{color:var(--mint-text)}
.prompt{font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  margin-bottom:var(--s3);line-height:1.25}

/* ---- the matrix ---- */
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  max-width:280px;margin:0 auto var(--s4)}
.cell{aspect-ratio:1;background:var(--cream);border-radius:var(--r-md);
  display:grid;place-items:center;padding:11%}
.cell svg{width:100%;height:100%;display:block}
.cell--hole{background:transparent;border:2px dashed rgba(255,248,236,.42)}
.hole-mark{font-family:var(--font-display);font-size:1.5rem;color:rgba(255,248,236,.42)}
.cell--filled{background:var(--cream);border:0;animation:drop .42s var(--ease)}
@keyframes drop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

/* ---- options ---- */
.opts{display:flex;gap:var(--s2);justify-content:center;margin-bottom:var(--s3)}
.opt{width:68px;height:68px;background:var(--cream);border:2px solid transparent;
  border-radius:var(--r-md);padding:11px;cursor:pointer;
  transition:transform .18s var(--ease),border-color .18s var(--ease),opacity .18s}
.opt svg{width:100%;height:100%;display:block}
.opt:hover{transform:translateY(-2px)}
.opt:focus-visible{outline:3px solid var(--mango);outline-offset:3px}
.opt--yes{border-color:var(--mint);transform:translateY(-3px)}
.opt--no{opacity:.32;cursor:not-allowed;transform:none}

.feedback{min-height:1.5em;font-weight:700;font-size:.92rem}
.feedback--yes{color:var(--mint-text)}
.feedback--no{color:var(--cream);opacity:.75;font-weight:400}

/* ---- done / parent ---- */
.done-title{font-family:var(--font-display);font-weight:600;font-size:1.6rem;
  margin-bottom:var(--s1)}
.done-body{opacity:.8;margin-bottom:var(--s4)}
.eyebrow{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint-text);margin-bottom:var(--s1)}

.btn{font-family:var(--font-body);font-weight:700;font-size:.95rem;
  padding:13px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  min-height:48px;transition:transform .16s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.btn--primary{background:var(--mango);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--cream);
  border:1.5px solid rgba(255,248,236,.45);font-weight:600;font-size:.85rem}

/* ---- chart ---- */
.chart{text-align:left;margin-bottom:var(--s2)}
.bar{margin-bottom:var(--s2)}
.bar--idle{opacity:.42}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.85rem;margin-bottom:5px}
.bar-top em{font-family:var(--font-mono);font-style:normal;font-size:.62rem;
  color:var(--mint-text);opacity:.85}
.track{height:9px;background:rgba(255,248,236,.16);border-radius:var(--r-pill);
  overflow:hidden}
.fill{height:100%;width:0;background:var(--mint);border-radius:var(--r-pill);
  transition:width 1.05s var(--ease)}
.chart.is-live .fill{width:var(--w)}
.caption{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.07em;
  text-transform:uppercase;opacity:.5;margin-bottom:var(--s4);text-align:left}

.proof{background:rgba(255,248,236,.07);border:1px solid rgba(255,248,236,.16);
  border-radius:var(--r-md);padding:var(--s2);text-align:left;margin-bottom:var(--s4)}
.proof-lead{font-size:.83rem;opacity:.9;margin-bottom:var(--s1)}
.proof-list{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.proof-list li{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;
  background:rgba(122,191,122,.18);color:var(--mint-text);
  padding:3px 8px;border-radius:var(--r-sm)}

footer{margin-top:var(--s6);font-family:var(--font-mono);font-size:.55rem;
  letter-spacing:.06em;opacity:.4;text-align:center;line-height:1.9;max-width:420px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .chart .fill{transition:none;width:var(--w)}
}

/* The operator's line on the finished page: the slip code and four characters
   for the unsent tray. Small and quiet; it is not for the child. */
.done-ref{margin-top:var(--s5);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;opacity:.6}