/* ── Home Run Derby Pick 'Em (/derby) ─────────────────────────────────────────
   Mobile-first. Uses bundle.css tokens (dark-first, light via [data-theme]).
   RWB accent strip = --thr-red / --thr-white / --thr-blue. No emoji — text
   separators + inline SVG line icons only. */

.derby { max-width: 1080px; margin: 0 auto; padding: 0 4px 40px; }
.derby .num { font-variant-numeric: tabular-nums; }

/* Hero */
.derby-hero {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--grad-start), var(--grad-mid) 55%, var(--grad-end));
  padding: 26px 20px 22px;
  overflow: hidden;
  margin-bottom: 18px;
}
.derby-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--thr-red) 0 33%, var(--thr-white) 33% 66%, var(--thr-blue) 66% 100%);
}
.derby-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--thr-red); margin-bottom: 10px;
}
.derby-hero h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.15; font-weight: 800; }
.derby-presented { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.derby-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text); }
.derby-facts .sep { color: var(--muted); }
.derby-flavor { margin-top: 12px; font-size: 13px; color: var(--muted); font-style: italic; }

/* Generic panel */
.derby-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 18px 16px; margin-bottom: 18px;
}
.derby-panel h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.derby-panel-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* Status pills */
.derby-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.derby-pill.confirmed { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.derby-pill.rumored { background: color-mix(in srgb, var(--thr-gold) 16%, transparent); color: var(--thr-gold); }
.derby-pill.locked { background: color-mix(in srgb, var(--thr-red) 16%, transparent); color: var(--thr-red); }

/* How-to steps */
.derby-steps { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 6px 0 4px; }
.derby-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-alt); }
.derby-step-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--thr-blue); color: var(--invert-text); font-weight: 800; font-size: 13px;
}
.derby-step b { display: block; font-size: 14px; margin-bottom: 2px; }
.derby-step span { font-size: 13px; color: var(--muted); }
.derby-prize {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--thr-gold) 45%, var(--border));
  background: color-mix(in srgb, var(--thr-gold) 8%, transparent);
  font-size: 14px;
}
.derby-prize b { color: var(--thr-gold); }

/* Format explainer */
.derby-format-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.derby-format-card { border: 1px solid var(--border); border-radius: 10px; background: var(--card-alt); padding: 12px 14px; }
.derby-format-card .tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--thr-blue); }
.derby-format-card b { display: block; font-size: 14px; margin: 3px 0 4px; }
.derby-format-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.derby-format-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* Field grid */
.derby-field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.derby-player {
  border: 1px solid var(--border); border-radius: 12px; background: var(--card-alt);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.derby-player-head { display: flex; align-items: center; gap: 12px; }
.derby-headshot {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--bar-bg); border: 1px solid var(--border); flex: 0 0 auto;
}
.derby-headshot-fallback {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bar-bg); border: 1px solid var(--border);
  color: var(--muted); font-weight: 800; font-size: 16px;
}
.derby-player-name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.derby-player-team { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.derby-player-note { font-size: 12px; color: var(--muted); font-style: italic; }
.derby-statrow { display: grid; grid-template-columns: 108px 1fr; gap: 8px; align-items: center; }
.derby-statlabel { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.derby-player .bp3-pbar { position: relative; height: 18px; background: var(--bar-bg); border-radius: 3px; overflow: visible; }
.derby-player .bp3-pbar-fill { height: 100%; border-radius: 3px; min-width: 3px; display: flex; align-items: center; justify-content: flex-end; }
.derby-player .bp3-pbar-tip { padding-right: 6px; font-size: 10.5px; font-weight: 800; color: #fff; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.derby-player .bp3-pbar-tip-out { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.derby-player .bp3-pbar.is-empty { display: flex; align-items: center; }
.derby-player .bp3-pbar-dash { padding-left: 8px; font-size: 10.5px; color: var(--na-fg); }
.derby-honesty {
  margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--thr-blue);
  background: color-mix(in srgb, var(--thr-blue) 7%, transparent);
  border-radius: 0 8px 8px 0; font-size: 13px; color: var(--text); line-height: 1.5;
}

/* Forms */
.derby-form { display: flex; flex-direction: column; gap: 14px; }
.derby-form label { font-size: 12.5px; font-weight: 700; color: var(--text); display: block; margin-bottom: 5px; }
.derby-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: inherit;
}
.derby-input:focus { outline: 2px solid var(--thr-blue); outline-offset: 0; border-color: var(--thr-blue); }
.derby-form-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.derby-picks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.derby-pick-chip { position: relative; }
.derby-pick-chip input { position: absolute; opacity: 0; pointer-events: none; }
.derby-pick-chip label {
  display: flex; flex-direction: column; gap: 2px; cursor: pointer; margin: 0;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: var(--card-alt); font-weight: 700; font-size: 13.5px;
  transition: border-color .12s, background .12s;
}
.derby-pick-chip label .team { font-size: 11px; color: var(--muted); font-weight: 600; }
.derby-pick-chip input:checked + label {
  border-color: var(--thr-blue);
  background: color-mix(in srgb, var(--thr-blue) 12%, transparent);
}
.derby-pick-chip input:focus-visible + label { outline: 2px solid var(--thr-blue); outline-offset: 1px; }
.derby-pick-chip input:disabled + label { opacity: .45; cursor: not-allowed; }
.derby-pickcount { font-size: 12px; color: var(--muted); margin-top: 6px; }
.derby-submit {
  appearance: none; border: none; cursor: pointer;
  padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 800;
  background: var(--thr-red); color: #fff; font-family: inherit;
  transition: filter .12s;
}
.derby-submit:hover { filter: brightness(1.1); }
.derby-submit:disabled { opacity: .55; cursor: not-allowed; }
.derby-consent { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.derby-msg { display: none; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.derby-msg.ok { display: block; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.derby-msg.err { display: block; background: color-mix(in srgb, var(--thr-red) 12%, transparent); color: var(--thr-red); }

/* Honeypot — visually gone, still in the DOM for bots */
.derby-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* Notify strip */
.derby-notify-form { display: flex; flex-direction: column; gap: 10px; }
.derby-notify-form .derby-input { flex: 1; }

/* Locked / results */
.derby-locked-banner {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--thr-red) 40%, var(--border));
  background: color-mix(in srgb, var(--thr-red) 8%, transparent);
  border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 700;
}
.derby-results-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.derby-result-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  background: var(--card-alt); font-size: 14px; font-weight: 700;
}
.derby-result-row.champ {
  border-color: color-mix(in srgb, var(--thr-gold) 55%, var(--border));
  background: color-mix(in srgb, var(--thr-gold) 9%, transparent);
}
.derby-result-row .role { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.derby-result-row.champ .role { color: var(--thr-gold); }

/* Fair-play footer */
.derby-fineprint {
  border-top: 1px solid var(--border); margin-top: 22px; padding-top: 14px;
  font-size: 11.5px; color: var(--muted); line-height: 1.65;
}

/* ≥640px */
@media (min-width: 640px) {
  .derby-hero { padding: 32px 28px 26px; }
  .derby-hero h1 { font-size: 38px; }
  .derby-panel { padding: 22px 22px; }
  .derby-steps { grid-template-columns: repeat(3, 1fr); }
  .derby-format-grid { grid-template-columns: repeat(2, 1fr); }
  .derby-field-grid { grid-template-columns: repeat(2, 1fr); }
  .derby-form-row { grid-template-columns: 1fr 1fr; }
  .derby-picks-grid { grid-template-columns: repeat(2, 1fr); }
  .derby-notify-form { flex-direction: row; align-items: stretch; }
}

/* ≥960px */
@media (min-width: 960px) {
  .derby-format-grid { grid-template-columns: repeat(4, 1fr); }
  .derby-field-grid { grid-template-columns: repeat(2, 1fr); }
}