/* The park's public registration page — mobile first.
   The logo, the New-to / Already-part-of split and the registration list fit
   an iPhone (390×844) with no vertical scroll in the empty state and with
   three open registrations; the registration assistant sits open directly
   below with its header at the fold, and is the first thing that may need a
   scroll (TEA-549, Matt 2026-08-27). Every size below is a token. */

.reg-public-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-4);
  position: relative;
  z-index: 1;
}

.reg-public-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.reg-public-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
}

.reg-public-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.reg-public-subtitle {
  font-size: var(--text-md);
  color: var(--color-text);
  margin: var(--space-1) 0 0;
}

/* TEA-824: the way back for someone who has signed in before, and nothing
   louder than that. It used to be a full-width button, which read as the
   page's primary door to every family who had been part of the park for
   years and had no Team Captain account at all. It keeps its 44px of touch
   target as a link; the league cards' Register buttons are the door. */
.reg-public-help-line,
.reg-public-signin-line {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.reg-public-help-line a,
.reg-public-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent);
  text-decoration: none;
}

.reg-public-help-line a:hover,
.reg-public-signin:hover {
  text-decoration: underline;
}

/* Before registration opens: one line for a returning family, one for a new
   one, in place of "Pick a league below" over an empty list. */
.reg-public-doors {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: var(--text-md);
  color: var(--color-text);
}

.reg-public-door-who {
  font-weight: var(--weight-semibold);
}

.reg-public-door {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent);
  text-decoration: none;
}

.reg-public-door:hover {
  text-decoration: underline;
}

.reg-public-website {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.reg-public-website a,
.reg-public-footer a {
  color: var(--color-accent);
  text-decoration: none;
}

.reg-public-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

.reg-public-sport-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-3) 0 var(--space-2);
}

.reg-public-sport:first-of-type .reg-public-sport-name {
  margin-top: 0;
}

.reg-public-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* One row per card at every width: the detail on the left, Register on the
   right, so three cards stack inside a phone screen. */
.reg-public-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  min-width: 0;
  border-radius: var(--radius-lg);
}

.reg-public-card-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

.reg-public-league-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}

.reg-public-who {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.reg-public-age-rule,
.reg-public-grade-rule {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.reg-public-sport > .reg-public-age-rule,
.reg-public-sport > .reg-public-grade-rule {
  margin: 0 0 var(--space-2);
}

/* Once for the page, straight above the first sport heading (which has no
   top margin). No margin of its own: a three-card park must still show the
   assistant's heading above the fold on a 390x844 phone
   (tests/mobile-viewport-fit.test.js), and this line is what it can spare. */
.reg-public-age-rule-page {
  margin: 0;
}

.reg-public-meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}

.reg-public-status {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.reg-public-register {
  flex-shrink: 0;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
  text-align: center;
}

.reg-public-empty {
  text-align: center;
  padding: var(--space-3) 0;
  color: var(--color-text);
  font-size: var(--text-md);
}

/* The registration assistant: an open card at the foot of the list, no
   launcher. The heading is the thing that has to be visible at the fold. */
.reg-public-assistant {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
}

.reg-public-assistant-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}

.reg-public-assistant .text-muted {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.reg-public-ask-error {
  color: var(--color-error);
}

.reg-public-assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.reg-public-assistant-chips .btn {
  white-space: normal;
  text-align: left;
  min-height: 44px;
}

.reg-public-assistant-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reg-public-assistant-thread-open {
  margin-top: var(--space-3);
  max-height: 50vh;
  overflow-y: auto;
}

.reg-public-assistant-msg {
  max-width: 92%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.reg-public-assistant-msg p {
  margin: 0;
  white-space: pre-line;
}

.reg-public-assistant-msg .btn {
  margin-top: var(--space-2);
}

.reg-public-assistant-msg-user {
  align-self: flex-end;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.reg-public-assistant-msg-assistant {
  align-self: flex-start;
  background: var(--color-info-subtle);
  color: var(--color-text);
}

.reg-public-assistant-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.reg-public-assistant-form .form-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font-size: var(--text-md);
}

.reg-public-assistant-form .btn {
  flex-shrink: 0;
  min-height: 44px;
  min-width: 64px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
}

.reg-public-assistant-note {
  margin: var(--space-2) 0 0;
}

.reg-public-footer {
  text-align: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.reg-public-footer p {
  margin: 0;
}

@media (min-width: 640px) {
  .reg-public-page {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }

  .reg-public-logo {
    width: 64px;
    height: 64px;
  }

  .reg-public-assistant {
    padding: var(--space-4);
  }
}

/* Camps & Clinics (TEA-1163): sport sections, a camp per block, a session per
   checkbox row. Tokens only; the rows are 44px touch targets. */
.reg-camps {
  margin-top: var(--space-6);
}

.reg-camps-sport .collapsible-body {
  padding: var(--space-3) var(--space-4);
}

.reg-camp + .reg-camp {
  margin-top: var(--space-6);
}

.reg-camp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.reg-camp-head-text {
  min-width: 0;
}

.reg-camp-sessions {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.reg-camp-session {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
}

.reg-camp-session.is-disabled {
  cursor: default;
  color: var(--color-text-muted);
}

.reg-camp-session input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.reg-camp-session-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.reg-camp-dates {
  font-weight: 600;
}

.reg-camp-session-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.reg-camp-price {
  font-variant-numeric: tabular-nums;
}

.reg-camps-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  background: var(--color-bg);
}

/* A time range never breaks between "3:00" and "PM" (L5). */
.reg-camp-time {
  white-space: nowrap;
}

/* A camp's description (2026-10-19): the first paragraph, then the rest
   behind a native disclosure. Text only; no box. */
.reg-camp-about {
  margin-top: var(--space-2);
  max-width: 65ch;
  /* Smaller than the camp's 14px title, never the inherited 16px body (walk
     of 2026-10-19). */
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}

.reg-camp-about p {
  margin: 0 0 var(--space-2);
}

.reg-camp-more summary {
  cursor: pointer;
  color: var(--color-accent);
  padding: var(--space-1) 0;
}

@media (hover: none) and (pointer: coarse) {
  .reg-camp-more summary {
    padding: var(--space-3) 0;
  }
}