/* ============================================================================
   BASE — reset, typography, forms.
   Every value comes from tokens.css. No hex codes here.  [KICKOFF 6.2]
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ------------------------------------------------------------- scrollbars
   The browser's default bar is a slab of grey furniture that belongs to
   Chrome rather than to the school's software: it is wide, it is the same
   colour on every page, and in the dark theme it stays light unless the
   browser is told otherwise. This is the same bar in the product's own ink,
   narrow enough to stop competing with the content beside it.

   Two syntaxes, because they are two standards and browsers each know one:
   `scrollbar-width`/`scrollbar-color` is the CSS standard that Firefox
   implements, `::-webkit-scrollbar` is what Chrome, Edge and Safari read. A
   browser that knows neither keeps its own bar, which is a fine outcome.

   Everything that scrolls gets it, not only the page — a wide table and the
   sidebar have the same furniture as the window. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--radius-full);
  /* A transparent border with a clipped background is what makes the thumb
     sit inside the gutter rather than filling it edge to edge. */
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* The sidebar is dark in both themes, so a bar mixed for a light page
   disappears against it. */
.sidebar { scrollbar-color: var(--sidebar-ink) transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-ink); background-clip: content-box; }

body {
  margin: 0;
  background-color: var(--bg);
  /* The ambient light of the dark theme — none in the light one. Fixed, so it
     stays put behind a long page instead of scrolling off the top. */
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-semi); color: var(--heading); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; display: block; }

/* Keyboard focus must always be visible. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--selection-bg); }

/* ---- utility ---- */
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.strong { font-weight: var(--weight-semi); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.stack { display: grid; gap: var(--space-4); }
.stack-sm { display: grid; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.numeric { font-variant-numeric: tabular-nums; }

/* Announced by screen readers, invisible on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   FORMS
   Labels sit above inputs, always. Errors say what to do, never just "invalid".
   ============================================================================ */

.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }

label, .label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.label-hint { font-weight: var(--weight-normal); color: var(--ink-muted); }

/* Every kind of box a person types or picks in.
   Listed by type rather than as a bare `input` so that checkboxes, radios and
   file inputs keep their own shapes — and listed COMPLETELY, because a type
   left off this line gets no height at all: an unstyled month picker came out
   21px tall, well under the 44px a thumb needs, and looked like a bug in the
   page rather than a missing selector. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="month"], input[type="week"], input[type="time"],
input[type="datetime-local"], input[type="url"],
input[type="tel"], input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);   /* 16px stops iOS zooming on focus */
  color: var(--ink);
  background-color: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

input:hover, select:hover, textarea:hover { border-color: var(--secondary-edge); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

input::placeholder, textarea::placeholder { color: var(--ink-muted); }

input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  cursor: not-allowed;
}

textarea { resize: vertical; min-height: 96px; line-height: var(--leading-normal); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7d95' stroke-width='1.6' stroke-linecap='round' d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* Error state — the field itself, plus a message that tells you the fix. */
input.is-error, select.is-error, textarea.is-error { border-color: var(--danger); }
input.is-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

.field-error {
  font-size: var(--text-sm);
  color: var(--danger-ink);
  min-height: 1.2em;
}

/* Radios and checkboxes get the full touch target, not just the box. */
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--text-base);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.choice:hover { border-color: var(--soft-edge-hover); background: var(--primary-soft); }
.choice input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
legend { padding: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-soft); }


/* Two small helpers for the pages that end up on paper. A control somebody
   types into is useless in a printout; the value they typed is the whole
   point. So a page can carry both and let the medium choose.
   The print half of this pair lives in layout.css, under @media print. */
.print-only { display: none; }
/* The paper heading the shell adds to every page — the school, what this is,
   when it was printed. Screen never shows it; layout.css brings it back in print. */
.print-head { display: none; }