/* Nia - "Warm paper" direction. Cream base, one calm accent, Lexend. Every colour is a token so both themes
   resolve from one place. Dyslexia / focus / bigger modes change the whole surface, not a corner of it. */
:root{
  color-scheme:light;
  --bg:#FBF7EE; --surface:#FFFDF8; --surface-2:#F3EDE0; --line:#E2D9C6;
  --ink:#1E2A32; --ink-2:#4A555E; --muted:#6F7A83;
  --accent:#1F6F5B; --accent-ink:#FFFFFF; --accent-soft:#E3F0EB;
  --warm:#C2561F; --warm-soft:#F8E6DC;
  --ok:#2E7D4F; --ok-soft:#E4F3E9; --wait:#8A6A1F; --wait-soft:#F7EED6;
  --shadow:0 6px 24px rgba(30,42,50,.08);
  --radius:18px; --tap:52px;
  --font:"Lexend","Atkinson Hyperlegible",system-ui,sans-serif;
  --fs:17px; --lh:1.6; --track:0.01em;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1B1F22; --surface:#23282C; --surface-2:#2C3236; --line:#3A4146;
  --ink:#F1ECE1; --ink-2:#CFC8BA; --muted:#A39D91;
  --accent:#6FC2A6; --accent-ink:#0F1F1A; --accent-soft:#1F3A32;
  --warm:#E88A5C; --warm-soft:#3A2A21;
  --ok:#7ED39A; --ok-soft:#1F3627; --wait:#E1C06A; --wait-soft:#3A3220;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
:root[data-font="atkinson"]{--font:"Atkinson Hyperlegible","Lexend",system-ui,sans-serif}
:root[data-font="opendyslexic"]{--font:"OpenDyslexic","Lexend",system-ui,sans-serif}
:root[data-dyslexia="1"]{--fs:18px; --lh:1.7; --track:0.04em}
:root[data-large="1"]{--fs:21px; --lh:1.65}
:root[data-still="1"] *{animation:none!important; transition:none!important}

*{box-sizing:border-box; margin:0}
html{font-size:var(--fs)}
body{background:var(--bg); color:var(--ink); font-family:var(--font); line-height:var(--lh); letter-spacing:var(--track);
  padding:0 16px calc(var(--tap) + 40px) 16px; min-height:100vh; -webkit-font-smoothing:antialiased}
em,i{font-style:normal; font-weight:600}
a{color:var(--accent)}
h1,h2,h3{line-height:1.25; letter-spacing:0}
h1{font-size:1.5rem; font-weight:700; margin:.25rem 0 .5rem}
h2{font-size:1.15rem; font-weight:600; margin:1.2rem 0 .5rem}
h3{font-size:1rem; font-weight:600; margin:.8rem 0 .3rem}
p{margin:0 0 .6rem; max-width:62ch}
.muted{color:var(--muted)} .small{font-size:.85rem}
.wrap{max-width:720px; margin:0 auto; padding-top:8px}
.wrap.wide{max-width:960px}

/* buttons: every tap target is at least 52px tall */
.btn,button.btn,a.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--tap); padding:0 1.2rem;
  border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-weight:600;
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.warm{background:var(--warm); color:#fff; border-color:var(--warm)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.big{min-height:64px; font-size:1.1rem}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--warm); outline-offset:2px}
.btn:disabled{opacity:.5; cursor:default}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); margin-bottom:.9rem}
.card.soft{background:var(--surface-2); box-shadow:none}
.card.accent{border-left:6px solid var(--accent)}
.card.warm{border-left:6px solid var(--warm)}
.row{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
.tile{display:flex; flex-direction:column; gap:.2rem; min-height:96px; padding:.9rem 1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); text-decoration:none; color:var(--ink); box-shadow:var(--shadow)}
.tile .ic{font-size:1.6rem} .tile b{font-size:1rem} .tile span{font-size:.85rem; color:var(--muted)}

/* accessibility bar */
.a11y-bar{display:flex; gap:.4rem; align-items:center; overflow-x:auto; padding:.5rem 0 .3rem; position:sticky; top:0; background:var(--bg); z-index:20; scrollbar-width:none}
.a11y-status{font-size:.8rem; color:var(--accent); font-weight:600; white-space:nowrap; min-width:0}
.chip{flex:0 0 auto; min-height:40px; padding:0 .9rem; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink-2); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer}
.chip.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

/* tab bar */
.tabbar{position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--surface); border-top:1px solid var(--line); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); z-index:30}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:var(--tap); justify-content:center; text-decoration:none; color:var(--muted); font-size:.75rem; font-weight:600; border-radius:12px}
.tabbar a span{display:flex;height:24px} .tabbar a.on{color:var(--accent); background:var(--accent-soft)}
.tabbar.parent a{font-size:.7rem}

/* forms */
label{display:block; font-weight:600; margin:.7rem 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%; min-height:var(--tap); padding:.6rem .9rem; border:2px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font:inherit}
textarea{min-height:120px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=checkbox]{width:26px; height:26px; accent-color:var(--accent); vertical-align:middle; margin-right:.5rem}
.field-row{display:flex; align-items:center; gap:.5rem; min-height:var(--tap); padding:.4rem 0; border-bottom:1px solid var(--line)}
.field-row label{margin:0; flex:1}
.errorlist{list-style:none; padding:0; color:var(--warm); font-size:.9rem}
.helptext{display:block; font-size:.82rem; color:var(--muted)}

/* chat */
.chat{display:flex; flex-direction:column; gap:.7rem; padding-bottom:140px}
.msg{max-width:92%; padding:.8rem 1rem; border-radius:18px; line-height:var(--lh); white-space:pre-wrap; overflow-wrap:anywhere}
.msg.child{align-self:flex-end; background:var(--accent-soft); border-bottom-right-radius:6px}
.msg.tutor{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--accent); border-bottom-left-radius:6px}
:root[data-dyslexia="1"] .msg{max-width:100%}
.msg img{max-width:100%; border-radius:12px; display:block; margin-bottom:.4rem}
.msg .tools{display:flex; gap:.4rem; margin-top:.5rem}
.msg .tools button{min-height:36px; padding:0 .7rem; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:.8rem}
.aid{align-self:flex-start; max-width:92%; background:var(--surface-2); border:1px dashed var(--line); border-radius:16px; padding:.7rem}
.aid video,.aid img{max-width:100%; border-radius:12px; display:block}
.aid .cap{font-size:.9rem; margin-top:.4rem}
.composer{position:fixed; left:0; right:0; bottom:calc(var(--tap) + 12px + env(safe-area-inset-bottom)); background:var(--bg); padding:.5rem 16px .6rem; border-top:1px solid var(--line); z-index:25}
.composer .inner{max-width:720px; margin:0 auto; display:flex; gap:.5rem; align-items:flex-end}
.composer textarea{flex:1; min-height:var(--tap); max-height:140px; resize:none; border:3px solid var(--warm); border-radius:16px}
.iconbtn{flex:0 0 var(--tap); width:var(--tap); height:var(--tap); border-radius:16px; border:2px solid var(--line); background:var(--surface); font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center}
.iconbtn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.quick{display:flex; gap:.5rem; overflow-x:auto; padding:.3rem 0 .5rem; scrollbar-width:none}
.quick button{flex:0 0 auto; min-height:44px; padding:0 .9rem; border-radius:999px; border:2px solid var(--accent); background:var(--surface); color:var(--accent); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; max-width:80vw; white-space:normal; text-align:left}
.hintline{font-size:.85rem; color:var(--muted); text-align:center; padding:.2rem 0}

/* talk */
.talk{display:flex; flex-direction:column; align-items:center; gap:1rem; padding-top:1rem}
.mic{width:140px; height:140px; border-radius:50%; border:none; background:var(--accent); color:var(--accent-ink); font-size:3rem; box-shadow:var(--shadow); cursor:pointer; position:relative}
.mic.live{background:var(--warm); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,86,31,.5)}70%{box-shadow:0 0 0 24px rgba(194,86,31,0)}100%{box-shadow:0 0 0 0 rgba(194,86,31,0)}}
.captions{width:100%; max-width:720px; display:flex; flex-direction:column; gap:.5rem; min-height:160px}
.status{font-weight:600; color:var(--muted); min-height:1.5rem}

/* progress */
.ring{--p:0; width:64px; height:64px; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--surface-2) 0); display:grid; place-items:center; flex:0 0 64px}
.ring b{width:50px; height:50px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-size:.9rem}
.bar{height:14px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:999px}
.badge{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; background:var(--wait-soft); color:var(--wait); font-weight:600; font-size:.85rem; margin:.2rem .2rem 0 0}
.check{display:flex; align-items:center; gap:.8rem; min-height:var(--tap); padding:.5rem .6rem; border-radius:14px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); margin-bottom:.5rem}
.check .box{width:30px; height:30px; border-radius:9px; border:2px solid var(--accent); display:grid; place-items:center; flex:0 0 30px}
.check.done{opacity:.7} .check.done .box{background:var(--accent); color:var(--accent-ink)}
.opt{display:block; width:100%; min-height:var(--tap); text-align:left; padding:.7rem 1rem; margin-bottom:.5rem; border-radius:14px; border:2px solid var(--line); background:var(--surface); font:inherit; font-weight:600; color:var(--ink); cursor:pointer}
.opt.right{background:var(--ok-soft); border-color:var(--ok)} .opt.wrong{background:var(--warm-soft); border-color:var(--warm)}

/* tables (parent) */
table{width:100%; border-collapse:collapse; font-size:.92rem; background:var(--surface); border-radius:14px; overflow:hidden}
th,td{text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--surface-2); font-weight:600; color:var(--ink-2)}
tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-2) 40%, var(--surface))}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem}
.stat b{display:block; font-size:1.5rem; color:var(--accent)} .stat span{font-size:.8rem; color:var(--muted)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; margin:.5rem 0 1rem}
.flag{color:var(--warm); font-weight:600}
.ok{color:var(--ok); font-weight:600}

/* toasts */
.toasts{position:fixed; top:8px; left:16px; right:16px; z-index:50; display:flex; flex-direction:column; gap:.4rem}
.toast{background:var(--ink); color:var(--bg); padding:.7rem 1rem; border-radius:12px; font-weight:600; box-shadow:var(--shadow)}
.sr{position:absolute; left:-9999px}
.hide{display:none!important}
.dim{opacity:.6}

/* explainer widgets */
.widget{align-self:flex-start; width:92%; max-width:520px; background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--warm); border-radius:16px; padding:.8rem .9rem; margin:.2rem 0}
:root[data-dyslexia="1"] .widget{width:100%}
.w-title{font-weight:700; margin-bottom:.4rem}
.w-steps{padding-left:1.4rem; margin:0 0 .6rem} .w-steps li{margin-bottom:.4rem}
.w-ask{margin-top:.5rem; font-weight:600}
.w-hl{font-size:1.15rem; line-height:1.9; letter-spacing:.06em}
.w-hl .mark{padding:.05em .25em; border-radius:6px; position:relative; margin:0 .05em}
.w-hl .tone-a{background:var(--accent-soft)} .w-hl .tone-b{background:var(--warm-soft)} .w-hl .tone-c{background:var(--wait-soft)}
.w-hl .lab{display:block; font-size:.6rem; letter-spacing:0; line-height:1; color:var(--muted); margin-top:-.1em}
.w-note{font-size:.9rem; color:var(--ink-2); margin-top:.4rem}
.w-prompt{font-weight:600}
.w-result{margin-top:.4rem; font-weight:600; min-height:1.4rem}
.w-svg{width:100%; height:auto; display:block; color:var(--ink)}
.w-svgwrap{background:var(--surface-2); border-radius:12px; padding:.4rem}
.w-card{position:relative; width:100%; min-height:110px; border:2px solid var(--line); border-radius:14px; background:var(--surface-2); font:inherit; color:var(--ink); cursor:pointer; padding:1rem; text-align:center; margin-bottom:.5rem}
.w-card .back{display:none} .w-card.flip .front{display:none} .w-card.flip .back{display:block}
.w-table{font-size:.95rem} .w-table td,.w-table th{padding:.4rem .5rem}
.w-timeline{padding-left:1.2rem} .w-timeline li{margin-bottom:.4rem}
.widget input[type=text]{min-height:44px}

/* profile picker */
.profiles{display:flex; gap:.5rem; overflow-x:auto; padding:.3rem 0 .6rem; scrollbar-width:none}
.pchip{flex:0 0 auto; display:flex; align-items:center; gap:.5rem; min-height:48px; padding:0 .9rem 0 .4rem; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; text-decoration:none}
.pchip .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700}
.pchip.on{border-color:var(--accent); background:var(--accent-soft)}
.pchip small{display:block; font-weight:400; color:var(--muted); font-size:.75rem}