/* Nursery Watch stylesheet, shared by the clickable prototype and the app's pages.
   Layout: phone-first app shell. A sticky top bar, one scrolling column, and four tabs
   fixed to the bottom of the screen that move into the top bar on wide screens. */

:root {
  /* Colour: a calm canal green-teal accent on soft sage neutrals. */
  --bg: #f3f6f4;
  --surface: #ffffff;
  --surface-2: #e9efec;
  --ink: #17231f;
  --ink-muted: #56645e;
  --line: #d5ded9;
  --line-strong: #b4c2bb;
  --accent: #0b6e69;
  --accent-ink: #ffffff;
  --accent-soft: #dcefeb;
  --new: #3346b8;
  --new-soft: #e3e7fb;
  --signal: #8a5a00;
  --signal-soft: #fbefd5;
  --ok: #2e7d32;
  --ok-soft: #e1f2e5;
  --danger: #b42318;
  --danger-ink: #ffffff;
  --danger-soft: #fce4e2;
  --shadow: 0 1px 2px rgb(23 35 31 / 0.06), 0 6px 18px rgb(23 35 31 / 0.06);
  color-scheme: light;

  /* Type: a characterful face for names and headings, a very legible face for reading. */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.8125rem;  /* 13px */
  --text-sm: 0.9375rem;  /* 15px */
  --text-md: 1.0625rem;  /* 17px, body */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.875rem;  /* 30px */

  /* Shape and rhythm */
  --radius-card: 14px;
  --radius-btn: 10px;
  --tap: 44px;           /* minimum touch target */
  --tabbar-h: 64px;
  --col: 42rem;          /* reading column */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1513;
    --surface: #17201d;
    --surface-2: #1f2a26;
    --ink: #e6eeea;
    --ink-muted: #a3b2ac;
    --line: #2c3833;
    --line-strong: #44544d;
    --accent: #5cc8b5;
    --accent-ink: #062b26;
    --accent-soft: #143a34;
    --new: #a9b4ff;
    --new-soft: #1e2550;
    --signal: #f4c46b;
    --signal-soft: #3a2c0e;
    --ok: #8fd69b;
    --ok-soft: #16301c;
    --danger: #ff8a80;
    --danger-ink: #2a0b09;
    --danger-soft: #3d1715;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1513;
  --surface: #17201d;
  --surface-2: #1f2a26;
  --ink: #e6eeea;
  --ink-muted: #a3b2ac;
  --line: #2c3833;
  --line-strong: #44544d;
  --accent: #5cc8b5;
  --accent-ink: #062b26;
  --accent-soft: #143a34;
  --new: #a9b4ff;
  --new-soft: #1e2550;
  --signal: #f4c46b;
  --signal-soft: #3a2c0e;
  --ok: #8fd69b;
  --ok-soft: #16301c;
  --danger: #ff8a80;
  --danger-ink: #2a0b09;
  --danger-soft: #3d1715;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
}

/* Paints the strip above the sticky header on phones with a notch. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--surface);
}

a { color: var(--accent); }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }
svg { flex: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── App shell ────────────────────────────────────────────────────────── */

.app-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-header__inner {
  max-width: var(--col);
  margin: 0 auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__mark { width: 30px; height: 30px; }
.brand__mark .mark-bg { fill: var(--accent); }
.brand__mark .mark-hole { fill: var(--surface); }
.brand__mark .mark-line { fill: none; stroke: var(--surface); }

.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.theme-toggle svg { width: 20px; height: 20px; }

/* Bottom tab bar on phones. It spans the full width, so it carries the side gutter. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
}

.tabbar__list {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tab {
  min-height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.tab__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
}
.tab__icon svg { width: 24px; height: 24px; }

.tab[aria-current="page"] { color: var(--accent); }
.tab[aria-current="page"] .tab__icon { background: var(--accent-soft); }

.app-main {
  max-width: var(--col);
  margin: 0 auto;
  padding-block: 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 32px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 20px;
}

/* Wide screens: the tabs sit in the top bar and the bottom bar goes away. */
@media (min-width: 56rem) {
  :root { --col: 48rem; }
  .tabbar {
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }
  .tabbar__list { display: flex; gap: 4px; }
  .tab {
    min-height: var(--tap);
    flex-direction: row;
    gap: 6px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    font-size: var(--text-sm);
  }
  .tab__icon { width: auto; height: auto; background: none; }
  .tab__icon svg { width: 20px; height: 20px; }
  .tab[aria-current="page"] { background: var(--accent-soft); }
  .tab[aria-current="page"] .tab__icon { background: none; }
  .app-main { padding-block: 24px 56px; }
}

/* ── Type ─────────────────────────────────────────────────────────────── */

.view { display: grid; gap: 20px; min-width: 0; }
.view__head { display: grid; gap: 4px; }

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.page-title:focus { outline: none; }

.page-sub { color: var(--ink-muted); font-size: var(--text-sm); }

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hint { color: var(--ink-muted); font-size: var(--text-sm); }
.note { color: var(--ink-muted); font-size: var(--text-sm); padding-inline: 4px; }
.num { font-variant-numeric: tabular-nums; }

.sample-note {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn svg { width: 20px; height: 20px; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn--quiet { background: var(--surface-2); color: var(--ink); }
.btn--danger { background: var(--danger); color: var(--danger-ink); }
.btn--danger-outline { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn--block { width: 100%; }
.btn--small { min-height: var(--tap); padding: 0 12px; font-size: var(--text-sm); }

@media (hover: hover) {
  .btn--primary:hover { filter: brightness(1.08); }
  .btn--secondary:hover, .btn--quiet:hover { border-color: var(--line-strong); }
}

/* ── Next steps ───────────────────────────────────────────────────────── */

.next-steps {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
}

.next-steps__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.next-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.next-steps__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
}
.next-steps__icon svg { width: 20px; height: 20px; }

.next-steps__text { display: grid; gap: 2px; min-width: 0; }
.next-steps__text strong { font-weight: 700; }
.next-steps__meta { color: var(--ink-muted); font-size: var(--text-sm); }
.next-steps__link { font-size: var(--text-sm); font-weight: 700; }

/* ── Filters and segmented controls ───────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.filter .count { color: inherit; opacity: 0.75; font-variant-numeric: tabular-nums; }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.segmented button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* Longer option sets: a 2 x 2 grid on phones, one row when there is room. */
.segmented--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 14px;
}
.segmented--grid button { min-height: var(--tap); border-radius: 11px; }
@media (min-width: 34rem) {
  .segmented--grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  min-width: 0;
}

.provider { display: grid; gap: 12px; padding: 16px; }

.provider__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
}

.provider__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  min-width: 0;
}
.provider__name a { color: var(--ink); text-decoration: none; }
.provider__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.provider__dist { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.provider__where { grid-column: 1 / -1; color: var(--ink-muted); font-size: var(--text-sm); }

.provider__ofsted {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.provider__ofsted b { color: var(--ink); }

.provider__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.provider__actions .btn { padding-inline: 10px; }

/* ── Chips, peg-label room tags, quotes ──────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
}
.chip svg { width: 14px; height: 14px; }
.chip--new { background: var(--new-soft); color: var(--new); }
.chip--signal { background: var(--signal-soft); color: var(--signal); }
.chip--ok { background: var(--ok-soft); color: var(--ok); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--muted { color: var(--ink-muted); }

/* Room details styled like the name label on a nursery coat peg. */
.room-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 2px 12px 2px 8px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 6px 999px 999px 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
}
.room-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--ink-muted);
}

.quote {
  margin: 0;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}
.quote--signal { background: var(--signal-soft); }
.quote--new { background: var(--new-soft); }

.quote__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.quote--signal .quote__label { color: var(--signal); }
.quote--new .quote__label { color: var(--new); }

.quote blockquote { margin: 0; font-size: var(--text-md); }
.quote figcaption { color: var(--ink-muted); font-size: var(--text-xs); }
.quote__trust { font-weight: 700; color: var(--ink); }

/* ── My list ──────────────────────────────────────────────────────────── */

.group { display: grid; gap: 10px; }
.group__head { display: flex; align-items: baseline; gap: 8px; }
.group__head .count { color: var(--ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.track { display: grid; gap: 10px; padding: 14px 16px; }
.track__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.track__name { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; min-width: 0; }
.track__name a { color: var(--ink); text-decoration: none; }
.track__meta { color: var(--ink-muted); font-size: var(--text-sm); }
.track__due { font-weight: 700; font-size: var(--text-sm); }
.track__due--soon { color: var(--signal); }
.track__due--late { color: var(--danger); }
.track__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 20px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-card);
}

/* ── Dates timeline (a real sequence, so it is ordered by date) ──────── */

.timeline { margin: 0; padding: 0; list-style: none; }

.timeline__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 4px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 0; }

.timeline__date { font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.timeline__body { display: grid; gap: 6px; min-width: 0; }
.timeline__title { margin: 0; font-size: var(--text-md); font-weight: 700; }
.timeline__item--past { color: var(--ink-muted); }
.timeline__item--past .timeline__title { font-weight: 400; }
.timeline__item--next .timeline__date { color: var(--accent); }

@media (max-width: 26rem) {
  .timeline__item { grid-template-columns: 1fr; }
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.form-card { display: grid; gap: 18px; padding: 18px 16px; }

.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { padding: 0; font-weight: 700; }
.field > legend { margin-bottom: 6px; }
.optional { color: var(--ink-muted); font-weight: 400; }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.textarea { min-height: 96px; padding: 10px 12px; resize: vertical; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--tap);
  cursor: pointer;
}
.switch-row__text { display: grid; gap: 2px; }

.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 0.15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }

.divider { height: 1px; background: var(--line); border: 0; margin: 2px 0; }

.danger-zone { display: grid; gap: 12px; padding: 18px 16px; }

.confirm {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--danger-soft);
}
.confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Provider page ────────────────────────────────────────────────────── */

.back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  font-weight: 700;
  text-decoration: none;
}
.back svg { width: 20px; height: 20px; }

.detail { display: grid; gap: 14px; min-width: 0; }
.detail__head { display: grid; gap: 8px; }
.detail__card { display: grid; gap: 12px; padding: 16px; }

.call-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}
.phone { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; user-select: all; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--ink-muted); font-size: var(--text-sm); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.reportcard { margin: 0; padding: 0; list-style: none; display: grid; }
.reportcard li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--text-sm);
}
.reportcard li:last-child { border-bottom: 0; }
.grade { font-weight: 700; }
.grade--exceptional, .grade--strong { color: var(--ok); }
.grade--attention { color: var(--signal); }
.grade--urgent { color: var(--danger); }

/* ── Toast ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 40;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: var(--shadow);
}
@media (min-width: 56rem) {
  .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ═══ Milestone 2: the app's own pages ═══════════════════════════════════
   Added for the server-rendered pages: real forms (radio buttons, checkboxes,
   errors next to fields), banners, POST buttons and the simple shell of pages
   without tabs. Everything above is shared with the prototype and stays as it is. */

/* ── Shell ────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

.app-main:focus { outline: none; }

/* Pages without the tab bar don't need room for it at the bottom. */
.app-main--simple { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }

.site-footer { padding-inline: 4px; color: var(--ink-muted); font-size: var(--text-sm); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: inherit;
}

.lead { font-size: var(--text-lg); line-height: 1.45; }
.stack { display: grid; gap: 12px; min-width: 0; }

/* ── Banners ──────────────────────────────────────────────────────────── */

.banner {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
/* A one-line banner is a paragraph with links inside: as a grid, each link would be
   torn out of the sentence onto its own line. */
p.banner { display: block; }
p.banner--flash { display: flex; align-items: center; gap: 8px; }
.banner svg { width: 20px; height: 20px; }
.banner--ok { background: var(--ok-soft); border-color: transparent; }
.banner--ok svg { color: var(--ok); }
.banner--warn { background: var(--signal-soft); border-color: transparent; }
.banner--danger { background: var(--danger-soft); border-color: transparent; }

/* ── Forms ────────────────────────────────────────────────────────────── */

.error-summary {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 3px solid var(--danger);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.error-summary__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.error-summary ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.error-summary a { color: var(--danger); font-weight: 700; }

.field__error { color: var(--danger); font-size: var(--text-sm); font-weight: 700; }
.field--error > .input { border: 2px solid var(--danger); }
.field--error .choices { border-color: var(--danger); }

select.input { padding-right: 8px; }
textarea.input { line-height: 1.4; }

/* Radio buttons drawn as a segmented control. The real inputs stay in the page (and
   keep keyboard focus, arrow keys and screen-reader support); only their look moves
   to the labels. */
.choices {
  position: relative;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.choices input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.choices label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: 11px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.choices input:checked + label { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.choices input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) {
  .choices input:checked + label { border-color: CanvasText; }
}

/* A plain checkbox with its words beside it, for consent and confirmations. */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tap);
  cursor: pointer;
}
.check-row input {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

/* The honeypot field: off screen for people, still there for bots. */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tracker-form { display: grid; gap: 14px; }

/* ── Buttons that are forms ───────────────────────────────────────────── */

.button-form { display: flex; margin: 0; min-width: 0; }
.button-form > .btn { flex: 1 1 auto; }
.provider__actions > :only-child { grid-column: 1 / -1; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Every tap target is at least 44px: the theme switch and the "Next steps" links too. */
.segmented button { min-height: var(--tap); }
.next-steps__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* ── Places ───────────────────────────────────────────────────────────── */

a.filter { text-decoration: none; }
.filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.quote--danger { background: var(--danger-soft); }
.quote--danger .quote__label { color: var(--danger); }

.link-list { margin: 0; padding: 0; list-style: none; display: grid; }
.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
}

/* ── Privacy notice ───────────────────────────────────────────────────── */

.prose { gap: 10px; }
.prose h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }