/* Ink palette lives in one file shared with the intake form.
   @import must precede every other rule, including @font-face. */
@import url("palette.css");

@font-face{
  font-family:"Lexend";
  src:url("../fonts/lexend-variable.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;
  --paper:#fbfaf7;
  --paper-deep:#f2eee5;
  --card:#fff;
  --ink:#14213d;
  --muted:#556071;
  --line:#d9d2c4;
  /* --purple, --purple-deep, --purple-mid, --purple-soft, --purple-line and
     --purple-20 come from palette.css (imported above) and are shared with the
     intake form. Do not redeclare them here — an inline value would win and
     reintroduce the drift that file exists to prevent. Gold, greys and the
     semantic ramps below are this stylesheet's own. */
  --gold:#c8a951;
  --gold-deep:#795d16;
  --blue:#2c6bd4;
  --blue-soft:#eaf1ff;
  --green:#12704f;
  --green-soft:#e7f5ef;
  --coral:#b8371c;
  --coral-soft:#fff0eb;
  --amber:#8a5b00;
  --amber-soft:#fff5d8;
  --shadow:0 16px 42px rgba(20,33,61,.10);
  --shadow-small:0 6px 18px rgba(20,33,61,.08);
  --radius:18px;
  --radius-small:11px;
  --sans:"Lexend",ui-sans-serif,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 3%,rgba(34,26,45,.075),transparent 29rem),
    radial-gradient(circle at 95% 7%,rgba(200,169,81,.12),transparent 25rem),
    repeating-linear-gradient(90deg,rgba(20,33,61,.014) 0 1px,transparent 1px 4px),
    var(--paper);
  font:16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit}
button,a,[role="button"],summary{touch-action:manipulation}
a{color:var(--purple);text-underline-offset:3px}
img,svg,canvas,math,math-field{max-width:100%}
math-field{--caret-color:var(--purple);--selection-background-color:var(--purple-soft)}

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:999;
  transform:translateY(-160%);
  padding:11px 15px;
  color:#fff;
  background:var(--purple-deep);
  border-radius:8px;
  font-weight:800;
}
.skip-link:focus{transform:none}

:focus-visible{
  outline:3px solid #005fcc;
  outline-offset:3px;
}

.site-head{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(115deg,rgba(255,255,255,.05),transparent 42%),
    var(--purple-deep);
  border-bottom:5px solid var(--gold);
}
.site-head::after{
  content:"";
  position:absolute;
  inset:auto -8% -50px 42%;
  height:120px;
  transform:rotate(-3deg);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 11px);
  pointer-events:none;
}
.head-inner,.shell,.action-inner{
  width:min(1120px,calc(100% - 36px));
  margin-inline:auto;
}
.head-inner{position:relative;z-index:1;padding:26px 0 30px}
.brand-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin:0 0 12px;
  color:#eadfbd;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand-mark{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:12px 12px 4px 12px;
  color:var(--purple-deep);
  background:var(--gold);
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:0;
}
.site-head h1{
  max-width:880px;
  margin:0;
  font:700 clamp(28px,4.5vw,52px)/1.05 var(--serif);
  letter-spacing:-.035em;
}
.site-head .lede{
  max-width:780px;
  margin:14px 0 0;
  color:#EDE7F6;
  font-size:clamp(15px,2vw,18px);
}
.head-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:19px 0 0;
}
.head-meta span,.pill{
  display:inline-flex;
  align-items:center;
  /* A chip that mixes text with an element — "Working as <strong>ID</strong>" —
     loses the space between them without this: flex layout discards whitespace
     BETWEEN flex items, and the markup's space is exactly that. The gap puts a
     word space back. Do not remove it on the grounds that the HTML already has
     a space; it does, and flex drops it. */
  gap:.3em;
  min-height:32px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:12px;
  font-weight:750;
}

.suite-nav{
  border-bottom:1px solid var(--line);
  background:rgba(251,250,247,.94);
  backdrop-filter:blur(12px);
}
.suite-nav .nav-inner{
  display:flex;
  /* Wraps since 2026-07-31, when administration took the nav from seven entries to
     ten. Without this the row stays on one line and the overflow-x below hides the
     last entries behind a scroll nobody looks for — the tenth link was simply
     invisible at 1280px. Wrapping keeps every destination on screen; the scroll
     remains for viewports too narrow even for two rows. */
  flex-wrap:wrap;
  gap:4px;
  width:min(1120px,calc(100% - 36px));
  margin:auto;
  padding:8px 0;
  overflow-x:auto;
}
.suite-nav a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border-radius:9px;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:760;
}
.suite-nav a:hover,.suite-nav a[aria-current="page"]{
  color:var(--purple);
  background:var(--purple-soft);
}

.shell{padding:26px 0 104px}
.prose{max-width:76ch}
.eyebrow{
  margin:0 0 5px;
  color:var(--purple);
  font-size:11px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}
h2,h3,h4{color:var(--ink)}
h2{
  margin:38px 0 14px;
  font:700 clamp(24px,3.2vw,34px)/1.15 var(--serif);
  letter-spacing:-.025em;
}
h3{margin:0 0 8px;font:700 21px/1.25 var(--serif)}
h4{margin:0 0 7px;font-size:16px}
p{margin:0 0 13px}
.muted{color:var(--muted)}
.fine{font-size:12px;color:var(--muted)}
.rule{
  height:1px;
  margin:28px 0;
  border:0;
  background:linear-gradient(90deg,var(--gold),var(--line) 45%,transparent);
}

.card,.panel,.question-card,.lesson-card,.metric-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow-small);
}
.card,.panel{padding:22px}
.callout{
  position:relative;
  padding:18px 20px 18px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  background:#fff;
}
.callout::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:inherit 0 0 inherit;
  background:var(--purple);
}
.callout.success{background:var(--green-soft)}
.callout.success::before{background:var(--green)}
.callout.warning{background:var(--amber-soft)}
.callout.warning::before{background:var(--amber)}
.callout.info{background:var(--blue-soft)}
.callout.info::before{background:var(--blue)}
.callout p:last-child,.card p:last-child{margin-bottom:0}

.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.metric-card{padding:18px;border-top:4px solid var(--purple)}
.metric-card.gold{border-top-color:var(--gold)}
.metric-card.green{border-top-color:var(--green)}
.metric-card.blue{border-top-color:var(--blue)}
.metric-card strong{
  display:block;
  margin:4px 0;
  font:700 28px/1 var(--serif);
}
.metric-card span{color:var(--muted);font-size:12px}

.progress-rail{
  position:sticky;
  top:8px;
  z-index:30;
  display:grid;
  grid-template-columns:minmax(190px,260px) 1fr;
  gap:16px;
  margin:20px 0 24px;
  padding:14px;
  border:1px solid rgba(34,26,45,.18);
  border-radius:15px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-small);
  backdrop-filter:blur(12px);
}
.progress-copy strong{
  display:block;
  margin:3px 0 8px;
  font-size:15px;
  line-height:1.35;
}
.progress-swipe-hint{
  display:none;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:760;
}
.progress-track{
  height:8px;
  overflow:hidden;
  border-radius:99px;
  background:#e8e2d7;
}
.progress-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--purple),#8f67b4);
  transition:width .42s var(--ease);
}
.progress-steps{
  display:flex;
  gap:10px;
  align-items:stretch;
  overflow-x:auto;
  padding:2px 2px 9px;
  scroll-snap-type:x proximity;
  scrollbar-color:rgba(34,26,45,.42) transparent;
  scrollbar-width:thin;
}
.progress-step{
  position:relative;
  display:block;
  flex:0 0 176px;
  min-height:86px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  background:#fff;
  text-decoration:none;
  text-align:left;
  justify-content:initial;
  scroll-snap-align:start;
  font-size:13px;
  font-weight:720;
  line-height:1.3;
}
.progress-step .session-number{
  display:block;
  color:var(--purple);
  font-size:11px;
  font-weight:860;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.progress-step .session-title{
  display:block;
  margin:4px 0 5px;
  color:var(--ink);
  font-size:15px;
  font-weight:840;
  line-height:1.18;
}
.progress-step .session-type{display:block}
.progress-step.is-active{
  border:2px solid var(--purple);
  padding:10px 11px;
  background:var(--purple-soft);
  box-shadow:0 0 0 3px rgba(34,26,45,.09);
}
.progress-step.is-active::after{
  content:"Current";
  position:absolute;
  top:9px;
  right:10px;
  padding:2px 6px;
  border-radius:999px;
  color:#fff;
  background:var(--purple);
  font-size:9px;
  font-weight:880;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.progress-step.is-active .session-number{padding-right:54px}
.progress-step.is-complete{border-color:#a8d2be;background:var(--green-soft)}

.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:11px;
  font-weight:820;
}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status.not-yet{color:var(--coral);background:var(--coral-soft);border-color:#e7b8ae}
.status.not-yet::before{background:var(--coral)}
.status.approaching{color:var(--amber);background:var(--amber-soft);border-color:#e6cc80}
.status.approaching::before{background:var(--amber)}
.status.mastered{color:var(--green);background:var(--green-soft);border-color:#a8d2be}
.status.mastered::before{background:var(--green)}

.pathway{
  position:relative;
  display:grid;
  gap:12px;
}
.pathway::before{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left:18px;
  width:2px;
  background:var(--line);
}
.path-step{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:14px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}
.path-number{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:2px solid var(--purple);
  border-radius:50%;
  color:#fff;
  background:var(--purple);
  font-weight:850;
}

.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.lesson-main{min-width:0}
.lesson-side{position:sticky;top:106px;display:grid;gap:13px}
.lesson-card{padding:22px}
.session-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:18px;
}
.session-head h2{margin:0}
.session-kicker{color:var(--purple);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.session-panel[hidden]{display:none}

.visual-loop{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:8px;
  align-items:center;
  margin:18px 0;
}
.loop-node{
  min-height:86px;
  display:grid;
  place-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  text-align:center;
}
.loop-node b{display:block;font:700 19px var(--serif)}
.loop-arrow{color:var(--purple);font-size:22px;font-weight:900}
.fraction-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  width:min(340px,100%);
  margin:14px 0;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:9px;
}
.fraction-bar span{height:54px;border-right:1px solid var(--ink);background:#fff}
.fraction-bar span:last-child{border-right:0}
.fraction-bar .filled{background:var(--purple-soft)}
.hundred-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  width:min(280px,100%);
  aspect-ratio:1;
  margin:14px 0;
  border:1px solid var(--ink);
  background:#fff;
}
.hundred-grid span{border:.5px solid #d8d3ca}
.hundred-grid span.filled{background:#b7a1d0}

.question-list{display:grid;gap:18px}
.question-card{overflow:hidden}
/* Three columns — number, identity, actions — matching the Additional Mathematics
   build. The status pill and the pace meter are ONE grid child, wrapped in
   .question-head-actions with the pill first, not two siblings in the opposite
   order. */
.question-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:start;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  background:#fdfcf9;
}
.question-identity{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.question-head-actions{display:flex;align-items:flex-start;gap:10px}
@media(max-width:620px){
  .question-head{grid-template-columns:auto 1fr;row-gap:10px}
  .question-head-actions{grid-column:1/-1;justify-content:space-between;width:100%}
}
.q-number{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#fff;
  background:var(--purple);
  font-weight:850;
}
.q-meta{color:var(--muted);font-size:11px}
.question-body{padding:20px}
.question-prompt{margin:0 0 18px;font-size:17px}
.answer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.answer-row label{display:block;margin-bottom:5px;font-size:12px;font-weight:800}
.answer-input,math-field{
  display:block;
  width:100%;
  min-height:50px;
  padding:9px 12px;
  border:2px solid #c8c1b4;
  border-radius:10px;
  color:var(--ink);
  background:#fff;
}
.answer-input:focus,math-field:focus-within{border-color:var(--purple)}
.math-entry-shortcuts{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:8px;
}
.math-symbol-button{
  min-width:52px;
  min-height:44px;
  padding:6px 15px;
  border-color:var(--purple-line);
  color:var(--purple);
  background:var(--purple-soft);
  font-size:19px;
  font-weight:860;
}
.math-shortcut-copy{
  color:var(--muted);
  font-size:12px;
  font-weight:720;
}
.question-actions,.button-row,.confidence-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}
button,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:9px 14px;
  border:1px solid #b8b0a3;
  border-radius:10px;
  color:var(--ink);
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  font-weight:780;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
button:hover,.button:hover{transform:translateY(-1px);box-shadow:var(--shadow-small)}
button.primary,.button.primary{color:#fff;background:var(--purple);border-color:var(--purple)}
button.secondary,.button.secondary{color:var(--purple);background:var(--purple-soft);border-color:var(--purple-line)}
button.success,.button.success{color:#fff;background:var(--green);border-color:var(--green)}
button.warning,.button.warning{color:var(--amber);background:var(--amber-soft);border-color:#e2c66e}
button.danger{color:var(--coral);background:var(--coral-soft);border-color:#e7b8ae}
button:disabled{opacity:.56;cursor:not-allowed;transform:none;box-shadow:none}
.icon-button{width:44px;padding:0}

.hint-stack{display:grid;gap:9px;margin-top:14px}
.hint{
  padding:12px 14px;
  border-left:4px solid var(--blue);
  border-radius:7px;
  background:var(--blue-soft);
}
.worked-solution{
  margin-top:16px;
  padding:16px;
  border:1px solid #a8d2be;
  border-radius:12px;
  background:var(--green-soft);
}
.worked-solution[hidden],.reflection[hidden],.draw-panel[hidden]{display:none}
.solution-step{padding:8px 0;border-bottom:1px solid rgba(18,112,79,.18)}
.solution-step:last-child{border-bottom:0}
.answer-box{
  margin-top:10px;
  padding:10px 12px;
  border:2px solid var(--green);
  border-radius:9px;
  background:#fff;
  font-weight:800;
}
.confidence-button[aria-pressed="true"]{color:#fff;background:var(--purple);border-color:var(--purple)}
.reflection{margin-top:14px;padding:14px;border-radius:10px;background:var(--paper-deep)}

.draw-panel{margin-top:14px}
.draw-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:8px}
.draw-tools button{min-height:44px;padding:7px 11px;font-size:12px}
.draw-canvas{
  display:block;
  width:100%;
  height:210px;
  border:2px dashed #b6ac9c;
  border-radius:12px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(0deg,transparent 0 29px,#e9e4db 29px 30px);
  touch-action:none;
}

.sticky-actions{
  position:fixed;
  inset:auto 0 0;
  z-index:50;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 -10px 30px rgba(20,33,61,.08);
}
.action-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  min-height:70px;
  padding:9px 0;
}

/* 280px, not 220px: the question navigator needs five 44px touch targets plus
   gaps, and 220px left it 70px short — the buttons spilled out of the sidebar and
   over the Previous/Flag/Next row. */
.exam-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.exam-sidebar{position:sticky;top:18px;display:grid;gap:12px}
.timer{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  text-align:center;
}
.timer strong{display:block;font:700 30px/1 var(--mono);font-variant-numeric:tabular-nums}
.timer.warning{border-color:#e2c66e;background:var(--amber-soft)}
.timer.timeout{border-color:#e7b8ae;background:var(--coral-soft)}
/* Per-question pace meter (ported from the CSEC Additional Mathematics build).
   A dial rather than a number: a learner needs to see "I am over on this one" at a
   glance, without reading and subtracting. Colour alone does not carry it — the
   hand position and the aria-label both state the same fact. */
.pace-wrap{display:grid;justify-items:center;gap:4px}
.pace-meter{
  --pace-progress:0%;
  --pace-turn:0turn;
  --pace-color:var(--green);
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:conic-gradient(var(--pace-color) var(--pace-progress),#e7e2d9 0);
  box-shadow:inset 0 0 0 1px rgba(20,33,61,.1);
}
.pace-meter::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.pace-hand{
  position:absolute;
  z-index:2;
  width:2px;
  height:22px;
  bottom:50%;
  left:calc(50% - 1px);
  border-radius:2px;
  background:var(--pace-color);
  transform-origin:50% 100%;
  transform:rotate(var(--pace-turn));
  transition:transform .35s linear,background .2s ease;
}
.pace-hand::after{content:"";position:absolute;left:-3px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--pace-color)}
.pace-meter strong{position:relative;z-index:3;margin-top:23px;font:750 10px/1 var(--mono)}
.pace-label{max-width:92px;color:var(--muted);font-size:10px;line-height:1.25;text-align:center}
.pace-meter.pace-warning{--pace-color:var(--amber)}
.pace-meter.pace-over{--pace-color:var(--coral);animation:pace-alert 1s ease-in-out infinite}
@keyframes pace-alert{50%{box-shadow:0 0 0 8px rgba(184,55,28,.16),inset 0 0 0 1px rgba(20,33,61,.1)}}
@media(prefers-reduced-motion:reduce){
  .pace-hand{transition:none}
  .pace-meter.pace-over{animation:none;box-shadow:0 0 0 3px rgba(184,55,28,.3),inset 0 0 0 1px rgba(20,33,61,.1)}
}

/* auto-fit, not a fixed five: a fixed column count cannot honour the 44px minimum
   and the sidebar width at the same time, so at 20 questions it overflowed. This
   drops to fewer columns instead of spilling. `overflow:clip` is the backstop. */
.question-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px;overflow:clip}
/* 44px, not 42: the accessibility floor is 44, and 42 fails it by two pixels —
   close enough to look right and still be wrong. min-width matters too, because
   auto-fit columns can otherwise squeeze a button narrower than the floor. */
.question-nav button{
  min-width:44px;
  min-height:44px;
  padding:5px;
  border-radius:8px;
  font-size:12px;
}
.question-nav button.is-current{color:#fff;background:var(--purple);border-color:var(--purple)}
.question-nav button.is-answered{border-color:var(--green);box-shadow:inset 0 -4px 0 var(--green)}
.question-nav button.is-flagged::after{content:"◆";margin-left:3px;color:var(--gold-deep);font-size:8px}
.exam-question[hidden],.exam-cover[hidden]{display:none}
.exam-cover{
  max-width:720px;
  margin:38px auto;
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
}
.checklist{display:grid;gap:8px;margin:18px 0;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:24px 1fr;gap:8px}
.checklist li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;background:var(--green);font-weight:900}

dialog{
  width:min(540px,calc(100% - 28px));
  padding:0;
  border:0;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(20,33,61,.32);
}
dialog::backdrop{background:rgba(20,33,61,.62)}
.dialog-body{padding:24px}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px;padding:15px 20px;border-top:1px solid var(--line);background:var(--paper)}

.dashboard-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px}
.side-panel{position:sticky;top:16px;display:grid;gap:8px}
.side-panel a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 12px;
  border-radius:9px;
  color:var(--muted);
  text-decoration:none;
  font-weight:750;
}
.side-panel a:hover,.side-panel a[aria-current="page"]{color:var(--purple);background:var(--purple-soft)}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:#fff;background:var(--purple-deep);font-size:12px}
tr:last-child td{border-bottom:0}

.upload-zone{
  display:grid;
  place-items:center;
  min-height:220px;
  padding:22px;
  border:2px dashed #b8b0a3;
  border-radius:16px;
  background:#fff;
  text-align:center;
}
.image-preview{display:block;max-height:320px;margin:16px auto;border:1px solid var(--line);border-radius:12px}

.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hub-card{
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  background:#fff;
  box-shadow:var(--shadow-small);
  text-decoration:none;
}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-card .card-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:18px;
  border-radius:14px 14px 5px 14px;
  color:#fff;
  background:var(--purple);
  font-weight:900;
}
.hub-card p{color:var(--muted)}
.hub-card .go{margin-top:auto;color:var(--purple);font-weight:850}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
[hidden]{display:none!important}

@media(max-width:900px){
  .grid.three,.metric-grid,.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson-layout,.exam-shell,.dashboard-layout{grid-template-columns:1fr}
  .lesson-side,.exam-sidebar,.side-panel{position:relative;top:auto}
  .exam-sidebar{grid-template-columns:1fr 2fr}
  .progress-rail{position:relative;top:auto;grid-template-columns:1fr}
}

@media(max-width:620px){
  body{font-size:15px}
  .head-inner,.shell,.action-inner,.suite-nav .nav-inner{width:min(100% - 24px,1120px)}
  .head-inner{padding:21px 0 24px}
  .shell{padding-top:18px}
  .grid.two,.grid.three,.metric-grid,.hub-grid{grid-template-columns:1fr}
  .card,.panel,.lesson-card,.question-body{padding:17px}
  .question-head{grid-template-columns:auto 1fr;padding:13px}
  .question-head .status{grid-column:2}
  .answer-row{grid-template-columns:1fr}
  .visual-loop{grid-template-columns:1fr}
  .loop-arrow{transform:rotate(90deg);justify-self:center}
  .progress-rail{
    margin-inline:-2px;
    padding:14px;
    gap:14px;
  }
  .progress-copy strong{font-size:16px}
  .progress-swipe-hint{display:block}
  .progress-steps{
    gap:12px;
    margin-inline:-3px;
    padding:3px 3px 11px;
    scroll-snap-type:x mandatory;
  }
  .progress-step{
    flex-basis:min(76vw,252px);
    min-height:104px;
    padding:14px;
    font-size:14px;
    line-height:1.35;
  }
  .progress-step .session-number{font-size:12px}
  .progress-step .session-title{
    margin:5px 0 6px;
    font-size:17px;
    line-height:1.18;
  }
  .progress-step.is-active{padding:13px}
  .progress-step.is-active::after{top:11px;right:11px;font-size:10px}
  .exam-sidebar{grid-template-columns:1fr}
  .action-inner{align-items:stretch}
  .action-inner .action-copy{display:none}
  .action-inner button,.action-inner .button{flex:1}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Touch targets on native controls (ported from the CSEC Additional Mathematics
   build's Phase 7 hardening, which this build never received). Buttons already
   carry min-height:44px, but selects and inputs inherited only their font size —
   a <select> in the tutor review panel measured 23px at 375px wide, well under the
   44px floor. Applied to the control elements themselves rather than per-page, so
   a new form cannot quietly reintroduce it. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  min-height:44px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  background:var(--card);
  color:var(--ink);
}
textarea{min-height:88px;line-height:1.5}

/* Tutor review panel (ported from the CSEC Additional Mathematics build).
   Rendered by assets/js/review.js into the learner's own exam page. */
.draw-tool-group{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.tutor-review{margin-top:28px;margin-bottom:92px}
.review-heading{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.review-heading h2{margin:.2rem 0 .45rem}
.review-identity{margin-top:18px}
.review-identity label,.tutor-review>div>label{display:block;margin-bottom:6px;font-weight:800}
.review-identity input,.review-identity select,.tutor-review textarea,.review-items select,.review-items input{
  width:100%;
}
.review-items{margin-top:22px}
.review-response{width:min(340px,34vw);max-width:340px;overflow-wrap:anywhere}
.review-response-part.legacy>strong{color:var(--amber)}
.review-response math-field{
  min-height:42px;
  padding:7px 9px;
  border-width:1px;
  background:var(--paper);
  pointer-events:none;
}
.review-submit{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.review-submit p{margin:0}

.dashboard-query{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
  gap:18px 26px;
  align-items:end;
}
.dashboard-query>p{grid-column:1/-1;margin:0}
.dashboard-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.dashboard-search input{width:100%}
.dashboard-learner{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:18px;
  margin:28px 0 16px;
}
.dashboard-learner h2{margin:.2rem 0}
.metric-card small{display:block;margin-top:8px;color:var(--muted)}
.evidence-list{display:grid;gap:10px}
.evidence-item{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.evidence-item>div{display:flex;justify-content:space-between;gap:12px;align-items:start}
.evidence-item p{margin:8px 0;color:var(--muted)}
.database-status{display:block;padding:7px 10px;color:var(--muted);font-size:12px}

.dashboard-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px}
.side-panel{position:sticky;top:16px;display:grid;gap:8px}

/* The responsive review-table rules live inside @media(max-width:620px) further
   down, ported whole from the Additional Mathematics build. An earlier partial
   port copied them here WITHOUT their media query, so the stacked mobile layout
   applied at every width and the review panel never rendered as a table. */

/* Returned work (Phase 8) — ported from the CSEC Additional Mathematics build. */

.signin{max-width:26rem;display:grid;gap:6px}
.signin h2{margin:0}
.signin label{display:block;margin-top:10px;font-size:13px;font-weight:750;color:var(--muted)}
.signin input{width:100%;min-height:44px}
.signin button{margin-top:14px;justify-self:start}

/* Administrative forms (2026-07-31). Same shape as .signin, which was the only
   stacked form in the build until the admin console needed three more. Inputs
   default to inline, so a form without this reads as one run-on line of controls
   — which is exactly how the first render of the signup page came out. */
.stack{max-width:30rem;display:grid;gap:6px}
.stack h3{margin:0 0 4px}
.stack label{display:block;margin-top:10px;font-size:13px;font-weight:750;color:var(--muted)}
.stack input,.stack select{width:100%;min-height:44px}
.stack button{margin-top:16px;justify-self:start}
.stack .fine{margin:2px 0 0}

/* A checkbox reads as a label beside its control, not stacked above it. */
.checkline{display:flex;align-items:center;gap:9px;margin-top:12px;
  font-size:13px;font-weight:750;color:var(--muted)}
.checkline input{width:auto;min-height:0;min-width:20px;height:20px}

/* Row actions. Buttons wrap rather than widening the table past the viewport. */
.action-cell{display:flex;flex-wrap:wrap;gap:8px}
.action-cell button{min-height:38px;padding-inline:12px;font-size:13px}

/* A failed administrative action must not read like an ordinary status line.
   --coral is the build's error ink and clears 4.5:1 on the panel background. */
.error-text{color:var(--coral);font-weight:750}

/* The active-learner picker on the suite home, and the indicator every
   learner-facing page carries. The indicator matters more than it looks: storage
   is namespaced by this id, so a page that does not say whose work it holds can
   quietly write a learner's answers into another learner's namespace. */
.learner-picker{display:grid;gap:6px}
.learner-picker label{font-size:13px;font-weight:750;color:var(--muted)}
.learner-picker-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.learner-picker-row input{flex:1 1 15rem;min-height:44px}
.learner-picker-row button{min-height:44px}
.learner-picker .fine{margin:2px 0 0}

/* "no learner selected" is a state to notice, not a neutral value — so it is
   coloured, and therefore has to clear 4.5:1 on BOTH grounds it appears against.
   No single value does: --amber is 5.87 on white but 3.21 on the dark header,
   --amber-soft is 17.33 on the header and 1.09 on white. So the default serves the
   header, where the indicator lives, and the override serves light containers —
   the same split .head-meta span already needed at the foot of this file, for the
   same reason. Measured, not assumed. */
.learner-unset{color:var(--amber-soft);font-weight:750}
.hub-card .learner-unset,.card .learner-unset,.panel .learner-unset{color:var(--amber)}

.review-response-part{display:grid;gap:5px;margin-bottom:10px}
.review-response-part:last-child{margin-bottom:0}
.review-response-part>strong{color:var(--purple);font-size:12px}

/*
 * The learner's PNG and the tutor's overlay are two separate files stacked at
 * render time — never flattened into one image. The learner can hide the top
 * layer and see exactly what they submitted, which is the whole point of
 * keeping the evidence layers apart.
 */
.layer-stack{position:relative;display:block;line-height:0}
.layer-stack .learner-layer{display:block;width:100%;height:auto;pointer-events:none;user-select:none;border:1px solid var(--line);border-radius:6px;background:#fff}
.layer-stack img.tutor-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:transparent;border-radius:6px}


/* ── Review panel, connection dialog and returned-work figures ─────────────
   Ported wholesale from the CSEC Additional Mathematics build. The previous
   port took a hand-picked line range and dropped five selectors and every
   mobile rule, which is what made the panel look different on this build. */

.connection-form input{width:100%}
.connection-error{margin:10px 0 0;color:var(--coral);font-weight:750}
.review-notice{display:flex;
  align-items:center;
  justify-content:center;
  gap:10px 16px;
  padding:10px max(18px,calc((100% - 1120px)/2));
  border-bottom:1px solid #d6c78e;
  color:#3b3150;
  background:#fff3c9;
  font-size:13px;
  line-height:1.4;}
.review-notice strong{flex:0 0 auto;color:var(--purple)}
html,body{max-width:100%;overflow-x:clip}
.review-identity-fixed{margin:0;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  background:var(--paper-deep);
  font-weight:750;}
.review-identity .label{display:block;
  margin-bottom:4px;
  font-size:13px;
  font-weight:750;
  color:var(--muted);}
figure.draw-panel{margin:14px 0 0;padding:12px;border:1px solid var(--line);border-radius:var(--radius-small);background:var(--card)}
figure.draw-panel img{display:block;margin-top:8px;border:1px solid var(--line);border-radius:6px}
figure.draw-panel figcaption{margin:0}
.layer-stack .tutor-layer{position:absolute;inset:0;width:100%;height:100%;background:transparent;border-radius:6px;cursor:crosshair;touch-action:none}
.tutor-pad-tools{margin-top:10px}
.layer-stack img.tutor-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:620px){
  .review-heading,.review-submit,.dashboard-learner{display:grid}
  .review-submit button{width:100%}
  .review-items .table-wrap{border:0;overflow:visible}
  .review-items table,.review-items tbody,.review-items tr,.review-items td{display:block}
  .review-items thead{display:none}
  .review-items tr{margin-bottom:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
  .review-items td{padding:7px 0;border:0}
  .review-response{width:100%;max-width:none}
  .review-notice{display:block;padding:10px 14px}
  .review-notice strong{display:block;margin-bottom:3px}
}


/* Sketchpad size controls (ported from the CSEC Additional Mathematics build). */
.sketchpad-row{
  display:flex;
  align-items:center;
  gap:10px 14px;
  flex-wrap:wrap;
  margin-top:14px;
}
.sketchpad-sizes .fine{margin-right:2px;font-weight:800}
.sketchpad-sizes button[aria-pressed="true"]{color:#fff;background:var(--purple);border-color:var(--purple)}


/* .head-meta is styled for the dark site header: white text on a translucent
   white fill. Inside a white card that is white-on-white — 1:1 contrast, so the
   chips are present in the DOM, announced by a screen reader, and invisible to
   everyone else. Scoped override, because the header styling is correct where it
   belongs. */
.hub-card .head-meta span,.card .head-meta span,.panel .head-meta span{
  color:var(--purple);
  background:var(--purple-soft);
  border-color:var(--purple-line);
}

@media print{
  body{background:#fff;font-size:11pt}
  .site-head{color:#000;background:#fff;border-bottom:2px solid #000}
  .site-head .lede,.brand-line,.head-meta{color:#000}
  .suite-nav,.sticky-actions,.progress-rail,.lesson-side,.exam-sidebar,.no-print,button{display:none!important}
  .shell{width:100%;padding:0}
  .card,.panel,.question-card,.lesson-card,.metric-card{break-inside:avoid;box-shadow:none}
  .session-panel[hidden],.exam-question[hidden]{display:block!important}
}


/* Pathways rail and catalogue badges (2026-07-31). A hand-rolled scroll-snap
   rail rather than a vendored carousel: both QA suites forbid external scripts,
   and snap + native scrolling needs no JavaScript at all — which also means it
   cannot break under prefers-reduced-motion. "Coming soon" is a muted card plus
   an explicit badge, NOT semi-transparent text: transparency on text is a
   contrast failure wearing a style. */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.rail-card{flex:0 0 min(78vw,340px);scroll-snap-align:start}
.card.soon{border-style:dashed;background:linear-gradient(0deg,rgba(20,33,61,.04),rgba(20,33,61,.04)),#fff}
.badge-live,.badge-soon{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;
  border-radius:999px;font-size:12.5px;font-weight:750;margin-bottom:8px}
.badge-live{color:#fff;background:var(--green)}
.badge-soon{color:var(--amber);background:var(--amber-soft);border:1px solid #e2c66e}

/* Tell your tutor (spec 2026-08-01) */
.tyt-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.tyt-columns{grid-template-columns:1fr}}
.tyt-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tyt-chip button,.tyt-chip label{display:block;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer;font:inherit}
.tyt-chip label{display:flex;gap:8px;align-items:baseline}
.tyt-chip .fine{display:block;margin-top:2px}
.tyt-pending button{border-color:var(--ink);background:#fff}
.tyt-sent{padding:8px 10px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.tyt-module{margin-top:8px}
.tyt-module summary{cursor:pointer;font-weight:750}