/* S4 — /register (src/register/index.njk): fighter registration form, photo field, waiver &
   terms (summary, full-text panel, agreement, signatures, parent/guardian), alerts, success
   and closed views. Loaded after the shared CSS and waiver.css (the waiver text's own styles).
   Layout: one column up to 1099px (the form becomes a panel from 700px), two columns from 1100px. */

.register { position: relative; isolation: isolate; overflow: clip; }

/* Ghost slash behind the heading, like the home hero's. */
.register__slash {
  position: absolute;
  z-index: -1;
  top: 8px;
  left: 28%;
  width: 138%;
  max-width: none;
  height: auto;
  aspect-ratio: 1000 / 236;
  fill: var(--red);
  opacity: 0.12;
  pointer-events: none;
}
@media (min-width: 1100px) {
  .register__slash { top: 13px; left: 13.9%; width: 76.4%; opacity: 0.09; }
}

/* ================= Form view ================= */
.register__grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 36px; }
.register__intro { display: flex; flex-direction: column; gap: 16px; }
.register__title { font-size: min(56px, 14.4vw); }
.register__lead { font-size: 17px; line-height: 1.5; color: var(--text-muted); }
.register__questions { font-size: 14px; line-height: 1.45; color: var(--text-subtle); }
.register__questions a { color: var(--text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.register__questions--side { display: none; }
.register__questions--inline { text-align: center; }

.event-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 20px;
  background: var(--panel);
  border-top: 3px solid var(--red);
}
.event-card__name { font-size: 28px; letter-spacing: -0.03em; }
.event-card__meta { font-size: 15px; line-height: 1.4; color: var(--text-muted); }

.register-form { display: flex; flex-direction: column; gap: 26px; margin-top: 32px; }
.register-form__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.register-form__fields { display: flex; flex-direction: column; gap: 26px; }

@media (min-width: 700px) {
  .register__grid { padding-block: 56px 72px; }
  .register__title { font-size: 72px; }
  .register__lead { max-width: 620px; font-size: 19px; }
  .event-card { gap: 10px; padding: 24px; }
  .event-card__name { font-size: 34px; }
  .event-card__meta { font-size: 16px; }
  .register-form { gap: 28px; padding: 44px; background: var(--panel); }
  .register-form__fields { gap: 28px; }
  .register__questions--inline { text-align: left; }
}
@media (min-width: 1100px) {
  .register__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; padding-block: 72px 96px; }
  .register__intro { grid-column: span 5; gap: 24px; padding-right: 24px; }
  /* Sized so "REGISTER" (5.1em) fits the five-column intro at every width. */
  .register__title { font-size: clamp(64px, 8.2vw - 22px, 96px); }
  .event-card { margin-top: 8px; }
  .register-form { grid-column: 7 / span 6; margin-top: 0; }
  .register__questions--side { display: block; font-size: 15px; }
  .register__questions--inline { display: none; }
}

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__head { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; font-weight: 700; line-height: 1.15; }
.field__optional { font-weight: 400; color: var(--text-subtle); }
.field__hint { font-size: 14px; line-height: 1.45; color: var(--text-subtle); }
.field__hint--detail { color: var(--text-muted); }
.field__hint:empty { display: none; }

.field__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--black);
  font-size: 16px; /* 16px stops iOS zooming in on focus */
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
}
.field__input:focus-visible { outline: 3px solid var(--error-border); outline-offset: 2px; }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--error-border); }
.field__input--select {
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0C' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.field__unit-wrap { position: relative; }
.field__input--unit { padding-right: 48px; }
.field__unit {
  position: absolute;
  top: 0;
  right: 16px;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #55555F; /* on the light input */
  pointer-events: none;
}

/* Error message under a field: alert-circle icon + text. */
.register-form .field-error:not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
.register-form .field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Event dropdown (two or more events open): a card like the single-event one. */
.field--card { padding: 20px; background: var(--panel); border-top: 3px solid var(--red); }

/* Side-by-side fields. Age + Weight always pair up; the other rows do from 700px. */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.field-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
@media (min-width: 700px) {
  .field-row,
  .field-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
  .field--card { background: var(--black); }
}
/* Paired fields share three rows (label + hint, control, error), so the two inputs line up
   even when only one has a hint or an error. Without subgrid they just top-align. */
@supports (grid-template-rows: subgrid) {
  .field-row--pair { grid-template-rows: repeat(3, auto); }
  .field-row--pair > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
  .field-row--pair > .field > .field__head { align-self: end; }
  .field-row--pair > .field > :not(.field__head) { margin-top: 8px; }
  @media (min-width: 700px) {
    .field-row { grid-template-rows: repeat(3, auto); }
    .field-row > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
    .field-row > .field > .field__head { align-self: end; }
    .field-row > .field > :not(.field__head) { margin-top: 8px; }
  }
}

/* ---------- Photo field ---------- */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 152px;
  padding: 20px;
  border: 2px dashed var(--line-button);
  background: var(--panel);
  text-align: center;
  cursor: pointer;
}
.dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__title { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.dropzone__sub { font-size: 13px; line-height: 1.4; color: var(--text-subtle); }
.dropzone.is-over { border-color: var(--text); }
.dropzone.is-invalid { border-color: var(--error-border); background: var(--error-tint); }
.dropzone.is-invalid .dropzone__sub { color: var(--text-muted); }
/* Keyboard focus is on the hidden file input: ring the whole area. */
.dropzone:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
@supports selector(:has(a)) {
  .dropzone:focus-within { outline: none; }
  .dropzone:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
}

/* One icon and one title at a time: "Add photo" for touch, "Drag a photo here…" with a
   mouse, then "Reading photo…" / "Choose a different photo" by data-state (register.js). */
.dropzone__icon--pointer,
.dropzone__title--pointer,
.dropzone__title--retry,
.dropzone__title--busy { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dropzone__icon--touch,
  .dropzone__title--touch { display: none; }
  .dropzone__icon--pointer,
  .dropzone__title--pointer { display: block; }
}
.dropzone[data-state] .dropzone__title--touch,
.dropzone[data-state] .dropzone__title--pointer { display: none; }
.dropzone[data-state="retry"] .dropzone__title--retry,
.dropzone[data-state="busy"] .dropzone__title--busy { display: block; }
.dropzone[data-state="busy"] { cursor: progress; }

.photo-card {
  display: flex;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
}
.photo-card__img { flex: none; width: 112px; height: 140px; object-fit: cover; background: var(--placeholder); }
.photo-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.photo-card__name { overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.photo-card__status { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--success-text); }
.photo-card__change { height: 48px; margin-top: auto; padding: 0 18px; font-size: 13px; }

@media (min-width: 700px) {
  .dropzone { min-height: 168px; padding: 24px; background: var(--black); }
  .photo-card { background: var(--black); }
  .photo-card__change { align-self: flex-start; }
}

/* ---------- Waiver & terms ---------- */
/* Age + Weight with the under-18 note below them. The note's wrapper is always in the page
   (it's the live region that announces the note), so the space above the note is the note's
   own margin, not a gap. */
.field-group { display: flex; flex-direction: column; min-width: 0; }
.minor-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; padding: 14px 16px; background: var(--panel); font-size: 14px; line-height: 1.45; }
.minor-note svg { flex: none; margin-top: 2px; }

.waiver-head { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.waiver-head__title { font-size: min(40px, 10.2vw); } /* 40px at 390; "WAIVER & TERMS" still fits on one line at 320 */

.waiver-summary { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--panel); border-top: 3px solid var(--red); }
.waiver-summary__list { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.waiver-summary__list li { position: relative; padding-left: 18px; }
.waiver-summary__list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; background: var(--red); }
.waiver-summary__note { font-size: 13px; line-height: 1.45; color: var(--text-subtle); }

/* "Read the full waiver & terms": the button, the panel it opens, "Open in a new tab". */
.waiver-full { display: flex; flex-direction: column; }
.waiver-full__toggle {
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0 18px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-button);
  color: var(--text);
  text-align: left;
}
.waiver-full__toggle:hover { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--text-subtle); }
.waiver-full__toggle svg { flex: none; }
.waiver-full__toggle[aria-expanded="true"] { background: var(--text); box-shadow: none; color: var(--black); }
.waiver-full__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.waiver-full__panel {
  height: 340px;
  overflow-y: auto;
  border: 1.5px solid var(--line-button);
  border-top: 0;
  background: var(--black);
  scrollbar-color: var(--line-button) transparent;
  scrollbar-width: thin;
}
/* The fade over the last lines: says "there's more below". It rides the bottom edge as the panel scrolls. */
.waiver-full__panel::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 56px;
  margin-top: -56px;
  background: linear-gradient(rgba(10, 10, 12, 0), var(--black));
  pointer-events: none;
}
.waiver-full__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 40px; }
.waiver-full__version { font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--text-subtle); }
.waiver-full__status { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.waiver-full__status a { color: var(--text); text-underline-offset: 3px; }
.waiver-full__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-underline-offset: 3px;
}
.waiver-full__link svg { flex: none; }

/* Agreement checkboxes: a real checkbox, visually hidden, with a drawn 24px box. The whole
   bordered row is its <label>. */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--line-button);
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}
.check a { font-weight: 700; text-underline-offset: 3px; }
.check__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check__box { display: grid; flex: none; place-items: center; width: 24px; height: 24px; margin-top: -1px; border: 2px solid var(--text); color: var(--white); }
.check__box svg { display: none; }
.check__input:checked + .check__box { border-color: var(--red); background: var(--red); }
.check__input:checked + .check__box svg { display: block; }
.check__input:focus-visible + .check__box { outline: 3px solid var(--focus); outline-offset: 3px; }
@supports selector(:has(a)) {
  .check:has(.check__input:checked) { border-color: var(--text); }
}
.check.is-invalid { padding: 14.5px; border: 3px solid var(--error-border); background: var(--error-tint); }

/* Typed signatures. */
.signature { position: relative; }
.signature__input { height: 60px; padding: 0 16px 6px; font-size: 22px; font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
.signature__input::placeholder { font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: 0; color: #77777F; opacity: 1; }
.signature__rule { position: absolute; right: 16px; bottom: 12px; left: 16px; height: 1px; background: rgba(10, 10, 12, 0.28); pointer-events: none; }
.signature__date { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.45; color: var(--text-subtle); }
.signature__date strong { font-weight: 700; color: var(--text); }

/* A note under a field that isn't an error: "Matches the name above." / "This doesn't match…".
   It's a live region, so while empty it stays in the layout and only gives back the field's gap. */
.field-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
.field-note:empty { margin-top: -8px; }
.field-note:not(:empty)::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field-note[data-state="match"] { color: var(--success-text); }
.field-note[data-state="match"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Parent or guardian (competitor under 18). */
.guardian { display: flex; flex-direction: column; gap: 22px; padding: 20px; background: var(--panel); border-top: 3px solid var(--red); }
.guardian__head { display: flex; flex-direction: column; gap: 10px; }
.guardian__title { font-size: 30px; }
.guardian__lead { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.guardian .field-row { gap: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .guardian:not([hidden]),
  .minor-note:not([hidden]) { animation: guardian-in 0.24s ease-out both; }
}
@keyframes guardian-in { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 700px) {
  .minor-note { margin-top: 28px; background: var(--black); }
  .waiver-head { margin-top: 0; padding-top: 28px; }
  .waiver-head__title { font-size: 44px; }
  .waiver-summary { padding: 24px; background: var(--black); }
  .guardian { padding: 28px; background: var(--black); }
  .guardian .field-row { gap: 0 20px; }
}

/* ---------- Error summary + failed alert ---------- */
.alert-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 2px solid var(--error-border);
  background: var(--error-tint);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.alert-box__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.alert-box__title svg { flex: none; color: var(--error-border); }
.alert-box__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 30px; font-size: 15px; line-height: 1.4; }
.alert-box--failed { gap: 12px; padding: 20px; }
.alert-box--failed .alert-box__title { font-size: 18px; }
.alert-box__text { font-size: 15px; line-height: 1.5; color: #E4E4E8; }
.alert-box__note { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.alert-box a { text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .alert-box__button { align-self: flex-start; }
}

/* ---------- Submit ---------- */
.register-form__actions { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
/* Bot check (Cloudflare Turnstile). It only shows something when Cloudflare wants a tick from
   the visitor, and then keeps showing the result. While it has anything on screen, register.js
   adds .is-showing and it sits above the button. The rest of the time it's lifted out of the
   layout, so it leaves no gap, but keeps the form's width for the widget to size itself by. */
.human-check { position: absolute; top: 0; right: 0; left: 0; }
.human-check.is-showing { position: static; }
.register-form__submit { position: relative; overflow: hidden; width: 100%; padding: 0 24px; }
.register-form__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); }
.register-form__submit-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; font-variant-numeric: tabular-nums; }
.register-form__spinner { display: none; flex: none; }
.register-form__status,
.register-form__signing { text-align: center; }
.register-form__status:empty { display: none; }
.register-form__status.is-error { color: var(--error-text); }
@media (min-width: 700px) {
  /* The button with the status beside it, then "By submitting…" (and "Questions?") on lines of their own. */
  .register-form__actions { flex-flow: row wrap; align-items: center; gap: 12px 20px; margin-top: 0; padding-top: 8px; }
  .register-form__submit { flex: none; width: auto; padding: 0 32px; }
  .register-form__status { flex: 1 1 200px; min-width: 0; text-align: left; }
  .human-check,
  .register-form__signing,
  .register__questions--inline { flex-basis: 100%; text-align: left; }
}

/* Submitting: fields locked, the button fills left to right with the upload. */
.register-form[aria-busy="true"] .register-form__spinner { display: block; animation: register-spin 0.9s linear infinite; }
.register-form[aria-busy="true"] .field__label { color: var(--text-subtle); }
.register-form[aria-busy="true"] .dropzone,
.register-form[aria-busy="true"] .photo-card__change,
.register-form[aria-busy="true"] .check { opacity: 0.5; pointer-events: none; }
.field__input:disabled { background: var(--text-muted); color: var(--line-strong); -webkit-text-fill-color: var(--line-strong); opacity: 1; }
@media (min-width: 700px) {
  .register-form[aria-busy="true"] .register-form__submit { min-width: 300px; }
}
@keyframes register-spin { to { transform: rotate(360deg); } }

/* ================= Success ================= */
.success { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 40px 36px; }
.success__head { display: flex; flex-direction: column; gap: 18px; }
.success__tile { display: grid; place-items: center; width: 56px; height: 56px; background: var(--red); color: var(--white); }
.success__tile svg { width: 30px; height: 30px; }
.success__title { font-size: min(48px, 12.3vw); }
.success__lead strong { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.success__waiver { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

.summary-card { margin-top: 28px; background: var(--panel); border-top: 3px solid var(--red); }
.summary-card__event { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line-strong); }
.summary-card__event-name { font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; }
.summary-card__event-meta { font-size: 14px; line-height: 1.25; color: var(--text-muted); }
.summary-card__fighter { display: flex; gap: 16px; padding: 20px; }
.summary-card__photo { flex: none; width: 88px; height: 110px; object-fit: cover; background: var(--placeholder); }
.summary-card__list { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.summary-card__list dt { font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.summary-card__list dd { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.summary-card__song { padding: 0 20px 20px; }
.summary-card__song dd { margin-top: 4px; }
.summary-card__waiver { padding: 16px 20px; border-top: 1px solid var(--line-strong); }
.summary-card__waiver > div { display: flex; flex-direction: column; gap: 6px; }
.summary-card__signed { display: flex; align-items: flex-start; gap: 8px; }
.summary-card__signed svg { flex: none; margin-top: 2px; color: var(--success-text); }
.summary-card__waiver-link { display: inline-block; padding-block: 8px; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-muted); text-underline-offset: 3px; }

.success__next { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.success__next-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.success__actions { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

@media (min-width: 700px) {
  .success { padding-block: 56px 72px; }
  .success__head { gap: 24px; }
  .success__tile { width: 64px; height: 64px; }
  .success__tile svg { width: 34px; height: 34px; }
  .success__title { font-size: 72px; }
  .success__lead,
  .success__waiver { max-width: 560px; }
  .summary-card { max-width: 560px; margin-top: 36px; }
  .summary-card__event { gap: 6px; padding: 22px 28px; }
  .summary-card__event-name { font-size: 18px; letter-spacing: 0; }
  .summary-card__event-meta { font-size: 15px; }
  .summary-card__fighter { gap: 24px; padding: 28px; }
  .summary-card__photo { width: 140px; height: 175px; }
  .summary-card__list { gap: 16px; }
  .summary-card__list dt { font-size: 12px; }
  .summary-card__list dd { margin-top: 4px; font-size: 17px; }
  .summary-card__song { padding: 0 28px 24px; }
  .summary-card__waiver { padding: 22px 28px; }
  .summary-card__waiver dd { margin-top: 0; }
  .success__next { padding-top: 36px; }
  .success__next-text { max-width: 560px; font-size: 16px; }
  .success__actions { flex-direction: row; gap: 12px; }
}
@media (min-width: 1100px) {
  .success { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; padding-block: 80px; }
  /* Seven columns so "REGISTERED." (6.7em) stays on one line; the copy under it keeps its 560px measure. */
  .success__head { grid-column: 1 / span 7; }
  .success__title { font-size: clamp(72px, 6.2vw + 14px, 104px); }
  .summary-card { grid-column: 8 / span 5; grid-row: 1 / span 2; max-width: none; margin-top: 0; }
  .success__next { grid-column: 1 / span 7; padding-top: 24px; }
  .success__next-label { display: none; }
  .success__next-text { color: var(--text-subtle); }
}

/* ================= Closed ================= */
.closed { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 40px 28px; }
.closed__intro { display: flex; flex-direction: column; gap: 18px; }
.closed__title { font-size: min(46px, 13.6vw - 7px); } /* 46px at 390; "REGISTRATION" still fits at 320 */
.closed__card { margin-top: 32px; padding: 24px 20px; background: var(--panel); border-top: 3px solid var(--red); }
.closed__card .signup__label { font-size: 15px; }
/* The signup's own success panel, without a second card inside the card. */
.closed__card .success-panel { padding: 0; border-top: 0; background: transparent; }
.closed__links { margin-top: 28px; }
.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.link-row svg { flex: none; }

@media (min-width: 700px) {
  .closed { padding-block: 56px 72px; }
  .closed__title { font-size: 64px; }
  .closed__card { max-width: 620px; padding: 32px; }
  .closed__links { max-width: 620px; }
}
@media (min-width: 1100px) {
  .closed { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; padding-block: 72px 96px; }
  /* Seven columns, sized so "REGISTRATION" (7.7em) stays on one line. */
  .closed__intro { grid-column: 1 / span 7; gap: 24px; }
  .closed__title { font-size: clamp(60px, 6.1vw, 88px); }
  .closed__intro .register__lead { max-width: 560px; }
  .closed__card { grid-column: 8 / span 5; grid-row: 1 / span 2; max-width: none; margin-top: 0; }
  .closed__links { grid-column: 1 / span 5; margin-top: 40px; }
}