/* Shared look for the standalone pages (practice.html first): same palette, header, footer and
   Light/Dark switch as the home page (index.html). Load AFTER the page's own <style> so it wins. */
:root{--r:#D64545;--a:#E39B2A;--g:#2E9D5B;--bg:#F2F5F7;--surface:#FFFFFF;--ink:#14212B;--muted:#526170;--line:#D8E0E6;--grid:#E6ECF0;
  --accent:#0E7C86;--accent-ink:#FFFFFF;--accent-soft:#E0F1F2;--hl:#F5C518;--hl-ink:#1A1406;--vid:#3F4FDB;--vid-ink:#FFFFFF;
  --lds:#8A6D1A;--page:linear-gradient(180deg,#F5F7F9 0%,#EDF1F4 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0B1820;--surface:#0F2733;--ink:#E6EDF2;--muted:#A3B6C1;--line:#21404D;--grid:#13303C;
  --accent:#2FC4C4;--accent-ink:#04211E;--accent-soft:#13303C;--hl:#F5C518;--hl-ink:#1A1406;--vid:#4F5FE8;--vid-ink:#FFFFFF;
  --ok-soft:#123A2A;--bad-soft:#3E1D22;--amb-soft:#3D3016;
  --lds:#D9B75A;--page:radial-gradient(1100px 520px at 12% 0%,rgba(30,80,100,.35),transparent 60%),radial-gradient(900px 640px at 88% 45%,rgba(30,60,120,.22),transparent 60%),linear-gradient(180deg,#0B1820 0%,#08121A 100%)}}
:root[data-theme=dark]{--bg:#0B1820;--surface:#0F2733;--ink:#E6EDF2;--muted:#A3B6C1;--line:#21404D;--grid:#13303C;
  --accent:#2FC4C4;--accent-ink:#04211E;--accent-soft:#13303C;--hl:#F5C518;--hl-ink:#1A1406;--vid:#4F5FE8;--vid-ink:#FFFFFF;
  --ok-soft:#123A2A;--bad-soft:#3E1D22;--amb-soft:#3D3016;
  --lds:#D9B75A;--page:radial-gradient(1100px 520px at 12% 0%,rgba(30,80,100,.35),transparent 60%),radial-gradient(900px 640px at 88% 45%,rgba(30,60,120,.22),transparent 60%),linear-gradient(180deg,#0B1820 0%,#08121A 100%)}
body{background-color:var(--bg);background-image:var(--page);background-repeat:no-repeat;min-height:100vh}

/* header: deep teal, logo left, AMDG above Home / About / Help and search */
header.site{margin:0 -16px;padding:10px max(16px,calc((100vw - 1180px)/2));background:linear-gradient(180deg,#0F4652 0%,#0C3742 100%);border-bottom:1px solid #155563;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;position:relative;z-index:20}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) header.site{background:linear-gradient(180deg,#0F4652 0%,#0C3742 100%);border-bottom-color:#155563}}
:root[data-theme=dark] header.site{background:linear-gradient(180deg,#0F4652 0%,#0C3742 100%);border-bottom-color:#155563}
header.site .brand{display:inline-grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;text-decoration:none;color:inherit}
header.site .logo{grid-row:1/span 2;width:46px;height:46px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
header.site h1{margin:0;color:#fff;font-size:1.55rem;line-height:1.1;align-self:end}
header.site h1 span{color:#B8F0EA}
header.site .byline{margin:2px 0 0;color:#EAF6F7;font-size:.85rem;letter-spacing:.02em;align-self:start}
header.site .hright{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
header.site .amdg{display:block;margin:0;padding:0 2px 0 .32em;font-size:.7rem;font-weight:700;letter-spacing:.32em;color:#D9B75A;white-space:nowrap}
.topnav{display:flex;align-items:center;gap:24px;position:relative}
.tlinks{display:flex;gap:24px}
.tlinks a{color:#E3EEF1;text-decoration:none;font-size:.92rem;padding:3px 0;border-bottom:2px solid transparent}
.tlinks a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.tlinks a[aria-current=page]{color:#fff;font-weight:700;border-bottom-color:#F5C518}
.hicon{width:44px;height:40px;margin:-8px -10px -8px -12px;display:inline-grid;place-items:center;background:none;border:0;border-radius:8px;color:#E3EEF1;cursor:pointer;text-decoration:none}
.hicon:hover{background:rgba(255,255,255,.1);color:#fff}
/* Live lesson button in the home page header (29 Oct) */
.livebtn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border-radius:99px;background:#F5C518;color:#1A1406;font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.livebtn span{width:8px;height:8px;border-radius:50%;background:#C93838;box-shadow:0 0 0 3px rgba(201,56,56,.25)}
.livebtn:hover{background:#FFD52A}
@media (max-width:380px){.livebtn{padding:0 10px}.livebtn span{display:none}}   /* 'Enter code' plus the pupil badge fit a 360px phone */
.hmenu{display:none}
@media (max-width:720px){
  header.site .logo{width:38px;height:38px}header.site h1{font-size:1.3rem}header.site .byline{font-size:.75rem}
  .topnav{gap:6px}.hicon{margin:-8px -6px}.hmenu{display:inline-grid;margin-right:-10px}
  .tlinks{display:none;position:absolute;right:-8px;top:calc(100% + 12px);flex-direction:column;gap:2px;min-width:200px;padding:6px;background:#0C3742;border:1px solid #1B6170;border-radius:12px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
  .tlinks.open{display:flex}
  .tlinks a{padding:11px 14px;border:0;border-radius:8px;font-size:1rem}
  header.site .amdg{font-size:.62rem}
}

/* heartbeat line across the empty middle of the header (wide screens only) */
header.site::before{content:none}
@media (min-width:960px){
  header.site::before{content:"";position:absolute;top:0;bottom:0;left:calc(max(16px,(100vw - 1180px)/2) + 300px);right:calc(max(16px,(100vw - 1180px)/2) + 300px);max-width:560px;margin:0 auto;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 60"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" x2="520" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0" stop-color="%23F5C518" stop-opacity="0"/%3E%3Cstop offset=".22" stop-color="%23F5C518"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d="M2 42H150L158 42L166 16L176 56L184 42H250C310 42 350 34 390 24S450 12 468 12" fill="none" stroke="url(%23g)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/%3E%3Ccircle cx="470" cy="12" r="4.5" fill="%23F5C518"/%3E%3Cpath d="M476 13C490 16 502 24 518 34" fill="none" stroke="%23B8F0EA" stroke-opacity=".28" stroke-width="2" stroke-dasharray="4 5" stroke-linecap="round"/%3E%3C/svg%3E') left center/contain no-repeat;pointer-events:none;opacity:.95}
  header.site .brand,header.site .hright{position:relative;z-index:1}
}

/* footer: LDS left, Light/Dark switch right */
footer.site{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;max-width:1180px;margin:0 auto;padding:18px 0 34px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
footer.site .lds{font-weight:700;letter-spacing:.32em;color:var(--lds);font-size:.72rem}
.themesw{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.themesw button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer}
.themesw button:hover{color:var(--ink)}
.themesw button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media print{header.site,footer.site{display:none!important}}

/* cards and buttons in the site style */
.card{border-radius:14px;border-color:var(--line);box-shadow:0 1px 2px rgba(20,33,43,.04)}
.btn{border-radius:9px}
.btn.primary{background:linear-gradient(180deg,#34BFB3,#20998E);border-color:#1E8F85;color:#04211E}

/* My practice: summary tiles, course pills, score rows */
.mytop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 14px}
.mytile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.mytile b{font-size:1.9rem;line-height:1.1}
.mytile span{color:var(--muted);font-size:.85rem}
.mytile.g b{color:var(--g)}.mytile.a b{color:var(--a)}.mytile.t b{color:var(--accent)}
.cpills{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.cpills button{font:inherit;font-size:.88rem;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:38px}
.cpills button:hover{color:var(--ink)}
.cpills button.on{color:#fff;border-color:transparent}
.cpills button.on.c-ks3{background:#24806F}.cpills button.on.c-igcse{background:#2F5AA3}.cpills button.on.c-alevel{background:#614FA3}.cpills button.on.c-further{background:#4F46B8}.cpills button.on.c-ib{background:#984571}
.cpills small{font-weight:400;opacity:.8;margin-left:4px}
.card .mh{font-size:1.1rem}
.mrow{border-radius:10px;padding:10px 8px;margin:0 -8px}
.mrow:hover{background:var(--accent-soft)}
.mscore{border-radius:12px;min-height:44px;align-items:center}
@media (max-width:560px){.mytop{gap:8px}.mytile{padding:10px 12px}.mytile b{font-size:1.5rem}.mytile span{font-size:.78rem}}
.card+.card,section.card+details.card,details.card+section.card{margin-top:12px}

/* Header bar: brand teal in both modes (Oct 2026, Paul's choice) */
header.site,:root[data-theme=dark] header.site{background:linear-gradient(180deg,#11899A 0%,#0E7C86 100%);border-bottom:1px solid #095C63}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) header.site{background:linear-gradient(180deg,#11899A 0%,#0E7C86 100%);border-bottom-color:#095C63}}
header.site .amdg{color:#FFE08A}
header.site .byline,header.site .brand .byline{color:#EAF6F7}
@media (max-width:720px){.tlinks{background:#0B6B74;border-color:#11899A}}

/* practice set title: banner in the course colour, like the unit pages */
.pbanner{--b1:#11899A;--b2:#0E7C86;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;border-radius:16px;padding:14px 18px 16px;margin:4px 0 12px;box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
.pbanner.c-ks3{--b1:#2E9A86;--b2:#1F7465}.pbanner.c-igcse{--b1:#3A69B8;--b2:#264C8F}.pbanner.c-alevel{--b1:#715DB5;--b2:#54448F}.pbanner.c-further{--b1:#5E56C4;--b2:#443DA0}.pbanner.c-ib{--b1:#AD5482;--b2:#863A62}
.pbanner .kicker{color:rgba(255,255,255,.85)!important}
.pbanner h2{color:#fff;margin:2px 0 0}
/* Exam question viewers (questions*.html, exam-style.html, ib/index.html): banner with the topic as the title (tap to change), one count line, plain skill chips */
.fgrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.pbanner.qv .kicker{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pbanner.qv h2{font-size:1.9rem}
@media (max-width:640px){.pbanner.qv h2{font-size:1.45rem}.leadrow{flex-wrap:nowrap}.leadrow .lead{font-size:.88rem}.leadrow .fgpill{min-height:32px;padding:0 11px;font-size:.82rem;flex:none}.fgw{display:none}}
.leadrow{margin:0 0 12px}.leadrow .lead{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ttl{position:relative;display:block;width:fit-content;max-width:100%}
.tsel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:1rem;appearance:none;-webkit-appearance:none;border:0}
.ttl:not(.one) #title::after{content:"";display:inline-block;width:.55em;height:.55em;margin:0 0 .18em .4em;border-right:3px solid currentColor;border-bottom:3px solid currentColor;opacity:.8;transform:rotate(45deg);vertical-align:middle}
.ttl:not(.one) #title{border-bottom:2px dashed transparent}
.ttl:not(.one):hover #title,.tsel:focus-visible+#title{border-bottom-color:rgba(255,255,255,.8)}
.ttl.one .tsel{display:none}
.skillrow{margin:0 0 16px}
.fgpill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:99px;border:1.5px solid var(--accent);color:var(--accent);font-weight:700;font-size:.88rem;text-decoration:none}
.fgpill:hover{background:var(--accent);color:var(--accent-ink)}
.qsegs{display:flex;flex-wrap:wrap;gap:10px 4px;margin:4px 0 12px}
.qsegs .seg{flex:1 1 14px;min-width:10px;height:7px;padding:0;border:0;border-radius:4px;background:var(--line);cursor:pointer;position:relative}
.qsegs .seg::after{content:"";position:absolute;inset:-5px 0}
.qsegs .seg.ok{background:var(--g)}
.qsegs .seg.now{background:var(--accent)}
.qsegs .seg.ok.now{background:var(--g);outline:2px solid var(--accent);outline-offset:2px}
.qpos .qdone{margin-left:auto;white-space:nowrap}


/* one Menu button at every width (navmenu.js fills it: Home, Search topics, About, Help, and Teachers on staff browsers) */
.hmenu{display:inline-flex!important;align-items:center;gap:8px;width:auto;height:36px;margin:0!important;padding:0 14px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);border-radius:99px;font:inherit;font-size:.92rem;font-weight:700}
.hmenu .mlab{line-height:1}
.hmenu svg{width:18px;height:14px}
.topnav{gap:14px}
.topnav > .hicon:not(.hmenu){display:none}
.tlinks{display:none;position:absolute;right:0;top:calc(100% + 12px);z-index:60;flex-direction:column;gap:2px;min-width:210px;padding:6px;background:#0B6B74;border:1px solid #11899A;border-radius:12px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.tlinks.open{display:flex}
.tlinks a,.tlinks .msearch{padding:10px 14px;border:0;border-radius:8px;font-size:.98rem;color:#E3EEF1;text-decoration:none;background:none;font-family:inherit;text-align:left;cursor:pointer}
.tlinks a:hover,.tlinks .msearch:hover{background:rgba(255,255,255,.12);color:#fff}
.tlinks a[aria-current=page]{border:0;box-shadow:inset 3px 0 0 #F5C518;color:#fff;font-weight:700;background:rgba(255,255,255,.08)}
.tlinks .tmh{margin-top:6px;padding:10px 14px 4px;border-top:1px solid rgba(255,255,255,.18);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B8F0EA}
@media (max-width:720px){.hmenu{padding:0 11px;margin-right:0}.hmenu .mlab{display:none}.topnav{gap:10px}}

/* question tools row (30 Oct 2026): Worked example, Working pad / Write on it, Calculator, and the pen tools. One look on every question page. */
.qtool{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 13px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap}
.qtool:hover{filter:brightness(1.04)}
.qtool[aria-pressed=true],.qtool.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.qtool.ex{background:color-mix(in srgb,var(--vid,#6C5CE7) 10%,var(--surface));border-color:color-mix(in srgb,var(--vid,#6C5CE7) 40%,transparent);color:var(--vid,#6C5CE7)}
.qtool.ex[aria-expanded=true]{background:var(--vid,#6C5CE7);border-color:var(--vid,#6C5CE7);color:var(--vid-ink,#fff)}
.qtool.ex span{font-size:.72rem}
.qtool.ic{width:38px;padding:0;background:var(--surface);border-color:var(--line);color:var(--ink)}
.qtool.ic.on,.qtool.ic[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.qtool:disabled{opacity:.45;cursor:default;filter:none}
.qtool svg{flex:none}
.fgpill.fg-moved{display:none}