/* Tigres Volunteer
   One stylesheet, no framework, no build step. Mobile first.

   Design notes
   - Made for parents on phones at a sunny track. Every text color is at least 7:1 against its
     background (WCAG AAA); large text is at least 4.5:1. Body text is 17px, and every control
     on a parent page is at least 48px tall.
   - Type: Barlow, a grotesk drawn from California road signs (public/fonts, SIL Open Font
     License). Barlow Semi Condensed sets the big numbers: dates, counts, the clock.
   - Color comes from the track. Track red is for actions and laps run. Tiger orange (from the
     club) is a thin accent only and never text. Infield green means done.
   - The one signature element is the track-oval progress ring (.track).
   - Spacing follows a 4px grid (4, 8, 12, 16, 20, 24, 32, 40, 48, 64).
   - Radius follows hierarchy: 20px panels, 16px cards, 12px buttons and inputs, pills for chips.
   - If you add a color, check its contrast first (for example at webaim.org/resources/contrastchecker). */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Text */
  --ink: #000000;           /* all main text: 21:1 on white */
  --ink-2: #55504b;         /* secondary text: 8.0:1 on white, 7.3:1 on --wash */

  /* Surfaces and lines */
  --surface: #ffffff;
  --wash: #f5f4f2;          /* quiet fills: panels, quiet buttons, table heads */
  --wash-2: #ebe8e4;        /* hover on quiet fills (black text only) */
  --line: #e7e3de;          /* hairline dividers */
  --line-strong: #d6d0ca;   /* card outlines */
  --control: #8c857e;       /* input and checkbox borders: 3.6:1 on white */

  /* Brand */
  --track: #9c2315;         /* track red: primary buttons, links, laps run. White on it: 7.9:1 */
  --track-press: #7f1c10;   /* pressed buttons, and red text on --track-tint (8.7:1) */
  --track-tint: #fbebe7;
  --lane: #e2dbd4;          /* laps not run yet, in the progress oval */
  --tiger: #ff5200;         /* tiger orange: thin accents only, never text */
  --tiger-deep: #d94400;    /* booked laps (3.2:1 on --lane) and the keyboard focus ring (4.4:1 on white) */

  /* Status */
  --go: #11552f;            /* infield green: done, confirmed. 8.9:1 on white, 7.7:1 on its tint */
  --go-tint: #e4f2e9;
  --amber: #6b3e00;         /* needs attention: 8.1:1 on its tint */
  --amber-tint: #fff1d6;

  --r-panel: 20px;
  --r-card: 16px;
  --r-control: 12px;
  --tap: 48px;              /* smallest tap target on parent pages */

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.14);

  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numerals: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  color-scheme: light;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem; /* 17px. Sizes use rem so a bigger browser text setting still works. */
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--track); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--track-press); }

h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
h1 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; }        /* 32px */
h2 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }    /* 22px */
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; }           /* 18px */
p { margin: 0 0 12px; }
strong, b { font-weight: 700; }
small, .small { font-size: 0.9375rem; } /* 15px, the smallest body text */
.muted { color: var(--ink-2); }
.num, .tnum { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--tiger-deep); outline-offset: 2px; }

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

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 12px 16px; border-radius: var(--r-control);
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

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

/* ---------- Top bar ---------- */

.topbar {
  background: var(--surface);
  border-top: 3px solid var(--tiger);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 640px; /* lines up with the page column (.page) */
  margin: 0 auto;
  padding: 6px 16px;
  min-height: 64px;
}
@media (min-width: 640px) {
  .topbar__inner { padding: 6px 24px; }
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark img { height: 34px; width: auto; }
.wordmark span {
  padding-left: 12px;
  border-left: 1.5px solid var(--line-strong);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.topbar__link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 14px; border-radius: 999px;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
a.topbar__link:hover { background: var(--wash); color: var(--ink); }
.topbar__role {
  padding: 2px 10px; border-radius: 999px;
  background: var(--wash); color: var(--ink-2); font-size: 0.875rem; font-weight: 600;
}
/* A 40px circle inside a 48px tap target. */
.avatar {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap); padding: 4px;
  border-radius: 50%;
  background: var(--ink); background-clip: content-box;
  color: #fff; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
}
.avatar:hover { color: #fff; background-color: #3a3632; }

.test-banner {
  padding: 8px 16px;
  background: var(--amber-tint);
  color: var(--amber);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}
.test-banner a { color: inherit; }

/* ---------- Page ---------- */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
@media (min-width: 640px) {
  .page { padding: 40px 24px 80px; }
}

.page-head { margin-bottom: 28px; }
.page-head p { margin: 8px 0 0; color: var(--ink-2); }
.back {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: var(--tap);
  margin: -8px 0 8px -12px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.back:hover { background: var(--wash); color: var(--ink); }

.section { margin-top: 40px; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.section__head a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); margin: -12px -8px; padding: 0 8px; border-radius: 8px;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.section__head a:hover { text-decoration: underline; }
.section-title { margin-bottom: 16px; }
.section-intro { margin: -6px 0 16px; color: var(--ink-2); }
.footnote { margin: 16px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.section-title--spaced { margin-top: 40px; }
.page-actions { margin-bottom: 32px; }
.meta-row { margin-bottom: 24px; }
/* Two sections side by side on wide screens (dashboard) */
.columns { display: grid; gap: 40px; }
@media (min-width: 1100px) {
  .columns { grid-template-columns: 1fr 1fr; }
}

.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  background: var(--track);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:hover { background: var(--track-press); color: #fff; }
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--wash); color: var(--ink-2); border-color: transparent; cursor: not-allowed; transform: none;
}

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--wash); color: var(--ink); }
.btn--quiet { background: var(--wash); color: var(--ink); }
.btn--quiet:hover { background: var(--wash-2); color: var(--ink); }
.btn--danger { background: var(--surface); color: var(--track-press); border-color: var(--line-strong); }
.btn--danger:hover { background: var(--track-tint); color: var(--track-press); border-color: var(--track-press); }
.btn--go { background: var(--go); }
.btn--go:hover { background: #0b4022; }
.btn--text {
  padding: 0 12px;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--control);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.btn--text:hover { background: var(--wash); color: var(--ink); text-decoration-color: var(--ink); }
.btn--light { background: var(--surface); color: var(--ink); }
.btn--light:hover { background: var(--wash); color: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 56px; padding: 0 24px; font-size: 1.125rem; border-radius: 14px; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; border-radius: 10px; }
@media (pointer: coarse) {
  .btn--sm { min-height: var(--tap); }
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-row > form { display: contents; }
.btn-row--top { margin-top: 16px; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--track);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* A bar that stays at the bottom of the screen on phones for the main action. */
.action-bar {
  position: sticky;
  bottom: 0;
  margin: 24px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
}

/* ---------- Forms ---------- */

.field { display: block; margin-bottom: 20px; }
.field__label { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 600; }
.field__hint { display: block; margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.field__error { display: block; margin-top: 6px; color: var(--track-press); font-size: 0.9375rem; font-weight: 600; }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1.5px solid var(--control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem; /* 17px: iPhone won't zoom in */
  font-weight: 500;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-2); opacity: 1; }
.textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink);
}
.input[aria-invalid="true"], .field--error .input, .field--error .select, .field--error .textarea { border-color: var(--track-press); }
.input:disabled { background: var(--wash); border-color: var(--line-strong); color: var(--ink-2); }
.input[type="file"] { padding: 10px; }
.input--short { max-width: 160px; }
.select--sm { min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: 0.9375rem; }
@media (pointer: coarse) {
  .select--sm { min-height: var(--tap); }
}
/* A one-line form: a select and a Save button */
.inline-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.inline-form .select { width: auto; max-width: 260px; }

.check {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; cursor: pointer;
}
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--track); }
.check strong { display: block; font-weight: 600; }
.check small { display: block; color: var(--ink-2); }

.form-grid { display: grid; gap: 0 16px; }
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Big tappable choices: pick your family, pick your name, reports */
.choices { display: grid; gap: 12px; }
.choices > form { margin: 0; }
.choice {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.choice:hover { border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow-card); }
.choice__main { flex: 1; min-width: 0; }
.choice__title { display: block; font-weight: 600; }
.choice__sub { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.9375rem; }
.choice__cta { display: block; margin-top: 8px; color: var(--track); font-weight: 600; }
.choice > svg { flex: none; color: var(--ink-2); }

/* ---------- Notices and toasts ---------- */

.toast {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  animation: toast-in 240ms ease-out;
}
.toast svg { flex: none; margin-top: 2px; }
.toast--error { background: var(--track); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

.notice {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--wash);
  color: var(--ink);
}
.notice--amber { background: var(--amber-tint); }
.notice--green { background: var(--go-tint); }
.notice > :last-child { margin-bottom: 0; }
.notice .btn { margin-top: 12px; }
.notice--split { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.notice--split .btn, .notice--split form { margin: 0; }

/* ---------- Chips ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.chip svg { flex: none; }
.chip--green { background: var(--go-tint); color: var(--go); }
.chip--amber { background: var(--amber-tint); color: var(--amber); }
.chip--red { background: var(--track-tint); color: var(--track-press); }
.chip--black { background: var(--ink); color: #fff; }
.chip--live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}
.chip--red.chip--live::before { background: var(--tiger-deep); }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- Signature: track progress ---------- */

/* Drawn in components.tsx: a stadium-shaped track with lane lines. Red laps are shifts done;
   a thin orange line marks laps that are booked; light laps are still to go. */
.track { width: 100%; height: auto; overflow: visible; }
.track__infield { fill: var(--surface); }
.track__lane { fill: none; stroke: var(--lane); stroke-width: 18; }
.track__done { fill: none; stroke: var(--track); stroke-width: 18; }
.track__lines { fill: none; stroke: #fff; stroke-width: 0.8; opacity: 0.75; }
.track__booked { fill: none; stroke: var(--tiger-deep); stroke-width: 4; }
.track__splits { fill: none; stroke: var(--surface); stroke-width: 18.5; }
.track__finish { stroke: var(--ink); stroke-width: 3; }
.track__count { font: 600 48px var(--font-numerals); fill: var(--ink); letter-spacing: -0.02em; }
.track__of { font: 600 24px var(--font-numerals); fill: var(--ink-2); }
.track__label { font: 600 13px var(--font); fill: var(--ink-2); }
/* Every shift done: the infield turns grass green. */
.track--complete .track__infield { fill: var(--go-tint); }

/* ---------- Progress card ---------- */

.progress-card {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px 18px;
  border-radius: var(--r-panel);
  background: var(--wash);
}
.progress-card .track__splits { stroke: var(--wash); }
.progress-card__copy h2 { font-size: 1.375rem; }
.progress-card__copy p { margin: 6px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
@media (min-width: 480px) {
  .progress-card { grid-template-columns: 196px 1fr; gap: 28px; padding: 24px 28px; }
}

/* ---------- Season role card (the family's job for the season) ---------- */

.role-card {
  display: block;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
}
.role-card__label { margin: 0 0 4px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; }
.role-card h2 { font-size: 1.5rem; }
.role-card__when { margin: 6px 0 0; font-weight: 600; }
.role-card__meta { margin: 6px 0 0; color: var(--ink-2); }
.role-card--cta { background: var(--track); border-color: var(--track); color: #fff; }
.role-card--cta:hover { color: #fff; background: var(--track-press); border-color: var(--track-press); }
.role-card--cta h2, .role-card--cta .role-card__meta { color: #fff; }
.role-card--cta .btn { margin-top: 16px; }
.role-card--quiet { background: var(--wash); border-color: var(--wash); }

/* ---------- Tickets (a shift you signed up for) ---------- */

.ticket {
  display: grid;
  grid-template-columns: 64px 1fr;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.ticket__when {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 14px 4px;
  background: var(--wash);
  color: var(--ink);
  text-align: center;
  line-height: 1;
}
.ticket__dow, .ticket__month { font-size: 0.875rem; font-weight: 600; }
.ticket__dow { color: var(--ink-2); }
.ticket__day { font-family: var(--font-numerals); font-size: 1.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ticket__body { min-width: 0; padding: 14px 16px 16px; }
.ticket__body h3 { font-size: 1.125rem; }
.ticket__meta { margin: 2px 0 0; color: var(--ink-2); }
.ticket__status { margin: 10px 0 0; }
.ticket__actions { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 12px; }
.ticket__actions > form { display: contents; }
.ticket__actions .btn--secondary { padding: 0 16px; }
.ticket__hint {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-control);
  background: var(--track-tint);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.ticket__hint svg { flex: none; margin-top: 1px; color: var(--track); }
/* Check-in is open now, or you're on the field: the date block turns track red. */
.ticket--now .ticket__when, .ticket--live .ticket__when { background: var(--track); color: #fff; }
.ticket--now .ticket__dow, .ticket--live .ticket__dow { color: #fff; }
.ticket--live { border-color: var(--track); box-shadow: 0 0 0 1px var(--track); }
.on-field { margin-bottom: 16px; }

/* ---------- Lists ---------- */

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list > li { border-bottom: 1px solid var(--line); }
.list__row {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
}
a.list__row:hover .list__title { text-decoration: underline; text-underline-offset: 3px; }
.list__row > svg { flex: none; color: var(--ink-2); }
.list__main { flex: 1; min-width: 0; }
.list__title { display: block; font-weight: 600; color: var(--ink); }
.list__sub { display: block; color: var(--ink-2); font-size: 0.9375rem; }
.list__end { display: flex; align-items: center; gap: 10px; flex: none; }
.list__end > svg { color: var(--ink-2); }
.list__end form { display: contents; }
.list__row--wrap { flex-wrap: wrap; }
.list__row--wrap .list__main { min-width: 200px; }
.list__row--compact { min-height: 56px; }
.list__aside { color: var(--ink-2); font-weight: 500; }

/* Sent messages: a list row that opens to show the message */
.message > summary {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 0;
  list-style: none; cursor: pointer;
}
.message > summary::-webkit-details-marker { display: none; }
.message > summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355504b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 160ms ease;
}
.message[open] > summary::after { transform: rotate(180deg); }
.message[open] { padding-bottom: 16px; }
.message__body { margin: 12px 0 0; white-space: pre-wrap; }
.message > .message__body { margin: 0; max-width: 68ch; }

/* "6 open" at the end of a meet row */
.open-count { color: var(--go); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.open-count--full { color: var(--ink-2); }

/* Meet date block used in meet lists */
.datebox {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 52px; height: 56px; flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  line-height: 1;
}
.datebox__month { font-size: 0.8125rem; font-weight: 700; color: var(--track); }
.datebox__day { font-family: var(--font-numerals); font-size: 1.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Open spots shown as dots: filled = taken, ring = open */
.spots { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.spots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.spots i.open { background: transparent; box-shadow: inset 0 0 0 2px var(--go); }
.spots__text { margin-left: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--go); font-variant-numeric: tabular-nums; }
.spots__text--full { color: var(--ink-2); }

/* Role rows on a meet page and the season-role picker */
.roles { border-top: 1px solid var(--line); }
.role { padding: 20px 0; border-bottom: 1px solid var(--line); }
.role__time { margin: 0 0 2px; color: var(--ink); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.role__name { font-size: 1.1875rem; }
.role__desc { margin: 4px 0 0; color: var(--ink-2); }
.role__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px;
}
.role__foot form { margin: 0; }
.role__note { margin: 8px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
/* A role you or your family are on */
.role--mine {
  margin: 0 -16px;
  padding: 20px 16px;
  border-bottom-color: transparent;
  background: var(--go-tint);
}
@media (min-width: 640px) {
  .role--mine { margin: 0 -20px; padding: 20px; border-radius: var(--r-card); }
}
.role--mine .role__desc { color: var(--ink); }
.role--mine .spots__text { color: var(--go); }

/* ---------- Panels ---------- */

.panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 20px;
  background: var(--surface);
}
@media (min-width: 640px) {
  .panel { padding: 24px; }
}
.panel--wash { border-color: transparent; background: var(--wash); }
.panel + .panel { margin-top: 16px; }
.panel > :last-child { margin-bottom: 0; }
.panel--add { margin-top: 16px; }
.panel--intro { margin-bottom: 32px; }
.import-help { margin-bottom: 16px; }
.panel__head--tight { margin-bottom: 8px; }
.panel > h2:first-child, .panel > h3:first-child { margin-bottom: 16px; }
.panel > h2:first-child + p, .panel > h3:first-child + p { margin-top: -8px; color: var(--ink-2); }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.panel__head h2, .panel__head h3 { margin: 0; }

/* ---------- Empty states ---------- */

.empty {
  padding: 32px 24px;
  border-radius: var(--r-panel);
  background: var(--wash);
  text-align: center;
  color: var(--ink-2);
}
.empty svg { margin: 0 auto 12px; color: var(--ink-2); }
.empty h3 { margin-bottom: 4px; color: var(--ink); }
.empty p { margin: 0 auto; max-width: 36ch; }
.empty .btn { margin-top: 16px; }

/* ---------- Signed-out home ---------- */

/* Words first, then an example of a family's season pass. Red here means only "tap me":
   the Sign in button is the one filled red thing on the page. */
.hero { display: grid; gap: 40px; padding: 8px 0 0; }
.hero h1 { font-size: 2.5rem; line-height: 1.02; letter-spacing: -0.03em; max-width: 13ch; }
.hero__copy > p:first-of-type { margin: 14px 0 24px; max-width: 34ch; color: var(--ink-2); font-size: 1.125rem; }
.hero .footnote { margin-top: 16px; max-width: 34ch; }

.pass { margin: 0; }
.nowrap { white-space: nowrap; }
.pass__card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px -16px rgba(0, 0, 0, 0.18);
}
.pass__label { margin: 0; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.pass__role { margin: 2px 0 6px; font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.pass__meta { margin: 0; color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.pass figcaption { margin-top: 12px; color: var(--ink-2); font-size: 0.875rem; text-align: center; }
/* The small ring reads its own count; hide the tiny "/4" so it isn't cramped. */
.pass__ring .track__count { font-size: 44px; }

/* A real sequence, so numbered, but set as type: no fill, no box, nothing that looks tappable. */
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 28px; }
.steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.steps__n {
  grid-row: span 2;
  font-family: var(--font-numerals);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-2);
}
.steps h3 { margin: 2px 0 0; font-size: 1.125rem; }
.steps p { margin: 4px 0 0; color: var(--ink-2); }

@media (min-width: 900px) {
  .page:has(> .hero) { max-width: 1040px; }
  body:has(.hero) .topbar__inner { max-width: 1040px; }
  .hero { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding-top: 40px; }
  .hero h1 { font-size: 3.75rem; }
  .hero__copy > p:first-of-type { font-size: 1.25rem; }
  .pass { max-width: 470px; justify-self: end; width: 100%; }
  .pass__card { grid-template-columns: 168px 1fr; gap: 28px; padding: 32px 28px; }
  .pass__role { font-size: 1.875rem; }
  /* Three columns, each opened by a thin rule, so the steps read left to right. */
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 88px; }
  .steps li { display: block; padding-top: 18px; border-top: 2px solid var(--ink); }
  .steps__n { display: block; margin-bottom: 10px; }
}

/* ---------- Check-in (after scanning the QR code) and other one-message pages ---------- */

.checkin { padding-top: 8px; text-align: center; }
.checkin__icon {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--ink);
}
.checkin__icon--done {
  background: var(--go);
  color: #fff;
  animation: pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.checkin h1 { font-size: 1.875rem; }
.checkin__lead { margin: 12px auto 28px; max-width: 32ch; color: var(--ink-2); font-size: 1.0625rem; }
.checkin__lead strong { color: var(--ink); }
.checkin .choices, .checkin .notice { text-align: left; }
.checkin__action { margin-top: 28px; text-align: left; }
.checkin__done { margin-top: 20px; }
.checkin .stack { margin-top: 4px; }
.checkin .stack .small { margin: 0; color: var(--ink-2); }
.checkin__after { margin: 20px auto 0; max-width: 34ch; color: var(--ink-2); font-size: 0.9375rem; }
.clock {
  color: var(--ink);
  font-family: var(--font-numerals);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.clock-label { margin-top: 8px; color: var(--ink-2); font-weight: 600; }
.shift-panel { text-align: left; }
.shift-panel h2 { margin: 2px 0 0; }
.shift-panel h2 + p { margin: 4px 0 0; color: var(--ink-2); }
.shift-panel .btn, .shift-panel .notice, .shift-panel > form { margin-top: 16px; }

/* ---------- Staff shell ---------- */

.topbar--staff .topbar__inner { max-width: 1320px; padding: 6px 16px; }
@media (min-width: 960px) {
  .topbar--staff .topbar__inner { padding: 6px 28px; }
}
.shell { display: block; }
.staff-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: none;
}
.staff-nav::-webkit-scrollbar { display: none; }
.staff-nav__group { display: contents; }
.staff-nav__label { display: none; }
.staff-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.staff-nav a:hover { background: var(--wash); color: var(--ink); }
.staff-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.staff-nav svg { width: 18px; height: 18px; }
.staff-main { min-width: 0; }
.staff-main .page { max-width: 1040px; }

@media (min-width: 960px) {
  .shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    max-width: 1320px;
    margin: 0 auto;
  }
  .staff-nav {
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 24px 16px;
    border-bottom: 0;
  }
  .staff-nav__label {
    display: block;
    margin: 20px 12px 6px;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .staff-nav__group:first-child .staff-nav__label { margin-top: 0; }
  .staff-nav a { min-height: 40px; border-radius: 10px; padding: 0 12px; }
  .staff-main { min-height: calc(100vh - 68px); border-left: 1px solid var(--line); }
  .staff-nav a[aria-current="page"] { background: var(--wash); color: var(--ink); }
  .staff-nav a[aria-current="page"] svg { color: var(--track); }
  .staff-main .page { padding: 40px 40px 80px; }
}

/* ---------- Staff: stats ---------- */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  display: block;
  padding: 16px 18px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
a.stat:hover { border-color: var(--ink); color: inherit; box-shadow: var(--shadow-card); }
.stat__value {
  display: block;
  color: var(--ink);
  font-family: var(--font-numerals);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.stat--alert .stat__value { color: var(--track); }

/* Fill bar for a role or meet: confirmed (solid), signed up (striped), open (light) */
.fill { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--lane); min-width: 80px; }
.fill__confirmed { background: var(--go); }
.fill__signed { background: repeating-linear-gradient(135deg, var(--go) 0 2.5px, #a9cfb8 2.5px 5px); }
.fill-list { list-style: none; margin: 0; padding: 0; }
.fill-list li {
  display: grid;
  grid-template-columns: 1fr minmax(140px, 40%);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.fill-list li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.fill-list__end { display: flex; align-items: center; gap: 12px; }
.fill-list__end .fill { flex: 1; }
.fill-list__count { min-width: 56px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fill-list__count--open { color: var(--go); }
.fill-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.fill-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fill-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 999px; }
.fill-legend .is-confirmed { background: var(--go); }
.fill-legend .is-signed { background: repeating-linear-gradient(135deg, var(--go) 0 2.5px, #a9cfb8 2.5px 5px); }
.fill-legend .is-open { background: var(--lane); }

/* Message preview */
.email-preview__label { margin: 0 0 4px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; }
.email-preview h3 { font-size: 1.25rem; }
.send-row { margin-top: 16px; }

/* Roster: one panel per role */
.roster-role__fill { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 140px; }
.roster-role__fill .fill { width: 140px; }
.roster-role__empty { margin: 0; }

/* Meet panels on the dashboard */
.meet-panel__title { display: flex; gap: 14px; align-items: center; min-width: 0; }
.meet-panel__title h3 { font-size: 1.1875rem; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table th {
  padding: 12px 16px;
  background: var(--wash);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.table td.num, .table th.num { text-align: right; }
.table tr.is-muted td { color: var(--ink-2); }
.table a { color: var(--ink); font-weight: 600; text-decoration-color: var(--control); }
.table a:hover { color: var(--track); text-decoration-color: currentColor; }
/* On touch screens, give links in tables and lists a taller tap area without moving anything. */
@media (pointer: coarse) {
  .table td > a, a.list__title { display: inline-block; padding: 14px 0; margin: -14px 0; }
}
.table .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.table .actions form { display: contents; }
.table-wrap > .muted { margin: 0; padding: 14px 16px; }

@media (max-width: 640px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .table--stack tr:first-child { border-top: 0; }
  .table--stack td { padding: 2px 0; border: 0; text-align: left !important; }
  .table--stack td:first-child { margin-bottom: 4px; }
  .table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); font-weight: 600; }
  .table--stack .actions { justify-content: flex-start; margin-top: 8px; }
}

/* Toolbar above lists: search, filters, actions */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .input { flex: 1 1 220px; width: auto; }
.search { position: relative; flex: 1 1 240px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.search .input { padding-left: 44px; width: 100%; }
.search--block { margin-bottom: 12px; }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--r-control); background: var(--wash); }
.segmented a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px; border-radius: 9px;
  color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
@media (pointer: coarse) {
  .segmented a { min-height: var(--tap); }
}

details.disclosure { border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 0 16px; background: var(--surface); }
details.disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px;
  padding: 10px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355504b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 160ms ease;
}
details.disclosure[open] > summary::after { transform: rotate(180deg); }
details.disclosure[open] { padding-bottom: 20px; }
details.disclosure[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.disclosure__sub { display: block; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; }
.disclosure__danger { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

.codeblock {
  display: block; padding: 12px 14px; border-radius: var(--r-control);
  background: var(--wash); color: var(--ink);
  font: 0.9375rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

/* ---------- Kiosk (full screen tablet page) ---------- */

.kiosk {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface);
}
.kiosk__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 24px;
  border-top: 3px solid var(--tiger);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.kiosk__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kiosk__brand img { height: 34px; width: auto; flex: none; }
.kiosk__bar h1 {
  padding-left: 14px;
  border-left: 1.5px solid var(--line-strong);
  font-size: 1.125rem; font-weight: 600; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kiosk__body { display: grid; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 900px) {
  .kiosk__body { grid-template-columns: minmax(440px, 1.1fr) 1fr; }
}
.kiosk__scan {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
  text-align: center;
}
.kiosk__scan h2 { font-size: 2.75rem; line-height: 1.05; letter-spacing: -0.025em; }
.kiosk__scan p { margin: 10px 0 28px; color: var(--ink-2); font-size: 1.25rem; }
.kiosk__qr {
  width: min(58vh, 440px, 86vw);
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.kiosk__qr svg { width: 100%; height: auto; }
.kiosk__timer { width: min(58vh, 440px, 86vw); margin-top: 20px; }
.kiosk__timer-bar { height: 6px; border-radius: 999px; background: var(--lane); overflow: hidden; }
.kiosk__timer-bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; }
.kiosk__timer-text { margin-top: 10px; color: var(--ink-2); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kiosk__side {
  padding: 28px 24px;
  border-top: 1px solid var(--line);
  background: var(--wash);
  overflow-y: auto;
}
@media (min-width: 900px) {
  .kiosk__side { max-height: calc(100vh - 68px); border-top: 0; border-left: 1px solid var(--line); }
}
.kiosk__side h2 { display: flex; align-items: center; gap: 10px; }
.kiosk__side .toast { margin-bottom: 20px; }
.kiosk-count {
  display: inline-grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--font-numerals); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.kiosk-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.kiosk-list li {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--r-card);
  background: var(--surface);
}
.kiosk-list .initials {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em;
}
.kiosk-list .initials--waiting { background: var(--wash-2); color: var(--ink); }
.kiosk-list .who { flex: 1; min-width: 0; }
.kiosk-list .who strong { display: block; font-weight: 600; color: var(--ink); }
.kiosk-list .who span { color: var(--ink-2); font-size: 0.9375rem; }
.kiosk-list form { margin: 0; }
.kiosk-list .kiosk-list__empty { min-height: 0; padding: 4px 0; background: none; color: var(--ink-2); }
.kiosk-empty { margin: 12px 0 0; color: var(--ink-2); }
.kiosk-search { margin-top: 36px; }
.kiosk-search h2 { font-size: 1.1875rem; }
.kiosk-search > p { margin: 4px 0 12px; color: var(--ink-2); font-size: 0.9375rem; }
.kiosk-search [hidden] { display: none !important; }

/* ---------- Footer ---------- */

.footer {
  max-width: 640px; margin: 0 auto; padding: 24px 16px 40px;
  color: var(--ink-2); font-size: 0.9375rem; text-align: center;
}
.footer p { margin: 0; }
.footer a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; border-radius: 8px;
  color: var(--ink); font-weight: 600;
}

/* ---------- Print (reports) ---------- */

@media print {
  .topbar, .staff-nav, .test-banner, .btn, .toolbar, .action-bar, .skip-link { display: none !important; }
  .shell { display: block; }
  body { font-size: 12px; }
}