/* ==========================================================================
   Knuckleball components -- D2 Stage C (Oct 13 2026; plans/d2-broadcast-rebrand.md,
   docs/design/target/DESIGN.md "Components"). Loaded after css/tokens.css and
   buttons.css. Reads tokens only: no color, font or size is written here twice.

   Buttons and trays are U13's (buttons.css) and are not restyled here.
   NOT loaded by report.html: a stored report is drawn inside that page, and
   nothing here may reach one.
   ========================================================================== */

/* ---------- Shared pieces (any page) ---------- */

/* Slanted section tag: the sign-in role tag, Home section labels. The fill is skewed;
   the text stays upright, so a script can set its text directly. */
.slant-tag{
  position:relative; z-index:0; display:inline-block; align-self:flex-start;
  padding:var(--s-6) var(--s-12); color:var(--on-accent);
  font-family:var(--font-sans); font-size:var(--t-12); font-weight:800; font-stretch:85%;
  letter-spacing:var(--tr-tag); text-transform:uppercase; line-height:1;
}
.slant-tag::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--accent); transform:skewX(-14deg);
}

/* Badge: a small status pill */
.badge{
  display:inline-flex; align-items:center; min-height:24px; padding:0 var(--s-8); border-radius:var(--radius-pill);
  font-size:var(--t-10); font-weight:700; font-stretch:90%; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--surface); color:var(--ink-dim);
}

/* Banner: a warning or notice strip */
.banner{
  background:var(--warning-tint); border:1px solid var(--warning-line); border-radius:var(--radius-control);
  padding:var(--s-12) var(--s-16); font-size:var(--t-14); color:var(--ink-dim);
}

/* Card / panel: flat, a 1px line, no shadow */
.panel{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-control);
  padding:var(--s-20);
}
@media (max-width:500px){ .panel{ padding:var(--s-16); } }

/* ==========================================================================
   Sign-in pages (index's role step, login, the sign-ups, join, join-coach,
   accept-invite, guardian-consent, reset-password, verify-email): <body class="signin">.
   The light page; each card opens with a full-width dark header whose bottom edge
   falls --cut across the width: wordmark, tagline, the slanted tag, the title with
   its last word in the accent. The form sits below on --bg.
   ========================================================================== */
body.signin{
  margin:0; min-height:var(--kb-screen, 100vh); overflow-x:hidden;   /* one screen, no phantom scroll (css/standalone.css) */
  display:flex; flex-direction:column; align-items:center; gap:var(--s-12);
  background:var(--bg); color:var(--ink); font-family:var(--font-sans);
}
body.signin *{ box-sizing:border-box; }
body.signin ::selection{ background:var(--accent); color:var(--on-accent); }
body.signin button, body.signin input{ font-family:inherit; }
body.signin a{ color:var(--brand-mid); font-weight:600; font-size:var(--t-14); text-decoration:none; }
body.signin a:hover{ text-decoration:underline; }
body.signin button:focus-visible, body.signin input:focus-visible, body.signin a:focus-visible{ outline:var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ body.signin *{ transition:none !important; animation:none !important; } }

body.signin .card{
  width:100%; max-width:440px; padding:0 var(--s-24) var(--s-24);
  display:flex; flex-direction:column; gap:var(--s-20);
}
body.signin .step-hidden{ display:none; }

/* the dark angled header, full width of the screen */
body.signin .signin-head{
  width:100vw; margin:0 calc(50% - 50vw);
  padding:40px max(24px, calc(50vw - 196px)) calc(var(--cut) + 28px);
  background:var(--brand-bg); color:var(--on-dark);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  display:flex; flex-direction:column; gap:var(--s-16);
  /* Joel, Oct 22: its own layer, so Safari removes all of it when a step hides its card -- the band reaches past the
     card's edges, and Mac Safari left those pieces of the old header on screen after "Password updated". */
  transform:translateZ(0);
}
body.signin .brand-block{ display:flex; flex-direction:column; gap:var(--s-6); }
body.signin .brand{ display:flex; align-items:baseline; gap:var(--s-8); }
/* Joel, Oct 22: "The spot" beside the wordmark on every sign-in page (as on the landing page and the sport picker) --
   one rule for the ten pages that share this header; white cells, the pocket in the sport's accent (index.html kb-mark) */
body.signin .signin-head .brand{ align-items:center; }
body.signin .signin-head .brand::before{ content:''; flex:none; width:26px; height:26px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850%2050%29%20skewX%28-14%29%20translate%28-38%20-38%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2227%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2227%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%2227%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2254%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2254%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%2254%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFB81C%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-sport="softball"] body.signin .signin-head .brand::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850%2050%29%20skewX%28-14%29%20translate%28-38%20-38%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2227%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2227%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%2227%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2254%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2254%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%2254%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%23FF4F9A%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.signin .brand h1{ margin:0; font-size:var(--t-24); line-height:1; color:var(--on-dark); }
body.signin .brand-word{ font-family:var(--font-wordmark) !important; font-weight:400 !important; letter-spacing:0.02em; white-space:nowrap; }
body.signin .tagline{
  font-size:var(--t-10); font-weight:700; font-stretch:90%; letter-spacing:var(--tr-tag);
  text-transform:uppercase; color:var(--on-dark-faint);
}
body.signin .signin-head h2.display{
  margin:0; font-family:var(--font-display); font-weight:800; font-size:var(--t-44);
  line-height:0.95; letter-spacing:var(--tr-display); text-transform:uppercase; color:var(--on-dark);
}
body.signin .signin-head .last{ color:var(--accent); }
body.signin .signin-head > div:not(.brand-block){ display:flex; flex-direction:column; gap:var(--s-12); }
body.signin .role-tag{ margin:0; }

/* the form */
body.signin .display{ font-family:var(--font-display); font-weight:800; letter-spacing:var(--tr-display); text-transform:uppercase; }
body.signin .field{ display:flex; flex-direction:column; gap:var(--s-6); }
body.signin .field-label{
  font-size:var(--t-10); font-weight:700; font-stretch:90%; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--ink-faint);
}
body.signin .text-input{
  width:100%; min-height:var(--tap-min); padding:var(--s-8) var(--s-12);
  background:var(--card); color:var(--ink); font-size:var(--t-16);
  border:1.5px solid var(--border-strong); border-radius:var(--radius-control);
}
body.signin .text-input::placeholder{ color:var(--ink-faint); }
body.signin .text-input:focus{ outline:none; border-color:var(--brand-mid); box-shadow:var(--ring-focus); }
body.signin p.sub{ font-size:var(--t-14); color:var(--ink-dim); margin:0; }
body.signin .error-msg{ font-size:var(--t-12); color:var(--danger); min-height:16px; }
body.signin .info-msg{
  font-size:var(--t-14); color:var(--ink-dim); line-height:1.5;
  background:var(--surface); border-radius:var(--radius-control); padding:var(--s-12);
}
body.signin .spinner-msg{ font-size:var(--t-14); color:var(--ink-dim); text-align:center; }
body.signin .forgot-link{ align-self:flex-end; font-size:var(--t-12); }
body.signin .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s-8); }
body.signin .site-footer{ font-size:var(--t-12); color:var(--ink-faint); text-align:center; margin:0 0 var(--s-24); }
body.signin .site-footer a{ font-size:var(--t-12); font-weight:400; color:var(--ink-faint); text-decoration:underline; }

/* age and terms questions (sign-ups, join, accept-invite) */
body.signin .age-options{ display:flex; flex-direction:column; gap:var(--s-6); margin-top:var(--s-6); }
body.signin .age-row{ flex-direction:row; gap:var(--s-16); }
body.signin .age-opt{ display:flex; align-items:center; gap:var(--s-8); font-size:var(--t-14); color:var(--ink); cursor:pointer; min-height:34px; }
body.signin .age-opt input, body.signin .terms-check input{ width:18px; height:18px; accent-color:var(--brand-mid); flex:0 0 auto; margin:0; }
body.signin .age-note{ font-size:var(--t-12); color:var(--ink-dim); margin:var(--s-6) 0 0; line-height:1.45; }
body.signin .age-stop{ font-size:var(--t-14); color:var(--ink); background:var(--surface); border-radius:var(--radius-control); padding:var(--s-8) var(--s-12); margin:0; line-height:1.45; }
body.signin .age-stop a{ color:var(--brand-mid); text-decoration:underline; font-size:var(--t-14); }
body.signin .terms-check{ display:flex; align-items:flex-start; gap:var(--s-8); font-size:var(--t-14); color:var(--ink-dim); line-height:1.45; cursor:pointer; }
body.signin .terms-check a{ color:var(--brand-mid); text-decoration:underline; font-size:var(--t-14); }

/* page-only pieces, kept here so no page carries its own color or font CSS */
body.signin .section-label{ font-family:var(--font-display); font-size:var(--t-24); font-weight:800; text-transform:uppercase; letter-spacing:var(--tr-display); line-height:1; margin-top:var(--s-4); color:var(--ink); }   /* parent-signup */
body.signin .joinas-list{ display:flex; flex-direction:column; gap:var(--s-8); }   /* join: "Join as" */
body.signin .joinas-btn{ background:var(--card); color:var(--ink); border:1.5px solid var(--border-strong); border-radius:var(--radius-control); padding:var(--s-12) var(--s-12); font-size:var(--t-16); font-weight:600; text-align:left; min-height:48px; }
body.signin .joinas-btn:hover{ border-color:var(--brand-mid); }
body.signin .joinas-btn small{ display:block; font-size:var(--t-12); font-weight:400; color:var(--ink-faint); margin-top:var(--s-2); }
body.signin .joinas-new{ border-style:dashed; }
body.signin .email-readout{   /* accept-invite */
  background:var(--surface); border-radius:var(--radius-control); color:var(--ink-dim);
  padding:var(--s-12) var(--s-12); font-size:var(--t-14); font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700;
}
body.signin .summary{ font-size:var(--t-14); color:var(--ink-dim); line-height:1.55; margin:0; }   /* guardian-consent */
body.signin .summary strong{ color:var(--ink); }
body.signin .approve-btn{ white-space:normal; min-height:48px; padding:var(--s-8) var(--s-16); }
body.signin .policy-links{ display:flex; gap:var(--s-16); flex-wrap:wrap; }
body.signin .signin-head p{ margin:0; font-size:var(--t-14); color:var(--on-dark-dim); }   /* a subtitle under the title, on dark */
body.signin .signin-head a{ color:var(--on-dark); font-weight:600; text-decoration:underline; }

/* ==========================================================================
   index.html -- "Which sport?" then "Who are you?" (<body class="landing">).
   The light page: wordmark, the 64px title, cards. The sport cards wear their
   sport's own colors (tokens --bb-* / --sb-*), side by side, whatever the page's sport.
   ========================================================================== */
body.landing{
  margin:0; min-height:var(--kb-screen, 100vh); padding:var(--s-24); overflow-x:hidden; box-sizing:border-box;   /* the padding sits inside the screen, not below it */
  display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--ink); font-family:var(--font-sans);
}
body.landing *{ box-sizing:border-box; }
body.landing ::selection{ background:var(--accent); color:var(--on-accent); }
body.landing a{ color:inherit; }
body.landing button:focus-visible, body.landing a:focus-visible{ outline:var(--focus); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ body.landing *{ transition:none !important; animation:none !important; } }
body.landing .display{ font-family:var(--font-display); font-weight:800; letter-spacing:var(--tr-display); text-transform:uppercase; }
body.landing .wrap{ width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; gap:var(--s-48); text-align:center; }
body.landing .brand-block{ display:flex; flex-direction:column; align-items:center; gap:var(--s-6); }
body.landing .brand{ display:flex; align-items:baseline; gap:var(--s-8); }
body.landing .brand-word{ font-family:var(--font-wordmark) !important; font-weight:400 !important; letter-spacing:0.02em; white-space:nowrap; }
body.landing .brand h1{ font-size:var(--t-24); line-height:1; margin:0; color:var(--brand-bg); }
body.landing .tagline{ font-size:var(--t-10); font-weight:700; font-stretch:90%; letter-spacing:var(--tr-tag); text-transform:uppercase; color:var(--ink-faint); }
body.landing h2.display{ font-size:var(--t-64); line-height:0.95; margin:0; color:var(--brand-bg); font-weight:900; }
body.landing .options{ display:flex; gap:var(--s-20); width:100%; flex-wrap:wrap; justify-content:center; }
body.landing .option-card{
  flex:1; min-width:230px; max-width:300px; padding:var(--s-32) var(--s-24);
  background:var(--card); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-control);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-12); cursor:pointer; text-decoration:none;
  transition:border-color var(--duration-fast) ease, transform var(--duration-fast) ease, background var(--duration-fast) ease;
}
body.landing .option-card:hover{ border-color:var(--brand-mid); background:var(--card-2); transform:translateY(-3px); }
body.landing .option-icon{ width:56px; height:56px; border-radius:var(--radius-circle); background:var(--surface); display:flex; align-items:center; justify-content:center; }
body.landing .option-icon svg{ width:26px; height:26px; color:var(--ink); }
/* Joel, Oct 22: the wordmark with "The spot" beside it (as on the landing page), and each sport's card shows its own
   mark -- white cells, the pocket in that sport's accent (gold; rally pink) -- instead of a drawn ball. */
body.landing .brand-lockup{ display:flex; align-items:center; justify-content:center; gap:10px; }
body.landing .brand-lockup .mark{ width:30px; height:30px; flex:none; color:var(--ink); }
body.landing .option-card.sport-bb .option-icon.option-mark, body.landing .option-card.sport-sb .option-icon.option-mark{ background:transparent; width:56px; height:56px; }
body.landing .option-icon.option-mark svg.mark{ width:52px; height:52px; color:#FFFFFF; }
body.landing .option-card.sport-bb .option-mark{ --mark-lit:var(--bb-accent); }
body.landing .option-card.sport-sb .option-mark{ --mark-lit:var(--sb-accent); }
body.landing .option-title{ font-family:var(--font-display); font-size:var(--t-32); font-weight:800; text-transform:uppercase; letter-spacing:var(--tr-display); }
body.landing .option-desc{ font-size:var(--t-14); color:var(--ink-faint); line-height:1.5; }
/* the two sport cards: each sport's own brand and accent */
body.landing .option-card.sport-bb{ background:var(--bb-brand); border-color:transparent; color:#FFFFFF; }
body.landing .option-card.sport-bb:hover{ background:var(--bb-brand-2); border-color:var(--bb-accent); }
body.landing .option-card.sport-bb .option-icon{ background:var(--bb-brand-2); }
body.landing .option-card.sport-bb .option-desc{ color:var(--bb-on-dark-dim); }
body.landing .option-card.sport-bb .option-title{ color:var(--bb-accent); }
body.landing .option-card.sport-sb{ background:var(--sb-brand); border-color:transparent; color:#FFFFFF; }
body.landing .option-card.sport-sb:hover{ background:var(--sb-brand-2); border-color:var(--sb-accent); }
body.landing .option-card.sport-sb .option-icon{ background:var(--sb-brand-2); }
body.landing .option-card.sport-sb .option-desc{ color:var(--sb-on-dark-dim); }
body.landing .option-card.sport-sb .option-title{ color:var(--sb-accent); }
/* two frames -- sport, then role; the sport frame slides out left as the role frame slides in */
body.landing .stage{ position:relative; width:100%; display:grid; overflow:hidden; padding:var(--s-6) 0 var(--s-8); }
body.landing .frame{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; gap:var(--s-24); transition:transform var(--duration-slow) ease-out, opacity var(--duration-slow) ease-out; }
body.landing .frame.off-left{ transform:translateX(-100%); opacity:0; pointer-events:none; }
body.landing .frame.off-right{ transform:translateX(100%); opacity:0; pointer-events:none; }
body.landing .back-link{ align-self:flex-start; padding:0 var(--s-8); margin-left:calc(-1 * var(--s-8)); }
body.landing .foot{ font-size:var(--t-12); color:var(--ink-faint); letter-spacing:0.06em; text-transform:uppercase; }
body.landing .foot a{ color:inherit; text-decoration:underline; }
/* phones: start from the top; the cards stack, full width (Joel, Oct 1) */
@media (max-width:500px){
  body.landing{ align-items:flex-start; padding:var(--s-20) var(--s-16) var(--s-12); }
  body.landing .wrap{ gap:var(--s-12); }
  body.landing h2.display{ font-size:var(--t-44); }
  body.landing .frame{ gap:var(--s-12); }
  body.landing .options{ flex-direction:column; flex-wrap:nowrap; gap:var(--s-12); }
  body.landing .option-card{ flex:none; min-width:0; width:100%; max-width:none; padding:var(--s-20) var(--s-16); gap:var(--s-8); }
  body.landing .option-icon{ width:54px; height:54px; }
}
@media (max-width:500px) and (max-height:640px){
  body.landing{ padding-top:var(--s-16); }
  body.landing .wrap{ gap:var(--s-8); }
  body.landing h2.display{ font-size:var(--t-32); }
  body.landing .frame, body.landing .options{ gap:var(--s-8); }
  body.landing .option-card{ padding:var(--s-12) var(--s-16); gap:var(--s-4); }
  body.landing .option-icon{ width:44px; height:44px; }
  body.landing .option-icon svg.ball{ width:28px; height:28px; }
  body.landing .option-title{ font-size:var(--t-24); }
}
@media (max-width:500px) and (max-height:570px){
  body.landing .tagline{ display:none; }
  body.landing .option-desc{ font-size:var(--t-12); }
  body.landing .option-card{ padding:var(--s-8) var(--s-12); }
}
.next-pitch{ white-space:nowrap; }   /* D1/D2: the one Next Pitch component (variants: .g5-nextpitch under the field, .g5-act-next in the field actions) */
body.signin .card > .btn-primary{ box-shadow:var(--ring-plate); }   /* Joel, Oct 13: a dark plate behind the sign-in pages' main button */