/* JitGuru shared visual identity.
 *
 * Consolidated from the six static mockups, which each carried their own copy
 * of this. Guild/registry theme: Lora for headings, IBM Plex Sans for body,
 * IBM Plex Mono for data and codes; paper/ink/brass-seal/slate palette.
 */

:root {
  --paper: #EDEFE8;
  --card: #FBFAF5;
  --ink: #1E2A26;
  --ink-soft: #4A554E;
  --seal: #9C6B2E;
  --seal-light: #E8DCC8;
  --slate: #3D5A52;
  --slate-light: #DCE5E1;
  --line: #D3D3C6;
  --danger: #8B3A2F;
  --danger-light: #F1DCD9;
  --success: #3D6B4A;
  --success-light: #DCE9DE;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.shell { max-width: 1180px; margin: 0 auto; padding: 36px 32px 80px; }
.shell-narrow { max-width: 760px; margin: 0 auto; padding: 40px 24px 100px; }
.shell-mid { max-width: 1080px; margin: 0 auto; padding: 36px 32px 90px; }

/* ---------- persona bar (prototype affordance) ---------- */

.persona-bar {
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  padding: 9px 0;
}
.persona-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.persona-inner .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--seal-light);
}
.persona-inner form { display: inline; }
.persona-btn {
  font-family: 'IBM Plex Sans', sans-serif;
  background: transparent; color: var(--paper);
  border: 1px solid #4A554E; border-radius: 20px;
  padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.persona-btn:hover { border-color: var(--seal-light); }
.persona-btn.active { background: var(--seal); border-color: var(--seal); }
.persona-inner .spacer { flex: 1; }
.persona-inner a { color: var(--slate-light); text-decoration: none; }
.persona-inner a:hover { color: #fff; }

/* ---------- top nav ---------- */

/* Three regions: wordmark, page links, account. The wordmark and the account
   pill hold the two ends of the bar and never move — only the middle wraps.
   Previously everything shared one wrapping row, so as nav items accumulated
   the wordmark and the profile control drifted to wherever the wrap left them.
   `nowrap` here is what keeps the ends anchored; the links wrap inside their
   own box instead of pushing the bar apart. */
.nav {
  max-width: 1180px; margin: 0 auto; padding: 22px 32px;
  display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
}
.nav .wordmark {
  font-family: 'Lora', serif; font-weight: 600; font-size: 19px;
  text-decoration: none; flex: 0 0 auto;
}
.nav .wordmark span { color: var(--seal); }
.nav-links {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  font-size: 14px; color: var(--ink-soft);
  /* min-width:0 lets this shrink; without it the flex default of auto keeps it
     at content width and shoves the account pill off the end. */
  flex: 1 1 auto; min-width: 0;
}
/* Nav items travel in groups: the rosters, then the working cycle. Each group
   gets its own line, deliberately, rather than one row left to wrap where it
   happens to run out of width.

   A vertical rule between them was the first attempt. It reads correctly on one
   line and badly on two: once the row wrapped, the rule stranded at the start of
   the second line as a stray pip and indented that whole group, so the two
   groups no longer shared a left edge. Separate rows do the same job with
   nothing drawn, and the alignment is the thing that makes them read as groups. */
.nav-group { display: flex; align-items: center; gap: 20px; }

.nav-account {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  margin-left: auto; font-size: 14px; color: var(--ink-soft);
}
.nav-account > a { text-decoration: none; }

/* The mobile nav toggle. Off-screen rather than display:none so it stays
   focusable — a keyboard user tabs to it and presses space, and the label is
   what they see move. */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle-btn { display: none; }

/* Narrow: the two ends still face each other on the first row, with the links
   moved to a row of their own rather than squeezed between them. */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; gap: 14px 20px; padding: 18px 22px; }
  .nav .wordmark { order: 1; }
  .nav-account { order: 2; }
  .nav-links { order: 3; flex-basis: 100%; }
  /* Only here does a group get to wrap, because a single line of five items
     genuinely will not fit a phone. */
  .nav-group { flex-wrap: wrap; gap: 12px 18px; }
}
/* A brass rule wipes in under the label on hover. The colour shift alone was
 * too quiet to read as "this is clickable". */
.nav-links a {
  text-decoration: none;
  position: relative;
  padding: 3px 1px;
  transition: color 0.15s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--seal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.current { color: var(--seal); font-weight: 600; }
.nav-links a.current::after { transform: scaleX(1); }

/* Nav-bar button (Sign out). A class rather than inline styles, so the hover
 * rule can actually win — an inline border-color outranks any class selector. */
.nav-btn {
  font-family: 'IBM Plex Sans', sans-serif;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.nav-btn:hover {
  color: var(--ink);
  border-color: var(--seal);
  background: var(--seal-light);
}

/* Visible keyboard focus everywhere, since hover alone leaves keyboard users
 * with no affordance. */
a:focus-visible,
button:focus-visible,
.pill-choice:focus-within,
.tag-choice:focus-within,
.template-card:focus-within {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The one nav item that is an ask rather than a place, so it is the one item
   in the row drawn as a button. A bullet and a colour shift left it reading as
   a link that had been marked somehow — the dot looked like a status, not an
   invitation. Filled, it says what it is without needing the label read.

   Every rule here undoes something .nav-links a does: the brass underline that
   wipes in on hover, the flush padding, the inherited colour. Written out
   rather than reusing .btn, which is a page-sized control — 13px pill matching
   .nav-btn is what sits correctly in a 14px row. */
.nav-links a.nav-subscribe {
  background: var(--seal);
  color: #fff;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--seal);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-links a.nav-subscribe:hover { background: #82581F; border-color: #82581F; color: #fff; }
/* No wiping rule under a filled pill. */
.nav-links a.nav-subscribe::after { content: none; }
/* Current is already obvious on a filled control; the inversion is what tells
   a school it is looking at the page the button leads to. */
.nav-links a.nav-subscribe.current {
  background: transparent;
  color: var(--seal);
}

/* ---------- nav menus ---------- */
/* Related pages of the working cycle, one menu each. <details>, like the
   school switcher, so it opens without JavaScript. The label is drawn as a nav
   link and not as a pill: it sits in the row of places and is one of them. The
   pill shape stays with the controls at the far end, which change who or where
   you are rather than which page you are on. */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 1px; transition: color 0.15s ease;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--seal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}
.nav-menu > summary:hover,
.nav-menu[open] > summary { color: var(--ink); }
.nav-menu > summary:hover::after { transform: scaleX(1); }
.nav-menu > summary.current { color: var(--seal); font-weight: 600; }
.nav-menu > summary.current::after { transform: scaleX(1); }
.nav-menu > summary:focus-visible {
  outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 4px;
}
.nav-menu .chev {
  display: inline-block; font-size: 10px; color: var(--ink-soft);
  transition: transform 0.15s ease;
}
.nav-menu[open] .chev { transform: rotate(180deg); }
.nav-menu .nav-count { margin-left: 2px; }

.nav-menu-panel {
  position: absolute; left: -10px; top: calc(100% + 10px); z-index: 40;
  min-width: 200px; display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; box-shadow: 0 8px 24px rgba(30, 42, 38, 0.13);
}
/* Undoes .nav-links a. A row in a panel is marked as a row, like the
   switcher's, not underlined as a word in a line. */
.nav-links .nav-menu-panel a {
  display: flex; align-items: center; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); font-size: 13.5px;
  transition: background 0.12s ease;
}
.nav-links .nav-menu-panel a::after { content: none; }
.nav-links .nav-menu-panel a:hover { background: var(--slate-light); }
.nav-links .nav-menu-panel a.current { background: var(--seal-light); color: var(--seal); }

/* ---------- school context switcher ---------- */
/* Built on <details> so it opens without JavaScript. */

.school-switch { position: relative; }
.school-switch summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); font-size: 13px; cursor: pointer;
  list-style: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.school-switch summary::-webkit-details-marker { display: none; }
.school-switch summary:hover { border-color: var(--seal); background: var(--seal-light); }
.school-switch[open] summary { border-color: var(--seal); background: var(--seal-light); }
.school-switch .switch-name { font-weight: 600; }
.school-switch .chev { color: var(--ink-soft); font-size: 10px; }
.school-switch[open] .chev { transform: rotate(180deg); display: inline-block; }

.seal-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--seal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lora', serif; font-size: 10px; font-weight: 600;
  color: var(--seal); flex-shrink: 0;
}

.switch-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 290px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; box-shadow: 0 8px 24px rgba(30, 42, 38, 0.13);
}
.switch-group-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); padding: 6px 10px 8px;
}
.switch-note {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.55;
  padding: 0 10px 10px;
}
.switch-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 13.5px; text-align: left;
  padding: 9px 10px; border: none; border-radius: 6px; background: transparent;
  color: var(--ink); cursor: pointer; text-decoration: none;
  transition: background 0.12s ease;
}
.switch-item:hover { background: var(--slate-light); }
.switch-item.current { background: var(--seal-light); color: var(--seal); font-weight: 600; }
.switch-item.current .seal-dot { border-color: var(--seal); }
.switch-item.create {
  border-top: 1px dashed var(--line); border-radius: 0 0 6px 6px;
  margin-top: 6px; padding-top: 12px; color: var(--seal); font-weight: 600;
}

/* ---------- sample-school strip ---------- */

.sample-strip {
  background: var(--seal-light);
  border-top: 1px solid var(--seal);
  border-bottom: 1px solid var(--seal);
}
.sample-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sample-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--seal);
  flex-shrink: 0;
}
.sample-text { font-size: 13.5px; color: var(--seal); flex: 1; min-width: 240px; line-height: 1.5; }
.sample-text strong { color: var(--ink); }

/* ---------- masthead ---------- */

.masthead {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid var(--ink); padding-bottom: 18px; margin-bottom: 28px;
  gap: 20px; flex-wrap: wrap;
}
.masthead-left .eyebrow, .masthead .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 6px;
}
.masthead h1 { font-family: 'Lora', serif; font-weight: 600; font-size: 28px; margin: 0; letter-spacing: -0.01em; }
.masthead .sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.masthead-right {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--ink-soft); text-align: right; line-height: 1.6;
}

/* ---------- tabs ---------- */

/* One page per tab, each with its own URL, so these are links and the current
   one is marked server-side. Scrolls sideways rather than wrapping: a school
   can define as many record pages as it likes. */
.tabs {
  display: flex; gap: 2px; margin: -14px 0 26px;
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.tab {
  flex: 0 0 auto; padding: 9px 16px; font-size: 13.5px; text-decoration: none;
  color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
/* A tab is a link when it goes somewhere and a button when it only changes
   what is shown, so the class has to survive both elements. */
button.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; font: inherit;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.current { color: var(--ink); font-weight: 600; border-bottom-color: var(--seal); }

/* ---------- messages ---------- */

.msg-list { list-style: none; margin: 0 0 22px; padding: 0; }
.msg {
  border-radius: 8px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 8px;
  border: 1px solid var(--line); background: var(--card);
}
.msg.success { background: var(--success-light); border-color: var(--success); color: var(--success); }
.msg.error { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
.error-summary { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.error-summary a { color: inherit; font-weight: 500; }
/* Django renders field errors as their own <ul class="errorlist">; inside the
   summary that would nest a second bullet under every entry. */
.error-summary .errorlist { display: inline; margin: 0; padding: 0; list-style: none; }
.error-summary .errorlist li { display: inline; }
.msg.warning { background: var(--seal-light); border-color: var(--seal); color: var(--seal); }

/* ---------- buttons ---------- */

.btn {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; border-radius: 8px; cursor: pointer; border: none;
  text-decoration: none; display: inline-block; text-align: center;
}
.btn { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-primary { background: var(--seal); color: #fff; }
.btn-primary:hover { background: #82581F; }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--slate); background: var(--slate-light); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger-light); }
.btn-sm { font-size: 13.5px; padding: 10px 20px; }
.btn-ghost {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 12.5px;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  text-align: center; text-decoration: none; display: inline-block;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost:hover { border-color: var(--slate); background: var(--slate-light); }
/* Disabled controls must not appear interactive. */
.btn:disabled:hover, .btn[disabled]:hover,
button:disabled:hover { background: inherit; border-color: var(--line); }
.btn-row { display: flex; gap: 12px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.fine-print { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
button:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- forms ---------- */

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field { margin-bottom: 18px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="email"], input[type="file"], select, textarea {
  width: 100%; font-family: 'IBM Plex Sans', sans-serif; font-size: 14.5px;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; transition: border-color 0.15s;
}
textarea { resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px var(--slate-light);
}
.errorlist {
  list-style: none; margin: 6px 0 0; padding: 0;
  font-size: 12.5px; color: var(--danger);
}
.help-text { font-size: 12px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; }

/* pill / tag choosers — CSS-only, driven by :checked so they work without JS */
.pill-group, .tag-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.pill-choice, .tag-choice {
  position: relative; border: 1px solid var(--line); background: #fff;
  border-radius: 20px; padding: 8px 16px; font-size: 13.5px; cursor: pointer;
  user-select: none; transition: all 0.15s; display: inline-flex; align-items: center;
}
.pill-choice input, .tag-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-choice:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag-choice { border-color: var(--seal); color: var(--seal); font-size: 13px; padding: 6px 14px; }
.tag-choice:has(input:checked) { background: var(--seal); color: #fff; }
/* A tick as well as a fill. Selecting an evaluator with no background check on
   record fills the chip with the danger colour, which reads as a warning
   rather than as a choice — and this is the screen where ticking a box is what
   puts a named pupil's work in a particular person's hands. Same reason the
   chip spells out "no record" instead of relying on its colour. */
.pill-choice:has(input:checked)::before,
.tag-choice:has(input:checked)::before {
  content: "\2713\00a0"; font-weight: 700;
}
/* An evaluator the school has no background check for. The chip also carries
   the words "no record" — colour alone must not be what says so. */
.tag-choice.unverified { border-color: var(--danger); color: var(--danger); }
.tag-choice.unverified:has(input:checked) { background: var(--danger); border-color: var(--danger); }

/* Django renders CheckboxSelectMultiple as <div><div><label><input>…, so a
   picker built from a form field has no .tag-choice to hang the pill on. Same
   look, addressed through the structure the widget actually produces. */
.tag-picker > div { display: contents; }
.tag-picker > div > div > label {
  position: relative; border: 1px solid var(--seal); background: #fff;
  border-radius: 20px; padding: 6px 14px; font-size: 13px; color: var(--seal);
  cursor: pointer; user-select: none; transition: all 0.15s;
  display: inline-flex; align-items: center; margin: 0;
}
.tag-picker > div > div > label:has(input:checked) { background: var(--seal); color: #fff; }
.tag-picker > div > div > label input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.tag-picker > div > div > label:focus-within { outline: 2px solid var(--seal); outline-offset: 2px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toggle-row .toggle-text { max-width: 440px; }
.toggle-row .toggle-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.toggle-row .toggle-text span { font-size: 12.5px; color: var(--ink-soft); }
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--line); border-radius: 24px;
  cursor: pointer; transition: background 0.15s;
}
.switch-track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--slate); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* ---------- sections / cards ---------- */

.section-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px; margin-bottom: 22px; position: relative;
}
.section-num {
  position: absolute; top: -14px; left: 26px; background: var(--ink); color: var(--paper);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 3px 10px;
  border-radius: 20px; letter-spacing: 0.05em;
}
.section-card h2 { font-family: 'Lora', serif; font-size: 18px; font-weight: 600; margin: 6px 0 4px; }
.section-card .hint { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.5; }

.section { margin-bottom: 34px; }
.section-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 6px;
}
.section h2 { font-family: 'Lora', serif; font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.section .hint { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.5; max-width: 640px; }

.divider { border: none; border-top: 1px dashed var(--line); margin: 20px 0; }
.divider-line { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

/* ---------- seals / avatars / tags ---------- */

.seal-mark {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--seal);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lora', serif; font-weight: 600; color: var(--seal); font-size: 15px;
  flex-shrink: 0;
}
.seal-mark.lg { width: 52px; height: 52px; font-size: 16px; margin-bottom: 18px; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--slate); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lora', serif; font-weight: 600; font-size: 16px; flex-shrink: 0;
}
.avatar.sm { width: 30px; height: 30px; font-size: 13px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  font-size: 11.5px; padding: 4px 10px; border-radius: 20px;
  background: var(--slate-light); color: var(--slate); font-weight: 500;
}
.tag.seal-tag { background: var(--seal-light); color: var(--seal); }
.tag.lg { font-size: 12px; padding: 5px 12px; }
.badge {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--slate-light); color: var(--slate); white-space: nowrap;
}
.badge.verified { background: var(--success-light); color: var(--success); }
.badge.pending { background: var(--seal-light); color: var(--seal); }
.badge.muted { background: var(--paper); color: var(--ink-soft); }
.badge.danger { background: var(--danger-light); color: var(--danger); }

/* ---------- list layout with filter rail ---------- */

.search-bar { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.search-bar input { flex: 1; min-width: 220px; font-size: 15px; padding: 13px 16px; }
.sort-select { font-size: 13.5px; padding: 12px 14px; width: auto; color: var(--ink-soft); }

.layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

.filters { position: sticky; top: 24px; }
.filter-group { margin-bottom: 24px; }
.filter-group h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-soft); margin: 0 0 12px; font-weight: 600;
}
.filter-chip {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  padding: 6px 0; cursor: pointer; user-select: none;
}
.filter-chip input { accent-color: var(--slate); width: 15px; height: 15px; }
.range-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.range-row input[type="range"] { flex: 1; accent-color: var(--seal); padding: 0; }
.clear-link { font-size: 12.5px; color: var(--seal); text-decoration: underline; }

.results-count { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 16px; }
.results-count strong { color: var(--ink); }

/* ---------- record cards (postings, judges) ---------- */

.record-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 14px; display: flex; gap: 18px;
  align-items: flex-start; transition: border-color 0.15s;
}
.record-card:hover { border-color: var(--slate); }
.record-body { flex: 1; min-width: 0; }
.record-title {
  font-family: 'Lora', serif; font-size: 17px; font-weight: 600; margin: 0 0 4px;
  text-decoration: none; display: block;
}
.record-title:hover { color: var(--seal); }
.record-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.record-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; flex-wrap: wrap; }
.record-bio { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; max-width: 520px; }
.record-meta { display: flex; gap: 22px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.record-meta .m strong {
  display: block; color: var(--ink); font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px; font-weight: 600;
}
.record-action {
  flex-shrink: 0; align-self: center; display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 620px) {
  .record-card { flex-direction: column; }
  .record-action { align-self: stretch; width: 100%; }
}

.plan-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--seal-light); border: 1px solid var(--seal); border-radius: 8px;
  padding: 12px 18px; margin-bottom: 22px; font-size: 13px; color: var(--seal);
  flex-wrap: wrap;
}

.empty-state {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 40px 30px; text-align: center; color: var(--ink-soft); font-size: 14px;
}
.empty-state h3 { font-family: 'Lora', serif; color: var(--ink); margin: 0 0 8px; font-size: 18px; }

/* ---------- preview card (create-posting live preview) ---------- */

.preview-col { position: sticky; top: 32px; }
.preview-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
.preview-card {
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 30px; position: relative; overflow: hidden;
}
.preview-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--seal), var(--seal) 8px, transparent 8px, transparent 16px);
}
.preview-title { font-family: 'Lora', serif; font-size: 22px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.preview-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 18px; }
.preview-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px;
  border-top: 1px dashed var(--line); padding-top: 16px;
}
.preview-stat .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); margin-bottom: 3px;
}
.preview-stat .v { font-size: 14.5px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.preview-note {
  margin-top: 18px; font-size: 12px; color: var(--ink-soft); line-height: 1.6;
  font-style: italic; font-family: 'Lora', serif;
}
.empty-hint { color: #B5B0A0; font-style: normal; }

.form-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) {
  .form-layout { grid-template-columns: 1fr; }
  .preview-col { order: -1; position: static; }
}

/* ---------- stat grid ---------- */

.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 28px;
}
@media (max-width: 620px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-cell { background: var(--card); padding: 16px 18px; }
.stat-cell .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); margin-bottom: 4px;
}
.stat-cell .v { font-size: 15px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }

/* ---------- data table ---------- */

.data-table {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--card); width: 100%;
}
.table-scroll { overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; }
.data-table th {
  background: #fff; border-bottom: 1px solid var(--line); text-align: left;
  padding: 12px 16px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; white-space: nowrap;
}
/* Signals that a header carries a title= explanation on hover. The dotted rule
 * is the conventional cue, but at --line it was too faint at 11px to invite the
 * hover, so it uses the body ink tone instead. */
.data-table th[title] {
  cursor: help;
  text-decoration: underline dotted var(--ink-soft);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.data-table th[title]:hover { color: var(--ink); text-decoration-color: var(--seal); }
.data-table td { border-bottom: 1px solid var(--line); padding: 12px 16px; font-size: 13.5px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td.name { font-weight: 600; }
.data-table td.muted { color: var(--slate); font-size: 12.5px; }
.judge-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--slate-light); color: var(--slate); padding: 5px 10px; border-radius: 20px;
}
.add-row-btn {
  font-size: 13px; color: var(--seal); padding: 12px 16px; cursor: pointer;
  font-weight: 500; background: none; border: none; text-align: left; width: 100%;
}
.remove-btn { color: var(--ink-soft); cursor: pointer; text-align: center; font-size: 16px; background: none; border: none; }

/* ---------- rubric template picker ---------- */

.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 820px) { .template-grid { grid-template-columns: 1fr; } }
.template-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 18px; cursor: pointer; transition: border-color 0.15s;
  display: block; position: relative;
}
.template-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.template-card:has(input:checked) { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-light); }
.template-card .t-name { font-family: 'Lora', serif; font-size: 15.5px; font-weight: 600; margin: 0 0 4px; }
.template-card .t-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px; min-height: 52px; }
.template-card .t-mini { border-top: 1px dashed var(--line); padding-top: 12px; }

.mini-binary { display: flex; gap: 6px; }
.mini-pill { font-size: 11px; padding: 4px 10px; border-radius: 20px; background: var(--slate-light); color: var(--slate); font-weight: 500; }
.mini-pill.on { background: var(--success-light); color: var(--success); }
.mini-scale { display: flex; gap: 4px; }
.mini-seg { flex: 1; text-align: center; font-size: 10px; padding: 5px 2px; background: var(--slate-light); color: var(--slate); border-radius: 5px; font-weight: 500; }
.mini-seg.on { background: var(--seal); color: #fff; }
.mini-single-point { font-size: 11px; color: var(--ink-soft); }
.mini-single-point .row { display: flex; gap: 4px; }
.mini-single-point .c1, .mini-single-point .c3 { flex: 1; background: var(--paper); border-radius: 4px; padding: 4px 6px; color: #B5B0A0; }
.mini-single-point .c2 { flex: 1.3; background: var(--seal-light); border-radius: 4px; padding: 4px 6px; color: var(--seal); font-weight: 500; text-align: center; }

/* ---------- outcome entry (judge side) ---------- */

.outcome-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; margin-bottom: 22px;
}
/* Django 4.0+ renders RadioSelect as nested <div>s (it used to be <ul><li>),
 * so these target the div structure: .choice-row > div (the widget wrapper)
 * > div (one per choice) > label. */
.choice-row, .scale-row { margin-bottom: 16px; }
.choice-row > div, .scale-row > div {
  display: flex; gap: 12px; width: 100%; flex-wrap: wrap;
}
.choice-row > div > div { flex: 1; min-width: 130px; }
.scale-row > div > div { flex: 1; min-width: 110px; }

.choice-row label, .scale-row label {
  display: block; text-align: center; border: 1.5px solid var(--line);
  border-radius: 8px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; margin: 0; transition: all 0.15s;
}
.choice-row label { padding: 16px; font-size: 14px; }
.scale-row label { padding: 14px 8px; font-size: 13px; }

.choice-row > div > div:has(input:checked) label {
  border-color: var(--success); background: var(--success-light); color: var(--success);
}
.scale-row > div > div:has(input:checked) label {
  border-color: var(--seal); background: var(--seal-light); color: var(--seal);
}
.choice-row input, .scale-row input {
  position: absolute; opacity: 0; width: 0; height: 0;
}

.sp-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.sp-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; border-top: 1px solid var(--line); }
.sp-row:first-child { border-top: none; }
.sp-cell { padding: 12px 14px; font-size: 12.5px; line-height: 1.5; }
.sp-head {
  background: #fff; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft); padding: 10px 14px;
}
.sp-cell.concerns { color: var(--danger); background: var(--danger-light); }
.sp-cell.criteria { color: var(--seal); background: var(--seal-light); font-weight: 500; }
.sp-cell.advanced { color: var(--success); background: var(--success-light); }
.sp-cell textarea { min-height: 60px; font-size: 12.5px; background: rgba(255,255,255,0.7); }
@media (max-width: 700px) { .sp-row { grid-template-columns: 1fr; } }

/* The document line under a credential claim. Deliberately quiet: attaching
   one is optional, and a claim without one is not a lesser claim. */
.claim-doc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: -6px 0 16px; padding: 0 2px 0 14px;
  border-left: 2px solid var(--line);
}
.claim-doc form { margin: 0; display: flex; align-items: center; gap: 8px; }
.claim-doc input[type="file"] { font-size: 12px; max-width: 260px; }

/* A credential already on file: the claim and its document, boxed together and
   tinted, so the fields below are plainly the next one rather than an edit of
   the last. */
.credential-item {
  background: var(--seal-light); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px 2px; margin-bottom: 12px;
}
.credential-item /* Breadcrumb for the curriculum tree. A trail rather than a sidebar: four
   levels of mostly-collapsed tree spends the width on navigation already done,
   and the trail says where you are in one line. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--ink-soft); margin-bottom: 18px;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--seal); }
.crumbs [aria-current] { color: var(--seal); font-weight: 500; }
.crumbs a[aria-current] { border-bottom-color: var(--seal); }
.crumb-sep { color: var(--line); }

/* A price a parent is about to pay, itemised. Tabular figures and a ruled
   total, because the one thing this table has to survive is being checked. */
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.price-table th { text-align: left; font-weight: 500; color: var(--ink); padding: 7px 0; }
.price-table td {
  text-align: right; padding: 7px 0;
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
}
.price-table .tax-row th, .price-table .tax-row td { color: var(--ink-soft); font-size: 13px; }
.price-table .rate { color: var(--ink-soft); font-size: 12px; }
.price-table tfoot th, .price-table tfoot td {
  border-top: 1.5px solid var(--ink); padding-top: 10px;
  font-weight: 700; font-size: 16px; color: var(--ink);
}

/* Add-on checkboxes on the enrolment form. A list rather than a run of
   inline labels, because each one is a purchase and deserves its own line. */
.addon-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.addon-choices li {
  display: flex; align-items: baseline; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; background: #fff;
}
.addon-choices label { margin: 0; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); }

.claim-row { margin-bottom: 10px; }
.credential-item .claim-doc { margin: 0 0 12px; border-left-color: var(--seal); }

/* And the form that makes the next one, fenced off from them. */
.credential-new {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line);
}
.credential-new h3 {
  font-family: 'Lora', serif; font-size: 15px; font-weight: 600; margin: 0 0 14px;
}

/* ---------- Consolidation ---------- */

/* Their results beside yours, rather than above them. Consolidating is a
   comparison, and a comparison that needs scrolling between the two things
   being compared is being done from memory. */
.consolidate-split {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) 1.05fr;
  gap: 26px;
  align-items: start;
}
/* The evaluators' side stays put while you work down your own result. Capped
   to the window and scrolled internally, because a panel taller than the
   viewport cannot stick to anything. */
.source-col {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
.source-col > h2 { margin-bottom: 4px; }
.source-tabs { margin: 10px 0 16px; }
.source-panel .record-card { margin-bottom: 0; }

@media (max-width: 980px) {
  .consolidate-split { grid-template-columns: 1fr; }
  .source-col { position: static; max-height: none; overflow: visible; }
}


/* Copying an evaluator's answer into the school's own result. Styled as a
   secondary affordance throughout: the school is meant to be able to agree
   cheaply, not to feel that agreeing is the expected answer. */
.copy-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px;
}
.copy-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); margin-right: 2px;
}
.copy-btn {
  font-family: inherit; font-size: 12px; line-height: 1;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.copy-btn:hover:not(:disabled) {
  border-color: var(--slate); color: var(--slate); background: var(--slate-light);
}
.copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.copy-btn.strong { border-color: var(--slate); color: var(--slate); margin-left: auto; }

.lock-note {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 7px; margin-left: 8px; vertical-align: middle;
}

.consolidated-row { margin-bottom: 18px; }

/* A copied value lands without a page reload, so it announces itself — silent
   substitution is how a school ends up submitting an answer it never read. */
.just-copied { animation: copied-flash 0.9s ease-out; }
@keyframes copied-flash {
  0% { background-color: var(--seal-light); border-color: var(--seal); }
  100% { background-color: initial; border-color: initial; }
}
@media (prefers-reduced-motion: reduce) {
  .just-copied { animation: none; outline: 2px solid var(--seal); outline-offset: 2px; }
}

.row-flag td { background: var(--danger-light); }
.cell-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

.nav-count {
  display: inline-block; min-width: 17px; padding: 1px 5px; margin-left: 5px;
  border-radius: 9px; background: var(--seal); color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 15px;
  text-align: center; vertical-align: middle;
}

/* ---------- Codex ---------- */

.codex-sheet {
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 44px 46px; position: relative; overflow: hidden;
}
.codex-sheet::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--seal), var(--seal) 8px, transparent 8px, transparent 16px);
}
@media (max-width: 620px) { .codex-sheet { padding: 30px 24px; } }
.codex-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 10px;
}
.codex-sheet h1 { font-family: 'Lora', serif; font-size: 28px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.codex-outcome {
  display: inline-block; font-family: 'Lora', serif; font-size: 20px; font-weight: 600;
  padding: 10px 22px; border-radius: 8px; margin: 22px 0;
  background: var(--success-light); color: var(--success); border: 1px solid var(--success);
}
.codex-outcome.attempted { background: var(--seal-light); color: var(--seal); border-color: var(--seal); }
.codex-narrative {
  font-family: 'Lora', serif; font-size: 16.5px; line-height: 1.75; color: var(--ink);
  border-left: 3px solid var(--seal-light); padding-left: 20px; margin: 0 0 26px;
}
.codex-footer {
  border-top: 1px dashed var(--line); padding-top: 18px; font-size: 12.5px;
  color: var(--ink-soft); line-height: 1.7;
}
.codex-footer strong { color: var(--ink); }

/* ---------- Attestation ---------- */

.att-header {
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: 32px 34px; margin-bottom: 26px;
}
.att-header h1 { font-family: 'Lora', serif; font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.att-header p { font-size: 14px; color: #C7CFC9; margin: 0; line-height: 1.6; }
.att-headline { display: flex; gap: 40px; margin-top: 24px; flex-wrap: wrap; }
.att-headline .n { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 600; }
/* The count is a way in for the school that runs this record, and only for
   them — kept underlined so it reads as one rather than as a bigger number. */
.att-headline .n a {
  color: inherit; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.att-headline .n a:hover { text-decoration-thickness: 2px; }
.att-headline .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--seal-light); margin-bottom: 4px;
}
.bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.bar-label { font-size: 13.5px; width: 190px; flex-shrink: 0; }
.bar-track { flex: 1; height: 22px; background: var(--slate-light); border-radius: 4px; overflow: hidden; min-width: 80px; }
.bar-fill { height: 100%; background: var(--slate); }
.bar-value { font-family: 'IBM Plex Mono', monospace; font-size: 13px; width: 96px; text-align: right; flex-shrink: 0; }
@media (max-width: 620px) { .bar-label { width: 110px; } }
.footnote {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; font-style: italic;
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px;
}

/* ---------- landing ---------- */

.hero { max-width: 780px; margin: 0 auto; padding: 60px 32px 50px; text-align: center; }
.hero .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 16px;
}
.hero h1 {
  font-family: 'Lora', serif; font-weight: 600; font-size: 42px; line-height: 1.25;
  margin: 0 0 18px; letter-spacing: -0.01em;
}
@media (max-width: 620px) { .hero h1 { font-size: 32px; } }
.hero p.lede { font-size: 17px; color: var(--ink-soft); line-height: 1.65; margin: 0 auto 32px; max-width: 560px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Each CTA is its own POST form; the form itself must not add layout. */
.hero-ctas form { margin: 0; }
.hero-alt { margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); }
.hero-alt a { color: var(--seal); }
.hr-full { border: none; border-top: 1px solid var(--line); max-width: 1180px; margin: 0 auto; }

.benefits { max-width: 1080px; margin: 0 auto; padding: 60px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .benefits { grid-template-columns: 1fr; } }
.benefit-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; display: flex; flex-direction: column;
}
.benefit-card .tag-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 12px;
}
.benefit-card h2 { font-family: 'Lora', serif; font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.benefit-card .sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.5; }
.benefit-list { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.benefit-list li { font-size: 14px; line-height: 1.6; padding-left: 20px; position: relative; margin-bottom: 12px; }
.benefit-list li::before { content: "—"; position: absolute; left: 0; color: var(--seal); }
.benefit-card .btn { width: 100%; }

.platform-band { background: var(--ink); color: var(--paper); padding: 60px 32px; }
.platform-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .platform-inner { grid-template-columns: 1fr; } }
.platform-inner h2 { font-family: 'Lora', serif; font-size: 26px; font-weight: 600; margin: 0 0 14px; }
.platform-inner p { font-size: 15px; line-height: 1.7; color: #C7CFC9; margin: 0 0 22px; }
.platform-list { list-style: none; margin: 0; padding: 0; }
.platform-list li { font-size: 14.5px; line-height: 1.8; padding-left: 22px; position: relative; margin-bottom: 4px; }
.platform-list li::before { content: "—"; position: absolute; left: 0; color: var(--seal-light); }

footer.site-footer {
  max-width: 1180px; margin: 0 auto; padding: 30px 32px 50px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-soft); gap: 16px; flex-wrap: wrap;
}

/* ---------- misc ---------- */

.verify-banner {
  display: flex; align-items: flex-start; gap: 12px; background: var(--success-light);
  border: 1px solid var(--success); border-radius: 8px; padding: 14px 16px; margin-bottom: 24px;
}
.verify-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-top: 5px; flex-shrink: 0; }
.verify-banner .vtext strong { display: block; font-size: 13.5px; color: var(--success); margin-bottom: 2px; }
.verify-banner .vtext span { font-size: 12.5px; color: var(--ink-soft); }
.verify-banner.pending { background: var(--seal-light); border-color: var(--seal); }
.verify-banner.pending .dot { background: var(--seal); }
.verify-banner.pending .vtext strong { color: var(--seal); }

.claim-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  margin-bottom: 10px; background: #fff;
}
.claim-label strong { display: block; font-size: 14px; }
.claim-label span { font-size: 12px; color: var(--ink-soft); }

/* A room. The log scrolls inside its own box rather than the page, so the
   compose field stays put while the conversation moves — a chat where the
   input drifts off the bottom of a phone screen is one nobody types in. */
.chat-log {
  max-height: 58vh; overflow-y: auto; padding: 4px 2px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.chat-line { border-left: 2px solid var(--line); padding-left: 12px; }
.chat-line.withdrawn { opacity: 0.55; }
.chat-who { display: flex; align-items: baseline; gap: 8px; }
.chat-who strong { font-size: 13px; }
.chat-who span { font-size: 11.5px; color: var(--ink-soft); }
.chat-body { margin: 3px 0 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-line .btn-ghost { font-size: 11.5px; padding: 0; }

.chat-compose {
  display: flex; gap: 10px; align-items: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.chat-compose textarea { flex: 1 1 auto; margin: 0; resize: vertical; min-height: 44px; }
.chat-compose button { flex-shrink: 0; }

.chat-live { color: var(--success); }
.chat-dead { color: var(--ink-soft); }

/* The consent notice on the registration form. Deliberately not styled like a
   field: it is the one thing on that page a parent agrees to rather than fills
   in, and a checkbox that looks like every other checkbox is one that gets
   ticked without being read. The seal colour is the site's "this is us
   talking", which is the right voice for it. */
.consent-notice {
  border: 1px solid var(--seal); border-left-width: 4px; border-radius: 8px;
  background: var(--seal-light); padding: 16px 18px; margin: 26px 0 20px;
}
.consent-notice h3 {
  margin: 0 0 8px; font-size: 14px; color: var(--seal); letter-spacing: 0;
}
.consent-notice p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.consent-tick {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ink); line-height: 1.5;
}
.consent-tick input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--seal); }
.consent-notice .errorlist { margin-top: 10px; }

/* The register, as a checklist. The tick and the name are one label so the
   whole of the left-hand side is a hit target — a register is taken standing
   up, looking at the room, and not at the screen. The note sits on the same
   line as the tick it belongs to, because a note written on its own page is a
   note nobody writes. */
.register-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
  margin-bottom: 8px; background: #fff;
}
.register-tick {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin: 0; flex: 0 0 34%; min-width: 0;
  font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink);
}
.register-tick input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--seal); }
.register-tick strong { display: block; font-size: 14px; }
.register-tick .fine-print { display: block; }
.register-row .register-note { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; }
.register-row .btn-ghost { flex-shrink: 0; }

@media (max-width: 640px) {
  .register-row { flex-wrap: wrap; }
  .register-tick { flex: 1 1 100%; }
  .register-row .register-note { flex: 1 1 100%; }
}

/* An applicant's credentials, read against what the opening asked for. The
   unmet ones are marked as well as the met: a school deciding between two
   people needs the gap as much as the claim. */
.applicant-credentials { margin: 12px 0 4px; }
.cred-head {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 6px;
}
.cred-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px; margin-bottom: 4px;
  background: #fff; border: 1px solid var(--line); font-size: 13px;
}
.cred-line strong { font-weight: 600; }
.cred-line span:not(.badge) { color: var(--ink-soft); font-size: 12.5px; }
.cred-line.met { border-color: var(--success); }
.cred-line.unmet { border-color: var(--danger); background: var(--danger-light); }
.cred-line a.badge { text-decoration: none; }

.apply-card {
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius); padding: 30px;
}
.apply-card h2 { font-family: 'Lora', serif; font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.apply-card .apply-sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 24px; line-height: 1.6; }

.invite-strip {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 8px 18px 8px 8px;
  margin-bottom: 28px; width: fit-content;
}
.invite-strip .text { font-size: 13px; color: var(--ink-soft); }
.invite-strip .text strong { color: var(--ink); font-weight: 600; }

.block { margin-bottom: 30px; }
.block h2 { font-family: 'Lora', serif; font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.block p { font-size: 14.5px; line-height: 1.65; margin: 0; }
.block p.muted { color: var(--ink-soft); }

.inline-form { display: inline; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.nowrap { white-space: nowrap; }

/* ---------- auth pages ---------- */

.auth-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 36px; max-width: 480px;
}
.auth-card .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 8px;
}
.auth-title { font-family: 'Lora', serif; font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.auth-lede { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }
@media (max-width: 560px) { .auth-card { padding: 26px 22px; } }

/* The way to the *other* auth page. Separated by a rule and set as a sentence
   rather than a button, because a control of equal weight beside the submit
   reads as a second thing that form does — which is how "Create an account"
   next to "Sign in" came to look like it would create the account. */
.auth-switch {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-soft);
}
.auth-switch a { color: var(--seal); font-weight: 500; }

/* ---------- profile control ---------- */

.profile-menu { position: relative; }
.profile-menu summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); font-size: 13px; cursor: pointer; list-style: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:hover { border-color: var(--seal); background: var(--seal-light); }
.profile-menu[open] summary { border-color: var(--seal); background: var(--seal-light); }
.profile-name .last { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.profile-name .first { color: var(--ink-soft); }
.profile-menu .switch-menu { min-width: 200px; }

/* ---------- settings ---------- */

.settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-item {
  display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  text-decoration: none; color: var(--ink-soft); transition: background 0.12s ease;
}
.settings-nav-item:hover { background: var(--slate-light); color: var(--ink); }
.settings-nav-item.current { background: var(--seal-light); color: var(--seal); font-weight: 600; }

/* Messages render outside the page shell so pages that replace {% block body %}
 * still show them. This gives them the shell's horizontal alignment. */
.msg-band { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.msg-band .msg-list { margin: 18px 0 0; }

/* ---------- section menu (user administration) ---------- */

.section-menu {
  display: flex; gap: 4px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
}
.section-menu-item {
  padding: 9px 16px; font-size: 13.5px; text-decoration: none;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.section-menu-item:hover { color: var(--ink); border-bottom-color: var(--line); }
.section-menu-item.current {
  color: var(--seal); font-weight: 600; border-bottom-color: var(--seal);
}
/* Not merely styled grey — it is a <span>, so there is nothing to activate. */
.section-menu-item.disabled {
  color: #B5B0A0; cursor: not-allowed;
}

/* ---------- pagination ---------- */

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 22px; flex-wrap: wrap;
}
.page-link {
  font-size: 13px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 20px; text-decoration: none; color: var(--ink);
  background: var(--card); transition: border-color 0.15s ease, background 0.15s ease;
}
.page-link:hover { border-color: var(--seal); background: var(--seal-light); }
.page-status {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-soft);
}

/* ---------- guided tour ---------- */

/* The dimmer is one element whose *shadow* covers the page, so the hole in it
   is always exactly the anchored element and never drifts out of register with
   it. pointer-events: none because the spotlit control has to stay clickable —
   the tour asks people to press the real buttons. */
.tour-veil {
  position: fixed; z-index: 900; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(30, 42, 38, 0.55);
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.tour-card {
  position: fixed; z-index: 901; width: min(360px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px 16px; box-shadow: 0 18px 40px rgba(30, 42, 38, 0.28);
}
/* Where the card sits before the script runs, and where it stays if the script
   never runs or the anchor is missing. Readable and operable either way, and
   on the left: the glossary panel comes in from the right and sits above this,
   and a card that always turns up in the same corner is one less thing to
   find between steps. */
.tour-card, .tour-card-floating {
  top: auto; bottom: 20px; left: 20px; transform: none;
}
.tour-card[style*="top"] { bottom: auto; }

.tour-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 8px;
}
.tour-title { font-family: 'Lora', serif; font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.tour-body { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions form { margin: 0; }
.tour-spacer { flex: 1; }
/* Padded, not because it needs the room, but because it is 13px of underlined
   text sitting next to two real buttons — at padding: 0 its hit area was 49x17,
   small enough that a near miss reads as a control that does nothing. The
   negative margin keeps the underline aligned with the card's text above it. */
.tour-skip {
  background: none; border: none; cursor: pointer;
  padding: 9px 12px; margin: -9px -12px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: var(--ink-soft);
  text-decoration: underline;
}
.tour-skip:hover { color: var(--ink); }

.tour-pill {
  position: fixed; z-index: 890; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 12px 10px 18px; box-shadow: 0 10px 26px rgba(30, 42, 38, 0.18);
}
.tour-pill form { margin: 0; }
.tour-pill-text { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

@media (max-width: 620px) {
  .tour-pill { left: 12px; right: 12px; border-radius: 12px; }
}

/* ---------- how it works ---------- */

.hiw { max-width: 780px; margin: 0 auto; padding: 56px 32px 40px; }
.hiw h1 { font-family: 'Lora', serif; font-size: 34px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.01em; }
.hiw .lede { font-size: 16.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 8px; }
.hiw-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.hiw-step:first-of-type { border-top: none; }
.hiw-num {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500;
  color: var(--seal); border: 1px solid var(--seal-light); border-radius: 8px;
  height: 34px; display: flex; align-items: center; justify-content: center;
}
.hiw-step h2 { font-family: 'Lora', serif; font-size: 20px; font-weight: 600; margin: 4px 0 8px; }
.hiw-step p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 10px; }
.hiw-who {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate);
}
.hiw-close { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 30px; text-align: center; }
.hiw-close h2 { font-family: 'Lora', serif; font-size: 22px; font-weight: 600; margin: 0 0 16px; }

/* ---------- tour finish ---------- */

.tour-done { max-width: 620px; margin: 0 auto; padding: 70px 32px; text-align: center; }
.tour-done h1 { font-family: 'Lora', serif; font-size: 30px; font-weight: 600; margin: 0 0 14px; }
.tour-done p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 auto 22px; max-width: 480px; }
.tour-done .btn-row { justify-content: center; }

/* ---------- track record ---------- */

/* A fact, set as a fact: no stars, no bar, nothing that invites a reader to
   compare two evaluators on a scale JitGuru has not defined. */
.rehire-line {
  font-size: 13.5px; color: var(--ink); margin: 10px 0 0;
  border-left: 3px solid var(--seal-light); padding-left: 14px; line-height: 1.6;
}
.codex-judge-record {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft);
  margin: 0 0 12px; letter-spacing: 0.02em;
}

/* ---------- founder / about ---------- */

.hiw .body-text { font-size: 15.5px; line-height: 1.75; color: var(--ink); margin: 0 0 18px; }
.hiw .section-heading {
  font-family: 'Lora', serif; font-size: 22px; font-weight: 600;
  margin: 38px 0 14px; padding-top: 26px; border-top: 1px solid var(--line);
}
.pull-quote {
  font-family: 'Lora', serif; font-size: 20px; line-height: 1.5; font-style: italic;
  color: var(--ink); border-left: 3px solid var(--seal);
  padding: 4px 0 4px 22px; margin: 28px 0;
}
.commitment {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 16px;
}
.commitment h3 {
  font-family: 'Lora', serif; font-size: 17px; font-weight: 600; margin: 0 0 8px;
}
.commitment p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- the ask ---------- */

/* Distinct from .sample-strip: that one says "none of this is real", this one
   says the opposite — what you are holding is real, and that is why we are
   asking. Slate rather than brass, so the two are never mistaken. */
.pay-strip { background: var(--slate-light); border-bottom: 1px solid var(--line); }
.pay-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pay-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--slate); flex-shrink: 0;
}
.pay-text { flex: 1; font-size: 13.5px; line-height: 1.5; color: var(--ink); min-width: 240px; }
.pay-inner form { margin: 0; }
.pay-defer {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 12.5px;
  color: var(--ink-soft); text-decoration: underline;
}
.pay-defer:hover { color: var(--ink); }

/* ---- Definitions -------------------------------------------------------
   A term is a word in a sentence that happens to be clickable, so the button
   has to give up everything a button normally looks like — box, background,
   padding, font — and keep only the dotted underline that says "there is more
   here". Anything heavier turns running prose into a row of controls. */
.term {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: help;
  border-bottom: 1px dotted var(--seal);
  text-underline-offset: 2px;
}
.term:hover { border-bottom-style: solid; color: var(--seal); }

/* First mention on a page carries a marker, because "there is more here" has
   to be legible before the click, not after it. A dotted underline alone was
   reported as too quiet to notice. Subsequent mentions keep the underline
   only — the reader has been told. */
.term-first { border-bottom-color: var(--seal); }
.term-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 3px;
  vertical-align: 3px;
  border-radius: 50%;
  background: var(--seal-light); color: var(--seal);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 9px; font-weight: 600; line-height: 1;
}
.term:hover .term-mark { background: var(--seal); color: var(--card); }
.term:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 2px; }

.definition-panel {
  position: fixed;
  top: 0;
  right: 0;
  /* Above the tour's veil (900) and its card (901). A definition opened from
     inside a coach mark is part of that step, and it was arriving dimmed and
     underneath — the one thing on screen the visitor had just asked to read. */
  z-index: 960;
  width: min(360px, 92vw);
  height: 100%;
  overflow-y: auto;
  padding: 22px 24px 28px;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 42px rgba(30, 42, 38, 0.13);
  transform: translateX(100%);
  transition: transform 0.18s ease-out;
}
.definition-panel.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .definition-panel { transition: none; }
}

.definition-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.definition-panel-head h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.definition-close {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.definition-close:hover { color: var(--ink); }

.definition-entry h3 {
  margin: 0 0 10px;
  font-family: 'Lora', serif;
  font-size: 21px;
  font-weight: 600;
}
.definition-entry p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.definition-see-also { font-size: 13px; }

/* ---- Phone ------------------------------------------------------------
   Everything above stops adjusting at 560px, and a 393px phone is the
   commonest way this site is now seen. Nothing was overflowing — the problem
   was proportion: a 112px nav and a hero that filled the screen before the
   reader met a single fact.

   Placed last so it wins over the 620/860 rules it narrows. */
@media (max-width: 620px) {
  /* Source order, so a lone "Postings" sits between the wordmark and the
     account controls instead of being exiled to a row of its own. The 860px
     rule reorders and forces flex-basis:100%, which is right for a school
     admin's seven links and absurd for a signed-out visitor's one. Restoring
     `auto` lets the row fill when it fits and wrap when it genuinely can't. */
  .nav { padding: 13px 16px; gap: 8px 14px; }
  .nav .wordmark { order: 1; font-size: 18px; }
  .nav-links { order: 2; flex-basis: auto; gap: 4px; }
  .nav-account { order: 3; }
  .nav-group { gap: 8px 14px; }

  /* Seven links across two groups is 187px of a 852px screen — a fifth of the
     phone spent on navigation before any content. Behind a control it is 64px,
     the same as every other signed-in state.

     Scoped to `.nav-toggle ~` so it only applies where the toggle was actually
     rendered. Without that, a signed-out visitor's single "Postings" link would
     vanish with no control to bring it back. */
  .nav-toggle-btn {
    display: inline-flex; align-items: center; gap: 9px; order: 2;
    padding: 6px 13px; border: 1px solid var(--line); border-radius: 20px;
    background: var(--card); color: var(--ink-soft);
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; cursor: pointer;
    user-select: none; transition: border-color 0.15s ease, background 0.15s ease;
  }
  .nav-toggle-btn:hover { border-color: var(--seal); background: var(--seal-light); }
  .nav-toggle:focus-visible + .nav-toggle-btn {
    outline: 2px solid var(--seal); outline-offset: 2px;
  }
  .nav-toggle:checked + .nav-toggle-btn {
    border-color: var(--seal); background: var(--seal-light); color: var(--seal);
  }

  .nav-bars, .nav-bars::before, .nav-bars::after {
    display: block; width: 14px; height: 1.5px;
    background: currentColor; border-radius: 1px;
  }
  .nav-bars { position: relative; }
  .nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
  .nav-bars::before { top: -5px; }
  .nav-bars::after { top: 5px; }

  .nav-toggle ~ .nav-links { display: none; }
  .nav-toggle:checked ~ .nav-links {
    display: flex; order: 4; flex-basis: 100%;
    gap: 10px; padding: 12px 2px 4px; margin-top: 10px;
    border-top: 1px solid var(--line);
  }

  /* Inside the Menu panel there is no bar for a dropdown to hang from, and a
     popover over a list of links covers the links. So an open menu takes a
     line of its own and lists its pages in place, indented under the label. */
  .nav-menu[open] { flex-basis: 100%; }
  .nav-menu-panel {
    position: static; min-width: 0; box-shadow: none;
    border: none; border-left: 1.5px solid var(--line); border-radius: 0;
    background: transparent; padding: 2px 0 2px 10px; margin: 6px 0 2px 2px;
  }
  .nav-account { order: 3; }

  /* 32px a side took 16% of a 393px screen before a word was read. */
  .shell { padding: 22px 18px 60px; }
  .shell-mid { padding: 22px 18px 60px; }
  .shell-narrow { padding: 24px 18px 70px; }

  .hero { padding: 34px 18px 30px; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: 0.08em; margin-bottom: 12px; }
  .hero p.lede { font-size: 16px; margin-bottom: 24px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .benefits { padding: 34px 18px; gap: 16px; }
  .benefit-card { padding: 24px 20px; }

  /* A full-height side panel on a phone reads as a page you have to escape.
     Bottom sheet: it covers the word you tapped less, and the close control
     lands under a thumb rather than at the top of a 852px screen. */
  .definition-panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 72vh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -14px 40px rgba(30, 42, 38, 0.18);
    transform: translateY(100%);
  }
  .definition-panel.is-open { transform: translateY(0); }

  /* A signed-in admin carries a school switcher *and* a profile chip, and the
     two together overran a 393px screen — the nav was 187px tall and the chip
     hung off the right edge. The avatar and the school seal identify both
     controls on their own; the names are what does not fit. */
  /* Wordmark + Menu + switcher + profile came to 451px against 361px of
     content width, so the account block wrapped to a second row. Both names go
     and the two seals carry the identification: the school's initials in its
     dot, the admin's in their avatar. Every page's masthead names the school
     anyway, and the switcher lists them in full the moment it is opened. */
  .profile-name { display: none; }
  .school-switch .switch-name { display: none; }
  .school-switch summary { padding: 4px 9px; gap: 5px; }
  .nav-account { gap: 8px; }
}

/* A second, quieter line under the hero lede. The first line says what you
   get; this one says why it is worth anything. */
.hero p.lede-sub {
  font-size: 15px; color: var(--ink-soft); line-height: 1.6;
  margin: -18px auto 32px; max-width: 520px; opacity: 0.9;
}
@media (max-width: 620px) {
  .hero p.lede-sub { font-size: 14px; margin: -14px auto 24px; }
}

/* ---- Inviting someone you already know --------------------------------- */
.invite-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 26px;
}
.invite-panel summary {
  cursor: pointer; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
}
.invite-panel summary::-webkit-details-marker { display: none; }
.invite-panel summary strong { font-size: 14.5px; }
.invite-panel summary span { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.invite-panel[open] summary { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.invite-panel form { margin: 0; }

/* Readonly, and selected on click: this gets pasted into a text message as
   often as an email, so it has to be grabbable in one gesture. */
.invite-link {
  width: 100%; margin-top: 10px; padding: 8px 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  border: 1px solid var(--seal); border-radius: 6px;
  background: #fff; color: var(--ink);
}

/* ---- Which side of the marketplace are you ----------------------------- */
.role-choices { display: grid; gap: 10px; }
.role-choice {
  position: relative; display: grid; gap: 3px;
  padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: border-color 0.15s ease, background 0.15s ease;
}
.role-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.role-choice:hover { border-color: var(--seal); }
.role-choice:has(input:checked) { border-color: var(--seal); background: var(--seal-light); }
.role-choice:focus-within { outline: 2px solid var(--seal); outline-offset: 2px; }
.role-label { font-size: 14.5px; font-weight: 600; }
.role-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }