/* ENTRYPOINT — base: reset, body, screen system */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

/* ── PAGE BODY ─────────────────────────────────────────── */
/* padding-top offsets the fixed 56px nav. */
.page-body {
  padding-top: 56px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* A lone section that must fill the remaining height. Without it the form page
   leaves an empty band between the section and the footer on tall screens. */
.fill { flex: 1; }

/* Visible to screen readers only. */
.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;
}

/* ── INTERACTIVE ELEMENT RESET ─────────────────────────── */
/* Several components became <a>/<button> (they used to be <div>/<span> with
   onclick). These resets neutralise browser defaults so nothing looks different. */

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Visible focus on everything actionable. The e2e suite asserts every focusable
   draws this ring in the accent colour. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}