/* ===========================================================================
   Soccer registration — public stylesheet.

   The palette is the artifacts' palette, written out as tokens rather than
   Tailwind class names: the emerald-950 header band, the amber-400 accent on
   the selected number and the success badge, stone greys for everything else.
   Bebas Neue is display-only (headings, kit numbers); Manrope carries the text.
   =========================================================================== */

:root {
  --ink-950: #022c22;   /* emerald-950 — the band, headings          */
  --ink-900: #064e3b;   /* emerald-900                                */
  --ink-800: #065f46;   /* emerald-800 — buttons, field labels        */
  --ink-700: #047857;   /* emerald-700 — links                        */
  --ink-600: #059669;   /* emerald-600 — focus ring                   */
  --ink-500: #10b981;
  --ink-200: #a7f3d0;   /* emerald-200 — the band's subtitle          */
  --ink-050: #ecfdf5;   /* emerald-50  — number hover                 */
  --ink-300: #6ee7b7;   /* emerald-300 — disabled button              */

  --gold-500: #f59e0b;
  --gold-400: #fbbf24;  /* amber-400 — selection, success badge       */
  --gold-300: #fcd34d;
  --gold-050: #fffbeb;

  --paper:    #fafaf9;  /* stone-50                                   */
  --card:     #ffffff;
  --line:     #e7e5e4;  /* stone-200                                  */
  --line-2:   #d6d3d1;  /* stone-300                                  */
  --mut-400:  #a8a29e;  /* stone-400                                  */
  --mut-500:  #78716c;  /* stone-500                                  */
  --mut-600:  #57534e;  /* stone-600                                  */
  --mut-700:  #44403c;  /* stone-700                                  */
  --text:     #1c1917;  /* stone-900                                  */

  --bad-700: #b91c1c;
  --bad-200: #fecaca;
  --bad-050: #fef2f2;

  --good-700: #15803d;
  --good-200: #bbf7d0;
  --good-050: #f0fdf4;

  --display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

a { color: var(--ink-700); }
a:hover { color: var(--ink-900); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink-600);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The dark band, and the card that overlaps its lower edge. The negative
   margin on .page is what produces the artifacts' "card floats over the header"
   look, so the band needs enough bottom padding to be overlapped into.
   --------------------------------------------------------------------------- */
.band {
  background: var(--ink-950);
  padding: 32px 16px 56px;
  text-align: center;
}
@media (min-width: 640px) {
  .band { padding: 40px 32px 64px; }
}

.band-inner { max-width: 768px; margin: 0 auto; position: relative; }

.band-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
}
@media (min-width: 640px) { .band-title { font-size: 3rem; } }

.band-sub {
  color: var(--ink-200);
  margin: 8px 0 0;
  font-size: .9375rem;
}
@media (min-width: 640px) { .band-sub { font-size: 1rem; } }

.band-rule {
  width: 64px; height: 2px;
  background: var(--gold-400);
  border-radius: 999px;
  margin: 16px auto 0;
}

.band-back {
  position: absolute;
  top: 2px; left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-200);
  font-size: .8125rem; font-weight: 600;
  text-decoration: none;
}
.band-back:hover { color: var(--paper); }
@media (max-width: 639px) {
  /* On a phone the back link would sit on top of the title; give it its own row. */
  .band-back { position: static; margin-bottom: 12px; }
  .band-inner { display: flex; flex-direction: column; align-items: center; }
}

.page {
  flex: 1;
  max-width: 768px;
  width: 100%;
  margin: -32px auto 0;
  padding: 0 16px 48px;
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) { .page { margin-top: -40px; padding: 0 32px 48px; } }

/* --------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
@media (min-width: 640px) { .card { padding: 32px; } }

.card + .card { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   Team chooser
   --------------------------------------------------------------------------- */
.team-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.team-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.team-card:hover {
  border-color: var(--ink-500);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);
  color: inherit;
}
.team-card.is-closed { opacity: .72; }

.team-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.team-name {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-950);
  margin: 0;
}

.team-age {
  font-family: var(--display);
  font-size: 1.125rem;
  letter-spacing: .05em;
  color: var(--ink-950);
  background: var(--gold-400);
  border-radius: var(--r-sm);
  padding: 2px 10px 0;
  flex-shrink: 0;
}

.team-meta { margin-top: 12px; font-size: .875rem; color: var(--mut-500); }

.team-bar {
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.team-bar > i { display: block; height: 100%; background: var(--ink-600); border-radius: 999px; }

.team-cta {
  margin-top: 16px;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-700);
}
.team-card.is-closed .team-cta { color: var(--mut-400); }

/* ---------------------------------------------------------------------------
   Form
   --------------------------------------------------------------------------- */
.row { display: grid; gap: 16px; }
@media (min-width: 640px) { .row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-stack > * + * { margin-top: 24px; }

.lbl {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-800);
  margin-bottom: 6px;
}
.lbl .opt { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--mut-400); }

.inp {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--card);
  -webkit-appearance: none;
  appearance: none;
}
.inp:focus { outline: none; border-color: var(--ink-600); box-shadow: 0 0 0 2px var(--ink-600); }
.inp.upper { text-transform: uppercase; }
.inp.bad { border-color: var(--bad-200); background: var(--bad-050); }

select.inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2378716c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.err-msg { color: var(--bad-700); font-size: .8125rem; margin: 6px 0 0; }

.hint { color: var(--mut-500); font-size: .75rem; margin: 6px 0 0; }

/* --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--ink-800); color: var(--paper); }
.btn-primary:hover { background: var(--ink-900); color: var(--paper); }
.btn-primary:disabled { background: var(--ink-300); cursor: not-allowed; }
.btn-ghost { background: var(--card); color: var(--ink-800); border-color: var(--ink-800); }
.btn-ghost:hover { background: var(--ink-050); color: var(--ink-900); }
.btn-block { width: 100%; padding: 12px 24px; }

/* ---------------------------------------------------------------------------
   Kit number picker
   --------------------------------------------------------------------------- */
.num-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.num-head-label {
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-800);
}

/* `display` on the element beats the user-agent's [hidden] { display:none },
   so the chip must opt out explicitly or it shows empty on every page load. */
.num-chosen[hidden] { display: none; }

.num-chosen {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-050);
  border: 1px solid var(--gold-300);
  border-radius: var(--r-md);
  padding: 5px 12px;
  margin-bottom: 12px;
}
.num-chosen .cap { font-size: .75rem; font-weight: 600; color: var(--mut-600); }
.num-chosen .val { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--ink-950); }

.num-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-height: 256px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
/* Seven columns on a 375px phone leaves 34px tiles — under the ~44px that a
   thumb reliably hits, and this grid is 99 targets packed edge to edge. Six
   columns buys 41px at no cost anywhere else; the 7- and 10-column layouts
   above are unchanged. */
@media (max-width: 419px) { .num-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 640px) { .num-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.num-grid.bad { border-color: var(--bad-200); background: var(--bad-050); }

/* The picker is a radio group so it works with JavaScript off. The input is
   moved out of the grid flow rather than hidden with display:none, which would
   drop it out of the tab order and take the keyboard with it. */
.num-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.num {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink-900);
  cursor: pointer;
  user-select: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
@media (min-width: 640px) { .num { font-size: 1.125rem; } }

.num:hover { background: var(--ink-050); border-color: var(--ink-500); }

.num-radio:checked + .num {
  background: var(--gold-400);
  color: var(--ink-950);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 2px var(--gold-500);
}

.num-radio:focus-visible + .num {
  outline: 2px solid var(--ink-600);
  outline-offset: 2px;
}

.num.is-taken {
  background: var(--line);
  color: var(--mut-400);
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}

.num-count { font-size: .75rem; color: var(--mut-500); margin: 6px 0 0; }

/* ---------------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------------- */
.alert {
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .875rem;
}
.alert-bad  { color: var(--bad-700);  background: var(--bad-050);  border: 1px solid var(--bad-200); }
.alert-good { color: var(--good-700); background: var(--good-050); border: 1px solid var(--good-200); }
.alert-warn { color: var(--mut-700);  background: var(--gold-050); border: 1px solid var(--gold-300); }

.flash {
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .875rem;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--line);
}
.flash-ok  { color: var(--good-700); background: var(--good-050); border-color: var(--good-200); }
.flash-bad { color: var(--bad-700);  background: var(--bad-050);  border-color: var(--bad-200); }

/* ---------------------------------------------------------------------------
   Success screen
   --------------------------------------------------------------------------- */
.done { text-align: center; }
.done-badge {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-950);
}
.done h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-950);
  margin: 0 0 4px;
}
.done p.lead { color: var(--mut-600); margin: 0 0 16px; }

.receipt {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  font-size: .875rem;
  color: var(--mut-700);
  margin-bottom: 24px;
}
.receipt div + div { margin-top: 4px; }
.receipt b { color: var(--ink-900); font-weight: 600; }
.receipt .kit { font-family: var(--display); font-size: 1.25rem; line-height: 1; color: var(--ink-950); vertical-align: -1px; }

.done-actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
@media (min-width: 640px) { .done-actions { flex-direction: row; } }

/* --------------------------------------------------------------------------- */
.foot-note {
  text-align: center;
  font-size: .75rem;
  color: var(--mut-400);
  margin: 16px 0 0;
}

.site-foot {
  text-align: center;
  padding: 20px 16px 28px;
  font-size: .75rem;
  color: var(--mut-400);
}
.site-foot a { color: var(--mut-500); text-decoration: none; }
.site-foot a:hover { color: var(--ink-700); text-decoration: underline; }
.site-foot .dot { margin: 0 6px; }

.empty {
  text-align: center;
  color: var(--mut-500);
  padding: 24px 8px;
}