/*
 * GOAT Tourney — goattourney.com surfaces (handoff 3.0).
 *
 * A separate stylesheet, and separate `goat-*` class names, because locked
 * decision 8 forbids shared chrome between the two brands: reusing `.header`,
 * `.footer` or `.btn` from style.css would inherit the other brand's look,
 * which is the thing being kept apart. Loaded ON TOP of style.css (which
 * base.html always includes) purely for its reset, box-sizing and the 10px root
 * font-size — so 1rem = 10px here as everywhere else in this repo.
 *
 * ⚠ DO NOT NAME THE OTHER BRAND IN THIS FILE. CSS comments are SERVED, and this
 * stylesheet is loaded only on goattourney.com — so a comment here naming the
 * other brand publishes the link that decision 8 exists to avoid, in a file
 * nobody thinks to check. Say "the other brand". A test enforces it.
 *
 * Palette note: --goat-pine MUST match `GOAT_BRAND.primary_color` in
 * shared/brands.py, which is the source of truth for the brand record and for
 * the emails. CSS cannot read it, so it is duplicated here and a test asserts
 * the two agree (tests/test_goat_landing.py).
 */

:root {
  --goat-pine: #0E4A3C;
  --goat-pine-dark: #0a3a2f;
  --goat-ink: #16211d;
  --goat-body: #3d4a45;
  --goat-muted: #6b7a74;
  --goat-paper: #ffffff;
  --goat-wash: #f4f7f5;
  --goat-rule: #dfe7e3;
}

.goat-container {
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------------------------------------------------------------- chrome */

.goat-header {
  background: var(--goat-paper);
  border-bottom: 1px solid var(--goat-rule);
  padding: 1.6rem 0;
}

/* This header scrolls away with the page; it never goes fixed. style.css sizes
   --site-header-h for a header that does, and the sticky table headers rest
   that far below the top of the window, so on this chrome they floated 75px
   down over the first row of the table (a referee could not read the time of
   their first game). Nothing is fixed at the top here, so they rest at 0. Set
   on body, like body.no-site-header in style.css, so it beats both :root
   values there whatever order the sheets load in. */
body {
  --site-header-h: 0px;
}

/* The mark on the left, the nav on the right; both wrap onto their own line on
   a narrow phone rather than hiding behind a menu button (see the note in
   _header_goat.html about why there is no toggler here). */
.goat-header .goat-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.goat-logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

.goat-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.goat-nav-link {
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--goat-body);
  text-decoration: none;
  white-space: nowrap;
}

.goat-nav-link:hover,
.goat-nav-link:focus-visible {
  color: var(--goat-pine);
  text-decoration: underline;
}

/* The signed-in address beside Sign out (#945): quieter than the links, and
   cut short with an ellipsis rather than pushing the nav onto a third line on
   a phone. The full address is in its title. */
.goat-nav-account {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  font-size: 1.4rem;
  color: var(--goat-muted);
}

.goat-nav-who {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goat-logo img {
  width: 4.4rem;
  height: 4.4rem;
}

.goat-logo-word {
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--goat-pine);
}

.goat-footer {
  background: var(--goat-wash);
  border-top: 1px solid var(--goat-rule);
  padding: 3rem 0;
  margin-top: 4rem;
}

.goat-footer-line {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--goat-body);
  margin: 0 0 0.6rem;
}

.goat-footer-muted { color: var(--goat-muted); }
.goat-footer a { color: var(--goat-pine); }

/* The shared auth card (templates/account/*, templates/429.html) is the one
   place a `goat-*` class name cannot reach: those templates belong to both
   brands, and style.css sizes `.auth-logo` for a WIDE wordmark by capping its
   width at 190px. This brand's mark is square, so that cap renders it as a
   190px block. Cap the height instead. Safe to put here because this stylesheet
   loads only on this brand's hosts. */
.auth-logo {
  width: auto;
  max-width: none;
  height: 6.4rem;
}

/* ------------------------------------------------------------------ hero */

.goat-main {
  font-family: var(--ff-manrope, 'Manrope', sans-serif);
  color: var(--goat-body);
  background: var(--goat-paper);
}

/* The hero is the page. Generous vertical space is the design — the whole
   point of leading with a qualifier is that nothing competes with it. */
.goat-hero {
  padding: 9rem 0 7rem;
  text-align: center;
}

.goat-hero-line {
  font-size: 4.4rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--goat-ink);
  margin: 0 0 3.5rem;
}

.goat-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}

.goat-btn {
  display: inline-block;
  min-width: 20rem;
  padding: 1.6rem 3.2rem;
  border-radius: 0.8rem;
  background: var(--goat-pine);
  color: var(--goat-paper);
  font-size: 1.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease-in-out;
}

.goat-btn:hover,
.goat-btn:focus { background: var(--goat-pine-dark); }

.goat-btn-quiet {
  background: transparent;
  color: var(--goat-pine);
  border: 1px solid var(--goat-rule);
  min-width: 0;
  font-size: 1.5rem;
  padding: 1rem 2.4rem;
}

.goat-btn-quiet:hover,
.goat-btn-quiet:focus { background: var(--goat-wash); }

/* --------------------------------------------------------------- content */

.goat-section { padding: 0 0 5rem; }

/* Below the fold. This exists so the page is worth indexing — a six-word hero
   gives a crawler nothing to match a query against, which would defeat the
   whole reason 3.0 is a server-rendered template (OQ7). Narrower than the
   container so it reads as prose rather than as a marketing grid. */
.goat-prose {
  max-width: 62rem;
  text-align: left;
}

.goat-prose h2 {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--goat-ink);
  margin: 4rem 0 1.2rem;
}

.goat-prose h1 {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--goat-ink);
  margin: 4rem 0 1.6rem;
}

.goat-prose p {
  font-size: 1.7rem;
  line-height: 1.65;
  margin: 0 0 1.6rem;
}

.goat-list { margin: 0; }

.goat-list dt {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--goat-ink);
  margin-top: 2rem;
}

.goat-list dd {
  font-size: 1.7rem;
  line-height: 1.65;
  margin: 0.4rem 0 0;
}

.goat-close {
  text-align: center;
  border-top: 1px solid var(--goat-rule);
  padding-top: 5rem;
  margin-top: 3rem;
}

.goat-close-line {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--goat-ink);
  margin: 0 0 3rem;
}

.goat-stub { padding-top: 2rem; }

/* ------------------------------------------------------------------ small */

@media (max-width: 550px) {
  .goat-hero { padding: 6rem 0 5rem; }
  .goat-hero-line { font-size: 3.2rem; }
  .goat-btn { min-width: 0; width: 100%; }
  .goat-close-line { font-size: 2.1rem; }
}

/* ------------------------------------------------------- host a tournament */

/* The "Host a tournament / league" page (org/host_start_react, #891): one name
   box, the dates and a city or ZIP (#903), and an org choice only for a host
   who runs several. */
.gh-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0 0 3rem;
}

.gh-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 0;
  padding: 0;
  margin: 0;
}

.gh-label {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--goat-ink);
}

.gh-input {
  font-size: 1.7rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
  color: var(--goat-ink);
}

.gh-input:focus {
  outline: 2px solid var(--goat-pine);
  outline-offset: 1px;
}

.gh-input-date { max-width: 22rem; }

/* First and last day side by side, wrapping on a phone. */
.gh-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* "Is <org> based in <country>?" (#903): set apart from the step below it. */
.gh-country {
  padding: 1.6rem 2rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
}

.gh-org,
.gh-sport {
  font-size: 1.6rem;
  padding: 0.4rem 0;
}

/* Online check-in's documents (#952): two columns on a desktop so the step
   fits one screen with Yes chosen, one column on a phone. */
.gh-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
@media (max-width: 600px) {
  .gh-doc-grid { grid-template-columns: 1fr; }
}

/* A short aside under a step's controls: smaller than the help text above.
   Named under .goat-prose too, or the prose's own paragraph size wins. */
.gh-note,
.goat-prose .gh-note {
  font-size: 1.4rem;
  color: var(--goat-muted);
  margin: 0;
}

/* The sport (#919, #946) is one type-or-pick dropdown (searchable_select.css),
   sized and lettered like the boxes above it rather than the console's 14px. */
.gh-sport-select { max-width: 30rem; }
.gh-sport-select .ss-input {
  font-size: 1.7rem;
  padding: 1.2rem 3.6rem 1.2rem 1.4rem;
  border-color: var(--goat-rule);
  border-radius: 0.8rem;
  color: var(--goat-ink);
}
.gh-sport-select .ss-input:focus {
  border-color: var(--goat-pine);
  box-shadow: none;
  outline: 2px solid var(--goat-pine);
  outline-offset: 1px;
}
.gh-sport-select .ss-option { font-size: 1.6rem; }

.gh-muted {
  color: var(--goat-muted);
  font-weight: 400;
}

.gh-error {
  color: #a3261b;
  font-size: 1.6rem;
}

/* style.css stretches every input to width: 100%, which put each radio and
   checkbox on a line of its own, centered above its label (#945). Here they
   sit before their label at their own size, on every host step. */
#goat-host-root input[type="radio"],
#goat-host-root input[type="checkbox"] {
  width: auto;
  margin: 0 0.6rem 0 0;
  vertical-align: middle;
}

/* The frame over every question after the first screen (#945): Back, the
   event's name and the step count on one small line, so the question below
   is what the eye lands on. */
.gh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  margin: 3rem 0 1.6rem;
}

.goat-prose .gh-event {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--goat-body);
  margin: 0;
}

.gh-progress {
  font-size: 1.4rem;
  color: var(--goat-muted);
}

.goat-prose .gh-progress-first { margin: -0.8rem 0 2rem; }

.gh-back {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--goat-pine);
  padding: 0;
}

.gh-back:hover,
.gh-back:focus-visible { text-decoration: underline; }

/* The step's question is its heading. goat-prose gives h2 and p a margin on
   top of .gh-form's gap, which left a blank band between the question and
   its help text; inside a step the gap alone spaces things, and the help
   text tucks up under the question. */
.goat-prose .gh-step-title {
  font-size: 2.6rem;
  line-height: 1.25;
  margin: 0;
}

.goat-prose .gh-form p { margin: 0; }

.gh-form > .gh-step-title + .gh-muted { margin-top: -1.2rem; }

.gh-form .goat-btn { align-self: flex-start; border: 0; cursor: pointer; }
.gh-form .goat-btn:disabled { opacity: 0.6; cursor: default; }

/* "Do you have any teams yet?" and the team-list upload after it (#892,
   org/host_start_react/components/TeamsStep.tsx). */
.gh-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.gh-choices button.goat-btn { border: 0; cursor: pointer; }
.gh-choices button.goat-btn:disabled { opacity: 0.6; cursor: default; }

.gh-mapping { gap: 1.2rem; }

.gh-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
}

/* A required column nothing feeds yet: the one question the host must answer. */
.gh-map-needed { background: #fdf3e1; }

.gh-map-label {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--goat-ink);
}

.gh-map-help { font-size: 1.3rem; }

.gh-select { font-size: 1.5rem; padding: 0.8rem 1rem; }

/* The preview can be wide (nine columns), so it scrolls inside the prose column
   rather than pushing the page sideways. */
.gh-preview-wrap {
  overflow-x: auto;
  max-height: 48rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
}

.gh-preview {
  border-collapse: collapse;
  font-size: 1.4rem;
  width: 100%;
}

.gh-preview th,
.gh-preview td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--goat-rule);
  text-align: left;
  white-space: nowrap;
}

.gh-preview th {
  position: sticky;
  top: 0;
  background: var(--goat-wash);
}

.gh-row-bad td { background: #fdecea; }
.gh-row-bad td:last-child { color: #a3261b; white-space: normal; }

@media (max-width: 640px) {
  .gh-map-row { grid-template-columns: 1fr; }
}

/* The quiet button keeps its outline beside a filled one; the rule above
   strips the border every goat-btn in a choice row would otherwise draw. */
.gh-choices button.goat-btn-quiet { border: 1px solid var(--goat-rule); }

/* "Which age groups does your event offer?" (#893,
   org/host_start_react/components/OfferingsStep.tsx): per gender, one row of
   age buttons (#951), with the answer so far beside the gender's name. The
   From/To range row (gh-offering-range) is now DaysStep's league pattern. */
.gh-offering { gap: 1rem; }

.gh-offering-runs {
  margin-left: 1.2rem;
  font-size: 1.5rem;
  font-weight: 400;
}

.gh-offering legend .gh-text-btn { margin-left: 1.2rem; }

.gh-offering-range {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  font-size: 1.5rem;
}

.gh-ages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.gh-age {
  font-size: 1.4rem;
  min-width: 5.2rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.6rem;
  background: var(--goat-paper);
  color: var(--goat-body);
  cursor: pointer;
}

.gh-age:focus-visible {
  outline: 2px solid var(--goat-pine);
  outline-offset: 1px;
}

.gh-age-on {
  background: var(--goat-pine);
  border-color: var(--goat-pine);
  color: var(--goat-paper);
}

/* The share step after the offerings (#894, ShareStep.tsx): the registration
   link in a box the host can select, with a Copy button beside it. */
.gh-share {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.gh-share-url { flex: 1 1 30rem; font-size: 1.5rem; }
.gh-share button.goat-btn { border: 0; cursor: pointer; }

/* "Collect registration payments through our site?" (#897, PaymentsStep.tsx):
   the onboarding agreement in a box the host scrolls to the end of before
   accepting, and Stripe's embedded onboarding below it. */
.gh-agreement {
  max-height: 32rem;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 1.6rem 2rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
  color: var(--goat-ink);
}

.gh-option-off { opacity: 0.55; }

/* "Where is it played?" (#906, VenuesStep.tsx): the venues already picked, each
   with its Rename / Set up fields / Remove, and the picker's grouped results
   (your venues, then nearby) as full-width buttons. */
.gh-venues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gh-venue {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
}

.gh-venue button.goat-btn { border: 1px solid var(--goat-rule); cursor: pointer; }
.gh-venue button.goat-btn[type="submit"] { border: 0; }
.gh-venue button.goat-btn:disabled { opacity: 0.6; cursor: default; }

.gh-venue-text {
  flex: 1 1 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1.6rem;
}

.gh-venue-group {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--goat-muted);
  margin: 0 0 0.6rem;
}

.gh-venue-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  font-size: 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
  background: var(--goat-paper);
  color: var(--goat-ink);
  cursor: pointer;
}

.gh-venue-pick:hover { border-color: var(--goat-pine); }
.gh-venue-pick:focus-visible { outline: 2px solid var(--goat-pine); outline-offset: 1px; }
.gh-venue-pick:disabled { opacity: 0.6; cursor: default; }

/* The fields at a picked venue (#907): its own fields, or the layouts others
   described there, each a full-width row under the venue's name. */
.gh-venue-fields {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* "Which days are games played?" (#910, DaysStep.tsx): the event's span as a
   month-by-month calendar of day toggles, and a league's expanded pattern as
   a list of dates to take holidays out of. The toggles match the age buttons
   (gh-age) so "on" reads the same across the host page. */
.gh-calendar {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.gh-month-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.gh-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 3.6rem);
  gap: 0.4rem;
}

.gh-weekday {
  font-size: 1.2rem;
  text-align: center;
  color: var(--goat-body);
  opacity: 0.7;
}

.gh-day {
  font-size: 1.4rem;
  height: 3.6rem;
  padding: 0;
  border: 1px solid var(--goat-rule);
  border-radius: 0.6rem;
  background: var(--goat-paper);
  color: var(--goat-body);
  cursor: pointer;
}

.gh-day:focus-visible {
  outline: 2px solid var(--goat-pine);
  outline-offset: 1px;
}

.gh-day-on {
  background: var(--goat-pine);
  border-color: var(--goat-pine);
  color: var(--goat-paper);
}

/* A day of the month outside the event's span: shown for the grid's shape,
   not choosable. */
.gh-day-off {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: none;
  opacity: 0.35;
  cursor: default;
}

.gh-input-weeks { width: 8rem; }

/* The pattern row ("starting <date> for <N> weeks / until <date>"): each
   piece one line, its words, radio and input side by side. */
.gh-pattern label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gh-pattern .gh-muted { margin: 0; }

.gh-daylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.5rem;
}

.gh-daylist-remove {
  font-size: 1.3rem;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.6rem;
  background: var(--goat-paper);
  color: var(--goat-body);
  cursor: pointer;
}

/* "When are your fields available?" (#913, HoursStep.tsx): one row per
   pattern, field or date, its name, a from-to pair of times and the
   "Not available" box side by side, wrapping on a phone. */
.gh-hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  font-size: 1.5rem;
}

.gh-hours-row .gh-muted { margin: 0; }

.gh-hours-name {
  min-width: 14rem;
  font-weight: 600;
}

.gh-hours-range {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.gh-input-time { width: 13rem; }

/* The registration fee screen (#898, FeesStep.tsx): a dollar sign or a
   percent sign hugging a short amount box. */
.gh-fee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.6rem;
}

.gh-input-fee { width: 12rem; }
.gh-input-pct { width: 8rem; }
/* An age group's own early-bird prices (#900) sit indented under its fee. */
.gh-fee-step-own { padding-left: 2rem; }
/* The four refund stages (#953): box first, its stage beside it on one line
   even on a phone, the label wrapping within its own column. */
.gh-fee-tiers .gh-hours-row { flex-wrap: nowrap; }
.gh-fee-tiers .gh-input-pct { width: 7rem; padding-left: 1rem; padding-right: 1rem; }
/* Discount codes (#901): each code, its limits, and its uses under it. */
.gh-codes .gh-hours-name { min-width: 20rem; }
.gh-input-code { width: 20rem; text-transform: uppercase; }
.gh-code-list { list-style: none; margin: 0.8rem 0; padding: 0; }
.gh-code-list > li { padding: 0.8rem 0; border-bottom: 1px solid var(--goat-rule); }
.gh-code-off { opacity: 0.6; }
.gh-code-uses { margin: 0.4rem 0 0; padding-left: 2rem; font-size: 1.4rem; }
.gh-code-scope .gh-sport { display: inline-block; margin-right: 1.2rem; }

.gh-hours-closed { font-size: 1.4rem; white-space: nowrap; }

.gh-hours-fields {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.8rem 0 0.8rem 1.6rem;
  border-left: 2px solid var(--goat-rule);
}

.gh-hours-date { display: flex; flex-direction: column; gap: 0.6rem; }

/* The capacity check (#913, CapacityStep.tsx): a pattern whose hours fall
   short is marked, the same warm tint as a column still to choose. */
.gh-capacity li { padding: 0.4rem 0.8rem; border-radius: 0.6rem; }
.gh-capacity-short { background: #fdf3e1; }

/* "Anything else you want to ask each team?" (#916, QuestionsStep.tsx): one
   panel per question, its prompt, kind, choices and help line stacked. */
.gh-question {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 1.2rem 1.6rem 1.6rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
}

.gh-question legend { font-size: 1.4rem; padding: 0 0.4rem; }

.gh-question-required { font-size: 1.5rem; white-space: nowrap; }

/* ------------------------------------------------------- register teams */

/* The registration page a host shares (#894, event_teams/registration_react).
   Built from the host page's gh-* form pieces; gr-* is only what it adds: the
   club and team panels, the logo pickers and the list of teams already in. */
.gr-event {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--goat-pine);
  margin: 0 0 2rem;
}

.gr-section { margin: 0 0 2.4rem; }

.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.4rem 1.8rem;
}

.gr-field-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--goat-ink);
}

.gr-small { font-size: 1.4rem; }
/* One line per age group when their prices differ (#900). */
.gr-prices { margin: 0.4rem 0 0; padding-left: 2rem; }

.gr-team {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
  padding: 1.6rem 1.8rem;
  margin: 0;
}

.gr-team-bad { border-color: #a3261b; background: #fdf6f5; }

.gr-row-errors { margin: 0; padding-left: 2rem; }

.gr-logo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.gr-logo-img {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
  border-radius: 0.6rem;
  background: var(--goat-paper);
  flex: none;
}

.gr-logo-none { background: var(--goat-wash); display: inline-block; }

.gr-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
}

/* A text button: logo changes and row removal are secondary to the form. */
.gr-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.5rem;
  color: var(--goat-pine);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

.gr-teams {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.gr-registered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
}

/* A registered team's optional documents (#922): a quiet text link on its
   own line under the team, opening to one file picker per document. */
.gr-docs-toggle {
  flex-basis: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.4rem;
  color: var(--goat-muted);
  text-decoration: underline;
  cursor: pointer;
}

.gr-docs {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
}

.gr-docs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.gr-registered-name { flex: 1 1 auto; }

.gr-status {
  font-size: 1.3rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--goat-wash);
  color: var(--goat-muted);
  white-space: nowrap;
}

.gr-status-on { background: var(--goat-pine); color: var(--goat-paper); }
/* A payment that failed or was never made (#898): the warm notice tone. */
.gr-status-bad { background: #fdf3e1; color: #8a5300; }

/* "Pay for your teams" (#898): the payer checkout, inside the page's own box. */
.gr-pay {
  padding: 1.6rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
}
/* The discount code box above the checkout (#901). */
.gr-discount { margin: 1.2rem 0; max-width: 32rem; }
.gr-discount .gh-input { text-transform: uppercase; }

.gr-done {
  font-size: 1.6rem;
  padding: 1.2rem 1.4rem;
  border-radius: 0.8rem;
  background: #e8f4ec;
  margin: 0 0 2rem;
}

/* Past the registration deadline (#904): the same box as .gr-done, in the
   warm tone of a notice rather than the green of a success. */
.gr-closed {
  font-size: 1.6rem;
  padding: 1.2rem 1.4rem;
  border-radius: 0.8rem;
  background: #fbf0dc;
  margin: 0 0 2rem;
}

/* "Where does this team play now?" (#915): three answers in a row, then the
   league and its flight when the answer is a league. */
.gr-league {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gr-league-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-size: 1.5rem;
}

.gr-league-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.gr-flight-of {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
}

.gr-number { width: 7rem; }

/* Asked once more before a sitting goes in with a league question skipped:
   the warm tone of .gr-closed, since it is a question, not an error. */
.gr-nudge {
  font-size: 1.5rem;
  padding: 1.2rem 1.4rem;
  border-radius: 0.8rem;
  background: #fbf0dc;
  margin: 0;
}

/* A team's division during the host's review (#921): one panel per team, its
   division's other teams, what it has said, and the three ways to answer. */
.gr-review-team {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border: 1px solid var(--goat-rule);
  border-radius: 0.8rem;
  padding: 1.6rem 1.8rem;
  margin: 0 0 1.6rem;
}

.gr-review-where { font-size: 1.6rem; margin: 0; }

.gr-review-list {
  margin: 0;
  padding-left: 2rem;
  font-size: 1.5rem;
  columns: 2 20rem;
}

.gr-review-said {
  list-style: none;
  margin: 0;
  padding: 1rem 1.2rem;
  border-radius: 0.6rem;
  background: var(--goat-wash);
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gr-review-kind { font-weight: 700; margin-right: 0.6rem; }

.gr-review-textarea { min-height: 7rem; resize: vertical; }

.gr-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

/* "Which levels can teams ask to play at?" (#914, LevelsStep.tsx): one row
   per level, strongest first. A grid, not the wrapping field-hours row, so
   every row has the same columns (number, name, up, down, Remove) and the
   inputs start at the same x on every row, on a phone too: the name column
   is the one that shrinks, so a row never wraps (#950). */
.gh-levels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 1.5rem;
}

.gh-level-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 26rem) auto auto auto;
  /* Leftover width stays to the right; otherwise it widens the buttons. */
  justify-content: start;
  align-items: center;
  gap: 0.6rem;
}

.gh-level-row .gh-muted { margin: 0; }
.gh-level-row .gh-input { width: 100%; min-width: 0; }

.gh-level-arrow {
  min-width: 3.2rem;
  padding: 0.2rem 0.6rem;
}

.gh-level-row .gh-daylist-remove:disabled {
  opacity: 0.35;
  cursor: default;
}

/* A text button for a secondary action that belongs to the list above it,
   not beside Continue: "Add a level" directly under the last row (#950), "Add
   coed age groups" and a gender's "Clear" (#951). Directly in the form, it
   tucks up under the list so it reads as part of it. */
.gh-text-btn {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--goat-pine);
  cursor: pointer;
}

.gh-form > .gh-text-btn { margin-top: -1rem; }

.gh-text-btn:hover,
.gh-text-btn:focus-visible { text-decoration: underline; }