/* 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}

/* ---------- 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)}
.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}
.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)}
.prompt{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:-.01em}
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}
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-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}

/* ---------- 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)}

/* ---------- 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){
  *,*::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}
}