/* Base sheet for the PUBLIC intake page (intake.html) — resets and the few
   element rules its own <style> block builds on top of.

   HISTORY, because it explains the shape. This was once the shared sheet for
   both the coach console and this form. The console moved to the Courtside
   sheet (style.css, Aug 2026) and this copy was frozen byte-for-byte so a
   console restyle could not reach a parent's sign-up form. Freezing it kept
   the whole old console stylesheet alive here: kanban columns, rosters,
   dialogs, toasts, nav — none of which this page has ever rendered.

   TRIMMED 2026-09-07 to what the page actually uses. Not by reading the
   markup — most of this DOM is built in JS, so a class list read out of the
   HTML understates it — but by asking Chromium which selectors match after
   the page loads and every tab is opened. 40 of 58 rules matched nothing.
   Every colour literal in this file was in that dead half, which is why
   there are none left: `.pill.green { color: #9fdcba }` was a dark-theme
   tint sitting unreferenced on a white page.

   COLOUR AND TYPE COME FROM baseplay.css (`brand` theme), linked before this
   file. Nothing here defines a palette. */

body {
  font-size: var(--step-form);
  padding-bottom: 4.5rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

.lang-toggle {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: .25rem .7rem;
  font-size: .8rem;
}

main { padding: .8rem; max-width: 720px; margin: 0 auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  margin-bottom: .6rem;
}
.card h3 { margin: 0 0 .25rem; font-size: .95rem; }

.meta { color: var(--dim); font-size: .8rem; }

.divider { border-top: 1px solid var(--line); margin: 1rem 0; }

/* --accent is a FILL and --on-accent is the ink that passes on it (7.73:1);
   white here would be 2.36:1. See the rule at the top of baseplay.css. */
button.act {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 8px;
  padding: .4rem .8rem;
  font-size: .82rem;
}
button.act.secondary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}

input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: .45rem .6rem;
  font-size: .9rem;
  width: 100%;
  margin: .2rem 0 .5rem;
}
label { font-size: .8rem; color: var(--dim); display: block; margin-top: .3rem; }

/* Desktop. The page's own <style> pins main to a single 420px column, so
   what survives here is the vertical stack and the header. */
@media (min-width: 900px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0;
  }
  header { order: 0; }
  main {
    order: 2;
    width: 100%;
    max-width: 1200px;
    padding: 1rem 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: .7rem;
    align-items: start;
    align-content: start;
    flex: 1;
  }
  .card { margin-bottom: 0; }
}