/* =============================================================================
   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 {
  --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; }

/* ── 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; }
.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); }
/* 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 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; }
}