/* Base look for every page: colors, fonts, graph-paper background, page header, pills, buttons, feedback boxes.
   Pages load the three Google Fonts themselves (Atkinson Hyperlegible, Bricolage Grotesque, JetBrains Mono). */
:root{
  color-scheme:dark;
  --bg:#0d2a4e;--sheet:#12365f;--sheet2:#184373;--line:rgba(170,205,255,.13);
  --chalk:#f3f6fb;--dim:#a9c4e4;--gold:#ffc93c;--cyan:#7fe3ff;--pink:#ff8ac4;
  --good:#5fe0a8;--bad:#ff9a86;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html,body{background:var(--bg)}
body{
  margin:0;color:var(--chalk);font:16px/1.5 var(--body);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;min-height:100vh;
}
.app{max-width:960px;margin:0 auto;padding:28px 16px 56px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.eyebrow{font:700 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0}
.back{display:inline-block;margin-bottom:14px;color:var(--dim);font:700 13px var(--mono);text-decoration:none}
.back:hover{color:var(--chalk)}

/* page header */
.hero{display:grid;gap:14px;padding-bottom:26px;border-bottom:2px dashed rgba(170,205,255,.3);margin-bottom:26px}
.hero h1{font:800 clamp(40px,8vw,72px)/.95 var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance}
.hero h1 span{color:var(--gold)}
.hero p.lede{margin:0;max-width:56ch;color:var(--dim);font-size:17px}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1.5px solid rgba(170,205,255,.35);border-radius:999px;font:700 14px var(--mono);font-variant-numeric:tabular-nums;background:rgba(13,42,78,.7)}
.pill b{color:var(--gold)}

/* "For grown-ups" notes */
.grownups{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 28px;color:var(--dim);font-size:15px}
.grownups h2{font:800 22px var(--display);color:var(--chalk);margin:0 0 6px;grid-column:1/-1}
.grownups h4{margin:0 0 4px;color:var(--chalk);font-size:15px}
.grownups p{margin:0}

/* answers and feedback */
.btn{background:var(--gold);color:#1a1300;border:0;border-radius:10px;padding:12px 22px;font:800 17px var(--display);text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.ans{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ans input:focus{border-color:var(--gold);outline:none}
.unit{color:var(--dim);font:500 15px var(--mono)}
.choice:hover:not(:disabled){border-color:var(--gold)}
.choice.no{border-color:var(--bad);opacity:.5}
.choice.yes{border-color:var(--good);background:rgba(95,224,168,.15)}
.choices.stack{grid-template-columns:1fr}
.fb{border-radius:12px;padding:14px 16px;display:grid;gap:8px}
.fb.good{background:rgba(95,224,168,.13);border:1.5px solid var(--good)}
.fb.bad{background:rgba(255,154,134,.12);border:1.5px solid var(--bad)}
.fb.info{background:rgba(170,205,255,.1);border:1.5px solid rgba(170,205,255,.4)}
.fb h4{margin:0;font:800 19px var(--display)}
.fb.good h4{color:var(--good)}.fb.bad h4{color:var(--bad)}
.fb p{margin:0}

/* a row of choice buttons (seg in util.js: Learn widgets, and the math facts set picker); the pressed one is gold */
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.seg button{background:none;border:1.5px solid rgba(170,205,255,.4);border-radius:10px;padding:7px 12px;font:700 14px var(--mono)}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1a1300;border-color:var(--gold)}
/* Read to me buttons (speak.js) */
.say{display:inline-block;background:rgba(127,227,255,.1);border:1.5px solid rgba(127,227,255,.55);border-radius:999px;color:var(--cyan);padding:7px 14px;font:700 14px var(--mono);margin:0 0 10px}
.say:hover{background:rgba(127,227,255,.2)}
.say svg{width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.4em;fill:currentColor}
.say svg path+path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* young readers (Grade 2): <body class="young"> makes text and tap targets bigger */
body.young{font-size:18px}
.young .hero p.lede{font-size:19px}
.young .btn{padding:14px 26px;font-size:20px}
.young .say{font-size:16px;padding:9px 16px}