/* Calcali colours. Everything else uses these variables, so light and dark mode stay in step.
   Status colours (question yellow, correct green, wrong red, checking blue) mean the same thing everywhere.
   Curriculum colours (British blue, American red, CAPS green) only appear as a circled year number,
   a picture ring and a faint wash in the background, never as filled labels. */
:root{
  /* clean and bright: near-white page, white cards that float on soft shadows */
  --desk:#F5F6F8; --paper:#FFFFFF; --board:#F7F8FA; --field:#F3F4F6; --line:#E4E6EA; --soft:#EEF0F3;
  --ink:#15171C; --muted:#5A606C; --faint:#737985; --onink:#FFFFFF;
  --accent:#F7EB0B; --onaccent:#15171C; --accentSoft:#FFF9C2;   /* yellow: filled, with dark text on top */
  --q:#F7EB0B; --ok:#1CEB96; --chk:#53DFFD; --bad:#FE4A55;
  --okText:#0B7A4E; --badText:#B3141E; --chkText:#0B6C8A; --focus:#1A95C4;
  --canvas:#FFFFFF;
  --shadow:rgba(16,24,40,.10); --scrim:rgba(16,24,40,.38);
  --card-shadow:0 1px 2px rgba(16,24,40,.05),0 3px 12px rgba(16,24,40,.06);
  --card-shadow-hi:0 2px 4px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.10);
  --uk:#2279E3; --us:#FF4038; --caps:#2DF726; --teacher:#FFE716;
  --curc:transparent;
  --doodle:url("/assets/doodles-soft.svg");
  --sans:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif;
  --math:'LM Roman','Latin Modern Roman','Cambria Math',Cambria,'Times New Roman',serif;
  /* corners: one continuous (squircle) curve, a few fixed sizes; nested corners = outer minus padding */
  --r0:8px; --r1:13px; --r2:21px; --r3:34px;
  --railw:0px; --tabbar:0px;
  color-scheme:light;
}
:root[data-theme=dark]{
  --desk:#0E1013; --paper:#17191E; --board:#1C1F25; --field:#20232A; --line:#2B2F37; --soft:#252930;
  --ink:#EEF0F3; --muted:#A3AAB5; --faint:#7A818C; --onink:#0E1013;
  --accentSoft:#3A3510;
  --okText:#4FE3A8; --badText:#FF8A92; --chkText:#7FE6FF; --focus:#53DFFD;
  --canvas:#16191D;
  --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);
  --card-shadow-hi:0 6px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  --doodle:url("/assets/doodles-soft-dark.svg");
  color-scheme:dark;
}
body[data-cur=uk]{--curc:var(--uk)}
body[data-cur=us]{--curc:var(--us)}
body[data-cur=caps]{--curc:var(--caps)}
/* the background: soft, blurred maths doodles that stay still while the page scrolls,
   plus (in the Library only) a very faint wash of the chosen curriculum's colour */
body::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--doodle) 0 0/840px 840px repeat;opacity:.9}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--curc) 12%,transparent),transparent 60%),
             radial-gradient(90% 60% at 0% 100%,color-mix(in srgb,var(--curc) 8%,transparent),transparent 65%)}

/* ---------- symbols ---------- */
/* a topic symbol: a little tile in its section's colour family. --h is the hue. */
.tsym{--h:214;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--math);font-weight:400;line-height:1;white-space:nowrap;
  background:hsl(var(--h) 85% 90%);color:hsl(var(--h) 70% 26%);border:1.5px solid hsl(var(--h) 55% 72%);border-radius:9px;corner-shape:squircle;letter-spacing:-.02em}
:root[data-theme=dark] .tsym{background:hsl(var(--h) 40% 20%);color:hsl(var(--h) 85% 80%);border-color:hsl(var(--h) 40% 34%)}
.tsym.sm{height:22px;min-width:22px;padding:0 5px;font-size:12px;border-radius:7px}
.tsym.md{height:30px;min-width:30px;padding:0 7px;font-size:15px}
.tsym.lg{height:44px;min-width:44px;padding:0 9px;font-size:20px;border-radius:13px}
.tsym.xl{height:64px;min-width:64px;padding:0 12px;font-size:28px;border-radius:18px}
/* a section logo: line drawing on a coloured squircle */
.ssym{--h:214;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:11px;corner-shape:squircle;
  background:hsl(var(--h) 80% 55%);color:#fff}
:root[data-theme=dark] .ssym{background:hsl(var(--h) 60% 42%)}
.ssym svg{display:block}
.ssym.sm{width:24px;height:24px;border-radius:7px}
.ssym.md{width:34px;height:34px}
.ssym.lg{width:48px;height:48px;border-radius:15px}
/* year in a circle, ringed in the curriculum colour */
.ybadge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:999px;font-size:11px;font-weight:700;
  border:2.5px solid var(--yc,var(--line));color:var(--ink);background:var(--paper);font-variant-numeric:tabular-nums;line-height:1}
.ybadge.uk{--yc:var(--uk)} .ybadge.us{--yc:var(--us)} .ybadge.caps{--yc:var(--caps)}
.ybadge.lg{width:30px;height:30px;font-size:13px}
.curdot{display:inline-block;width:10px;height:10px;border-radius:999px;border:2.5px solid var(--yc,var(--line))}
.curdot.uk{--yc:var(--uk)} .curdot.us{--yc:var(--us)} .curdot.caps{--yc:var(--caps)}
:root[data-theme=dark] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ECEDEE' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}