/* ============================================================
   Sidelines — the parent sign-up page and its admin.

   NO TAILWIND ON THESE PAGES, IN EITHER FORM.

   The Play CDN is out for the same reason Roll Call rules it out: this page
   handles a roster of children's names and the contact details of their
   parents, and a just-in-time compiler fetched from a third party at runtime
   can be neither pinned with SRI nor meaningfully constrained by CSP.

   Roll Call's compiled /roll-call/css/tailwind.css is out too, but for a
   duller reason: it is compiled against a content glob covering roll-call/**,
   so every utility a Sidelines page used that Roll Call happens not to use
   would simply not be in the file — and would fail silently, as a layout that
   is subtly wrong on somebody's phone rather than as an error. Sharing it
   would also mean every future Roll Call rebuild has to remember this
   directory exists.

   So this is hand-written CSS against the same token values
   (docs/lineup-landing-page-strategy.md Part 3) and the same local fonts. It
   is small because the product is three screens.

   MOBILE FIRST, AND MEANT IT. Every parent who ever opens this is standing up,
   outdoors, one-handed, on a phone, with a kid asking to go home. Targets are
   ≥48px, type never drops below 16px (below that iOS zooms the whole page on
   focus), and nothing important is behind a hover.
   ============================================================ */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/jbm-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/jbm-700.woff2') format('woff2'); }

:root {
  --canvas: #0D1117;
  --surface: #161B22;
  --raised: #1C2333;
  --edge: #1E2A3A;
  --bright: #FFFFFF;
  --muted: #8B949E;
  --dim: #4A5568;
  --glow: #00BFFF;
  --go: #22C55E;
  --caution: #F59E0B;
  --warn: #EF4444;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--bright);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

::selection { background: var(--glow); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.wrap { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
.wrap-wide { max-width: 64rem; }

header.bar { border-bottom: 1px solid var(--edge); background: var(--surface); }
header.bar .inner {
  max-width: 64rem; margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
header.bar img { height: 2rem; width: auto; }
.wordmark { font-weight: 800; letter-spacing: -0.02em; font-size: 1.125rem; }
.wordmark .up { color: var(--glow); }
.product {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); border-left: 1px solid var(--edge); padding-left: 0.6rem;
}

h1 { font-size: 1.6rem; line-height: 1.2; margin: 1.5rem 0 0.5rem; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 0 0 0.35rem; }
p { text-wrap: pretty; margin: 0 0 1rem; }
.lede { color: var(--muted); }
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--glow); margin-bottom: 0.5rem;
}
.fineprint { color: var(--dim); font-size: 0.8125rem; line-height: 1.45; }

.card { background: var(--surface); border: 1px solid var(--edge); padding: 1.25rem; margin-bottom: 1rem; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; margin-top: -0.2rem; margin-bottom: 0.4rem; }

/* Every text-ish input, by exclusion rather than by list. The list version
   missed type=url the day the offer form was added and rendered a raw white
   browser input in the middle of a dark panel — which is what a list of types
   does eventually, every time. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea {
  width: 100%;
  /* 16px minimum: anything smaller makes iOS zoom the page on focus, and a
     parent who has to pinch back out usually does not finish the form. */
  font-size: 1rem;
  font-family: inherit;
  color: var(--bright);
  background: var(--canvas);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: 0.85rem 0.9rem;
  min-height: 3rem;
  margin-bottom: 1rem;
}
input:focus, select:focus { border-color: var(--glow); outline: none; box-shadow: 0 0 0 1px var(--glow); }
input::placeholder { color: var(--dim); }

.field-error { color: var(--warn); font-size: 0.875rem; margin: -0.75rem 0 1rem; }

.check {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--canvas); border: 1px solid var(--edge);
  padding: 0.9rem; margin-bottom: 1rem; cursor: pointer;
}
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--glow); }
.check span { font-size: 0.9375rem; line-height: 1.4; }

button, .btn {
  font-family: inherit; font-size: 1rem; font-weight: 700;
  min-height: 3.25rem; width: 100%;
  padding: 0.9rem 1.25rem;
  background: var(--glow); color: var(--canvas);
  border: 1px solid var(--glow); border-radius: 0;
  cursor: pointer; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
/* A disabled button is either waiting on the network or waiting on the person
   to do something first; 'progress' is a lie in the second case. */
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.working:disabled { cursor: progress; }
/* .btn is used on <a> as well as <button>, so the modifier cannot be
   button.ghost — an anchor styled .btn.ghost was rendering as a primary
   action, which put two loud blue buttons on a panel whose real primary is
   somewhere else. */
.ghost { background: transparent; color: var(--bright); border-color: var(--edge); font-weight: 600; }
.ghost:hover { border-color: var(--glow); color: var(--glow); }
button.small { width: auto; min-height: 2.5rem; font-size: 0.875rem; padding: 0.5rem 0.9rem; }

.linkish {
  background: none; border: 0; color: var(--glow); font-weight: 600;
  padding: 0.5rem 0; min-height: 0; width: auto; text-decoration: underline; cursor: pointer;
}

/* ---------- Pick lists: the team and athlete choosers ---------- */
.picklist { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.pick {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 3.5rem; text-align: left;
  background: var(--surface); color: var(--bright);
  border: 1px solid var(--edge); padding: 0.9rem 1rem;
  font-size: 1.0625rem; font-weight: 600;
}
.pick:hover, .pick:focus-visible { border-color: var(--glow); }
.pick .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted);
  font-weight: 400; white-space: nowrap; flex: none;
}
.pick.done .meta { color: var(--go); }
.pick.done { color: var(--muted); }

/* ---------- Status ---------- */
.note { border-left: 3px solid var(--edge); background: var(--raised); padding: 0.9rem 1rem; margin-bottom: 1rem; font-size: 0.9375rem; }
.note.bad { border-left-color: var(--warn); }
.note.warn { border-left-color: var(--caution); }
.note.good { border-left-color: var(--go); }

.done-mark { font-size: 3rem; line-height: 1; color: var(--go); margin-bottom: 0.5rem; }

[hidden] { display: none !important; }

.crumbs { color: var(--muted); font-size: 0.875rem; margin: 0 0 1rem; }
.crumbs strong { color: var(--bright); font-weight: 600; }

/* ---------- Admin-only ---------- */
.grid2 { display: grid; gap: 1rem; align-items: start; }  /* start, or a short panel stretches to match a tall one */
@media (min-width: 46rem) { .grid2 { grid-template-columns: 1fr 1fr; } }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); margin-bottom: 1rem; }
@media (min-width: 34rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 0.9rem 1rem; }
.stat .n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.stat .n.idle { color: var(--dim); }
.stat .k { color: var(--muted); font-size: 0.8125rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
/* A table in here SCROLLS rather than compressing: on a phone the four-column
   team table was squeezing 'Still missing' into two cramped lines and cutting
   the last letter off, which is the column a league director came for. */
.scroll-x { overflow-x: auto; }
.scroll-x table { min-width: 26rem; }

code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.875rem; }
.copyline {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  background: var(--canvas); border: 1px solid var(--edge); padding: 0.75rem; margin-bottom: 1rem;
}
.copyline code { flex: 1 1 12rem; word-break: break-all; color: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   PRODUCT PAGE
   The same file serves two audiences: a photographer arriving from the hub,
   and a parent arriving from their league. The parent's link carries ?l=<code>
   and skips everything below — see sidelines/js/parent.js. So these styles
   only ever render for the first audience, and they are written wide, while
   everything above stays phone-first for the second.
   ============================================================ */
.page-wide { max-width: 52rem; }

.hero { padding: 2.5rem 0 1rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0.75rem 0 1rem; }
.hero .lede { font-size: 1.0625rem; max-width: 40rem; }

.beta { border: 1px solid var(--caution); background: rgba(245, 158, 11, 0.06); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.beta .tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--caution); }
.beta p { margin: 0.6rem 0 0; font-size: 0.9375rem; color: var(--muted); }

.section { padding: 2rem 0 0.5rem; }
.section > h2 { font-size: 1.35rem; margin-bottom: 1rem; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.steps li { counter-increment: step; background: var(--surface); padding: 1.15rem 1.25rem 1.25rem; }
.steps li::before {
  content: counter(step);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 700; color: var(--glow);
  display: block; margin-bottom: 0.4rem;
}
.steps b { display: block; font-size: 1.0625rem; margin-bottom: 0.3rem; }
.steps span { color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.sample { background: var(--canvas); border: 1px solid var(--edge); padding: 1rem 1.15rem; margin: 1rem 0; }
.sample .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--edge); font-size: 1.0625rem; font-weight: 600; }
.sample .row:last-child { border-bottom: 0; }
.sample .row span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; color: var(--dim); }
.sample .row.done span { color: var(--go); }

.two-up { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .two-up { grid-template-columns: 1fr 1fr; } }

.site-foot { border-top: 1px solid var(--edge); margin-top: 3rem; padding: 1.5rem 0 0; color: var(--dim); font-size: 0.8125rem; }
.site-foot a { color: var(--muted); }
.site-foot .row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }

/* ---------- The director's progress meter ---------- */
.meter { height: 10px; background: var(--surface); border: 1px solid var(--edge); margin: 1.25rem 0; overflow: hidden; }
.meter > div { height: 100%; width: 0; background: var(--glow); transition: width 0.6s ease; }
.meter > div.done { background: var(--go); }

/* ---------- URL fields ----------
   A pasted order-form link is routinely 60-90 characters and the important
   half is the END of it — the path that says which product. Inter at 16px
   showed about forty of them and hid the rest behind a scroll nobody thinks to
   try, so the field is monospace (roughly a third more characters in the same
   width, and the one face where a hyphen and an underscore are not a guess)
   and whatever does not fit is echoed under the field, wrapped, where the
   whole thing can be read at once.

   Admin pages only. The parent form has no URL field, so the 16px iOS-zoom
   floor is not in play here. */
input.url-field {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.url-echo {
  margin: -0.75rem 0 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
  /* break-all, not break-word: a URL has no spaces to break at, and the point
     of this line is that every character is visible. */
  word-break: break-all;
}
.url-echo b { color: var(--glow); font-weight: 400; }
.url-echo.bad b { color: var(--warn); }