@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/eb-garamond.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono.woff2) format('woff2')}

/* ==========================================================
   Self-hosted faces: the site works offline and on filtered
   school networks. Carried over from the original build.
   ========================================================== */
/* ==========================================================
   WILLOWBROOK TUTOR: "MARGIN & MARK"
   A ruled exercise-book ledger. Content sits to the right of
   a red margin rule; the margin itself carries the annotations
   a marker would write there. Bebas for display, Garamond for
   reading, Geist Mono for every piece of chrome and data.
   ========================================================== */

:root{
  /* ground */
  --sand:#E4E0D3;
  --sheet:#F7F5ED;
  --sheet-2:#EEEBDF;
  --ink:#17211F;
  --pencil:#676157;
  --pencil-2:#676258;
  --rule:rgba(23,33,31,.14);
  --rule-2:rgba(23,33,31,.30);
  /* pens */
  --mark:#C0451A;          /* the marking pen */
  --mark-soft:rgba(192,69,26,.10);
  --mark-line:rgba(192,69,26,.30);
  --field:#0E6350;         /* green: open, correct, available */
  --field-soft:rgba(15,107,87,.10);
  --amber:#A8730E;
  --amber-soft:rgba(168,115,14,.12);

  --invert-bg:#17211F;
  --invert-fg:#F3F0E5;
  --shadow:0 1px 0 rgba(23,33,31,.05), 0 10px 26px -18px rgba(23,33,31,.42);
  --shadow-lift:0 1px 0 rgba(23,33,31,.06), 0 22px 46px -26px rgba(23,33,31,.5);

  --display:'Bebas Neue',Haettenschweiler,'Arial Narrow',sans-serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1180px;
  --rail:150px;
  --gut:34px;
  --nav-h:58px;
  --r:3px;              /* almost square. this is paper, not glass */
  --r-lg:5px;
}

[data-theme="dark"]{
  --sand:#14181A;
  --sheet:#1D2225;
  --sheet-2:#252B2F;
  --ink:#EDE9DC;
  --pencil:#9C9686;
  --pencil-2:#989283;
  --rule:rgba(237,233,220,.15);
  --rule-2:rgba(237,233,220,.30);
  --mark:#EE7645;
  --mark-soft:rgba(238,118,69,.13);
  --mark-line:rgba(238,118,69,.34);
  --field:#4CBB9B;
  --field-soft:rgba(76,187,155,.13);
  --amber:#D9A038;
  --amber-soft:rgba(217,160,56,.15);
  --invert-bg:#2A3237;
  --invert-fg:#F1EDE1;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 0 rgba(0,0,0,.34), 0 22px 46px -26px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--serif);font-size:17.5px;line-height:1.62;
  font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:2px;border-radius:2px}
::selection{background:var(--mark);color:var(--on-accent)}

/* ---------- type roles ---------- */
h1,h2,h3,h4,.disp,.h4{
  font-family:var(--display);font-weight:400;
  letter-spacing:.018em;line-height:.94;
  text-transform:uppercase;margin:0;
  font-variant-numeric:lining-nums;
}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.35rem,2.3vw,1.85rem)}
h4,.h4{font-size:1.18rem;letter-spacing:.032em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
em,i{font-style:italic}
strong,b{font-weight:600}
small{font-size:.86em}

/* mono is the voice of the interface: labels, data, controls */
.mono,.lab,.btn,.inp,.chip,.tag,.pill,label,th,.num,.code{font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums}
.lab{
  font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pencil);font-weight:500;
}
.num{font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.prose{max-width:60ch}
.prose p{margin-bottom:1.05em}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.6;color:var(--ink)}
.dim{color:var(--pencil)}
.mark-ink{color:var(--mark-ink)}
.field-ink{color:var(--field)}

/* ==========================================================
   THE LEDGER: every page is a ruled sheet with a red margin
   ========================================================== */
.sheet{
  max-width:var(--maxw);margin:0 auto;
  padding-left:18px;padding-right:18px;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--gut);
}
.sheet > .rail{
  position:relative;
  border-right:1px solid var(--mark-line);
  padding-right:14px;
  text-align:right;
}
.sheet > .body{min-width:0;padding-left:2px}
.sheet.flush > .rail{border-right-color:transparent}

/* margin annotations */
.mg{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pencil);
  line-height:1.5;margin-bottom:14px;
}
.mg b{display:block;color:var(--ink);font-weight:500;letter-spacing:.05em}
.mg.tick{color:var(--mark-ink)}
.mg-rule{height:1px;background:var(--rule);margin:16px 0}

@media(max-width:560px){.spec-head{font-size:.58rem;letter-spacing:.07em}.spec-line{font-size:.82rem}}
@media(max-width:860px){
  :root{--rail:0px;--gut:0px}
  .sheet{grid-template-columns:minmax(0,1fr)}
  .sheet > .rail{
    border-right:0;border-left:2px solid var(--mark-line);
    text-align:left;padding:0 0 0 12px;margin-bottom:22px;
    display:flex;flex-wrap:wrap;gap:0 20px;
  }
  .sheet > .rail:empty{display:none;margin:0}
  .mg{margin-bottom:8px}
}

/* section rhythm */
.sect{padding-block:clamp(46px,6.4vw,92px);position:relative}
.sect + .sect{border-top:1px solid var(--rule)}
.sect.tight{padding-block:clamp(30px,3.6vw,52px)}
#page-portal .sect,#page-admin .sect{padding-block:clamp(26px,3.2vw,42px)}

/* ==========================================================
   NAV
   ========================================================== */
#nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:70;
  background:color-mix(in srgb,var(--sand) 92%,transparent);
  backdrop-filter:saturate(1.5) blur(11px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
#nav.scrolled{border-bottom-color:var(--rule);box-shadow:0 1px 14px -6px rgba(23,33,31,.3)}
#nav .in{
  max-width:var(--maxw);margin:0 auto;height:100%;
  padding:0 18px;display:flex;align-items:center;gap:20px;
}
.brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--display);font-size:1.36rem;letter-spacing:.045em;
  text-transform:uppercase;flex-shrink:0;
}
.brand .tick{width:20px;height:20px;color:var(--mark-ink);flex-shrink:0}
.brand span{color:var(--pencil)}
.navlinks{display:flex;gap:1px;margin-left:auto;align-items:center}
.navlink{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.075em;
  text-transform:uppercase;padding:8px 11px;border:0;background:none;
  color:var(--pencil);cursor:pointer;position:relative;
  transition:color .16s;
}
.navlink:hover{color:var(--ink)}
.navlink.on{color:var(--ink)}
.navlink.on::after{
  content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  background:var(--mark);
}
.navtools{display:flex;align-items:center;gap:8px;margin-left:10px}
#clock{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--pencil-2);white-space:nowrap;
}
.icobtn{
  width:31px;height:31px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--rule);background:transparent;color:var(--ink);
  border-radius:var(--r);transition:background .16s,border-color .16s;
}
.icobtn:hover{background:var(--sheet);border-color:var(--rule-2)}
#burger{display:none}
@media(max-width:900px){
  #burger{display:grid}
  .navlinks{
    position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;
    background:var(--sheet);border-bottom:1px solid var(--rule);
    padding:8px;gap:0;display:none;box-shadow:var(--shadow);
  }
  .navlinks.open{display:flex}
  .navlink{width:100%;text-align:left;padding:11px 14px;font-size:.78rem}
  .navlink.on::after{left:14px;right:auto;width:16px;bottom:6px}
  #clock{display:none}
}
#rail-progress{position:fixed;top:0;left:0;height:2px;background:var(--mark);z-index:80;width:0}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--mark);color:var(--on-accent);padding:11px 18px;border-radius:0 0 var(--r) 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}
.page{display:none;padding-top:var(--nav-h)}
.page.on{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.page.on{animation:pgIn .34s cubic-bezier(.2,.8,.3,1) both}

/* ==========================================================
   THE MARKED PAGE: the signature
   ========================================================== */
.specimen{
  position:relative;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
  padding:26px 26px 20px;overflow:hidden;
}
.specimen::before{ /* ruled feint lines */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 27px,var(--rule) 27px 28px);
  opacity:.55;
}
.specimen::after{ /* the sheet's own margin rule */
  content:"";position:absolute;top:0;bottom:0;left:52px;width:1px;
  background:var(--mark-line);
}
.spec-head{
  position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:12px;margin-bottom:16px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--pencil);
}
.spec-body{position:relative;padding-left:38px}
.spec-line{
  font-family:var(--mono);font-size:.94rem;line-height:28px;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.spec-line .qn{
  position:absolute;left:-38px;width:30px;text-align:right;
  color:var(--pencil-2);font-size:.8rem;
}
.spec-line.ind{padding-left:22px}
.spec-tick{color:var(--mark-ink);font-size:1.05rem;line-height:1}
.spec-foot{
  position:relative;margin-top:18px;padding-top:12px;
  border-top:1px solid var(--rule);display:flex;
  justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
}
.spec-note{
  font-family:var(--serif);font-style:italic;color:var(--mark-ink);
  font-size:1.02rem;line-height:1.35;max-width:34ch;
}
.spec-score{
  font-family:var(--display);font-size:2.5rem;line-height:.85;
  color:var(--mark-ink);letter-spacing:.01em;
}
.spec-score small{font-size:.42em;color:var(--pencil);letter-spacing:.06em}
/* the drawn strokes */
.pen path,.pen line,.pen polyline{
  stroke:var(--mark);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,60);stroke-dashoffset:var(--len,60);
}
.pen.go path,.pen.go line,.pen.go polyline{
  animation:draw .42s cubic-bezier(.5,.1,.4,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .pen path,.pen line,.pen polyline{stroke-dashoffset:0}
}

/* ==========================================================
   BUTTONS & CONTROLS  (mono: this is the machine's voice)
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 19px;border-radius:var(--r);cursor:pointer;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  background:var(--mark);color:var(--on-accent);border:1px solid var(--mark);
  text-decoration:none;transition:transform .12s,filter .16s,box-shadow .16s;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.08);box-shadow:0 6px 16px -8px var(--mark)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{background:var(--sheet);border-color:var(--ink);filter:none;box-shadow:none}
.btn-field{background:var(--field);border-color:var(--field)}
.btn-field:hover{box-shadow:0 6px 16px -8px var(--field)}
.btn-sm{padding:8px 14px;font-size:.68rem}
.btn-xs{padding:5px 10px;font-size:.63rem;letter-spacing:.08em}
.btn-block{width:100%}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn .ar{transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}

.inp{
  width:100%;padding:10px 12px;background:var(--sheet);
  border:1px solid var(--rule-2);border-radius:var(--r);
  font-size:.85rem;color:var(--ink);transition:border-color .16s,background .16s;
}
.inp:focus{outline:none;border-color:var(--mark);background:var(--sand)}
.inp::placeholder{color:var(--pencil-2)}
textarea.inp{resize:vertical;line-height:1.55;min-height:78px}
select.inp{
  appearance:none;cursor:pointer;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field{margin-bottom:14px}
.field label{
  display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pencil);margin-bottom:5px;font-weight:500;
}
.hint{font-size:.8rem;color:var(--pencil);line-height:1.5}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer;
  font-size:.68rem;letter-spacing:.06em;background:transparent;color:var(--pencil);
  transition:all .14s;user-select:none;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.chip.on.mk{background:var(--mark);border-color:var(--mark);color:var(--on-accent)}

.tag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-2);border-radius:2px;color:var(--pencil);
}
.tag.mk{color:var(--mark-ink);border-color:var(--mark-line);background:var(--mark-soft)}
.tag.fd{color:var(--field);border-color:color-mix(in srgb,var(--field) 40%,transparent);background:var(--field-soft)}
.tag.am{color:var(--amber-ink);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:var(--amber-soft)}

.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.dot.live{animation:pulse 2.4s ease-in-out infinite}

/* ==========================================================
   SURFACES
   ========================================================== */
.card{
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:22px;
}
.card--lift{transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s}
.card--lift:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--rule-2)}
.card--flat{background:transparent;border-color:var(--rule)}
.card--ink{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.card--ink .lab,.card--ink .dim{color:color-mix(in srgb,var(--invert-fg) 62%,transparent)}
.slab{background:var(--sheet-2);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* key–value ledger rows */
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.kv:last-child{border-bottom:0}
.kv dt,.kv .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--pencil)}
.kv dd,.kv .v{margin:0;font-family:var(--mono);font-size:.85rem;text-align:right}

/* data tables read like a mark book */
.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.79rem}
.tbl th{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule-2);
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pencil);font-weight:500;
}
.tbl td{padding:10px;border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover{background:var(--sheet-2)}
.tbl .r{text-align:right}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================
   STAGE BANDS: NSW stages are the real structure here
   ========================================================== */
.stage{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pencil);
}
.stage i{
  width:26px;height:3px;background:var(--rule-2);border-radius:2px;
  display:block;font-style:normal;
}
.stage[data-s="1"] i{background:#7FA88E}
.stage[data-s="2"] i{background:#5E9A86}
.stage[data-s="3"] i{background:var(--field)}
.stage[data-s="4"] i{background:var(--amber)}
.stage[data-s="5"] i{background:#C4762A}
.stage[data-s="6"] i{background:var(--mark)}

/* eyebrow: a rule plus a label, like a heading in a ledger */
.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--mark);flex-shrink:0}
.eyebrow span{font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--pencil)}

/* figures */
.fig{display:flex;flex-direction:column;gap:2px}
.fig b{font-family:var(--display);font-size:clamp(1.9rem,3.1vw,2.7rem);line-height:.9;letter-spacing:.012em}
.fig span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pencil)}

/* ==========================================================
   ELEVATION / CONTOUR: reserved for progress + placement,
   where "where am I on the map" is the actual question
   ========================================================== */
.topo{position:absolute;inset:0;pointer-events:none;opacity:.5;overflow:hidden}
.topo path{fill:none;stroke:var(--rule);stroke-width:1}
.topo path.lit{stroke:var(--field);opacity:.34;stroke-width:1.2}
svg.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .trk{stroke:var(--rule)}
.ring .val{stroke:var(--mark);transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.3,1)}

.bar{height:5px;background:var(--rule);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--field);border-radius:3px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.bar.mk i{background:var(--mark)}
.bar.am i{background:var(--amber)}

/* ==========================================================
   PORTAL / ADMIN SHELL
   ========================================================== */
.app{display:grid;grid-template-columns:224px minmax(0,1fr);gap:34px;align-items:start}
@media(max-width:940px){.app{grid-template-columns:minmax(0,1fr);gap:20px}}
.side{position:sticky;top:calc(var(--nav-h) + 20px)}
@media(max-width:940px){
  .side{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--rule)}
  .side::-webkit-scrollbar{height:0}
}
.sideitem{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  border:0;background:none;cursor:pointer;text-align:left;color:var(--pencil);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  border-left:2px solid transparent;transition:all .14s;white-space:nowrap;
}
.sideitem:hover{color:var(--ink);background:var(--sheet)}
.sideitem.on{color:var(--ink);border-left-color:var(--mark);background:var(--sheet)}
.sideitem svg{width:15px;height:15px;flex-shrink:0;opacity:.75}
.sideitem .n{
  margin-left:auto;background:var(--mark);color:var(--on-accent);border-radius:99px;
  min-width:17px;height:17px;display:grid;place-items:center;font-size:.6rem;padding:0 4px;
}
@media(max-width:940px){
  .sideitem{width:auto;border-left:0;border-bottom:2px solid transparent;padding:8px 11px}
  .sideitem.on{border-left:0;border-bottom-color:var(--mark)}
}

/* ==========================================================
   MODAL / TOAST
   ========================================================== */
#modalRoot{position:fixed;inset:0;z-index:100;display:none;padding:18px;overflow-y:auto}
#modalRoot.open{display:block}
.mask{position:fixed;inset:0;background:rgba(15,20,19,.55);backdrop-filter:blur(3px);animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;max-width:600px;margin:5vh auto;background:var(--sheet);
  border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  animation:mIn .26s cubic-bezier(.2,.8,.3,1) both;
}
.modal.wide{max-width:880px}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{
  padding:18px 22px;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
}
.modal-head h3{font-size:1.3rem}
.modal-head .sub{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pencil);margin-top:5px}
.modal-body{padding:22px}
.x{
  width:28px;height:28px;border:1px solid var(--rule);background:none;cursor:pointer;
  border-radius:var(--r);display:grid;place-items:center;color:var(--pencil);flex-shrink:0;
}
.x:hover{color:var(--ink);border-color:var(--rule-2)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:var(--sand);padding:11px 17px;border-radius:var(--r);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;box-shadow:var(--shadow-lift);
  animation:tIn .28s cubic-bezier(.2,.8,.3,1) both;max-width:min(90vw,440px);text-align:center;
}
.toast.err{background:var(--mark);color:var(--on-accent)}
.toast.win{background:var(--field);color:var(--on-accent)}
@keyframes tIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ==========================================================
   MISC
   ========================================================== */
.rv{opacity:0;transform:translateY(13px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
.avatar{
  border-radius:var(--r);display:grid;place-items:center;color:#fff;flex-shrink:0;
  font-family:var(--mono);font-weight:500;letter-spacing:.03em;
}
.sep{height:1px;background:var(--rule);margin:22px 0}
.scroller{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.scroller > *{scroll-snap-align:start;flex:0 0 auto}
.scroller::-webkit-scrollbar{height:5px}
.scroller::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}

/* markdown returned by the study helper / reports */
.md p{margin:0 0 .75em}.md p:last-child{margin:0}
.md ul,.md ol{margin:.4em 0;padding-left:19px}
.md li{margin:.24em 0}
.md code{font-family:var(--mono);font-size:.86em;background:var(--sheet-2);padding:1px 5px;border-radius:2px}
.md blockquote{margin:.5em 0;padding-left:12px;border-left:2px solid var(--mark-line);color:var(--pencil)}
.md strong{font-weight:600}
.md-det{border:1px solid var(--rule);border-radius:var(--r);padding:9px 12px;margin:.45em 0;background:var(--sand)}
.md-det summary{cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mark-ink);list-style:none}
.md-det summary::-webkit-details-marker{display:none}
.md-det[open] summary{margin-bottom:8px}
.bmsg{max-width:88%;padding:12px 15px;border-radius:var(--r-lg);font-size:.95rem;line-height:1.6}
.bmsg.me{align-self:flex-end;background:var(--ink);color:var(--sand)}
.bmsg.ai{align-self:flex-start;background:var(--sheet-2);border:1px solid var(--rule)}
.load-dots{display:inline-flex;gap:4px;align-items:center}
.load-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:ld 1.3s ease-in-out infinite}
.load-dots i:nth-child(2){animation-delay:.16s}
.load-dots i:nth-child(3){animation-delay:.32s}
@keyframes ld{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* footer */
footer{border-top:1px solid var(--rule);padding-block:38px;margin-top:20px}
footer a{color:var(--pencil);text-decoration:none}
footer a:hover{color:var(--mark-ink)}

/* print the placement result properly */
@media print{
  #nav,#rail-progress,.no-print,footer{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .page{padding-top:0}
  .card,.specimen{box-shadow:none;border-color:#bbb}
}


/* ==========================================================
   COMPAT: class names carried by the portal / admin / study
   modules, mapped onto the ledger language above.
   ========================================================== */
.wrap{width:100%}

/* eyebrow also works with bare text, not just a nested span */
.eyebrow{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--pencil);
}
.eyebrow span{font:inherit;letter-spacing:inherit;color:inherit}

/* pills → tags */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-2);border-radius:2px;color:var(--pencil);white-space:nowrap;
}
.pill-jade{color:var(--field);border-color:color-mix(in srgb,var(--field) 42%,transparent);background:var(--field-soft)}
.pill-clay{color:var(--mark-ink);border-color:var(--mark-line);background:var(--mark-soft)}
.pill-gold{color:var(--amber-ink);border-color:color-mix(in srgb,var(--amber) 42%,transparent);background:var(--amber-soft)}
.pill-sky{color:var(--pencil);border-color:var(--rule-2)}

/* stats → figures */
.stat{display:flex;flex-direction:column;gap:3px}
.stat-n{
  font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:.9;
  letter-spacing:.012em;font-variant-numeric:lining-nums;
}
.stat-l{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pencil)}

.lbl{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pencil)}
.tnum{font-variant-numeric:lining-nums tabular-nums}
.badge{
  display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:99px;background:var(--mark);color:var(--on-accent);
  font-family:var(--mono);font-size:.6rem;
}

/* empty states are an invitation, not an apology */
.empty{
  border:1px dashed var(--rule-2);border-radius:var(--r-lg);padding:26px 20px;
  text-align:center;color:var(--pencil);font-size:.92rem;background:var(--sheet);
}
.empty b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;color:var(--ink);margin-bottom:5px;text-transform:uppercase}

/* calendar */
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calday{
  aspect-ratio:1;border:1px solid var(--rule);border-radius:var(--r);
  padding:5px 6px;font-family:var(--mono);font-size:.7rem;position:relative;
  background:var(--sheet);display:flex;flex-direction:column;gap:2px;cursor:pointer;
  transition:border-color .14s,background .14s;
}
.calday:hover{border-color:var(--ink)}
.calday.out{opacity:.3;pointer-events:none}
.calday.today{border-color:var(--mark);box-shadow:inset 0 0 0 1px var(--mark)}
.calday.away{background:var(--mark-soft);border-color:var(--mark-line)}
.calday .d{color:var(--pencil)}
.calday .mk{width:5px;height:5px;border-radius:50%;background:var(--field)}
.calday .mk.late{background:var(--mark)}
.calhead{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pencil);text-align:center;
}

/* leaderboard podium */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.pod{text-align:center;padding:16px 10px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--sheet)}
.pod.one{border-color:var(--mark);background:var(--mark-soft)}
.pod .rk{font-family:var(--display);font-size:1.5rem;color:var(--pencil);letter-spacing:.04em}
.pod.one .rk{color:var(--mark-ink)}

/* generic list row used in several panels */
.lrow{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--rule);
}
.lrow:last-child{border-bottom:0}
.lrow .grow{flex:1;min-width:0}
.lrow .t{font-family:var(--mono);font-size:.84rem}
.lrow .s{font-size:.82rem;color:var(--pencil)}

.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}


/* legacy token + class aliases used by the portal / admin / study modules */
:root{
  --tx:var(--ink); --tx-2:var(--pencil); --tx-3:var(--pencil-2);
  --surface:var(--sheet); --surface-2:var(--sheet-2);
  --frost:var(--sand); --jade:var(--field); --jade-lift:var(--field-soft);
  --clay:var(--mark); --gold:var(--amber);
  --ff-mono:var(--mono); --ff-display:var(--display); --ff-body:var(--serif);
}
.panel{min-width:0}
.panel-head{margin-bottom:20px}
.panel-head h2{margin-top:4px}
.panel-head .eyebrow{margin-bottom:8px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ring{position:relative}
.ring-val{transform:none}
.ring-val{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;font-variant-numeric:lining-nums;
}
.bar-trk{height:5px;background:var(--rule);border-radius:3px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--field);border-radius:3px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
details.role{border-top:1px solid var(--rule);padding:18px 0}
details.role summary{cursor:pointer;list-style:none}
details.role summary::-webkit-details-marker{display:none}
.lede{font-family:var(--serif)}


/* the portal's ring: .ring wrapper > svg > circle.trk / circle.bar */
.ring{position:relative;display:inline-grid;place-items:center}
.ring svg{transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring circle.trk{stroke:var(--rule)}
.ring circle.bar{stroke:var(--mark);transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1)}
.ring .ring-val{
  position:absolute;inset:0;display:grid;place-items:center;transform:none;
  font-family:var(--mono);font-size:.76rem;font-variant-numeric:lining-nums;color:var(--ink);
}
/* .bar is also a progress track elsewhere: keep that working */
div.bar{height:5px;background:var(--rule);border-radius:3px;overflow:hidden}
div.bar > i{display:block;height:100%;background:var(--field);border-radius:3px}


.tbl td.r{white-space:nowrap}
.tbl td.r .btn{margin-left:5px}
.tbl td.r .btn:first-child{margin-left:0}
@media(max-width:1100px){.tbl td.r{white-space:normal}}


@media(max-width:760px){.nith-grid{grid-template-columns:minmax(0,1fr)!important}
.nith-grid figure{max-width:280px}}

/* ===== Added in the September 2026 rebuild ===== */
:root{--mark-ink:#9A3715;--amber-ink:#79530A;--on-accent:#fff;--line:var(--rule);--line-soft:color-mix(in srgb,var(--rule) 55%,transparent)}
[data-theme="dark"]{--mark-ink:#EE7645;--amber-ink:#D9A038;--on-accent:#14181A}
h1 .mark-ink,.spec-score,.pod.one .rk{color:var(--mark)}
.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}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
a.navlink{text-decoration:none;display:inline-flex;align-items:center}
.navlink.nav-cta{background:var(--mark);color:var(--on-accent);border-radius:var(--r);margin-left:8px;padding-inline:14px}
.navlink.nav-cta:hover,.navlink.nav-cta.on{color:var(--on-accent);filter:brightness(1.08)}
.navlink.nav-cta::before,.navlink.nav-cta::after{display:none}
a.btn{text-decoration:none}
button.chip{font:inherit;font-size:.68rem;letter-spacing:.06em}
.btn-invert{background:var(--invert-fg);color:var(--invert-bg);border-color:var(--invert-fg)}
.btn-invert:hover{filter:brightness(.95);box-shadow:none}
.cta-card{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linkbtn:hover{color:var(--mark-ink)}
.field.bad .inp,.inp[aria-invalid="true"]{border-color:var(--mark);background:color-mix(in srgb,var(--mark) 5%,var(--sheet))}
.ferr{color:var(--mark-ink);font-size:.8rem;margin:6px 0 0;line-height:1.4;font-weight:500}
.chipset[aria-invalid="true"]{outline:1px solid var(--mark);outline-offset:4px;border-radius:var(--r)}
.opt{text-transform:none;letter-spacing:0;font-weight:400}
fieldset.field{border:0;padding:0;margin-inline:0;min-width:0}
.lbl-legend{display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pencil);margin-bottom:5px;font-weight:500;padding:0}
.auth-wrap{max-width:440px;margin-inline:auto;padding-block:6vh}
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:18px;border:1px dashed var(--amber);border-radius:var(--r);background:color-mix(in srgb,var(--amber) 8%,transparent);font-size:.88rem}
.me-row{background:color-mix(in srgb,var(--jade) 10%,transparent)}
.legacy-card{border-color:var(--amber)}
.spark{display:flex;align-items:flex-end;gap:2px;height:120px}
.spark span{flex:1;min-width:2px;background:var(--jade);border-radius:2px 2px 0 0}
.split-2{grid-template-columns:1fr 1fr}
@media (max-width:760px){.split-2{grid-template-columns:1fr}}
.portrait,.portrait img{display:block}
.portrait img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--rule);box-shadow:var(--shadow)}
#consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:600px;margin-inline:auto;background:var(--sheet);color:var(--ink);border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:16px 18px;display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap}
#consent p{margin:0;font-size:.86rem;line-height:1.5;flex:1 1 280px}
#consent a{color:inherit;text-decoration:underline}
.consent-btns{display:flex;gap:8px}
.static-links{display:flex!important;position:static!important;flex-direction:row!important;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;margin-left:auto;gap:2px;width:auto!important;inset:auto!important}
@media (max-width:760px){.static-links .hide-sm{display:none!important}}
.navlink{white-space:nowrap}
@media (max-width:1400px){#clock{display:none!important}}
@media (max-width:1280px){.navlink{padding-inline:8px;letter-spacing:.05em}.navlink.nav-cta{padding-inline:11px}}
#nav .in{gap:14px}
@media (min-width:1401px){.navlink{padding-inline:10px}}
@media (max-width:1080px){
  #burger{display:grid}
  .navlinks{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:var(--sheet);border-bottom:1px solid var(--rule);padding:8px;gap:0;display:none;box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navlink{width:100%;text-align:left;padding:11px 14px;font-size:.78rem}
  .navlink.on::after{left:14px;right:auto;width:16px;bottom:6px}
  .navlink.nav-cta{margin:6px 0 0;padding:12px 14px}
}
.card--ink h3:not([style*="color"]){color:inherit}
.ivl{display:grid;grid-template-columns:minmax(0,1fr) 72px 96px 34px;gap:6px;align-items:center;margin-bottom:6px}
.ivl-head{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pencil);margin:4px 0}
.ivl .icobtn{width:34px;height:34px}
@media (max-width:560px){.ivl{grid-template-columns:1fr 1fr 34px}.ivl [data-f="desc"]{grid-column:1/-1}.ivl-head{display:none}}
.doc{max-width:70ch;margin-top:22px}
.doc h2{margin:1.9em 0 .5em;font-size:clamp(1.25rem,2.2vw,1.55rem)}
.doc h3{margin:1.4em 0 .35em;font-size:1.06rem}
.doc p,.doc li{line-height:1.65}
.doc a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.notfound-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:34px;max-width:620px}
.notfound-links a{display:block;padding:12px 14px;border:1px solid var(--rule-2);border-radius:var(--r);text-decoration:none;color:inherit}
.notfound-links a:hover{border-color:var(--ink)}
@media print{#consent,.demo-bar,.skip,nav,footer{display:none!important}}