/* MaxMartin KS3 "friendly" facelift (preview, 12 Nov 2026). Loaded AFTER a page's own <style>, so it only re-skins:
   same markup, same JavaScript, same colours family, rounder, softer, more playful, closer to the student app.
   Light mode only here; the pages' own dark-mode rules still apply on top. */
@font-face{font-family:"Fraunces";src:url("/app/fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --navy:#1F3864; --navy-2:#30508A; --gold:#F2B747; --gold-ink:#8C6114; --gold-soft:#FFF1CC;
  --ground:#EAF2FC; --surface:#FFFFFF; --surface-2:#F2F7FE; --ice:#DCEAFA;
  --ink:#16294A; --ink-2:#3B4D70; --muted:#62759A; --line:#CFDDF0;
  --teal:#13968B; --teal-soft:#D9F4F0; --coral:#E0563F; --coral-soft:#FFE6E0; --plum:#8A52B0; --plum-soft:#EEE1F7;
  --star:#F2B747; --r:18px;
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
}
body{background-color:#E4EDF9;background-image:radial-gradient(rgba(31,56,100,.10) 1.2px,transparent 1.4px);background-size:22px 22px}
h1,h2,h3,.brand,.hstat b,.sum p.big{font-family:var(--display);font-variation-settings:"opsz" 48,"SOFT" 60;font-weight:650;letter-spacing:-.012em}

/* top bar: navy and gold again, with rounded bottom corners and pill chips */
.top{background:var(--navy);color:#fff;border-bottom:4px solid var(--gold);border-radius:0 0 26px 26px;box-shadow:0 6px 18px rgba(22,41,74,.16)}
.brand{color:var(--gold);font-size:19px}
.brand small{color:#C9D6EC;font-family:var(--font);font-size:12.5px;font-variation-settings:normal;font-weight:500}
.chip{background:var(--navy-2);color:#E7EDF7;border:0;box-shadow:none;font-weight:600}
.chip b{color:#fff} .chip svg{fill:var(--gold)}
a.chip{border:2px solid #4A68A3;color:#fff} a.chip:hover{border-color:var(--gold)}

/* hero: rounded navy card with a gold base, no decoration */
.hero{margin:16px 0 0;padding:28px 22px 30px;border-radius:24px;color:#fff;
  background:linear-gradient(160deg,#243F73 0%,#1F3864 60%,#1A3159 100%);border-bottom:7px solid var(--gold);box-shadow:0 14px 28px rgba(22,41,74,.18)}
.hero h1{font-size:clamp(30px,7vw,44px)}
.hero .lead{color:#E6EEFA}
.eyebrow{display:inline-block;background:rgba(242,183,71,.18);color:#FFD679;border-radius:999px;padding:3px 12px;letter-spacing:.06em}
.level .eyebrow{background:var(--acc-soft);color:var(--acc)}
.hstat{background:rgba(255,255,255,.12);color:#E6EEFA;border-radius:16px}
.hstat b{color:#fff}

/* cards and buttons: chunky, like the app */
.card{border:2px solid var(--line);box-shadow:0 5px 0 var(--line);border-radius:var(--r);padding:22px}
.card h2{font-size:23px}
.btn{border:2px solid var(--line);box-shadow:0 4px 0 var(--line);border-radius:999px;font-weight:650;min-height:48px;transition:transform .1s,box-shadow .1s}
.btn:hover{border-color:var(--navy-2)} .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn.primary{background:var(--navy);border-color:var(--navy);box-shadow:0 4px 0 #14274A;color:#fff}
.btn.gold,.hero .btn.primary{background:var(--gold);border-color:var(--gold);color:#16294A;box-shadow:0 4px 0 #B8841C}
.btn.primary:active,.btn.gold:active{box-shadow:0 1px 0 #B8841C}
.btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 4px 0 #14274A}
.btn.ghost{box-shadow:none}

/* the confidence check-in: a friendly panel with a bigger, easier slider */
.checkin{margin-top:18px;border-top:6px solid var(--gold);position:relative;box-shadow:0 5px 0 var(--line)}
.slider input[type=range]{height:44px;accent-color:var(--gold)}
.scale{font-size:14px;font-weight:600}
.say{font-family:var(--display);font-size:22px;color:var(--navy)}
.over .ov{border-radius:18px;border-left:0;border-top:6px solid var(--acc)}

/* path: bubbly nodes, softer trail */
.flash{background:var(--gold-soft);border:2px solid var(--gold);border-radius:18px}
.lvh{border-bottom:0;padding-bottom:4px}
.lvh h2{font-size:28px}
.trail::before{width:6px;left:24px;background:repeating-linear-gradient(to bottom,var(--line) 0 10px,transparent 10px 18px)}
.step{grid-template-columns:56px 1fr}
.node{width:56px;height:56px;border-width:0;background:var(--acc-soft);color:var(--acc);box-shadow:0 4px 0 var(--line),inset 0 0 0 4px var(--acc);font-family:var(--display)}
.step.secure .node{background:var(--acc);color:#fff;box-shadow:0 4px 0 rgba(22,41,74,.25)}
.step.rec .node{background:var(--gold-soft);color:var(--gold-ink);box-shadow:0 4px 0 #B8841C,inset 0 0 0 4px var(--gold)}
.sbody{border:2px solid var(--line);border-radius:20px;box-shadow:0 4px 0 var(--line)}
.step.rec .sbody{border:2px solid var(--gold);box-shadow:0 4px 0 #E8C06A}
.badge{border:3px dashed var(--line)} .badge.won{box-shadow:0 0 0 4px var(--acc-soft)}
.tag{color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:2px 10px}

/* lesson and question pages */
.key,.worked,.act,.wgc{border-left:0;border-top:6px solid var(--gold);}
.worked{border-top-color:var(--teal)} .act{border-top-color:var(--plum)} .wgc{border-top-color:var(--coral)}
.wsteps li{border-radius:16px}
.eq{border-radius:18px;background:linear-gradient(180deg,var(--surface-2),var(--ice))}
.grow input,.ansrow input{border-radius:14px;border-width:2px}
.opt,.line{border-radius:16px;box-shadow:0 3px 0 var(--line);border-width:2px}
.opt:active,.line:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.kp button{border-radius:14px;box-shadow:0 3px 0 var(--line);font-family:var(--display)}
.qcard{border-top:6px solid var(--acc)}
.dots i{height:10px;border-radius:10px}
.fb{border-radius:16px}
.sum{border-top:0;background:linear-gradient(180deg,#fff,var(--gold-soft))}
.sum p.big{font-size:56px;color:var(--navy)}
.bal svg,.wgx svg{border-radius:18px}
.spk{border-width:2px;box-shadow:0 3px 0 var(--line)}
.bar i{height:12px;border-radius:8px}
.back{font-weight:600;color:var(--navy-2)}
:focus-visible{outline:3px solid var(--gold)}

/* index page cards (unit list), if present */
a.unit,.units a,.topic{border-radius:22px}

/* range sliders: friendly track instead of the browser's dark grey */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:14px;background:var(--ice);box-shadow:inset 0 0 0 2px var(--line)}
input[type=range]::-moz-range-track{height:14px;border-radius:14px;background:var(--ice);box-shadow:inset 0 0 0 2px var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-10px;border-radius:50%;background:var(--gold);border:4px solid #fff;box-shadow:0 3px 0 #B8841C,0 0 0 2px var(--gold)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--gold);border:4px solid #fff;box-shadow:0 3px 0 #B8841C}
.sl input[type=range]::-webkit-slider-thumb{background:var(--plum);box-shadow:0 3px 0 #5E3380,0 0 0 2px var(--plum)}

/* unit list */
.topic{border:2px solid var(--line)!important;border-left-width:2px!important;border-top:6px solid var(--acc)!important;border-radius:22px;box-shadow:0 5px 0 var(--line);transition:transform .1s,box-shadow .1s}
.topic:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.topic h3,.topic h2{font-size:21px}
.go{display:inline-block;background:var(--acc);color:#fff!important;border-radius:999px;padding:6px 16px;font-weight:650;box-shadow:0 3px 0 rgba(22,41,74,.25)}
.yr h2{display:inline-block;background:var(--acc);color:#fff;border-radius:999px;padding:4px 18px;font-size:22px;border:0!important}
@media(max-width:480px){.top-in{gap:6px;padding:8px 12px}.chip{padding:3px 10px;font-size:13px}.brand{font-size:17px}}

/* use the width on larger screens (less empty space at the sides) */
@media(min-width:900px){
  main{max-width:1000px} .top-in{max-width:1000px}
  .topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .hero{padding:38px 34px 40px} .hero h1{font-size:50px} .hero .lead{font-size:19px;max-width:62ch}
}
@media(min-width:640px) and (max-width:899px){ main{max-width:820px} .top-in{max-width:820px} .topics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} }

/* year jump + search bar on the topic list */
.jump{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.jump a{background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:999px;padding:6px 16px;font-weight:650;color:var(--navy);text-decoration:none}
.jump a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.jump input{flex:1;min-width:180px;border:2px solid var(--line);border-radius:999px;padding:9px 16px;font-size:16px;background:#fff;color:var(--ink)}
.yr{scroll-margin-top:80px}

/* default accent so diagrams outside a level never fall back to black */
body{--acc:var(--teal);--acc-soft:var(--teal-soft)}
/* year colour coding: Year 7 teal, Year 8 coral, Year 9 plum */
.y7,[data-year="7"]{--yr:#13968B;--yr-soft:#D9F4F0} .y8,[data-year="8"]{--yr:#E0563F;--yr-soft:#FFE6E0} .y9,[data-year="9"]{--yr:#8A52B0;--yr-soft:#EEE1F7}
.yr.y7,.yr.y8,.yr.y9,.topic.y7,.topic.y8,.topic.y9{--acc:var(--yr);--acc-soft:var(--yr-soft)}
.yr.st h2{background:var(--navy)}
.ytag{display:inline-block;background:var(--yr-soft);color:var(--yr);border-radius:999px;padding:1px 10px;margin-right:6px;font-weight:700;letter-spacing:.03em}
#byYear .ytag{display:none}
#byYear,#byTopic{display:grid;gap:20px}
[data-year] .hero{border-bottom-color:var(--yr)}
[data-year] .hero .eyebrow{background:var(--yr);color:#fff}
[data-year] .checkin{border-top-color:var(--yr)}
.jump{background:rgba(228,237,249,.92);padding:8px;border-radius:22px;margin:0 -8px}
.seg{display:inline-flex;background:#fff;border:2px solid var(--line);border-radius:999px;padding:3px;box-shadow:0 3px 0 var(--line)}
.seg button{border:0;background:none;border-radius:999px;padding:6px 16px;font-weight:650;color:var(--navy);min-height:38px}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.yjump{display:flex;gap:8px;flex-basis:100%}
.jump .yjump a{background:var(--yr);border-color:var(--yr);color:#fff;box-shadow:0 3px 0 rgba(22,41,74,.25)}

/* "What do you want help with?" plan and picker */
.plan,.picker{display:grid;gap:14px;border-top:6px solid var(--gold)}
.eyebrow.pl{justify-self:start;background:var(--gold-soft);color:var(--gold-ink);font-size:12.5px;font-weight:700;text-transform:uppercase}
.plan .cf{color:var(--muted);font-size:15px}
.picker h3{font-size:18px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pchip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:600;font-size:15px;color:var(--ink);box-shadow:0 3px 0 var(--line);text-align:left;min-height:44px}
.pchip small{margin-left:8px;color:var(--yr);font-weight:700}
.pchip[aria-pressed="true"]{background:var(--yr);border-color:var(--yr);color:#fff;box-shadow:0 3px 0 rgba(22,41,74,.25)}
.pchip[aria-pressed="true"] small{color:#fff}
.seg.pk{justify-self:start;flex-wrap:wrap}
.prow{display:grid;gap:6px;padding:12px 14px;border:2px solid var(--line);border-left:6px solid var(--yr);border-radius:16px;margin-top:8px;background:var(--surface-2)}
.rate{display:flex;gap:6px}
.rate button{flex:1;min-height:44px;border:2px solid var(--line);background:#fff;border-radius:12px;font-weight:700;font-family:var(--display);font-size:18px;color:var(--navy)}
.rate button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);box-shadow:0 3px 0 #B8841C}
.say2{color:var(--ink-2);font-size:15px}
.prow{grid-template-columns:1fr} .picker,.plan{scroll-margin-top:80px}

/* free account card */
.acct{display:grid;gap:14px;border-top:6px solid var(--navy)}
.acct form{display:grid;gap:14px}
.acct label{display:grid;gap:6px;font-weight:600}
.acct input[type=email],.acct input[type=password],.acct input[type=text]{border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-size:16px;background:#fff;color:var(--ink);font-weight:400}
.acct .tick{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15.5px}
.acct .tick input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--navy)}
.acct .lab{font-weight:600;margin-bottom:-6px}
.acct .cf{color:var(--muted);font-size:15px;font-weight:400}
.acct .err{background:var(--coral-soft);color:#8A2A1A;border-radius:12px;padding:10px 14px;font-weight:600}
#acMore{display:grid;gap:14px}

/* nothing may push a page wider than the screen (some welcome widgets and long overview cards did on phones) */
main{grid-template-columns:minmax(0,1fr)} main>*,.card>*,.hero>*{min-width:0;max-width:100%}
.over{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))} .over .ov{min-width:0;overflow-wrap:anywhere}
.svgbox svg,.card svg.dg{max-width:100%;height:auto}
@media (max-width:600px){.wgx{grid-template-columns:minmax(0,1fr)}}
.wgx>*,.wgx .side>*,.wgx .side{min-width:0;max-width:100%} .wgx .ro,.wgx .note{overflow-x:auto;overflow-wrap:anywhere}
input[type=range]{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
svg.dg,.wgx svg,.svgbox svg{overflow:hidden}

/* square roots: the bar runs over everything under the root (notation pass, 13 Nov 2026) */
.rt{display:inline;white-space:nowrap}
.rt .rs{padding-right:1px}
.rt .rr{display:inline-block;line-height:1.05;border-top:0.08em solid currentColor;padding:0.1em 0.1em 0}
.m .fr{vertical-align:middle}