/* ============================================================
   backlot.dev — teaching preferences
   Gleneagles design system. Plain, calm, quick to fill in.
   Purple is a signal, not a fill. System sans only, no webfonts.
   ============================================================ */

:root {
  --purple:   #5A3A8A;   /* Primary — the signal */
  --ink:      #2E2347;   /* Deep Ink — headings, borders */
  --accent:   #7B5BB6;   /* Accent — small emphasis only */
  --lavender: #F1ECF8;   /* Soft Lavender — panels, selected rows */
  --mist:     #D7D9DE;   /* Mist Grey — rules, borders */
  --slate:    #6B7078;   /* Slate — secondary text */
  --charcoal: #2F3136;   /* Charcoal — body text */
  --page:     #FBFBFC;
  --white:    #FFFFFF;

  --ok:    #3F6B4A;
  --warn:  #8A6224;
  --alert: #96403E;

  /* The twelve GSC learning areas, keyed by the Griddle Subject code.
     Muted so a stack of them reads as one chart rather than a bag of sweets,
     and dark enough that the white label on each bar clears 4.5:1 — these get
     read on cheap school laptops. Related areas sit near each other in hue:
     the two English-family areas blue, the two Arts purple. */
  --la-eng:   #4E6E8C;
  --la-eal:   #3E7B8A;
  --la-maths: #866A2C;
  --la-sci:   #4E7255;
  --la-hum:   #7C5931;
  --la-lang:  #3F6565;
  --la-art:   #714F78;
  --la-perar: #8C4F63;
  --la-tech:  #5A5A66;
  --la-peh:   #875450;
  --la-work:  #5F6B4A;
  --la-engag: #6B5E8C;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

/* ============ shell ============ */

.topbar {
  background: var(--ink);
  color: var(--white);
  padding: .75rem 0;
}
.topbar .inner {
  max-width: 60rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
}
.topbar .school { font-weight: 600; font-size: .9375rem; }
.topbar .who { font-size: .875rem; color: #C9C2D8; }

main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ============ progress ============ */

.steps {
  display: flex; flex-wrap: wrap; gap: .35rem;
  list-style: none; margin: 0 0 2rem; padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--mist);
  font-size: .8125rem;
}
.steps li {
  color: var(--slate);
  padding: .2rem .6rem;
  border: 1px solid transparent;
}
.steps li[data-state="done"] { color: var(--purple); }
.steps li[data-state="done"]::before { content: "✓ "; }
.steps li[data-state="now"] {
  background: var(--purple); color: var(--white); font-weight: 600;
}
.steps li[data-state="skip"] { color: var(--mist); text-decoration: line-through; }

/* ============ type ============ */

h1 { font-size: 1.625rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 2rem 0 .75rem; }
p { margin: 0 0 1rem; max-width: 60ch; }
.lede { font-size: 1.0625rem; color: var(--slate); max-width: 54ch; margin-bottom: 2rem; }
.note { color: var(--slate); font-size: .875rem; max-width: 60ch; }
.eyebrow { font-size: .8125rem; color: var(--slate); margin: 0 0 .25rem; }
a { color: var(--purple); text-underline-offset: .2em; }

/* ============ questions ============ */

fieldset { border: 0; margin: 0 0 2rem; padding: 0; }
legend { font-size: 1.0625rem; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: .25rem; }
.help { color: var(--slate); font-size: .875rem; margin: 0 0 .75rem; max-width: 58ch; }

.options { max-width: 40rem; }
.opt {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem;
  align-items: start;
  padding: .75rem .9rem;
  border: 1px solid var(--mist);
  margin-bottom: -1px;
  background: var(--white);
  cursor: pointer;
}
.opt:hover { border-color: var(--accent); position: relative; z-index: 1; }
.opt input { margin: .3rem 0 0; accent-color: var(--purple); width: 1rem; height: 1rem; }
.opt .opt-label { font-weight: 500; color: var(--ink); }
.opt .opt-desc { color: var(--slate); font-size: .875rem; display: block; font-weight: 400; }
.opt:has(input:checked) {
  background: var(--lavender); border-color: var(--purple);
  position: relative; z-index: 1;
  box-shadow: inset 3px 0 0 var(--purple);
}
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }

input[type="text"], input[type="number"], textarea, select {
  font-family: var(--sans); font-size: 1rem; color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 2px;
  padding: .55rem .7rem;
  width: 100%; max-width: 34rem;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 0; border-color: var(--purple);
}
label.field { display: block; margin-bottom: 1.25rem; max-width: 34rem; }
label.field .lbl { font-weight: 500; color: var(--ink); display: block; margin-bottom: .3rem; }

/* Needs to out-specify the `input[type="text"]` rule above, which would
   otherwise win on specificity and stretch the field to 34rem. */
input[type="text"].codebox {
  font-size: 1.5rem; letter-spacing: .18em;
  text-align: center; text-transform: uppercase;
  padding: .75rem .5rem; width: 11ch; max-width: 100%;
  font-variant-numeric: tabular-nums;
}

/* ============ buttons ============ */

.btn {
  font-family: var(--sans); font-size: .9375rem; font-weight: 500;
  padding: .6rem 1.25rem;
  border: 1px solid var(--purple);
  border-radius: 2px;
  background: var(--purple); color: var(--white);
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { background: var(--mist); border-color: var(--mist); color: var(--slate); cursor: default; }
.btn.ghost { background: none; color: var(--purple); border-color: var(--mist); }
.btn.ghost:hover { background: var(--lavender); border-color: var(--purple); }

.actions {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--mist);
}
.actions .spacer { flex: 1; }
.saved { font-size: .8125rem; color: var(--slate); }

/* ============ subject picker ============ */

.la-group { margin-bottom: 1.5rem; }
.la-head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--mist); padding-bottom: .35rem; margin-bottom: .5rem;
}
.la-head .chip { width: .75rem; height: .75rem; border-radius: 2px; flex: none; }
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .1rem; }
.subj {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: baseline;
  padding: .4rem .5rem; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; font-size: .9375rem;
}
.subj:hover { background: var(--lavender); }
.subj input { accent-color: var(--purple); }
.subj:has(input:checked) { background: var(--lavender); color: var(--ink); font-weight: 500; }

.prefrow {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: .6rem .25rem; border-bottom: 1px solid var(--mist);
  font-size: .9375rem;
}
.segmented {
  display: inline-flex; align-self: flex-start;
  border: 1px solid var(--mist); border-radius: 2px; overflow: hidden;
}
.segmented label {
  font-size: .8125rem;
  padding: .35rem .75rem; cursor: pointer;
  border-right: 1px solid var(--mist); white-space: nowrap; color: var(--slate);
}
.segmented label:last-child { border-right: 0; }
.segmented label:hover { background: var(--lavender); }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label:has(input:checked) { background: var(--purple); color: var(--white); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============ load preview ============ */

.load {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 2px;
  padding: 1rem 1.1rem 1.25rem;
  position: sticky; top: 1.5rem;
}
.load-head {
  font-size: .875rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--mist); padding-bottom: .5rem; margin-bottom: .85rem;
  display: flex; justify-content: space-between; gap: 1rem;
}
.load-head .eft { font-weight: 400; color: var(--slate); }

/* Bar height is proportional to periods, so the stack can be read against
   the cap rule rather than just listed. */
/* No gaps between bars: the stack has to be measurable against the cap rule,
   so separation is a border inside each bar's own height (border-box). */
.bars { position: relative; display: flex; flex-direction: column; }
.bar {
  display: grid; grid-template-columns: 1fr auto;
  gap: .5rem; align-items: center;
  font-size: .75rem; color: var(--white);
  padding: 0 .5rem;
  border-bottom: 1px solid var(--white);
  min-height: 1.35rem;
}
.bar:first-child { border-radius: 2px 2px 0 0; }
.bar:last-child  { border-radius: 0 0 2px 2px; border-bottom: 0; }
.bar .b-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .b-per { font-variant-numeric: tabular-nums; opacity: .85; }
.bar[data-pref="rather-not"] { opacity: .45; }

/* Class name is the lowercased Griddle Subject code, so a new learning area
   only needs a variable and a rule here. */
.bar.eng   { background: var(--la-eng); }
.bar.eal   { background: var(--la-eal); }
.bar.maths { background: var(--la-maths); }
.bar.sci   { background: var(--la-sci); }
.bar.hum   { background: var(--la-hum); }
.bar.lang  { background: var(--la-lang); }
.bar.art   { background: var(--la-art); }
.bar.perar { background: var(--la-perar); }
.bar.tech  { background: var(--la-tech); }
.bar.peh   { background: var(--la-peh); }
.bar.work  { background: var(--la-work); }
.bar.engag { background: var(--la-engag); }

/* Two rules: the load GSC usually allots, and the VGSA maximum above it.
   The usual load is the one teachers should read against; the cap is there
   so an over-full list is visibly over-full rather than silently wrong. */
.capline {
  position: absolute; left: 0; right: 0;
  border-top: 2px dashed var(--alert);
  pointer-events: none;
}
.capline span {
  position: absolute; right: 0; top: .15rem;
  font-size: .6875rem; color: var(--alert); background: var(--white);
  padding-left: .3rem;
}
.capline.target { border-top: 2px solid var(--purple); }
.capline.target span { color: var(--purple); }

.load-foot {
  font-size: .75rem; color: var(--slate); line-height: 1.4;
  margin: 1.6rem 0 0; max-width: none;
}

.subj .dur {
  font-size: .6875rem; color: var(--slate);
  border: 1px solid var(--mist); border-radius: 2px;
  padding: 0 .25rem; margin-left: .15rem; white-space: nowrap;
}

.load-readout { font-size: .8125rem; margin-top: 1.25rem; padding-top: .7rem; border-top: 1px solid var(--mist); color: var(--slate); }
.load-readout .row { display: flex; justify-content: space-between; gap: 1rem; padding: .1rem 0; }
.load-readout b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Page-level banner. The load panel uses a tighter variant below. */
.flag {
  margin: 0 0 1.75rem; padding: .85rem 1rem;
  font-size: .9375rem; line-height: 1.5;
  background: var(--lavender);
  border-left: 3px solid var(--purple);
  color: var(--ink);
  max-width: 46rem;
}
.flag > :last-child { margin-bottom: 0; }
.load .flag {
  margin: .9rem 0 0; padding: .6rem .7rem;
  font-size: .8125rem; line-height: 1.45; max-width: none;
}
.flag.warn { background: rgb(138 98 36 / .09); border-left-color: var(--warn); color: #6A4A18; }
.flag.ok   { background: rgb(63 107 74 / .09); border-left-color: var(--ok);   color: #2E4F37; }

/* ============ layout ============ */
.split { display: grid; grid-template-columns: 1fr 18rem; gap: 2.5rem; align-items: start; }

@media (max-width: 58rem) {
  .split { grid-template-columns: 1fr; }
  .load { position: static; }
}
@media (max-width: 40rem) {
  body { font-size: 15px; }
  h1 { font-size: 1.375rem; }
  main { padding: 1.5rem 1rem 3rem; }
  .steps li .label { display: none; }
  .steps li[data-state="now"] .label { display: inline; }
  .segmented label { padding: .35rem .55rem; font-size: .75rem; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ============ subject rows (step 5) ============ */

/* The preference and stream controls only mean anything once the subject is
   ticked, so the row stays a plain checkbox until it is. Keeps 154 rows
   scannable instead of presenting 154 sets of radio buttons at once. */
.subject-row { border: 1px solid transparent; border-radius: 2px; padding: .1rem 0; }
.subject-row.picked { background: var(--lavender); border-color: var(--mist); }
.subject-row .subject-detail { display: none; }
.subject-row.picked .subject-detail {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding: .1rem .5rem .5rem 2.2rem;
}
.subject-row .segmented { background: var(--white); }

.streams { display: flex; gap: .75rem; }
.stream {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8125rem; color: var(--slate); cursor: pointer;
}
.stream input { accent-color: var(--purple); }
.stream:has(input:checked) { color: var(--purple); font-weight: 500; }

/* One column: a two-up grid would put a subject's controls beside an
   unrelated subject's name. */
#subjects-form .subj-grid { grid-template-columns: 1fr; }

/* ============ facts list ============ */

dl.facts { margin: 0 0 1.5rem; max-width: 44rem; }
dl.facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--mist);
}
dl.facts dt { color: var(--slate); font-size: .875rem; }
dl.facts dd { margin: 0; color: var(--ink); white-space: pre-wrap; }

@media (max-width: 40rem) {
  dl.facts > div { grid-template-columns: 1fr; gap: .1rem; }
}

/* ============ review table ============ */

table.review { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; max-width: 44rem; }
table.review td { padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--mist); vertical-align: baseline; }
table.review td:nth-child(2) { color: var(--slate); font-size: .875rem; white-space: nowrap; }
table.review td:nth-child(3) { color: var(--purple); font-size: .8125rem; white-space: nowrap; }

/* ============ collapsible learning areas ============ */

details.la-group > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.la-group > summary::-webkit-details-marker { display: none; }
details.la-group > summary::after {
  content: "Show";
  margin-left: auto;
  font-size: .8125rem; font-weight: 400; color: var(--purple);
}
details.la-group[open] > summary::after { content: "Hide"; }
details.la-group > summary:hover::after { text-decoration: underline; }
details.la-group > summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.la-count { font-size: .8125rem; font-weight: 400; color: var(--slate); }
.areas-hint { margin-bottom: 1.25rem; }

/* ============ year badge ============ */

/* Fixed width so the year badges form a column and the subject names all
   start at the same x — that's what makes 154 rows scannable. */
.subj .s { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.yr {
  flex: none; width: 5.75rem;
  font-size: .75rem; font-weight: 600; color: var(--purple);
  letter-spacing: .01em;
}
.subj .nm { flex: 1 1 auto; min-width: 0; }
table.review .yr { display: inline-block; }

@media (max-width: 40rem) {
  .yr { width: auto; }
}

/* ============ stream rows (SEAL / football) ============ */

.subject-row.picked .subject-detail { display: block; }
.stream-row {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .4rem;
}
/* The rating only matters once the stream is ticked. `:has` does this with no
   script, so it still behaves if step5.js fails to load. */
.stream-row .segmented { display: none; }
.stream-row:has(input[type="checkbox"]:checked) .segmented { display: inline-flex; }
.stream-row .stream { min-width: 6rem; }

.segmented.small label { font-size: .75rem; padding: .2rem .55rem; }
.subject-row.picked .subject-detail > .segmented { margin-bottom: .2rem; }

/* ============ classes stepper ============ */

.detail-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.classes {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; color: var(--slate);
}
.classes input[type="number"] {
  width: 3.5rem; padding: .2rem .3rem;
  font-size: .875rem; text-align: center;
}

/* ============ methods list (step 4) ============ */

/* Methods are short, so they tile more densely than subject rows. */
.method-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.method-grid .subj .s { gap: 0; }

/* ============ utilities ============
   These exist because the CSP has no 'unsafe-inline' in style-src, so inline
   style attributes are silently dropped. Anything positional lives here. */

.field.wide   { max-width: 44rem; }
.field.spaced { margin-top: 1rem; }
input.narrow  { max-width: 8rem; }
form.inline   { display: inline; }

/* Learning-area chips, keyed by the lowercased Griddle Subject code — same
   scheme as the load-panel bars. */
.chip.eng   { background: var(--la-eng); }
.chip.eal   { background: var(--la-eal); }
.chip.maths { background: var(--la-maths); }
.chip.sci   { background: var(--la-sci); }
.chip.hum   { background: var(--la-hum); }
.chip.lang  { background: var(--la-lang); }
.chip.art   { background: var(--la-art); }
.chip.perar { background: var(--la-perar); }
.chip.tech  { background: var(--la-tech); }
.chip.peh   { background: var(--la-peh); }
.chip.work  { background: var(--la-work); }
.chip.engag { background: var(--la-engag); }

/* ============ learning area leader ============ */

.crumb { font-size: .875rem; margin-bottom: .5rem; }
h1 .yr { font-size: .75rem; vertical-align: middle; }

.area-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-width: 30rem; }
.area-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border: 1px solid var(--mist); border-radius: 2px;
  background: var(--white); color: var(--ink); text-decoration: none; font-weight: 500;
}
.area-card:hover { border-color: var(--purple); background: var(--lavender); }

table.area-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
table.area-table th {
  text-align: left; font-size: .8125rem; color: var(--slate); font-weight: 500;
  border-bottom: 1px solid var(--mist); padding: .4rem .5rem .4rem 0;
}
table.area-table td { padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--mist); vertical-align: baseline; }
table.area-table td a { text-decoration: none; }
table.area-table td a:hover { text-decoration: underline; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num.strong { font-weight: 600; color: var(--ink); }

.pill {
  display: inline-block; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--mist); color: var(--charcoal); white-space: nowrap;
}
.pill.ok   { background: rgb(63 107 74 / .15); color: #2E4F37; }
.pill.warn { background: rgb(138 98 36 / .15); color: #6A4A18; }

/* --- spread table --- */
table.spread-table { border-collapse: collapse; margin: 1rem 0 1.5rem; }
table.spread-table th {
  font-size: .8125rem; color: var(--slate); font-weight: 500;
  padding: .3rem .6rem .3rem 0; text-align: left; white-space: nowrap;
}
table.spread-table td { padding: .25rem .3rem; }
table.spread-table input[type="number"] { width: 4rem; text-align: center; }
.spread-total { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--slate); }
.spread-total.ok  { color: var(--ok); }
.spread-total.bad { color: var(--alert); }
.spread-row.incomplete input { border-color: var(--alert); }

/* --- staffing nominations --- */
.nominators { max-width: 44rem; }
.nominator {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .45rem .5rem; border-bottom: 1px solid var(--mist);
}
.nom-name { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
fieldset[disabled] { opacity: .55; }
.actions-inline { margin: .75rem 0 0; }
.flag strong { display: block; margin-bottom: .25rem; }

/* ============ room picker ============ */

.room-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .35rem; max-width: 44rem; }
.room-group {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start;
  padding: .55rem .7rem; border: 1px solid var(--mist); border-radius: 2px;
  background: var(--white); cursor: pointer;
}
.room-group:hover { border-color: var(--accent); }
.room-group.picked { background: var(--lavender); border-color: var(--purple); }
.room-group input { accent-color: var(--purple); margin-top: .2rem; }
.rg-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rg-label { font-weight: 500; color: var(--ink); font-size: .9375rem; }
.rg-meta { font-size: .75rem; color: var(--slate); }
.room-subhead { margin: 1.25rem 0 .5rem; }

/* --- "it has to be this room" --- */
.specific-group { display: grid; grid-template-columns: 12rem 1fr; gap: .75rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--mist); }
.specific-label { font-size: .8125rem; color: var(--slate); }
.specific-rooms { display: flex; flex-wrap: wrap; gap: .25rem; }
.room-code {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; padding: .15rem .45rem;
  border: 1px solid var(--mist); border-radius: 2px; cursor: pointer;
  background: var(--white);
}
.room-code:hover { border-color: var(--accent); }
.room-code.picked { background: var(--purple); border-color: var(--purple); color: var(--white); }
.room-code input { accent-color: var(--white); margin: 0; }
@media (max-width: 40rem) { .specific-group { grid-template-columns: 1fr; gap: .2rem; } }

/* --- room rows: ideal / backup --- */
.room-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .5rem .6rem; border-bottom: 1px solid var(--mist); max-width: 44rem;
}
.room-row.picked { background: var(--lavender); }
.room-code-set { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .75rem .35rem 0; }
.rc-label { font-size: .75rem; font-weight: 600; color: var(--ink); min-width: 4.5rem; }

/* --- room lists: ideal / backup --- */
.room-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; max-width: 44rem; }
.room-pick { display: block; }
select.room-select {
  width: 100%; max-width: none; padding: .3rem;
  font-size: .875rem; line-height: 1.5;
}
select.room-select optgroup { font-style: normal; font-weight: 600; color: var(--slate); font-size: .75rem; }
select.room-select option { padding: .15rem .3rem; color: var(--charcoal); }
select.room-select option:checked { background: var(--lavender); font-weight: 500; }

/* ============ admin ============ */

.admin-area { margin-bottom: 1.75rem; max-width: 44rem; }
.leader-list { list-style: none; margin: .5rem 0; padding: 0; }
.leader-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .4rem .5rem; background: var(--lavender); border-radius: 2px; margin-bottom: .25rem;
}
.leader-add { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.leader-add select { max-width: 26rem; }
.btn.small { font-size: .8125rem; padding: .25rem .6rem; }

/* ============ dashboard ============ */

.stat-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.stat {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .9rem; border: 1px solid var(--mist); border-radius: 2px;
  background: var(--white); min-width: 6.5rem;
}
.stat.ok   { border-color: var(--ok); }
.stat.warn { border-color: var(--warn); }
.stat-n { font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { font-size: .75rem; color: var(--slate); }
td.muted { color: var(--slate); font-size: .875rem; }

.issued-code {
  display: inline-block; margin: .4rem 0;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.area-card .dur { display: block; margin-top: .1rem; border: 0; padding: 0; }

/* --- what the form asks, on the sign-in page --- */
ul.asks {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  max-width: 46rem;
}
ul.asks li {
  padding: .5rem 0 .5rem 1.4rem; position: relative;
  border-bottom: 1px solid var(--mist); font-size: .9375rem;
}
ul.asks li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--purple);
}
ul.asks strong { color: var(--ink); font-weight: 600; }

/* --- teacher / leader section nav --- */
.section-nav { background: var(--lavender); border-bottom: 1px solid var(--mist); }
.section-nav .inner {
  max-width: 60rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; gap: .25rem; overflow-x: auto;
}
.section-nav a {
  padding: .55rem .85rem; font-size: .875rem; font-weight: 500;
  color: var(--slate); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.section-nav a:hover { color: var(--purple); }
.section-nav a.current { color: var(--ink); border-bottom-color: var(--purple); }
@media (max-width: 40rem) { .section-nav .inner { padding: 0 1rem; } }

/* --- phase toggles --- */
.phase {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1rem; margin-bottom: .5rem; max-width: 46rem;
  border: 1px solid var(--mist); border-radius: 2px; background: var(--white);
}
.phase-title { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.phase-who { font-size: .8125rem; color: var(--purple); margin-top: .15rem; }
.phase-what { font-size: .875rem; color: var(--slate); margin-top: .25rem; max-width: 34rem; }
fieldset.bare { border: 0; margin: 0; padding: 0; }
@media (max-width: 40rem) { .phase { flex-direction: column; align-items: flex-start; gap: .75rem; } }

/* ============ splash (sign-in) ============ */

/* Vertically centred card. Everything previously sat in the top third with a
   screen of empty page under it, which read as unfinished rather than spare. */
body.is-splash {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  /* A very quiet wash, so the white card has something to sit on. */
  background:
    radial-gradient(60rem 40rem at 50% -20%, rgb(90 58 138 / .07), transparent 70%),
    var(--page);
}
body.is-splash main {
  max-width: 24rem;
  width: 100%;
  padding: 0;
  text-align: center;
}

.splash {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 3px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 1px 2px rgb(46 35 71 / .04), 0 12px 32px rgb(46 35 71 / .07);
  position: relative;
  overflow: hidden;
}
/* Purple as a signal, not a fill — one rule across the top. */
.splash::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(to right, var(--purple), var(--accent));
}

.splash-eyebrow {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .625rem; font-weight: 700; color: var(--purple);
  margin: 0 0 .6rem;
}
.splash h1 { font-size: 1.75rem; margin-bottom: .4rem; letter-spacing: -.02em; }
.splash .lede { margin: 0 auto 1.75rem; font-size: .9375rem; max-width: none; }

.splash form { display: flex; flex-direction: column; align-items: stretch; gap: .85rem; }
.splash .flag { text-align: left; margin-bottom: 1.5rem; font-size: .875rem; padding: .7rem .85rem; }
.splash .btn { width: 100%; padding: .7rem 1.25rem; font-size: 1rem; }
.splash .cf-turnstile { display: flex; justify-content: center; }

body.is-splash input[type="text"].codebox {
  width: 100%;
  font-size: 1.5rem; letter-spacing: .2em;
  padding: .85rem .5rem;
  border: 1px solid var(--mist);
  border-radius: 2px;
  background: var(--page);
}
body.is-splash input[type="text"].codebox:focus-visible {
  background: var(--white);
  border-color: var(--purple);
}
body.is-splash input[type="text"].codebox::placeholder {
  color: #C9CBD2; letter-spacing: .2em;
}
body.is-splash input[type="text"].codebox:disabled { color: var(--slate); }

.splash-foot {
  font-size: .8125rem; color: var(--slate);
  margin: 1.25rem 0 0;
}