/* Ink palette (CDR-0146) lives in one file shared with intake.html.
   @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;
}
@font-face{
  font-family:"Latin Modern Math";
  src:url("../fonts/latinmodern-math.otf") format("opentype");
  font-weight:400;
  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-soft and --purple-line come from
     palette.css (imported above) and are shared with intake.html. Do not
     redeclare them here. Gold, greys and the semantic ramps below are this
     stylesheet's own and are not part of the ink family. */
  --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;
  --math:"Latin Modern Math","Cambria Math",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(20,11,44,.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:#D6CFE8}

.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:#E8E4F2;
  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(20,11,44,.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(20,11,44,.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(20,11,44,.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}
.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}
.exam-chip{
  min-height:30px;
  padding:4px 9px;
  border-color:var(--purple-line);
  border-radius:999px;
  color:var(--purple);
  background:var(--purple-soft);
  font-size:11px;
  font-weight:820;
}
.exam-chip.year{color:var(--gold-deep);border-color:#ddc875;background:#fff9df}
.question-head-actions{display:flex;align-items:flex-start;gap:10px}
.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)}}
.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}
.math-expression,.answer-math{
  font-family:var(--math);
  font-style:normal;
  font-weight:400;
  font-synthesis:none;
  font-variant-numeric:lining-nums;
  letter-spacing:normal;
}
.question-prompt .math-expression{
  color:var(--ink);
  font-size:1.16em;
  line-height:1.35;
}
.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-parts{display:grid;gap:14px}
.answer-part{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
}
.answer-part label{display:block;margin:10px 0 5px;font-size:12px;font-weight:800}
.part-prompt{margin:0;color:var(--ink);font-size:15px}
.part-prompt strong{display:inline-block;min-width:30px;color:var(--purple)}
.sketchpad-row{
  display:flex;
  align-items:center;
  gap:10px 14px;
  flex-wrap:wrap;
  margin-top:14px;
}
.legacy-answer{margin-top:14px}
.legacy-answer p{margin:.35rem 0 .65rem}
.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-tool-group{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.sketchpad-sizes .fine{margin-right:2px;font-weight:800}
.sketchpad-sizes button[aria-pressed="true"]{color:#fff;background:var(--purple);border-color:var(--purple)}
.draw-tools button{min-height:44px;padding:7px 11px;font-size:12px}
.draw-canvas{
  display:block;
  width:100%;
  height:auto;
  min-height:180px;
  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;
}

.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)}
.question-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px;overflow:clip}
.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-partial{border-color:var(--blue);box-shadow:inset 0 -4px 0 var(--blue)}
.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)}
.connection-form input{width:100%}
.connection-error{margin:10px 0 0;color:var(--coral);font-weight:750}

.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{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}
.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}
.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;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}
  .dashboard-query{grid-template-columns:1fr}
  .dashboard-query>p{grid-column:auto}
}

@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-actions{grid-column:1/-1;justify-content:space-between;width:100%}
  .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}
  .review-heading,.review-submit,.dashboard-learner{display:grid}
  .review-submit button{width:100%}
  .dashboard-search{grid-template-columns:1fr}
  .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}
}

@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;
  }
}


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


/* Public reviewer-build notice */
.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}
@media(max-width:620px){
  .review-notice{display:block;padding:10px 14px}
  .review-notice strong{display:block;margin-bottom:3px}
}

/* ── Tutor surfaces (Phase 3) ─────────────────────────────────────────────── */

/* The sign-in form inherited the inline label/input flow used by the compact
   filter rows, which is wrong for a credential form: labels ran alongside their
   fields. Stack them, and cap the width so the form does not sprawl. */
.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)}

/* Reviewer identity supplied by the session is displayed, not typed. Styled to
   read as a value rather than an editable field, so it is obvious it cannot be
   changed here. */
.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);
}

/* Learner working on the tutor page is evidence, not a canvas: it renders as a
   plain image and must never look editable. */
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}

/* Two stacked layers, never flattened. The learner's PNG is evidence and takes
   no pointer events at all — a tutor cannot draw on it even by accident. The
   transparent overlay above it carries the red pen. */
.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 .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}
/* The learner's returned view stacks two IMAGES rather than an image and a
   canvas: their work below, the tutor's finalized marks above. Nothing is
   flattened, so hiding the top layer restores exactly what was submitted. */
.layer-stack img.tutor-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ── Phase 7 hardening ────────────────────────────────────────────────────── */

/* Touch targets. Buttons already carry min-height:44px, but native selects and
   inputs inherited only their font size — a <select> measured 23px at 390px
   wide, well under the 44px floor the accessibility requirement sets. 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}

/* Wide content scrolls inside its own container rather than forcing the page
   sideways. Checked at 390, 768, 1024 and 1440. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}


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