/* ================================================================
   Friendly Match Setup — restyles the desktop setup wizard to match
   the landing page (Bricolage display type, rounded tinted cards on
   the sky canvas, soft shadows, brand-blue primary button with glow,
   the navy-framed court for the rotation pickers).

   Scoped entirely under #setupPage and >700px. No JS or DOM changes:
   it only overrides the base setup classes in style.css. Mobile
   (≤700px) keeps its own Phase 5 layout untouched.
   ================================================================ */
@media (min-width:701px){

#setupPage{
  --fs-sky:#f1f4fb; --fs-line:#e4e7ee; --fs-line2:#d2d7e1;
  --fs-ink:#14171f; --fs-soft:#5b626f; --fs-faint:#8a909c;
  --fs-blue:#3a55e6; --fs-blue-deep:#2b40c4; --fs-blue-wash:#eef0fe;
  --fs-away:#e07a36; --fs-away-wash:#fdf1e8;
  --fs-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fs-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-shadow:0 12px 30px -18px rgba(32,38,75,.40);
}

/* ── page canvas + header ────────────────────────────────────── */
#setupPage .setup-view{background:var(--fs-sky)}
/* content column caps at the landing's wrap width */
#setupPage .setup-header{max-width:1240px;margin:0 auto 22px}
#setupPage .setup-progress{max-width:1240px;margin:0 auto 22px}
#setupPage .setup-step .setup-grid{max-width:1240px;margin:0 auto 18px}
#setupPage .setup-title{
  font-family:var(--fs-display);font-weight:800;font-size:32px;
  letter-spacing:-.03em;color:var(--fs-ink);
}
/* kicker above the title, like the landing section headers */
#setupPage .setup-title::before{
  content:'New match';display:block;
  font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.02em;
  color:var(--fs-blue);margin-bottom:7px;
}
#setupPage .setup-subtitle{color:var(--fs-soft);font-weight:600}
#setupPage .setup-btn{
  border-radius:13px;border-color:var(--fs-line2);box-shadow:var(--fs-shadow);
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
#setupPage .setup-btn:hover{transform:translateY(-1px);background:#fff;border-color:var(--fs-faint)}
#setupPage .setup-btn.primary{
  font-weight:800;border-color:var(--fs-blue);
  box-shadow:0 12px 26px -12px rgba(58,85,230,.9);
}
#setupPage .setup-btn.primary:hover{background:var(--fs-blue-deep);border-color:var(--fs-blue-deep)}

/* ── progress pills: numbered stepper ────────────────────────── */
#setupPage .setup-progress-pill{box-shadow:var(--fs-shadow);border-color:var(--fs-line)}
#setupPage .setup-progress-pill::before{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fs-mono);font-size:10px;font-weight:700;color:var(--fs-faint);
}
#setupPage #setupPillInfo::before{content:'1'}
#setupPage #setupPillRotation::before{content:'2'}
#setupPage .setup-progress-pill.active{border-color:#c5cdfb;color:var(--fs-blue-deep)}
#setupPage .setup-progress-pill.active::before{color:#fff}

/* ── cards ───────────────────────────────────────────────────── */
#setupPage .setup-card{
  border-radius:20px;border-color:var(--fs-line);box-shadow:var(--fs-shadow);
}
#setupPage .setup-card-title{
  font-family:var(--fs-display);font-weight:800;font-size:18px;
  letter-spacing:-.02em;color:var(--fs-ink);
}
#setupPage .setup-card-title .tmark.away{background:var(--fs-away)}
#setupPage .setup-card-title .tmark.neutral{background:var(--fs-ink)}
/* home / away cards get the landing's soft team tints */
#setupPage .setup-card:has(.tmark.home){
  background:linear-gradient(180deg,#fff 72%,var(--fs-blue-wash));border-color:#dbe1fb;
}
#setupPage .setup-card:has(.tmark.away){
  background:linear-gradient(180deg,#fff 72%,var(--fs-away-wash));border-color:#f4dcc3;
}

/* ── fields ──────────────────────────────────────────────────── */
#setupPage .setup-label{color:var(--fs-faint)}
#setupPage .setup-input,
#setupPage .setup-select,
#setupPage .setup-textarea{border-radius:12px;border-color:var(--fs-line2)}
#setupPage .setup-input:focus,
#setupPage .setup-select:focus,
#setupPage .setup-textarea:focus{border-color:var(--fs-blue);box-shadow:0 0 0 3px rgba(58,85,230,.12)}
#setupPage .setup-small-btn{border-radius:11px;border-color:var(--fs-line2)}
#setupPage .setup-team-create-btn,
#setupPage .voice-roster-btn{border-radius:12px}
#setupPage .international-rules-note{border-radius:12px;background:var(--fs-blue-wash);border-color:#c5cdfb}
#setupPage .setup-system-box{border-radius:14px;background:rgba(255,255,255,.65);border-color:var(--fs-line)}
#setupPage .setup-system-option{border-color:var(--fs-line2)}
#setupPage .setup-system-option:hover{border-color:var(--fs-blue)}
/* the chosen system reads as a selected chip */
#setupPage .setup-system-option:has(input:checked){
  background:var(--fs-blue-wash);border-color:#c5cdfb;color:var(--fs-blue-deep);
}
#setupPage .setup-help{color:var(--fs-soft)}

/* ── rotation step: the landing hero's navy-framed court ─────── */
#setupPage .setup-court{
  background:linear-gradient(180deg,#0e3f6e,#0b3055);
  border-radius:18px;box-shadow:0 18px 40px -24px rgba(11,48,85,.7);
}
#setupPage .setup-slot{border-radius:12px;border-color:rgba(255,255,255,.5)}
#setupPage .setup-slot-label{font-family:var(--fs-mono);letter-spacing:.06em}
/* Only the first-serving team's P1 slot gets the brand ring */
#setupPage .setup-court .setup-slot.first-server{
  box-shadow:0 0 0 2.5px rgba(122,143,255,.9),0 2px 8px -4px rgba(0,0,0,.35);
}
#setupPage .setup-slot select{border-radius:9px;border-color:var(--fs-line2)}
#setupPage .setup-slot select:focus{border-color:var(--fs-blue)}
#setupPage .setup-libero-box{border-radius:14px;background:var(--fs-blue-wash);border-color:#d6dcfa}
#setupPage .setup-libero-field select{border-radius:10px;border-color:var(--fs-line2)}
#setupPage .libero-warning{border-radius:12px}

}

/* ================================================================
   Phone (≤700px) — the Phase 5 mobile wizard keeps its layout and
   gets the same friendly language: sky canvas, Bricolage title,
   tinted team cards, the navy-framed rotation court.
   ================================================================ */
@media (max-width:700px){

#setupPage{
  --fs-sky:#f1f4fb; --fs-line:#e4e7ee; --fs-line2:#d2d7e1;
  --fs-ink:#14171f; --fs-soft:#5b626f; --fs-faint:#8a909c;
  --fs-blue:#3a55e6; --fs-blue-deep:#2b40c4; --fs-blue-wash:#eef0fe;
  --fs-away:#e07a36; --fs-away-wash:#fdf1e8;
  --fs-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fs-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-shadow:0 12px 30px -18px rgba(32,38,75,.40);
}

/* ── sky canvas ──────────────────────────────────────────────── */
#setupPage .setup-view{background:var(--fs-sky) !important}
#setupPage .mob-setup-header,
#setupPage .mob-setup-progress{background:var(--fs-sky)}

/* ── header ──────────────────────────────────────────────────── */
#setupPage .mob-setup-title-text{
  font-family:var(--fs-display);font-weight:800;font-size:20px;
  letter-spacing:-.02em;color:var(--fs-ink);
}
#setupPage .mob-setup-back{
  border-radius:11px;border-color:var(--fs-line2);background:#fff;
  box-shadow:var(--fs-shadow);
}

/* ── progress: blue segments + mono step labels ──────────────── */
#setupPage .mob-prog-seg{background:var(--fs-line2)}
#setupPage .mob-prog-seg.mob-prog-active{background:var(--fs-blue)}
#setupPage .mob-prog-label{
  font-family:var(--fs-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--fs-faint);
}
#setupPage .mob-prog-label.mob-prog-label-active{color:var(--fs-blue-deep)}

/* ── cards: soft shadows + team tints ────────────────────────── */
#setupPage .setup-card{border-color:var(--fs-line);box-shadow:var(--fs-shadow)}
#setupPage .setup-card-title{
  font-family:var(--fs-display);font-weight:800;font-size:16px;
  letter-spacing:-.02em;color:var(--fs-ink);
}
#setupPage .setup-card-title .tmark.away{background:var(--fs-away)}
#setupPage .setup-card-title .tmark.neutral{background:var(--fs-ink)}
#setupPage .setup-card:has(.tmark.home){
  background:linear-gradient(180deg,#fff 72%,var(--fs-blue-wash));border-color:#dbe1fb;
}
#setupPage .setup-card:has(.tmark.away){
  background:linear-gradient(180deg,#fff 72%,var(--fs-away-wash));border-color:#f4dcc3;
}
#setupPage .setup-label{color:var(--fs-faint)}
#setupPage .setup-help{color:var(--fs-soft)}
#setupPage .setup-system-option:has(input:checked){
  background:var(--fs-blue-wash);border-color:#c5cdfb;color:var(--fs-blue-deep);
}

/* ── rotation court: the landing hero's navy frame ───────────── */
#setupPage .setup-court{
  background:linear-gradient(180deg,#0e3f6e,#0b3055);
  box-shadow:0 18px 40px -24px rgba(11,48,85,.7);
}
#setupPage .setup-slot{border-color:rgba(255,255,255,.5)}
#setupPage .setup-slot-label{font-family:var(--fs-mono);letter-spacing:.06em}
/* Only the first-serving team's P1 slot gets the brand ring */
#setupPage .setup-court .setup-slot.first-server{
  box-shadow:0 0 0 2.5px rgba(122,143,255,.9),0 2px 8px -4px rgba(0,0,0,.35);
}
#setupPage .setup-libero-box{border-radius:14px;background:var(--fs-blue-wash);border-color:#d6dcfa}

/* ── sticky footer ───────────────────────────────────────────── */
#setupPage .mob-setup-footer{
  border-top:1px solid var(--fs-line);
  box-shadow:0 -10px 30px -18px rgba(32,38,75,.35);
}
#setupPage .mob-setup-quick-btn,
#setupPage .mob-setup-back-btn{border-color:var(--fs-line2)}
#setupPage .mob-setup-next-btn{box-shadow:0 12px 26px -12px rgba(58,85,230,.9)}

}