/* =============================================================================
   Charters & Educational Tours — guest waiver page

   Same token contract as `pages-charter-portal/styles.css`, which implements
   the AAG-AET Portal Style Guide. Same names, same meanings, so a change to the
   design system lands on both surfaces.

   **Mobile-first here, unlike the portal.** This is where a parent completes a
   waiver on a phone; the coordinator surface is a desktop working tool.

   From the guide, and easy to get wrong:

   - `--color-action` is DERIVED — the primary darkened until white clears AA —
     so every action colour carries WHITE text. Never put a label on
     `--color-primary`.
   - Brand appears in the HEADER ONLY. §05 is explicit that a sand or lime
     primary must never touch legal copy, so the body stays neutral in all nine
     palettes. That matters more on this page than anywhere else: the terms are
     the one thing that has to be exactly as legible in every brand.
   ========================================================================== */

:root,
:root[data-theme="aet"] {
  --color-primary: #111111;
  --color-accent: #0ea5a5;
  --color-action: #0b6e6e;
  --color-action-contrast: #ffffff;
  --color-header-bg: #111111;
  --color-header-fg: #ffffff;
  --color-header-mark-bg: #ffffff;
  --color-header-mark-fg: #111111;
  --color-link: #0b6e6e;
  --color-focus: #0b6e6e;
  --color-focus-ring: rgb(11 110 110 / 20%);
  --font-head: Barlow;
  --font-body: Barlow;
  --radius: 10px;
  --radius-sm: 8px;
}

:root[data-theme="aag"] {
  --color-primary: #244957;
  --color-accent: #84cc16;
  --color-action: #244957;
  --color-action-contrast: #ffffff;
  --color-header-bg: #244957;
  --color-header-fg: #ffffff;
  --color-header-mark-bg: #ffffff;
  --color-header-mark-fg: #244957;
  --color-link: #244957;
  --color-focus: #244957;
  --color-focus-ring: rgb(36 73 87 / 20%);
  --font-head: Archivo;
  --font-body: "Public Sans";
  --radius: 12px;
  --radius-sm: 8px;
}

:root {
  /* ⚠️ The page is light, so SAY SO. Form controls that the OS draws - a
     select's menu, a date picker, a scrollbar - follow `color-scheme`, not our
     CSS, and with nothing declared they follow the VIEWER'S system setting. On
     a machine in dark mode that put a black menu under a white form. Declaring
     it is the only way to reach the parts of a control we cannot style. */
  color-scheme: light;
  --color-surface: #ffffff;
  --color-page: #f4f6f6;
  --color-surface-sunken: #fafbfb;
  --color-border: #dde2e2;
  --color-border-strong: #c9d1d1;
  --color-text: #16211f;
  --color-text-muted: #5c6666;
  --color-text-faint: #7a8484;
  --color-danger: #a8231c;

  --space: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

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

/* Load-bearing, as in the portal: every state is toggled through the `hidden`
   attribute, and any `display:` rule below would beat the UA stylesheet —
   leaving two states stacked on top of each other. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body), system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 16px minimum on inputs, or iOS Safari zooms the page on focus and the
     layout never recovers. It applies to the body for the same reason. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

.t-title {
  font-family: var(--font-head), system-ui, sans-serif;
  font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em;
}
.t-section {
  font-family: var(--font-head), system-ui, sans-serif;
  font-size: 17px; line-height: 1.25; font-weight: 600;
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  background: var(--color-header-bg);
  color: var(--color-header-fg);
  /* Respects a notch without needing a JS measurement. */
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) var(--space-3);
}
.masthead__inner {
  max-width: 42rem; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-3);
}
.mark {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--color-header-mark-bg); color: var(--color-header-mark-fg);
  font-family: var(--font-head), system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.masthead__name {
  font-family: var(--font-head), system-ui, sans-serif;
  font-size: 15px; font-weight: 600;
}
/* An image wordmark replaces the monogram AND the name — see applyBrand(). */
.masthead__logo { height: 26px; width: auto; max-width: 60vw; display: block; }

/* Pushed to the right of whatever the brand put on the left, so it sits in the
   same place whether the header carries a monogram or a wordmark. */
.masthead__help {
  margin-left: auto;
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-header-fg);
  background: transparent;
  /* Outlined rather than filled: it is not the action on this page, and a solid
     button up here would compete with Submit for the one thing a person is
     meant to press. */
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  /* 44px of target. Anything less is a mis-tap on a moving bus. */
  min-height: 44px;
  padding: 6px 14px;
  cursor: pointer;
}
.masthead__help:focus-visible {
  outline: 2px solid var(--color-header-fg);
  outline-offset: 2px;
}

/* ── Page ─────────────────────────────────────────────────────────────── */

.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4)
           max(var(--space-8), env(safe-area-inset-bottom));
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-4);
}
.panel--notice { text-align: center; }
.panel--notice p { margin-top: var(--space-3); }

.trip {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 14px;
}

.block { margin-top: var(--space-8); }
.block > .t-section + .hint { margin-top: var(--space); }

.hint { color: var(--color-text-muted); font-size: 14px; }
.muted { color: var(--color-text-muted); }
.fineprint {
  margin-top: var(--space-3);
  color: var(--color-text-faint);
  font-size: 12px; text-align: center;
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.fields {
  margin-top: var(--space-3);
  display: grid; gap: var(--space-3);
  /* One column on a phone. Two only where there is genuinely room, which for a
     first/last name pair is about 30rem. */
  grid-template-columns: 1fr;
}
@media (min-width: 30rem) {
  .fields { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.field__hint { font-size: 12px; color: var(--color-text-faint); }
.req {
  font-style: normal; font-weight: 600; font-size: 11px;
  color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em;
}

.input, textarea.input {
  font: inherit;
  /* 16px explicitly, whatever the body does later. Below it, iOS zooms. */
  font-size: 16px;
  width: 100%;
  padding: 11px 12px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
textarea.input { resize: vertical; min-height: 4.5rem; }

/* The native arrow is replaced so the control matches the text fields beside
   it; the MENU is still the browser's, which is the right trade - a hand-built
   listbox owes a keyboard contract that a <select> already has. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
/* Nothing chosen yet reads as a prompt, the way a placeholder does. */
select.input:has(option[value=""]:checked) { color: var(--color-text-faint); }
.input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}
/* A field the server refused, marked on the field rather than only in a message
   at the bottom — on a phone the message can be off-screen. */
.input[aria-invalid="true"] { border-color: var(--color-danger); }

/* ── Subjects ─────────────────────────────────────────────────────────── */

.subject {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}
.subject__name {
  font-family: var(--font-head), system-ui, sans-serif;
  font-weight: 600;
}
.subject__meta { font-size: 13px; color: var(--color-text-muted); }
.subject .fields { margin-top: var(--space-3); }
/* ⚠️ A disabled button has to LOOK disabled.
   There was no rule for it at all, so Submit stayed full brand colour while
   refusing to do anything — which reads as a broken button rather than a shut
   one, and sends people looking for the fault in themselves. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.4);
}

/* WHAT IS LEFT, under the button that is waiting for it.
   Left-aligned now that it is a list — a right-aligned bulleted list has a
   ragged left edge, which is the edge a list is read down. */
.gate-hint {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-muted);
}
.gate-hint__lead { margin: 0 0 var(--space-2); }
.gate-hint__list { margin: 0; padding-left: 1.2em; }
.gate-hint__list li { margin-top: 2px; }

/* The help dialog. `dialog` centres and traps focus for free; only the box
   itself needs describing. */
.dialog {
  width: min(34rem, calc(100vw - var(--space-4) * 2));
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialog__hint { font-size: 15px; color: var(--color-text-muted); }
.dialog__actions { margin-top: var(--space-4); display: flex; justify-content: flex-end; }
.dialog__actions .btn { margin-top: 0; width: auto; }
.help__h {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-head), system-ui, sans-serif;
  font-size: 15px;
}
.help__steps { margin: 0; padding-left: 1.3em; font-size: 15px; }
.help__steps li { margin-top: var(--space-2); }

/* A red asterisk rather than the word, which read as shouting beside every
   label it sat on.

   ⚠️ `aria-hidden` on the mark and the word kept in `.sr-only` beside it. An
   asterisk alone is either skipped or read as "star", so a screen reader would
   be told less than the eye is — and this is the field that matters in an
   emergency. The inputs carry `aria-required` as well, which is what assistive
   tech actually acts on; the mark is only for people who can see it. */
.req {
  color: var(--color-danger);
  font-style: normal;
  font-weight: 700;
  margin-left: 2px;
}
/* The legend, so the mark means something the first time it is met. */
.hint__key { margin-left: var(--space-2); white-space: nowrap; }

/* ── Steps ──────────────────────────────────────────────────────────────
   Three of them, so the bar is a position rather than a progress bar: it says
   which of three you are on, not how nearly done you are. */
.steps {
  display: flex; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: 0; list-style: none;
  font-size: 13px; color: var(--color-text-muted);
}
.steps__item {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 0;
  padding-top: 8px; border-top: 2px solid var(--color-border);
}
.steps__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 999px;
  background: var(--color-border); color: var(--color-text);
  font-size: 11px; font-weight: 700;
}
.steps__item.is-current { color: var(--color-text); border-top-color: var(--color-action); }
.steps__item.is-current .steps__n { background: var(--color-action); color: #fff; }
.steps__item.is-done { border-top-color: var(--color-action); }
.steps__item.is-done .steps__n { background: var(--color-action); color: #fff; }

/* On a phone the labels are what wrap first, so they go and the numbers stay —
   three dots and a highlight still answer "where am I". */
@media (max-width: 30rem) {
  .steps__item { font-size: 0; gap: 0; justify-content: center; }
  .steps__n { font-size: 11px; }
}

/* Back sits left, the forward action right — the same order on every step, so
   the button under your thumb never changes meaning. */
.nav { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.nav .btn--primary { margin-left: auto; }

/* An adult signing for themselves: no card, because there is no list to pick
   them out of. The fields simply continue their own details above. */
.subject--solo {
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
}
.subject--solo .fields { margin-top: 0; }
/* The heading is gone in that case, so the block closes up against the one
   above rather than leaving a gap where a title used to be. */
.block--merged { margin-top: 0; }

/* Already signed: shown, not hidden. A parent needs to see that one child is
   done, or the form looks like it lost them. */
.subject--signed { opacity: 0.7; }
.signed-pill {
  display: inline-block; margin-left: var(--space-2);
  padding: 1px 8px; border-radius: 999px;
  background: #e8f3ec; color: #2e7d4f;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ── Terms ────────────────────────────────────────────────────────────── */

.terms {
  margin-top: var(--space-3);
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  /* Legal copy, so it stays neutral and readable in every palette — never
     brand-coloured. See the note at the top. */
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.65;
}
.terms:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.terms h2 { font-size: 15px; margin: 0 0 var(--space-2); }
.terms h3 { font-size: 14px; margin: var(--space-4) 0 var(--space); }
.terms p, .terms li { margin: 0 0 var(--space-2); }
.terms ul, .terms ol { padding-left: 1.2em; margin: 0 0 var(--space-2); }

.consent {
  margin-top: var(--space-4);
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: 15px;
  /* A tick box on a phone needs a target, and the label is it. */
  cursor: pointer;
}
.consent input {
  flex: 0 0 auto;
  width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--color-action);
}

/* ── Signature ────────────────────────────────────────────────────────── */

.sigpad {
  position: relative;
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}
#sigCanvas {
  display: block;
  width: 100%;
  /* Tall enough to sign in, short enough to leave the submit on screen with a
     keyboard up. */
  height: 160px;
  /* ⚠️ Without this the browser scrolls the page instead of drawing — a signature
     pad that pans is a signature pad that does not work on a phone. */
  touch-action: none;
  cursor: crosshair;
}
/* A line to sign on, so an empty box reads as a place to write rather than a
   rendering failure. */
.sigpad__baseline {
  position: absolute;
  left: 12%; right: 12%; bottom: 34px;
  border-bottom: 1px dashed var(--color-border-strong);
  pointer-events: none;
}
.sigpad--signed .sigpad__baseline { opacity: 0; }
#sigClear {
  margin-top: var(--space-2);
  /* A real target — it sits under a canvas somebody has just been dragging on. */
  min-height: 40px;
}

/* ── Actions ──────────────────────────────────────────────────────────── */

.btn {
  margin-top: var(--space-6);
  width: 100%;
  font: inherit; font-size: 16px; font-weight: 600;
  /* 48px of target. Anything less is a mis-tap on a moving bus. */
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn--primary {
  background: var(--color-action);
  color: var(--color-action-contrast);
}
.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* A secondary action that sits INSIDE the fields rather than under them.
   `.btn` is a full-width block because every other button on this form ends a
   step; this one fills two boxes, so it is sized to its own words and left
   where the boxes are. */
.btn--inline {
  margin-top: 0;
  width: auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 15px;
}
.btn--ghost {
  background: var(--color-surface);
  color: var(--color-action);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { border-color: var(--color-action); }

/* The row it lives in, so the hint sits beside it rather than under it. */
#selfContactRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* iOS renders a bare date input at its own intrinsic width and vertically
   off-centre against the text fields beside it. */
.input--date { min-height: 46px; }

/* A text-link action, as in the coordinator portal — a bordered button beside a
   signature pad competes with the submit. */
.rowact {
  padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--color-link);
  cursor: pointer;
}
.rowact:hover:not([disabled]) { text-decoration: underline; }
.rowact:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 3px; }

.msg { margin-top: var(--space-4); font-size: 14px; color: var(--color-danger); }
.msg:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .input, .btn { transition: border-color 120ms ease, opacity 120ms ease; }
}