/* ──────────────────────────────────────────────────────────────────────────
   Player Benchmark — intake form (index.html) component CSS.

   Palette, type tokens and the local @font-face blocks live in theme.css, which
   index.html links BEFORE this file; every rule here reads those through var().
   Do not reintroduce a :root block — theme.css is the single source.

   This is deliberately PER PAGE rather than a shared styles.css. Measured against
   landing-page.html's sheet, 4 of these 117 selectors also appear there, and two
   of those four intentionally DISAGREE: `.app` is max-width:760px here and 1540px
   on the report, and `.header` differs too. Only `body` and `.tagline` are
   identical. Merging the two would ship each page the other's components and take
   away the one thing the split states for free — which page a rule affects.
   ────────────────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;}

.app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 24px 80px;}

/* HEADER */
.header{padding:24px 0;display:flex;align-items:center;gap:18px;border-bottom:2px solid var(--border);margin-bottom:36px;}
.tagline{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;padding-left:18px;border-left:2px solid var(--border);line-height:1.3;}
.free-badge{margin-left:auto;background:var(--orange-dim);border:1px solid rgba(255,163,0,.35);padding:5px 13px;font-family:var(--mono);font-size:10px;color:var(--orange);text-transform:uppercase;letter-spacing:.15em;white-space:nowrap;}

/* PROGRESS */
.progress{display:flex;align-items:center;gap:6px;margin-bottom:32px;}
.pdot{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--muted);flex-shrink:0;transition:all .3s;}
.pdot.active{border-color:var(--orange);background:var(--orange-dim);color:var(--orange);}
.pdot.done{border-color:var(--green);background:var(--green-dim);color:var(--green);}
.plabel{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono);white-space:nowrap;}
.plabel.active{color:var(--dim);}
.pline{flex:1;height:1px;background:var(--border);margin:0 2px;}
.pline.done{background:rgba(34,197,94,.3);}

/* STEP VISIBILITY */
.step{display:none;}
.step.active{display:block;animation:fadeUp .3s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* FORM PANEL */
.form-panel{background:var(--surface);border:1px solid var(--border);}
.step-head{padding:28px 36px 20px;border-bottom:2px solid var(--border);}
.step-tag{font-family:var(--mono);font-size:10px;color:var(--orange);text-transform:uppercase;letter-spacing:.15em;margin-bottom:6px;}
.step-title{font-family:var(--display);font-size:38px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.02em;}
.step-desc{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6;max-width:480px;}
.step-body{padding:28px 36px 36px;}

/* FORM FIELDS */
.fg{margin-bottom:22px;}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.fr4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
label,.field-label{display:block;font-size:10px;font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px;}
label .req,.field-label .req{color:var(--orange);margin-left:2px;}
label .opt,.field-label .opt{margin-left:4px;font-size:9px;}
.dob-label{font-size:10px;font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px;}
.dob-label .req{color:var(--orange);margin-left:2px;}
.sec-label .req{color:var(--orange);margin-left:4px;font-weight:700;font-size:13px;}

select, input[type=number], input[type=text], input[type=tel], input[type=email]{
  width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:11px 14px;font-family:var(--body);font-size:14px;outline:none;
  transition:border-color .2s;-webkit-appearance:none;appearance:none;border-radius:8px;
}
input::placeholder{color:var(--muted);}
select{
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
select:focus, input[type=number]:focus, input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus{border-color:var(--orange);}
select:focus{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}

/* input with unit suffix */
.input-wrap{position:relative;}
.input-wrap input{padding-right:46px;}
.input-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--muted);pointer-events:none;}

/* SECTION LABEL
   A SECTION LABEL IS A TIER ABOVE THE FIELD LABELS UNDER IT — three things say so, and it
   takes all three. It used to be 10px / --muted / .15em while `label` and `.dob-label` were
   10px / --muted / .12em, i.e. the same font, size, colour and case, differing by 0.03em of
   tracking. "Getting Started" therefore read as a sibling of "First Name" rather than its
   heading, and the step had one flat tier below the 38px .step-title.
   - COLOUR carries the change: --text is 15.13:1 vs --muted's 4.83:1. Don't darken `label`
     or .dob-label to match — the muted field labels are what make this one read as a level,
     and darkening everything restores the flat tier at higher density (same trap as
     thickening box edges to match the 2px dividers).
   - WEIGHT joined it 2026-07-29 (owner decision, chosen from side-by-side renders):
     font-weight:700, which theme.css maps to Gotham-ULTRA — there is no Bold, the ramp is
     Light/Medium/Ultra. An earlier version of this comment kept weight untouched for fear
     that Ultra at 11px caps "competes with the 38px .step-title"; rendered, it doesn't — the
     size gap keeps the tiers unmistakable, every button on the page already ships this face
     at 12–15px/700–800, and the .req asterisk inside this same row was 700 all along. What
     DOES still hold: don't bump `label`/.dob-label weight to match (the same flat-tier trap
     as colour), and an inline qualifier span inside a .sec-label must now opt out of BOTH
     the inherited colour and the inherited weight — "Triple Slash" carries the one example.
   - The trailing rule is 2px because it is a section separator, not a box edge (see the
     border-weight note in CLAUDE.md); at 1px it was the only divider on the form still at
     box-edge weight. */
.sec-label{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.15em;margin:34px 0 14px;display:flex;align-items:center;gap:12px;}
.sec-label::after{content:'';flex:1;height:2px;background:var(--border);}
/* The gap ABOVE a section label must beat the gap below it, or the label floats between the
   block it closes and the block it opens and belongs to neither. Containers that already
   supply that space carve the top margin back out: .step-head's padding, hr.divider's margins,
   #positions-section's margin-top, and the padded #routing-section. The opening intent wrapper
   likewise needs no extra gap above its first label. #step1-rest is deliberately NOT included:
   it is a display:none visibility wrapper with no box of its own, so "Your Info" keeps the
   margin even though it is that wrapper's first child. Audit this in the live DOM rather than
   grepping backwards; explanatory comments often sit between a divider and its label. */
.step-body > .sec-label:first-child,
#intent-section > .sec-label:first-child,
#routing-section > .sec-label:first-child,
hr.divider + .sec-label,
#positions-section > .sec-label{margin-top:0;}

/* POSITION CHECKBOX GRID */
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:6px;}
.pos-opt{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:all .15s;font-size:13px;user-select:none;}
.pos-opt:hover{border-color:var(--border-hi);}
.pos-opt:focus-visible{border-color:var(--orange);outline:2px solid var(--text);outline-offset:2px;}
.pos-opt.checked{border-color:var(--orange);background:var(--orange-dim);}
.pos-box{width:15px;height:15px;border:1px solid var(--border-hi);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.pos-opt.checked .pos-box{background:var(--orange);border-color:var(--orange);}
.pos-box::after{content:'✓';font-size:9px;color:#fff;display:none;}
.pos-opt.checked .pos-box::after{display:block;}
.pos-group-label{font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:10px 0 7px;padding-left:1px;}
.pos-hint{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:8px;}

/* TRACK CARDS */
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.track-card{border:1px solid var(--border);background:var(--surface-2);padding:22px 14px;cursor:pointer;transition:all .2s;text-align:center;position:relative;overflow:hidden;}
.track-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s;}
.track-card:hover{border-color:var(--border-hi);}
.track-card:focus-visible{border-color:var(--orange);outline:2px solid var(--text);outline-offset:2px;}
.track-card.selected{border-color:var(--orange);background:var(--orange-dim);}
.track-card.selected::after{transform:scaleX(1);}
.track-icon{display:block;margin:0 auto 10px;color:var(--muted);transition:color .2s;}
.track-card:hover .track-icon,.track-card.selected .track-icon{color:var(--orange);}
.track-name{font-family:var(--display);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}

/* PLAYING LEVEL — native radios inside one-click tiles; #level remains a hidden compatibility
   mirror for the existing payload/readiness contract. */
.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.level-option{display:flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:11px 13px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--body);font-size:13px;line-height:1.35;letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color .2s,background-color .2s;}
.level-option:hover,.level-option:focus-within,.level-option.selected{border-color:var(--orange);background:var(--orange-dim);}
.level-option input[type=radio]{width:16px;height:16px;flex:0 0 auto;accent-color:var(--orange);cursor:pointer;}

/* PRIMARY FORM INTENT — a real branch, not two competing submit buttons at the end. */
.intent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.intent-card{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:20px;text-align:left;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;font:inherit;}
.intent-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s;}
.intent-card:hover,.intent-card:focus-visible{border-color:var(--orange);background:var(--orange-dim);outline:none;}
.intent-card:hover::after,.intent-card:focus-visible::after{transform:scaleX(1);}
.intent-card.selected{border-color:var(--orange);background:var(--orange-dim);}
.intent-card.selected::after{transform:scaleX(1);}
.intent-card-title{font-family:var(--display);font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.intent-card-copy{font-size:12px;color:var(--muted);line-height:1.5;margin-top:6px;}
#routing-section{margin-top:32px;padding-top:28px;border-top:2px solid var(--border);}
#routing-section:focus{outline:none;}
#report-details{margin-top:28px;}

/* DIVIDER */
.divider{border:none;border-top:2px solid var(--border);margin:26px 0;}

/* No .info-icon rules: the one hover tooltip in this form (Walk %'s denominator) became a
   visible .field-hint, so these five rules had no markup left to style. A hover-only tooltip
   is the wrong mechanism for a field label anyway — it never fires on touch. If a genuine
   tooltip is ever needed, it needs a tap/focus affordance, not `:hover` alone. */

/* LIFT PAIR — weight + reps side by side */
.lift-pair{display:grid;grid-template-columns:2fr 1fr;gap:8px;}

/* FIELD HINT */
.field-hint{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:5px;letter-spacing:.04em;}
.field-hint.error{color:#EF4444;}
/* One instance, at the very bottom of Step 1 under .btn-row. The old 8px/20px was tuned for
   sitting directly beneath input fields; below the button row it needs room to read as fine print
   for the step rather than a caption on the button. No bottom margin — .step-body's 36px padding
   closes the step. */
.privacy-note{font-size:11px;color:var(--dim);line-height:1.55;margin:22px 0 0;}
.privacy-note a,.cert-policy-link{color:inherit;font-weight:700;text-decoration:underline;}
.cert-policy-link{display:inline-block;margin-top:7px;font-size:12px;}
input.input-error{border-color:#EF4444 !important;}

/* OPTIONAL CALLOUT */
.optional-note{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);padding:12px 16px;margin-bottom:24px;font-size:12px;color:var(--muted);font-family:var(--mono);}
.optional-note strong{color:var(--dim);}

/* AGE GATE + UNDER-13 PARENT ROUTING */
/* Four age bands (9–12 / 13–15 / 16–17 / 18 or older; the first tile's VALUE stays under_13
   and accepts any age below 13) — the boundaries at 13, 16 and 18 are the
   only ones carrying legal weight. Four across fits the panel; 2x2 below 860px keeps the
   labels off two lines, and the 640px rule stacks them. */
.age-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
@media(max-width:860px){.age-grid{grid-template-columns:repeat(2,1fr);}}
.gate-note{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:10px;}
.stop-panel{background:var(--surface-2);border:1px solid var(--border);padding:20px 22px;margin-bottom:22px;}
.stop-title{font-family:var(--display);font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.stop-panel p{font-size:13px;color:var(--dim);line-height:1.6;margin:0 0 12px;}
.stop-panel p:last-child{margin-bottom:0;}
.stop-link-row{display:flex;gap:8px;margin-bottom:12px;}
.stop-link-row input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:10px 12px;font-family:var(--mono);font-size:11px;border-radius:8px;min-width:0;}
.btn-copy{padding:10px 18px;background:var(--orange);border:2px solid var(--orange);color:#FFFFFF;font-family:var(--display);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:8px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;white-space:nowrap;}
.btn-copy:hover{background:#000000;border-color:var(--orange);}
/* The way OUT of the stop panel. Was an inline text link inside a paragraph, which left the
   screen looking like a dead end once the age tiles stopped responding. Secondary treatment so
   it doesn't outrank Copy Link — the parent-handoff is still the primary action. */
.btn-restart{display:inline-block;padding:10px 18px;background:var(--surface);border:2px solid var(--text);color:var(--text);font-family:var(--display);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:8px;cursor:pointer;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;white-space:nowrap;}
.btn-restart:hover{background:#000000;border-color:var(--orange);color:#FFFFFF;}
.cert-opt{align-items:flex-start;font-size:12px;line-height:1.5;}
.cert-opt .pos-box{margin-top:2px;}
#sms-consent-wrap{margin-top:22px;}

/* BUTTON ROW */
.completion-hint{margin-top:24px;padding:10px 12px;background:var(--orange-dim);border:1px solid rgba(255,163,0,.35);color:var(--dim);font-size:12px;line-height:1.5;}
.completion-hint:empty{display:none;}
.completion-hint:not(:empty) + .btn-row{margin-top:12px;}
.btn-row{display:flex;gap:10px;justify-content:flex-end;padding-top:28px;border-top:2px solid var(--border);margin-top:32px;}
.btn-back{padding:13px 24px;background:transparent;border:2px solid var(--border-hi);color:var(--dim);font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:8px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;}
.btn-back:hover{border-color:var(--text);color:var(--text);}
.btn-back:disabled{opacity:.35;cursor:not-allowed;}
.btn-next{padding:13px 36px;background:var(--orange);border:2px solid var(--orange);color:#FFFFFF;font-family:var(--display);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:8px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;display:flex;align-items:center;gap:9px;}
.btn-next:hover{background:#000000;color:#FFFFFF;border-color:var(--orange);}
.btn-next:disabled{opacity:.35;cursor:not-allowed;}
.crm-submit-error{display:none;margin:18px 36px 0;padding:14px 16px;border:1px solid #B91C1C;background:#FEF2F2;color:#7F1D1D;font-size:13px;line-height:1.55;}

.form-footer{margin-top:16px;font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;line-height:1.6;}

@media(max-width:640px){
  .track-grid{grid-template-columns:1fr;}
  .intent-grid{grid-template-columns:1fr;}
  .pos-grid{grid-template-columns:1fr 1fr;}
  .fr2,.fr3,.fr4{grid-template-columns:1fr 1fr;}
  .step-body,.step-head{padding:20px;}
  .free-badge{display:none;}
  .step-title{font-size:30px;}
  /* On phones the nowrap step names overflow the viewport — keep just the numbered dots. */
  .progress{gap:8px;}
  .plabel{display:none;}
  .age-grid{grid-template-columns:1fr;}
  .btn-row{flex-direction:column-reverse;}
  .btn-row .btn-back,.btn-row .btn-next{width:100%;justify-content:center;}
  .crm-submit-error{margin:14px 20px 0;}
}
@media(max-width:420px){
  .level-grid{grid-template-columns:1fr;}
}