/* Juniper shared look: jade and clay on a cool green-grey, Plus Jakarta Sans with Newsreader for reading text.
   Contrast pass 2026-09-30 (design/README.md): faint and clay darkened in light, jade lifted in dark, and
   --on-accent is the text colour on any filled accent (white in light, ink in dark). Every pair >= 4.5:1.
   2026-10-01: --ok-soft, --sky and --sky-soft added; design/tokens.json had them and the Phonics skin used --ok-soft, but this file never defined them. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');
:root{
  color-scheme:light;
  --page:#eef3f0; --surface:#ffffff; --elev:#f4f8f6; --nav:#132622;
  --line:#dce4e0; --line-strong:#c1d1cb;
  --ink:#13211e; --muted:#4e635e; --faint:#5a726d; --on-accent:#ffffff;
  --jade:#1e6b5a; --jade-press:#165446; --jade-soft:#e6f2ee; --jade-glow:#a8e0d3;
  --clay:#ad531c; --clay-soft:#fbeee4; --bad:#b3261e; --bad-soft:#fbe9e7; --ok:#1f7a4d; --ok-soft:#e3f3ea;
  --sky:#0f6f9e; --sky-soft:#e2f0f7;
  --shadow:0 4px 18px -6px rgba(19,38,34,.12),0 1px 2px rgba(19,38,34,.05);
  --f-disp:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-serif:'Newsreader',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --page:#0c1513; --surface:#14211e; --elev:#1a2a26; --nav:#07100e; --line:#26372f; --line-strong:#344a42;
  --ink:#e5eeeb; --muted:#a3b7b1; --faint:#7f958f;
  --jade:#3dab8d; --jade-press:#2b8a71; --on-accent:#0c1513; --jade-soft:rgba(63,170,140,.15); --jade-glow:#8fd6c4;
  --clay:#e5813f; --clay-soft:rgba(229,129,63,.15); --bad:#f2837a; --bad-soft:rgba(242,131,122,.14); --ok:#5cc28e; --ok-soft:rgba(92,194,142,.15);
  --sky:#5ab4e6; --sky-soft:rgba(90,180,230,.15); --shadow:none;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:var(--f-disp);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding:24px 16px 48px}
h1,h2,h3{margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--jade-glow);outline-offset:2px}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:14px}
.muted{color:var(--muted)}
.small{font-size:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600}
.field input,.field select{min-height:50px;border-radius:14px;border:1px solid var(--line-strong);background:var(--elev);padding:0 14px;font-size:17px}
.btn{min-height:50px;border:0;border-radius:14px;background:var(--jade);color:var(--on-accent);font-weight:700;padding:0 18px}
.btn:hover{background:var(--jade-press)}
.btn.line{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.err{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 14px;font-weight:600}
.okmsg{background:var(--jade-soft);color:var(--jade);border-radius:12px;padding:10px 14px;font-weight:600}
.pics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* The picture-password tiles (sign-in, parent page) are buttons. Scoped to button.pic: every page loads this file,
   and a bare .pic squared the Math Map's question picture (826px tall at 1280) and Memory Work's figures. */
button.pic{aspect-ratio:1;border-radius:16px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow);padding:0}
button.pic svg{width:58%;height:58%}
button.pic[aria-pressed="true"]{border:2px solid var(--jade);background:var(--jade-soft)}
.slots{display:flex;gap:10px}
.slot{flex:1;max-width:80px;aspect-ratio:1;border-radius:16px;border:2px dashed var(--line-strong);display:grid;place-items:center;background:var(--elev)}
.slot.on{border-style:solid;border-color:var(--jade);background:var(--jade-soft)}
.slot svg{width:60%;height:60%}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li div{flex:1;min-width:0}
.li b{display:block}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;letter-spacing:.12em;font-weight:700}
.tabs{display:flex;gap:6px;background:var(--elev);border:1px solid var(--line);border-radius:14px;padding:4px}
.tabs button{flex:1;min-height:44px;border:0;background:none;border-radius:10px;font-weight:600;color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}