/* Learnoodle styles. Built only on tokens.css: no raw colours, sizes come from the scales.
   One focal point per screen: the ink button or the next lesson. Indigo (--brand) appears only for brand and reward. */

/* ---------- Icons (CSS masks, coloured by currentColor via background) ---------- */
:root{
  --i-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --i-cross:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M7 7l10 10M17 7L7 17'/></svg>");
  --i-hint:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/></svg>");
  --i-info:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v6M12 7.5v.01'/></svg>");
  --i-alert:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6M12 16.5v.01'/></svg>");
  --i-check-disc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><mask id='m'><rect width='24' height='24' fill='white'/><path d='M7 12.5l3.3 3.3L17 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></mask></defs><circle cx='12' cy='12' r='12' mask='url(%23m)'/></svg>");
  --i-cross-disc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><mask id='m'><rect width='24' height='24' fill='white'/><path d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/></mask></defs><circle cx='12' cy='12' r='12' mask='url(%23m)'/></svg>");
  --i-star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/></svg>");
  --i-flame:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c.6 3.4 5.5 6 5.5 11.2A5.5 5.5 0 0 1 12 22a5.5 5.5 0 0 1-5.5-5.5c0-2.6 1.4-4.3 2.6-5.6.2 1.6.9 2.6 2 3.1C10.6 10.4 11.4 5.6 12 2z'/></svg>");
}
.ico,.foot .fb h3::before,.flag b::before{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit}
a{color:var(--ink);text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--fw-heavy);line-height:var(--lh-tight);letter-spacing:-.015em;text-wrap:balance;margin:0}
code{font-size:.9em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:var(--measure);margin:0 auto;padding-left:max(var(--sp-4),env(safe-area-inset-left,0px));padding-right:max(var(--sp-4),env(safe-area-inset-right,0px));padding-block:var(--sp-3) 200px}
.eyebrow{font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--muted)}
.sub{color:var(--muted);font-size:var(--fs-sm);margin:0}
.msg{padding-block:var(--sp-4);color:var(--muted)}

/* Pressable: 1px border plus a short bottom edge that compresses on tap */
.press,.big,.btn,.opt,.tile,.chip,.choice,.tick,.subj:not(.soon),.topic:not(.soon),.cont .go,.node.open .disc,.node.done .disc,.node.ready .disc{
  border:var(--border) solid var(--line);box-shadow:0 var(--edge) 0 var(--line);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast),border-color var(--t-fast)}
:is(.big,.btn,.opt,.tile,.chip,.choice,.tick,.subj,.topic,.cont .go,.node .disc):not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}

/* ---------- Logo: wordmark from assets/brand (letters follow --ink, the noodle oo is --brand) ---------- */
.logo{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);text-decoration:none}
.logo svg{height:26px;width:auto;display:block}
.logo .oo{fill:none;stroke:var(--brand);stroke-width:122;stroke-linecap:round}

/* ---------- App header ---------- */
.homebar{display:flex;align-items:center;gap:var(--sp-2);padding-top:var(--sp-2)}
.homebar .logo{margin-right:auto}
.iconbtn{min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;background:none;border:0;border-radius:var(--r-md);color:var(--muted);cursor:pointer}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.streakpill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink);
  background:var(--brand-soft);border-radius:var(--r-pill);padding:6px 12px 6px 10px}
.streakpill::before{content:"";--i:var(--i-flame);display:inline-block;width:16px;height:16px;background:var(--brand);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
:is(a,button).back{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap);margin-top:var(--sp-1);padding:0 var(--sp-2) 0 0;border:0;background:none;
  color:var(--muted);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-decoration:none;cursor:pointer}
:is(a,button).back:hover{color:var(--ink)}

/* ---------- Buttons ---------- */
.big{width:100%;min-height:52px;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-family:var(--f-display);font-weight:var(--fw-heavy);font-size:var(--fs-md);
  cursor:pointer;background:var(--ink);color:var(--on-ink);border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink-press)}
.big:not(:disabled):active{box-shadow:0 1px 0 var(--ink-press)}
.big:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--line);box-shadow:0 var(--edge) 0 var(--line);cursor:default}
.btn{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:var(--tap);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);
  background:var(--surface);border-color:var(--line-strong);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--ink);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink-press)}
.btn.danger{color:var(--bad);border-color:var(--bad)}

/* ---------- Cards and panels ---------- */
.panel{background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.panel p{margin:0}
.badge{flex:none;width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;font-family:var(--f-display);font-weight:var(--fw-heavy);font-size:var(--fs-sm);
  --c:var(--tag-1);color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface))}
.badge[data-c="1"]{--c:var(--tag-2)} .badge[data-c="2"]{--c:var(--tag-3)} .badge[data-c="3"]{--c:var(--tag-4)} .badge[data-c="4"]{--c:var(--tag-5)} .badge[data-c="5"]{--c:var(--tag-6)}

/* ---------- Setup ---------- */
.setup{display:grid;gap:var(--sp-4);padding-top:var(--sp-2)}
.setup h1{font-size:var(--fs-2xl)}
.steps{display:flex;gap:6px;margin-top:var(--sp-2)}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--ink)}
.welcome{display:grid;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-2);color:var(--muted)}
.welcome .logo{justify-self:start}
.choices,.ticks{display:grid;gap:var(--sp-2)}
.choice{display:grid;gap:2px;text-align:left;width:100%;min-height:64px;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);cursor:pointer}
.choice b{font-family:var(--f-display);font-size:var(--fs-md)}
.choice span{font-size:var(--fs-sm);color:var(--muted)}
.choice:hover,.tick:hover,.opt:not(:disabled):hover,.tile:hover,.chip:hover{border-color:var(--line-strong)}
.choice.sel{border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink)}
.tick{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;text-align:left;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);cursor:pointer}
.tick b{flex:1;min-width:0;font-size:var(--fs-base)}
.tick .ready{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);border:var(--border) solid var(--line);border-radius:var(--r-pill);padding:2px var(--sp-2)}
.tick .box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line-strong);display:grid;place-items:center}
.tick.sel{border-color:var(--ink)}
.tick.sel .box{background:var(--ink);border-color:var(--ink)}
.tick.sel .box::after{content:"";width:16px;height:16px;background:var(--on-ink);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}

.levels{display:grid;gap:var(--sp-3)}
.lvl{margin:0;padding:var(--sp-3);border:var(--border) solid var(--line);border-radius:var(--r-lg);background:var(--surface);display:grid;gap:var(--sp-3)}
.lvl legend{display:flex;align-items:center;gap:var(--sp-3);float:left;width:100%;padding:0}
.lvl legend b{font-size:var(--fs-base)}
.lvl .row{display:flex;flex-wrap:wrap;gap:var(--sp-2);clear:both}

/* ---------- Home ---------- */
.year{margin:0 0 var(--sp-5);color:var(--muted);font-size:var(--fs-sm)}
.cont{display:grid;gap:var(--sp-1);background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-pop)}
.cont .where{font-size:var(--fs-sm);color:var(--muted)}
.cont b{font-family:var(--f-display);font-weight:var(--fw-heavy);font-size:var(--fs-xl);line-height:var(--lh-tight);letter-spacing:-.015em;margin-top:var(--sp-1)}
.cont .go{justify-self:start;margin-top:var(--sp-4);min-height:var(--tap);display:inline-flex;align-items:center;background:var(--ink);color:var(--on-ink);
  border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink-press);border-radius:var(--r-md);padding:0 var(--sp-6);font-family:var(--f-display);font-weight:var(--fw-heavy)}
.cont:hover .go{background:color-mix(in srgb,var(--ink) 88%,var(--bg))}
.cont.quiet{box-shadow:none}
.cont.quiet b{font-size:var(--fs-md)}
.mysubj,.search{display:grid;gap:var(--sp-3);margin-top:var(--sp-8)}
.subjects,.results,.topics{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.subj{display:flex;align-items:center;gap:var(--sp-3);min-height:64px;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);color:var(--ink);text-decoration:none}
.subj .info{flex:1;min-width:0;display:grid}
.subj .info b{font-family:var(--f-display);font-size:var(--fs-base)}
.subj .info span{font-size:var(--fs-sm);color:var(--muted)}
.subj.soon{border:var(--border) dashed var(--line);background:transparent}
.subj.soon .badge{filter:grayscale(1);opacity:.6}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-strong)}
.dots i.ready{border-color:var(--ink)}
.minibar{flex:none;display:grid;grid-template-columns:48px auto;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--muted)}
.minibar::before{content:"";grid-area:1/1;height:6px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.minibar i{grid-area:1/1;height:6px;border-radius:3px;background:var(--brand);min-width:0}
.minibar b{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.dots i.done{background:var(--brand);border-color:var(--brand)}
.search .typein{font-size:var(--fs-base);padding:var(--sp-3) var(--sp-4)}
.results li>*{display:grid;min-height:var(--tap);background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);color:var(--ink);text-decoration:none}
.results a:hover{border-color:var(--line-strong)}
.results span span,.results a span{font-size:var(--fs-sm);color:var(--muted)}
.results .soonhit{border-style:dashed;background:transparent}
.results .none{color:var(--muted);font-size:var(--fs-sm)}

/* ---------- Subject ---------- */
.more{display:grid;gap:var(--sp-3);margin-top:var(--sp-10)}
.more h2{font-size:var(--fs-lg)}
.more h3.eyebrow{margin-top:var(--sp-2)}
.topic{display:grid;min-height:64px;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);color:var(--ink);text-decoration:none}
.topic b{font-family:var(--f-display);font-size:var(--fs-md)}
.topic span{font-size:var(--fs-sm);color:var(--muted)}
.topic.soon{border:var(--border) dashed var(--line);background:transparent}

/* ---------- Path screen ---------- */
.hero{display:grid;gap:var(--sp-2);padding-block:var(--sp-4) var(--sp-2)}
.hero h1{font-size:var(--fs-2xl)}
.hero p{margin:0;color:var(--muted);max-width:44ch}
.hero p.en{color:var(--ink);font-family:var(--f-display);font-weight:var(--fw-bold);font-size:var(--fs-md);margin-top:calc(-1 * var(--sp-1))}
.statrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.stat{display:inline-flex;align-items:baseline;gap:var(--sp-1);background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-sm);color:var(--muted)}
.stat b{color:var(--ink);font-family:var(--f-display);font-size:var(--fs-base);font-variant-numeric:tabular-nums}
.stat:nth-child(2)::before{content:"";align-self:center;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:2px}
.unit{display:grid;gap:2px;margin-top:var(--sp-8);padding-bottom:var(--sp-3);border-bottom:var(--border) solid var(--line)}
.unit h2{font-size:var(--fs-lg)}
.path{position:relative;display:grid;gap:var(--sp-5);padding-block:var(--sp-6) var(--sp-2)}
.path::before{content:"";position:absolute;left:27px;top:var(--sp-8);bottom:var(--sp-8);width:2px;background:var(--line)}
.node{position:relative;display:flex;align-items:center;gap:var(--sp-4)}
.node .disc{flex:none;position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  font-family:var(--f-display);font-weight:var(--fw-heavy);font-size:var(--fs-md);background:var(--surface-2);border:var(--border) dashed var(--line-strong);color:var(--muted)}
.node.open .disc{background:var(--ink);border:var(--border) solid var(--ink);box-shadow:0 var(--edge) 0 var(--ink-press);color:var(--on-ink);cursor:pointer;
  outline:4px solid color-mix(in srgb,var(--ink) 12%,transparent);outline-offset:3px}
.node.open .disc:focus-visible{outline:3px solid var(--focus)}
.node.done .disc{background:var(--brand);border-color:var(--brand);box-shadow:0 var(--edge) 0 var(--brand-press);color:transparent;cursor:pointer}
.node.done .disc::after{content:"";position:absolute;inset:16px;background:var(--on-brand);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.node.ready .disc{background:var(--surface);border:var(--border) solid var(--ink);box-shadow:0 var(--edge) 0 var(--line-strong);color:var(--ink);cursor:pointer}
.node .meta{min-width:0;display:grid}
.node .meta b{font-family:var(--f-display);font-size:var(--fs-base)}
.node .meta span{font-size:var(--fs-sm);color:var(--muted)}
.node:not(.open):not(.done) .meta b{color:var(--muted)}

/* ---------- Lesson top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;align-items:center;gap:var(--sp-3);padding-block:var(--sp-2)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.bar{flex:1;height:8px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:var(--r-pill);transition:width var(--t-med) var(--ease)}
.xp{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:var(--fw-heavy);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;
  color:var(--on-brand);background:var(--brand);border-radius:var(--r-pill);padding:4px 12px;min-width:64px;justify-content:center}
/* "3 in a row" floats at the right under the bar, so appearing never moves the question */
.streak:empty{display:none}
.streak{position:relative;z-index:1;width:max-content;margin:var(--sp-1) 0 -32px auto;height:28px;display:flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink);background:var(--brand-soft);border-radius:var(--r-pill);padding:0 12px 0 10px}
.streak::before{content:"";width:14px;height:14px;background:var(--brand);-webkit-mask:var(--i-flame) center/contain no-repeat;mask:var(--i-flame) center/contain no-repeat}

/* ---------- Question chrome ---------- */
.stage{display:grid;gap:var(--sp-4);padding-top:var(--sp-2)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.tag{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;border-radius:var(--r-sm);padding:3px var(--sp-2);background:var(--surface-2);color:var(--muted)}
.tag.try{background:var(--info-soft);color:var(--info)}
.tag.back{background:var(--warn-soft);color:var(--warn)}
.tag.warm{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.prompt{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:-.01em}
.prompt table{font-family:var(--f-body);font-size:var(--fs-base);font-weight:var(--fw-regular,400);letter-spacing:0}
.prompt svg text{font-family:var(--f-body);letter-spacing:0} /* diagram text keeps its own sizes inside a question */
h2.prompt{font-weight:var(--fw-heavy)}
.note{font-size:var(--fs-sm);color:var(--muted);margin:0}

/* Multiple choice */
.opts{display:grid;gap:var(--sp-2)}
.opt{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;text-align:left;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);cursor:pointer}
.opt .k{flex:none;position:relative;width:32px;height:32px;border-radius:var(--r-sm);border:var(--border) solid var(--line-strong);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--muted)}
.opt.sel{border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink)}
.opt.sel .k{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.opt.good{border-color:var(--good);background:var(--good-soft);box-shadow:0 var(--edge) 0 var(--good)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 var(--edge) 0 var(--bad)}
.opt.good .k,.opt.bad .k{color:transparent;border-color:transparent}
.opt.good .k{background:var(--good)} .opt.bad .k{background:var(--bad)}
.opt.good .k::after,.opt.bad .k::after{content:"";position:absolute;inset:7px;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.opt.good .k::after{--i:var(--i-check);background:var(--on-good)} .opt.bad .k::after{--i:var(--i-cross);background:var(--on-bad)}
.opt.out{opacity:.5;text-decoration:line-through;box-shadow:none;cursor:default}
.opt:disabled{cursor:default}

/* Type-in and explain */
.typein{width:100%;min-height:52px;font:inherit;font-size:var(--fs-lg);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);border:var(--border) solid var(--line-strong);background:var(--surface);color:var(--ink)}
.typein::placeholder{color:var(--muted);opacity:.8}
.typein:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
.typein.good{border-color:var(--good);background:var(--good-soft);padding-right:52px}
.typein.bad{border-color:var(--bad);background:var(--bad-soft);padding-right:52px}
div:has(>input.typein){position:relative}
div:has(>input.typein.good)::after,div:has(>input.typein.bad)::after{content:"";position:absolute;right:var(--sp-4);top:14px;width:24px;height:24px;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
div:has(>input.typein.good)::after{--i:var(--i-check);background:var(--good)}
div:has(>input.typein.bad)::after{--i:var(--i-cross);background:var(--bad)}
.reveal{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--good);font-weight:var(--fw-bold)}
.reveal::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.say{font-weight:var(--fw-bold)}
.say-btn{display:inline-grid;place-items:center;vertical-align:middle;width:var(--tap);height:var(--tap);margin:-10px 0 -10px 2px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.say-btn:hover{background:var(--surface-2)}
.fadas{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.fada{min-width:var(--tap);min-height:var(--tap);border:var(--border) solid var(--line-strong);background:var(--surface);border-radius:var(--r-md);font-size:var(--fs-md);font-weight:var(--fw-bold);cursor:pointer;color:var(--ink)}
.fada:hover{border-color:var(--ink)}
.fada:active{transform:translateY(2px)}
textarea.typein{min-height:150px;font-size:var(--fs-base);line-height:var(--lh-body);resize:vertical}
.ideas{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:grid;gap:var(--sp-2)}
.ideas li{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm)}
.ideas li .m{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:0;border:var(--border) solid var(--line-strong)}
.ideas li.hit .m{background:var(--good);border-color:var(--good)}
.ideas li.hit .m::after{content:"";width:14px;height:14px;background:var(--on-good);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}

/* Confidence */
.conf{display:grid;gap:var(--sp-2);border-top:var(--border) solid var(--line);padding-top:var(--sp-4)}
.conf .row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pill{min-height:var(--tap);border:var(--border) solid var(--line-strong);background:var(--surface);border-radius:var(--r-pill);padding:0 var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}
.pill:hover:not(:disabled){border-color:var(--ink)}
.pill.sel{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.pill:disabled{cursor:default;opacity:.6}
.pill.sel:disabled{opacity:1}

/* Match: pairs get a colour and a number, never colour alone */
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--sp-3)}
.match .col{display:grid;gap:var(--sp-2);align-content:start}
.tile{position:relative;width:100%;min-height:56px;text-align:left;background:var(--surface);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);line-height:var(--lh-snug);cursor:pointer}
.tile.left{font-weight:var(--fw-bold)}
.tile.sel{border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink)}
.tile[data-p]{--pc:var(--pair-1);border-color:var(--pc);box-shadow:0 var(--edge) 0 var(--pc);padding-left:36px}
.tile[data-p="1"]{--pc:var(--pair-2)} .tile[data-p="2"]{--pc:var(--pair-3)} .tile[data-p="3"]{--pc:var(--pair-4)}
.tile[data-p]::before{position:absolute;left:var(--sp-2);top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--pc);color:var(--surface);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1}
.tile[data-p="0"]::before{content:"1"} .tile[data-p="1"]::before{content:"2"} .tile[data-p="2"]::before{content:"3"} .tile[data-p="3"]::before{content:"4"}
.tile[data-p="4"]::before{content:"5"} .tile[data-p="5"]::before{content:"6"}
.tile.good{background:var(--good-soft);border-color:var(--good);box-shadow:0 var(--edge) 0 var(--good)}
.tile.bad{background:var(--bad-soft);border-color:var(--bad);box-shadow:0 var(--edge) 0 var(--bad)}
.tile.good::after,.tile.bad::after{content:"";position:absolute;top:-9px;right:-9px;width:22px;height:22px;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.tile.good::after{--i:var(--i-check-disc);background:var(--good)} .tile.bad::after{--i:var(--i-cross-disc);background:var(--bad)}
.tile.lock{cursor:default}

/* Sort */
.sort .pool{display:flex;flex-wrap:wrap;gap:var(--sp-2);min-height:56px;padding:var(--sp-3);border:var(--border) dashed var(--line-strong);border-radius:var(--r-lg)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);background:var(--surface);border-radius:var(--r-md);padding:0 var(--sp-3);font-size:var(--fs-sm);cursor:pointer}
.chip.sel{border-color:var(--ink);box-shadow:0 var(--edge) 0 var(--ink);background:var(--surface-2)}
.chip.good{border-color:var(--good);background:var(--good-soft);box-shadow:0 var(--edge) 0 var(--good)}
.chip.bad{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 var(--edge) 0 var(--bad)}
.chip.good::before,.chip.bad::before{content:"";width:14px;height:14px;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.chip.good::before{--i:var(--i-check);background:var(--good)} .chip.bad::before{--i:var(--i-cross);background:var(--bad)}
.buckets{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-3)}
.bucket{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;text-align:left;min-height:160px;border:var(--border) solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-3);cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.bucket.armed{border:var(--border) dashed var(--ink);background:var(--surface-2)}
.bucket h3{font-size:var(--fs-base)}
.bucket .sub{font-size:var(--fs-xs);margin-top:-6px}
.emptyhint{font-size:var(--fs-sm);color:var(--muted);align-self:center}

/* Order */
.order{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.order li{display:flex;align-items:center;gap:var(--sp-3);min-height:64px;background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3)}
.order li .n{flex:none;font-family:var(--f-display);font-weight:var(--fw-heavy);color:var(--muted);width:20px;font-variant-numeric:tabular-nums}
.order li .t{flex:1;min-width:0;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.order li.good{border-color:var(--good);background:var(--good-soft)} .order li.bad{border-color:var(--bad);background:var(--bad-soft)}
.order li.good::before,.order li.bad::before{content:"";flex:none;order:-1;width:18px;height:18px;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.order li.good::before{--i:var(--i-check);background:var(--good)} .order li.bad::before{--i:var(--i-cross);background:var(--bad)}
.mv{display:flex;gap:var(--sp-1)}
.mv button{width:var(--tap);height:var(--tap);border-radius:var(--r-sm);border:var(--border) solid var(--line-strong);background:var(--surface);cursor:pointer;display:grid;place-items:center}
.mv button:hover:not(:disabled){border-color:var(--ink)}
.mv button:disabled{opacity:.3;cursor:default}

/* Teaching cards and lesson content */
.teach{display:grid;gap:var(--sp-4)}
.teach p{margin:0}
.terms{display:grid;gap:var(--sp-3);margin:0}
.terms div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:var(--sp-3);align-items:baseline;border-bottom:var(--border) solid var(--line);padding-bottom:var(--sp-2)}
.terms dt{font-weight:var(--fw-bold)}
.terms dd{margin:0;color:var(--muted)}
.callout{position:relative;background:var(--info-soft);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4) var(--sp-3) 44px;font-size:var(--fs-sm)}
.callout::before{content:"";position:absolute;left:var(--sp-4);top:14px;width:18px;height:18px;background:var(--info);-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}

/* Diagrams: flat, calm illustrations drawn from tokens. Labels get a halo so they never collide with lines. */
.diag{width:100%;max-width:100%;height:auto;display:block;background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-lg)}
.d-sea{fill:var(--d-water-soft)}
.d-basin{fill:var(--d-basin);stroke:var(--d-shed);stroke-width:1.5;stroke-dasharray:5 4}
.d-hill{fill:var(--d-hill);stroke:var(--d-hill);stroke-width:4;stroke-linejoin:round}
.d-river{fill:none;stroke:var(--d-water);stroke-linecap:round;stroke-linejoin:round}
.d-river.s{stroke-width:2.5} .d-river.m{stroke-width:3.5} .d-river.l{stroke-width:6}
.d-pt{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.d-seg{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round} .d-seg.d-dash{stroke-dasharray:6 5;stroke-width:2}
.d-ptlab{fill:var(--ink);font:700 12px var(--f-body);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.d-lab{fill:var(--ink);font:700 12px var(--f-body);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.d-lab.in{stroke:none}
.d-note{fill:var(--muted);font:12px var(--f-body);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.d-mk circle{fill:var(--ink);stroke:var(--surface);stroke-width:2} .d-mk text{fill:var(--on-ink);font:700 12px var(--f-body)}
.d-hard{fill:var(--d-hard)} .d-soft{fill:var(--d-soft)} .d-wfill{fill:var(--d-water)}
.d-fall{fill:none;stroke:var(--d-water);stroke-width:6;stroke-linecap:round}
.d-lead{stroke:var(--muted);stroke-width:1.2;fill:none}
.d-arrow{stroke:var(--muted);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.d-end{fill:var(--ink)}
.d-land{fill:var(--d-basin)}
.d-sand{fill:var(--d-sand)}
.d-marsh{fill:var(--d-hill)}
.d-lagoon{fill:color-mix(in srgb,var(--d-water) 22%,var(--surface))}
.d-sea.veil{opacity:.55}
.d-beach{fill:none;stroke:var(--d-sand);stroke-width:8;stroke-linecap:round}
.d-spit{fill:none;stroke:var(--d-sand);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.d-beachline{fill:none;stroke:var(--d-sand);stroke-width:8}
.d-groyne{fill:var(--d-hard)}
.d-hole{fill:var(--surface)}
.d-crack{fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-crest{fill:none;stroke:var(--d-water);stroke-width:2;stroke-linecap:round;opacity:.45}
.d-path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.d-pebble{fill:var(--ink)}
.d-move,.d-wind{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-wind{stroke:var(--muted);stroke-width:3}
.dash{stroke-dasharray:4 3}
.d-tide{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:6 4}
.d-old{fill:none;stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:3 4}
.d-sep{stroke:var(--line);stroke-width:1}
.d-magma{fill:var(--d-magma)} .d-lava{fill:var(--d-lava)} .d-mantle{fill:var(--d-mantle)} .d-core{fill:var(--d-core)}
.d-ice{fill:var(--d-ice);stroke:var(--d-water);stroke-width:1.2;stroke-linejoin:round}
.d-plot,.d-plot2{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .d-plot{stroke:var(--tag-1)} .d-plot2{stroke:var(--tag-2)}
.d-shade{fill:color-mix(in srgb,var(--tag-1) 16%,transparent);stroke:var(--tag-1);stroke-width:1.5} .d-shade2{fill:color-mix(in srgb,var(--tag-2) 16%,transparent);stroke:var(--tag-2);stroke-width:1.5}
.d-edge{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round} .d-tick{fill:none;stroke:var(--ink);stroke-width:1.5}
.d-yellow{fill:var(--d-yellow)} .d-orange{fill:var(--d-orange)} .d-red{fill:var(--d-red)} .d-purple{fill:var(--d-purple)} .d-blueblack{fill:var(--d-blueblack)}
.d-topsoil{fill:var(--d-topsoil)} .d-subsoil{fill:var(--d-subsoil)} .d-peat{fill:var(--d-peat)}
.d-forest{fill:var(--d-forest)} .d-built{fill:var(--d-built)} .d-cloud{fill:var(--d-cloud)}
.d-road{fill:none;stroke:var(--d-road);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.d-rail{fill:none;stroke:var(--d-road);stroke-width:2;stroke-dasharray:6 3}
.d-contour{fill:none;stroke:var(--d-shed);stroke-width:1.2}
.d-warm,.d-cold{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .d-warm{stroke:var(--d-warm)} .d-cold{stroke:var(--d-cold)}
.d-warmfill{fill:var(--d-warm)} .d-coldfill{fill:var(--d-cold)}
.d-axis{stroke:var(--line-strong);stroke-width:1.2;fill:none} .d-grid{stroke:var(--line);stroke-width:1;fill:none}
.d-bar1{fill:var(--tag-1)} .d-bar2{fill:var(--tag-2)} .d-bar3{fill:var(--tag-3)} .d-bar4{fill:var(--tag-4)} .d-bar5{fill:var(--tag-5)} .d-bar6{fill:var(--tag-6)}

/* ---------- Feedback footer: colour + icon + words ---------- */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);border-top:var(--border) solid var(--line);
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));padding-top:var(--sp-4)}
.foot .in{max-width:var(--measure);margin:0 auto;padding-left:max(var(--sp-4),env(safe-area-inset-left,0px));padding-right:max(var(--sp-4),env(safe-area-inset-right,0px));display:grid;gap:var(--sp-3)}
.foot.good{background:var(--good-soft);border-color:var(--good)}
.foot.warn{background:var(--warn-soft);border-color:var(--warn)}
.foot.bad{background:var(--bad-soft);border-color:var(--bad)}
.foot.info{background:var(--info-soft);border-color:var(--info)}
.fb h3{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-lg)}
.foot .fb h3::before{content:"";width:28px;height:28px;--i:var(--i-info)}
.foot.good h3{color:var(--good)} .foot.warn h3{color:var(--warn)} .foot.bad h3{color:var(--bad)} .foot.info h3{color:var(--info)}
.foot.good .fb h3::before{--i:var(--i-check-disc)}
.foot.warn .fb h3::before{--i:var(--i-hint)}
.foot.bad .fb h3::before{--i:var(--i-cross-disc)}
.fb p{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--ink);max-height:32vh;overflow:auto}
.fb .hint{font-weight:var(--fw-bold)}
.foot.good .big{background:var(--good);border-color:var(--good);color:var(--on-good);box-shadow:0 var(--edge) 0 color-mix(in srgb,var(--good) 60%,black)}

/* ---------- Summary ---------- */
.sum{display:grid;gap:var(--sp-5);padding-top:var(--sp-4)}
.sum>.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--ink)}
.sum>.eyebrow::before{content:"";width:28px;height:28px;background:var(--brand);-webkit-mask:var(--i-star) center/contain no-repeat;mask:var(--i-star) center/contain no-repeat}
.sum h1{font-size:var(--fs-2xl);margin-top:calc(-1 * var(--sp-3))}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.tiles div{background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-2);text-align:center;display:grid;gap:2px}
.tiles div:first-child{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.tiles div:first-child span{color:var(--on-brand)}
.tiles b{display:block;font-family:var(--f-display);font-size:var(--fs-xl);font-weight:var(--fw-heavy);font-variant-numeric:tabular-nums}
.tiles span{font-size:var(--fs-xs);color:var(--muted)}
.coach{background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);display:grid;gap:var(--sp-3)}
.coach h2{font-size:var(--fs-md)}
.coach p{margin:0}
.coach ul{margin:0;padding-left:var(--sp-5)}
.flag{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);display:grid;gap:var(--sp-1);background:var(--bad-soft)}
.flag b{display:flex;align-items:center;gap:var(--sp-2);color:var(--bad)}
.flag b::before{content:"";--i:var(--i-alert);width:18px;height:18px}
.flag.luck{background:var(--warn-soft)} .flag.luck b{color:var(--warn)} .flag.luck b::before{--i:var(--i-hint)}
.flag.ok{background:var(--good-soft)} .flag.ok b{color:var(--good)} .flag.ok b::before{--i:var(--i-check)}
.flag p{font-size:var(--fs-sm)}

/* ---------- Navigation ---------- */
.crumbs ol{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:var(--fs-sm)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 10px;border:solid var(--line-strong);border-width:2px 2px 0 0;transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);color:var(--muted);font-weight:var(--fw-bold);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:var(--fw-bold)}
.lctx{margin:0 0 var(--sp-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
a.streakpill{text-decoration:none;white-space:nowrap}
.streakpill .fz{margin-left:4px;color:var(--info);font-size:var(--fs-xs)}

/* ---------- Daily goal ---------- */
.goal{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:var(--border) solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
.goal .info{display:grid;gap:2px}
.goal b{font-family:var(--f-display);font-size:var(--fs-md)}
.goal .info>span:last-child{font-size:var(--fs-sm);color:var(--muted)}
.ring{flex:none}
.ring circle{fill:none;stroke-width:6}
.ring .trk{stroke:var(--surface-2)}
.ring .val{stroke:var(--brand);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .6s var(--ease)}
.ring .tick{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.goalbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.goalbar .track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.goalbar .track i{display:block;height:100%;background:var(--brand);border-radius:4px}

/* ---------- Mastery and revision ---------- */
.pips{display:inline-flex;gap:4px;flex:none}
.pips i{width:14px;height:6px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pips i.on{background:var(--brand);box-shadow:none}
.topic .row,.panel .row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.topic.due{border-color:var(--warn)}
.topic.due .row+span{color:var(--warn);font-weight:var(--fw-bold)}
.revise{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.mastery{margin-top:var(--sp-5)}
.mastery .actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}
.masterylist{list-style:none;margin:0;padding:0;display:grid}
.masterylist a{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-2) 0;border-bottom:var(--border) solid var(--line);color:var(--ink);text-decoration:none}
.masterylist li:last-child a{border-bottom:0}
.masterylist .info{flex:1;display:grid}
.masterylist .info span{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Lesson complete ---------- */
.combo{color:var(--brand)}
.celebrate{position:relative;height:72px;display:grid;place-items:center;margin-bottom:calc(-1 * var(--sp-3));overflow:visible}
.celebrate .medal{width:64px;height:64px;border-radius:50%;background:var(--brand);display:grid;place-items:center;animation:pop .5s var(--ease) both}
.celebrate .medal::after{content:"";width:34px;height:34px;background:var(--on-brand);-webkit-mask:var(--i-star) center/contain no-repeat;mask:var(--i-star) center/contain no-repeat}
.celebrate.wow .medal{box-shadow:0 0 0 8px var(--brand-soft)}
.celebrate i{position:absolute;top:30px;left:50%;width:8px;height:12px;border-radius:2px;background:var(--brand);opacity:0;animation:burst 1.1s var(--ease) .15s forwards}
.celebrate i:nth-child(3n){background:var(--good)} .celebrate i:nth-child(3n+1){background:var(--warn)} .celebrate i:nth-child(4n){background:var(--info)}
.celebrate i:nth-child(1){--x:-120px;--y:-30px;--r:200deg}
.celebrate i:nth-child(2){--x:-90px;--y:-60px;--r:-160deg}
.celebrate i:nth-child(3){--x:-60px;--y:-80px;--r:220deg}
.celebrate i:nth-child(4){--x:-30px;--y:-70px;--r:-90deg}
.celebrate i:nth-child(5){--x:0px;--y:-90px;--r:140deg}
.celebrate i:nth-child(6){--x:30px;--y:-75px;--r:-200deg}
.celebrate i:nth-child(7){--x:60px;--y:-85px;--r:170deg}
.celebrate i:nth-child(8){--x:90px;--y:-55px;--r:-130deg}
.celebrate i:nth-child(9){--x:120px;--y:-25px;--r:240deg}
.celebrate i:nth-child(10){--x:-140px;--y:10px;--r:-60deg}
.celebrate i:nth-child(11){--x:140px;--y:5px;--r:90deg}
.celebrate i:nth-child(12){--x:-100px;--y:30px;--r:-220deg}
.celebrate i:nth-child(13){--x:100px;--y:35px;--r:210deg}
.celebrate i:nth-child(14){--x:0px;--y:-40px;--r:300deg}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes burst{0%{opacity:1;transform:translate(-50%,0) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(var(--y) + 60px)) rotate(var(--r))}}
.sum>.eyebrow::before{display:none}
.sum>.eyebrow{justify-self:center;color:var(--brand)}
.sum h1{text-align:center;margin-top:calc(-1 * var(--sp-3))}
.earned{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.earned li{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-sm);font-weight:var(--fw-bold);background:var(--brand-soft);color:var(--ink);animation:pop .4s var(--ease) both}
.earned li::before{content:"";width:14px;height:14px;background:var(--brand);-webkit-mask:var(--i-star) center/contain no-repeat;mask:var(--i-star) center/contain no-repeat}
.earned li.e-streak::before{-webkit-mask-image:var(--i-flame);mask-image:var(--i-flame)}
.earned li.e-goal::before{-webkit-mask-image:var(--i-check-disc);mask-image:var(--i-check-disc)}
.earned li.e-freeze::before{background:var(--info);-webkit-mask-image:var(--i-info);mask-image:var(--i-info)}
.earned li:nth-child(2){animation-delay:.08s} .earned li:nth-child(3){animation-delay:.16s} .earned li:nth-child(4){animation-delay:.24s} .earned li:nth-child(n+5){animation-delay:.32s}
#sumback{justify-self:center}

/* ---------- Progress page ---------- */
.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.four div:first-child{background:var(--surface);border-color:var(--line);color:var(--ink)}
.tiles.four div:first-child span{color:var(--muted)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);height:140px;align-items:end;margin-top:var(--sp-2)}
.week .day{display:grid;grid-template-rows:auto 1fr auto;height:100%;align-items:end;justify-items:center;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.week .day i{width:100%;max-width:28px;min-height:3px;border-radius:6px 6px 2px 2px;background:var(--line-strong);align-self:end}
.week .day.met i{background:var(--brand)}
.week .v{font-variant-numeric:tabular-nums}
.badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-2)}
.badges li{display:grid;gap:2px;align-content:start;padding:var(--sp-3);border:var(--border) dashed var(--line-strong);border-radius:var(--r-md);font-size:var(--fs-sm)}
.badges li b{font-family:var(--f-display)}
.badges li span{color:var(--muted);font-size:var(--fs-xs)}
.badges li:not(.got){opacity:.75}
.badges li:not(.got) b::after{content:" · locked";font-family:var(--f-body);font-weight:var(--fw-body);font-size:var(--fs-xs);color:var(--muted)}
.badges li.got{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}
.badges .medal{width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;margin-bottom:var(--sp-1)}
.badges .medal::after{content:"";width:16px;height:16px;background:var(--muted);-webkit-mask:var(--i-star) center/contain no-repeat;mask:var(--i-star) center/contain no-repeat}
.badges li.got .medal{background:var(--brand)} .badges li.got .medal::after{background:var(--on-brand)}
.badges .when{color:var(--ink)!important;font-weight:var(--fw-bold)}
.goals{grid-template-columns:1fr}

/* ---------- Wide screens: same column, more air ---------- */
@media (min-width:900px){
  .wrap{padding-top:var(--sp-8)}
  .hero h1,.setup h1{font-size:var(--fs-3xl)}
  .prompt{font-size:var(--fs-xl)}
}
@media (max-width:420px){
  .prompt{font-size:var(--fs-lg)}
  .match{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
  .tiles b{font-size:var(--fs-lg)}
}
@media (prefers-reduced-motion:reduce){
  .celebrate i{display:none!important}
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  :is(.big,.btn,.opt,.tile,.chip,.choice,.tick,.subj,.topic,.cont .go,.node .disc):active{transform:none!important}
}

/* Third-party credits (ABAIR requires its logo and wording wherever its voices are used) */
.credit{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);align-items:start;margin-top:var(--sp-10);padding-top:var(--sp-4);border-top:var(--border) solid var(--line);font-size:var(--fs-sm)}
.credit>a{grid-row:span 2;display:block;background:#fff;border-radius:var(--r-sm);padding:4px}
.credit img{display:block}
.credit p{margin:0}
.credit p a{color:inherit}

/* Speaking questions */
.speak{display:grid;gap:var(--sp-4);justify-items:center;text-align:center}
.speak .phrase{margin:0;font-family:var(--f-display);font-size:var(--fs-xl);font-weight:var(--fw-heavy);line-height:var(--lh-snug)}
.speak .phrase .en{display:block;margin-top:var(--sp-1);font-family:var(--f-body);font-size:var(--fs-sm);font-weight:var(--fw-body);color:var(--muted)}
.speak .w-hit{color:var(--good)}
.speak .w-miss{color:var(--muted);text-decoration:underline dotted;text-underline-offset:4px}
.mic{display:grid;gap:var(--sp-2);justify-items:center;width:100%}
.micbtn{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;background:var(--ink);color:var(--on-ink);box-shadow:0 var(--edge) 0 var(--ink-press)}
.micbtn:active{transform:translateY(var(--edge));box-shadow:none}
.micbtn:disabled{opacity:.4;cursor:default}
.micbtn.on{animation:micpulse 1.4s var(--ease) infinite}
.micbtn.busy{background:var(--surface-2);box-shadow:none;border:4px solid var(--line);border-top-color:var(--ink);animation:spin .9s linear infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 35%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@keyframes spin{to{transform:rotate(360deg)}}
.miclabel{margin:0;font-weight:var(--fw-bold)}
.heard{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.heard q{color:var(--ink);font-style:italic}
.consent{display:grid;gap:var(--sp-2);text-align:left;background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);width:100%}
.consent p{margin:0}
.consent .actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.linkbtn{background:none;border:0;padding:var(--sp-2);min-height:var(--tap);color:var(--muted);text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
@media (prefers-reduced-motion:reduce){.micbtn.on,.micbtn.busy{animation:none}}
/* Answer-box tools: fada buttons and the microphone */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.tools .fadas{margin-top:0}
.dictate{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 180px;min-width:0}
.dictbtn{flex:none;width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;border:var(--border) solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.dictbtn svg{width:22px;height:22px}
.dictbtn:hover{border-color:var(--ink)}
.dictbtn.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink);animation:micpulse 1.4s var(--ease) infinite}
.dictbtn.on svg{width:16px;height:16px}
.dictbtn.busy{border:3px solid var(--line);border-top-color:var(--ink);animation:spin .9s linear infinite}
.dictstatus{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-snug)}
.tools+.consent,.dictate~.consent{margin-top:var(--sp-3)}
.speak .consent,.tools~.consent{text-align:left}
@media (prefers-reduced-motion:reduce){.dictbtn.on,.dictbtn.busy{animation:none}}

/* Listening (cluastuiscint) */
.listen{display:grid;gap:var(--sp-2);justify-items:start;margin:var(--sp-2) 0 var(--sp-4)}
.listenbtn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4);border-radius:var(--r-pill);border:0;background:var(--ink);color:var(--on-ink);font:inherit;font-weight:var(--fw-bold);cursor:pointer;box-shadow:0 var(--edge) 0 var(--ink-press)}
.listenbtn:active{transform:translateY(var(--edge));box-shadow:none}
.listenbtn:disabled{background:var(--surface-2);color:var(--muted);box-shadow:none;cursor:default}
.listen .linkbtn{padding-left:0}
.transcript{margin:0;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border-radius:var(--r-md);font-style:italic;line-height:var(--lh-body)}

/* Maths: the symbol keys wrap on small screens; stacked fractions in teaching text */
.mathkeys{flex-wrap:wrap}
.mathkeys .fada{min-width:40px;font-family:var(--f-body)}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;margin:0 .15em;font-size:.9em}
.frac>span:first-child{border-bottom:1.5px solid currentColor;padding:0 .2em}
.math{font-family:var(--f-body);white-space:nowrap}
.card .math,.teach .math{white-space:normal} /* long equations on teaching cards wrap at spaces on a phone */

/* Maths question types */
.work .lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.work .line{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);background:var(--surface);border:var(--border) solid var(--line);font-size:var(--fs-md)}
.work .line .math{flex:1}
.work .line.given{background:var(--surface-2);font-weight:var(--fw-bold)}
.work .line.ok{border-color:var(--good)} .work .line.bad{border-color:var(--bad);background:var(--bad-soft)}
.work .line .mark{flex:none;width:20px;height:20px;border-radius:50%}
.work .line.ok .mark{background:var(--good);-webkit-mask:var(--i-check) center/14px no-repeat;mask:var(--i-check) center/14px no-repeat}
.work .line.bad .mark{background:var(--bad);-webkit-mask:var(--i-cross,var(--i-check)) center/14px no-repeat;mask:var(--i-cross,var(--i-check)) center/14px no-repeat}
.work .line .del{flex:none;min-height:var(--tap);margin:-8px -8px -8px 0;padding:0 var(--sp-2);border:0;background:none;color:var(--bad);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);text-decoration:underline;cursor:pointer}
.work .addline{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.work .addline .typein{flex:1;min-width:0}
.workmsg{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--muted);min-height:1.4em}
.workmsg.ok{color:var(--good)} .workmsg.bad{color:var(--bad)}
.fillin{display:grid;gap:var(--sp-2);font-size:var(--fs-md);line-height:2.2}
.fillin p{margin:0}
.blank{font:inherit;font-weight:var(--fw-bold);text-align:center;padding:2px 6px;min-height:40px;border:var(--border) solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);max-width:100%}
.blank:focus{outline:3px solid var(--focus);outline-offset:1px}
.blank.good{border-color:var(--good);background:var(--good-soft)} .blank.bad{border-color:var(--bad);background:var(--bad-soft)}
.fixit .opt.line{font-family:var(--f-body);overflow-wrap:anywhere}
.fixit .opt.line .math{white-space:normal}
.tapdiag .hot{cursor:pointer;transition:opacity var(--t-fast)}
.tapdiag .hot:focus{outline:none} .tapdiag .hot:focus-visible{stroke:var(--focus);stroke-width:3}
.tapdiag .hot-sel{stroke:var(--ink);stroke-width:3.5;fill:color-mix(in srgb,var(--tag-1) 35%,transparent)}
.tapdiag .hot-good{stroke:var(--good);stroke-width:3.5;fill:color-mix(in srgb,var(--good) 25%,transparent)}
.tapdiag .hot-bad{stroke:var(--bad);stroke-width:3.5;fill:color-mix(in srgb,var(--bad) 25%,transparent)}
.diag.grid{cursor:crosshair;touch-action:manipulation}
.d-pt.pt-good,.nl-closed.pt-good{fill:var(--good);stroke:var(--good)} .d-pt.pt-bad{fill:var(--bad);stroke:var(--bad)}
.pt-good-line{stroke:var(--good)}
.plot,.numline,.estimate,.explore{display:grid;gap:var(--sp-2)}
.plot .note,.numline .note{margin:0}
.nl-closed{fill:var(--ink)} .nl-open{fill:var(--surface)}
.d-shade-line{stroke:var(--tag-1);stroke-width:6;stroke-linecap:round} .d-shade-arrow{fill:none;stroke:var(--tag-1);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.d-shade-line.pt-good,.d-shade-arrow.pt-good{stroke:var(--good)} .d-shade-line.pt-bad,.d-shade-arrow.pt-bad{stroke:var(--bad)}
.nlctrl{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.nlctrl .pill.sel{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.estval{font-family:var(--f-display);font-size:var(--fs-2xl);font-weight:var(--fw-heavy);text-align:center}
.estimate input[type=range],.explore input[type=range]{width:100%;min-height:var(--tap);accent-color:var(--ink)}
.estends{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--muted)}
.explore .slider{display:grid;grid-template-columns:auto 1fr 3ch;gap:var(--sp-3);align-items:center;font-weight:var(--fw-bold)}
.explore .sval{text-align:right;font-variant-numeric:tabular-nums}
.explorelab{margin:0;text-align:center;font-family:var(--f-display);font-size:var(--fs-lg);font-weight:var(--fw-heavy)}
.tapdiag .d-mk circle.hot-sel{stroke:var(--tag-1);stroke-width:4}
.tapdiag .d-mk circle.hot-good{fill:var(--good);stroke:var(--good)} .tapdiag .d-mk circle.hot-bad{fill:var(--bad);stroke:var(--bad)}
.graphwrap{margin-bottom:var(--sp-3)}

a.meta{color:inherit;text-decoration:none;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Bottom tab bar: Home, Search, Progress, Settings ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:var(--border) solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar .in{max-width:var(--measure);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tabbar a{display:grid;justify-items:center;gap:2px;padding:8px 4px 10px;color:var(--muted);text-decoration:none;font-size:var(--fs-xs);font-weight:var(--fw-bold);min-height:56px}
.tabbar a[aria-current="page"]{color:var(--brand)}
.tabbar a[aria-current="page"] svg{stroke-width:2.6}
.wrap:has(.tabbar){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* ---------- Subject page: continue card, numbered topics, sections ---------- */
.continue{display:grid;gap:4px;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-5)}
.continue .ctopic{color:var(--muted);font-size:var(--fs-sm);text-decoration:none}
.continue b{font-family:var(--f-display);font-size:var(--fs-lg)}
.continue .btn{justify-self:start;margin-top:var(--sp-2)}
.topic{grid-template-columns:auto 1fr;align-items:center;gap:var(--sp-3)}
.topic .num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.topic.done .num{background:var(--good);color:var(--on-good);box-shadow:none}
.topic .body{display:grid;gap:2px}
.minibar.slim{display:block;width:100%;max-width:160px;height:5px;margin-top:4px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);overflow:hidden}
.minibar.slim::before{content:none}
.minibar.slim i{display:block;height:100%}
h2.section{margin:var(--sp-5) 0 var(--sp-2)}
details.more summary{cursor:pointer;font-family:var(--f-display);font-weight:var(--fw-bold);font-size:var(--fs-md);display:grid;gap:2px;padding:var(--sp-3) 0}
details.more summary .sub{font-family:var(--f-body);font-weight:400;font-size:var(--fs-sm);color:var(--muted)}
.topic .body .row,.topic .body .row b{color:var(--ink)}

/* ---------- Practise and the test builder ---------- */
.continue .actions,.actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.continue .actions .btn{margin-top:0}
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0}
.picks{border:0;padding:0;margin:var(--sp-4) 0;display:grid;gap:var(--sp-2)}
.picks legend{margin-bottom:var(--sp-2)}
.pick{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);cursor:pointer}
.pick input{width:22px;height:22px;flex:none;accent-color:var(--brand)}
.pick .chn{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);margin-right:4px}
.field{display:grid;gap:var(--sp-2);margin:var(--sp-3) 0}

/* A source extract (history): a quotation with who wrote it and when. Normal text size even inside a question. */
.source{margin:var(--sp-3) 0;padding:var(--sp-3) var(--sp-4);background:var(--surface);border-left:4px solid var(--brand);border-radius:0 var(--r-md,10px) var(--r-md,10px) 0;font-family:var(--f-body);font-size:var(--fs-base);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink)}
.source p{margin:0 0 var(--sp-2);font-style:italic}
.source cite{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--muted)}
.source .kind{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:var(--sp-1)}