/* ==========================================================================
   League Leaders — stylesheet
   Dense, scannable stat tables in the spirit of a classic league-leaders
   page, with the brand red carried from the logo.
   ========================================================================== */

:root {
  --brand:        #b22524;
  --brand-dark:   #8c1b1a;
  --brand-tint:   #fbeceb;

  --ink:          #16191d;
  --ink-2:        #3d444d;
  --ink-3:        #6b737d;
  --ink-4:        #98a0aa;

  --bg:           #f2f3f5;
  --surface:      #ffffff;
  --surface-2:    #f8f9fa;
  --border:       #dfe3e8;
  --border-strong:#c6ccd4;

  --header-bg:    #16191d;
  --header-ink:   #ffffff;

  --gold:         #b8860b;
  --green:        #1a7f37;
  --green-tint:   #e6f4ea;
  --green-line:   rgba(26, 127, 55, .28);

  --radius:       8px;
  --radius-sm:    4px;
  --shadow:       0 1px 2px rgba(16, 20, 26, .06), 0 2px 8px rgba(16, 20, 26, .04);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:        #e2504a;
    --brand-dark:   #b22524;
    --brand-tint:   #2a1917;

    --ink:          #eef1f4;
    --ink-2:        #c2c9d1;
    --ink-3:        #939ba5;
    --ink-4:        #6f7883;

    --bg:           #0f1216;
    --surface:      #171b21;
    --surface-2:    #1d222a;
    --border:       #2a313a;
    --border-strong:#3a424d;

    --header-bg:    #0a0c0f;
    --gold:         #d8a730;
    --green:        #4ac26b;
    --green-tint:   rgba(74, 194, 107, .13);
    --green-line:   rgba(74, 194, 107, .32);
    --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* --------------------------------------------------------------- header -- */

.masthead {
  background: var(--header-bg);
  border-bottom: 3px solid var(--brand);
}

.masthead__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 76px; width: auto; }
.brand:hover { text-decoration: none; }

.sport-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

.sport-nav a {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Active state is a bottom bar rather than a filled pill: a red block behind
     a league mark fights the mark's own colours. */
  border-bottom: 3px solid transparent;
}
.sport-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.sport-nav a.is-active { color: #fff; border-bottom-color: var(--brand); }

/* League marks */
.sport-nav a.has-icon { padding: 6px 12px 3px; }

.sport-nav a.has-icon img {
  display: block;
  height: 30px;
  width: auto;
  /* Marks are full-colour artwork, so dim rather than recolour. */
  opacity: .62;
  transition: opacity .12s ease, filter .12s ease;
}
.sport-nav a.has-icon:hover img { opacity: 1; }
.sport-nav a.has-icon.is-active img { opacity: 1; }

/* Sports with no data yet read as inactive: desaturated and further dimmed,
   but still clickable through to their placeholder page. */
.sport-nav a.is-upcoming img { filter: grayscale(1); opacity: .38; }
.sport-nav a.is-upcoming:hover img { filter: grayscale(.35); opacity: .8; }
.sport-nav a.is-upcoming { color: rgba(255, 255, 255, .38); }

.masthead__search { margin-left: auto; }

.masthead__search input {
  width: 210px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
}
.masthead__search input::placeholder { color: rgba(255, 255, 255, .45); }
.masthead__search input:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, .14);
}

/* ---------------------------------------------------------------- layout -- */

.wrap { max-width: 1240px; margin: 0 auto; padding: 22px 20px 56px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Spacing for cards stacked directly on top of one another. Grid children get
   their spacing from `gap` instead — without this reset the rule below leaks
   in and drops every card except the first by 18px, knocking the first card in
   each row out of alignment with its neighbours. */
.card + .card { margin-top: 18px; }
.grid .card + .card { margin-top: 0; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card__head h2, .card__head h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.card__body { padding: 16px; }

/* ------------------------------------------------------------- controls -- */

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.field { display: flex; flex-direction: column; gap: 5px; }

.field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.field select, .field input[type="text"], .field input[type="number"] {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  min-width: 130px;
}
.field select:focus, .field input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.check input { accent-color: var(--brand); width: 15px; height: 15px; }

.btn {
  padding: 8px 15px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover { background: var(--brand-tint); }

/* Tab strip for batting / pitching and category switching */
.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.tabs a {
  padding: 9px 16px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--brand); text-decoration: none; }
.tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------------------------------------------------------- tables -- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.stats {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.stats th, table.stats td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

table.stats thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border-strong);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
table.stats thead th a { color: inherit; }
table.stats thead th a:hover { color: var(--brand); }

table.stats tbody tr:nth-child(even) { background: var(--surface-2); }
table.stats tbody tr:hover { background: var(--brand-tint); }

/* Player links sit in ink, not brand red: a full column of red competes with
   the highlighted sort column and makes the table hard to scan. */
table.stats tbody a { color: var(--ink); }
table.stats tbody a:hover { color: var(--brand); }

/* Left-aligned identity columns */
.col-rank { width: 46px; text-align: right !important; color: var(--ink-4); font-weight: 700; }
.col-player { text-align: left !important; min-width: 178px; font-weight: 600; }
.col-team, .col-text { text-align: left !important; color: var(--ink-3); }
.col-year { text-align: left !important; font-weight: 600; width: 64px; }

/* The column the board is sorted by */
th.is-sorted, td.is-sorted { background: var(--brand-tint); color: var(--brand); font-weight: 700; }
table.stats tbody tr:hover td.is-sorted { background: transparent; }
th.is-sorted { color: var(--brand) !important; }

.rank-medal { color: var(--gold); }

.table-empty { padding: 40px 16px; text-align: center; color: var(--ink-3); }

/* ------------------------------------------------------------- home grid -- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.leader-card__list { list-style: none; margin: 0; padding: 0; }

.leader-card__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.leader-card__list li:last-child { border-bottom: 0; }
.leader-card__list li:nth-child(even) { background: var(--surface-2); }

.leader-card__rank { width: 18px; color: var(--ink-4); font-weight: 700; }
.leader-card__name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.leader-card__name a { color: var(--ink); }
.leader-card__name a:hover { color: var(--brand); }
.leader-card__team { color: var(--ink-4); font-size: 12px; }
.leader-card__value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- player photos -- */

.player-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  /* Commons crops vary wildly; bias to the top so heads are not cut off. */
  object-position: 50% 12%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
  vertical-align: middle;
}

/* The large photo keeps the source proportions instead of being cropped to a
   circle. Of the harvested photos 81% are portrait and the average is roughly
   200x313, so a square crop threw away about a third of the picture — heads
   ended up tight against the frame. Row thumbnails stay circular: at 32px
   there is nothing to lose and the round shape reads better in a table. */
/* Fills the height its column is given, so its bottom edge meets the panel's.
   object-fit keeps the framing sane while it does — a mild crop in a portrait
   box, not the third of the picture a square crop was discarding. */
.player-photo--card {
  width: 100%;
  flex: 1 1 auto;
  min-height: 170px;
  height: auto;
  aspect-ratio: auto;
  border-radius: var(--radius);
  border-width: 1px;
  object-fit: cover;
  object-position: 50% 18%;
}

/* The initials fallback stands in for a photo, so it stretches the same way. */
span.player-photo--card {
  height: auto;
  min-height: 170px;
}

.player-photo--avatar {
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  border-color: transparent;
  user-select: none;
}

/* Photo + name in a table cell */
.player-cell { display: flex; align-items: center; gap: 10px; }
.player-cell__name { overflow: hidden; text-overflow: ellipsis; }

/* Attribution overlays the foot of the photo rather than sitting under it.
   Only the ~42% of photos under CC BY / CC BY-SA carry one, so a credit in
   normal flow made those players' images 23px shorter than everyone else's
   and broke the alignment with the leadership panel. A scrim keeps it legible
   over any picture. */
.photo-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 18px 9px 6px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  color: rgba(255, 255, 255, .88);
  font-size: 10px;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: auto;
}
.photo-credit a { color: #fff; text-decoration: underline; }
.photo-credit a:hover { color: #fff; }

/* ------------------------------------------------------------ player page -- */

.player-head {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  /* Stretch, not flex-start: the leadership panel sets the row height, and the
     photo fills it so the two line up at the bottom. Pinning the panel to a
     fixed height instead would only align for one player — every Commons
     photo has its own aspect ratio, so the natural photo height varies. */
  align-items: stretch;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.player-head__photo {
  flex: 0 0 164px;
  width: 164px;
  display: flex;
  flex-direction: column;
  position: relative;   /* anchors the overlaid photo credit */
}
.player-head__id { flex: 1 1 260px; min-width: 240px; }
.player-head__lead {
  flex: 2 1 420px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}
.player-head h1 { font-size: 30px; }

/* Career totals are supporting context, not the headline — one quiet line. */
.career-line {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.career-line__tag {
  display: inline-block;
  margin-right: 8px;
  color: var(--ink-4);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.career-line__sep { color: var(--ink-4); }

/* --------------------------------------------------------- leadership -- */

/* One composed panel rather than a grid of equal boxes: the headline figure
   is what the page is about, the other four are context. A uniform grid gave
   them all equal weight and wrapped raggedly at in-between widths. */
.lead-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.lead-panel__hero {
  padding: 13px 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.lead-hero__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-4);
}

.lead-hero__figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.lead-hero__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Green portion also led all of baseball; gold portion led the league only.
   Nested parts of one total, which is why they share a single bar. */
.lead-split {
  display: flex;
  height: 7px;
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
}
.lead-split__major { background: var(--green); }
.lead-split__league { background: var(--gold); }

.lead-split__key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--ink-3);
}
.lead-split__key .swatch { margin-right: 5px; }

/* Supporting figures: an evenly divided rail, so they can never wrap into an
   orphaned row the way grid cells did. */
.lead-panel__rail { display: flex; }

.lead-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px 10px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.lead-stat:first-child { border-left: 0; }

.lead-stat__value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lead-stat__label {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-4);
  line-height: 1.3;
}

.lead-panel { flex: 1 1 auto; display: flex; flex-direction: column; }
.lead-panel__rail { margin-top: auto; }
.lead-panel__note { margin: 8px 0 0; color: var(--ink-3); font-size: 12px; }

@media (max-width: 560px) {
  .lead-hero__value { font-size: 38px; }
  .lead-panel__rail { flex-wrap: wrap; }
  .lead-stat { flex: 1 1 50%; }
  .lead-stat:nth-child(3) { border-left: 0; }
  .lead-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}

.lead-empty {
  padding: 18px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
}
.lead-empty strong { display: block; margin-bottom: 3px; }

/* ------------------------------------------------------ all-time standing -- */

.standing {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.standing__col {
  flex: 1 1 240px;
  padding: 16px;
  min-width: 240px;
}
.standing__col--wide { flex: 2 1 420px; border-left: 1px solid var(--border); }

.standing__title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-4);
}

.standing__list { list-style: none; margin: 0; padding: 0; }
.standing__list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 0 20px;
}

.standing__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.standing__rank {
  min-width: 42px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
/* Top ten all-time is the line worth drawing attention to. */
.standing__rank.is-elite { color: var(--green); }

.standing__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing__label a { color: var(--ink); }
.standing__label a:hover { color: var(--brand); }

.standing__value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Shown when a player reaches no career top 500 — which is most of them. The
   column stays in place so the ranks beside it keep their column width. */
.standing__empty {
  padding: 14px 15px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
}
.standing__empty strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-2);
  font-size: 13px;
}

.standing__note { margin: 10px 0 0; color: var(--ink-4); font-size: 11px; }

@media (max-width: 720px) {
  .standing__col--wide { border-left: 0; border-top: 1px solid var(--border); }
}

/* Triple Crowns — the rarest thing in the data */
.crown-strip { display: grid; gap: 10px; margin-bottom: 18px; }

.crown {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(184, 134, 11, .16), rgba(184, 134, 11, .05));
  border: 1px solid rgba(184, 134, 11, .4);
}
.crown__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .01em;
}
.crown__detail { margin-top: 3px; font-size: 13px; color: var(--ink-2); }

.note--streak { border-left-color: var(--green); margin-bottom: 18px; }

/* Legend swatches in the card header */
.swatch {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  vertical-align: baseline;
}
.swatch--major { background: var(--green); }
.swatch--gold { background: var(--gold); }

/* Title tables hold wrapping badge lists, so let those cells breathe. */
table.stats--titles td.col-text { white-space: normal; }
table.stats--titles td { vertical-align: top; padding-top: 10px; }
table.stats--titles .badge { margin: 0 4px 4px 0; }

.badge--near {
  background: var(--surface-2);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--border);
  font-weight: 600;
}
.player-head__meta { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; }

.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px 22px;
  margin-top: 16px;
}
.bio-grid dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-4);
}
.bio-grid dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.stat-tile {
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.stat-tile__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-4);
}
.stat-tile__value {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  margin: 0 5px 5px 0;
}
/* Season badges are links to the board they came from. Keep the badge's own
   colour rather than the global link red, and lift slightly on hover so they
   read as clickable without turning the table into a wall of underlines. */
a.badge {
  cursor: pointer;
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
}
a.badge:hover,
a.badge:focus-visible {
  text-decoration: none;
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px currentColor inset, 0 1px 3px rgba(16, 20, 26, .18);
  transform: translateY(-1px);
}
a.badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.badge--gold { background: rgba(184, 134, 11, .12); color: var(--gold); }

/* Led all of Major League Baseball, not just one league — the top tier of
   honour, so it gets its own colour and drops the league name entirely. */
.badge--major {
  background: var(--green-tint);
  color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green-line);
}

/* ------------------------------------------------------------- utilities -- */

.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.note {
  padding: 11px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 13px;
}

.pager { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.pager__spacer { flex: 1; }

.placeholder {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
}
.placeholder h2 { color: var(--ink-2); margin-bottom: 8px; }
.placeholder__badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}

.site-foot {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 22px 20px;
  color: var(--ink-3);
  font-size: 12px;
}
.site-foot__inner { max-width: 1240px; margin: 0 auto; display: flex; gap: 16px; flex-wrap: wrap; }
.site-foot__inner p { margin: 0; }

@media (max-width: 720px) {
  .masthead__inner { gap: 12px; }
  .masthead__search { margin-left: 0; width: 100%; }
  .masthead__search input { width: 100%; }
  .brand img { height: 54px; }
  h1 { font-size: 21px; }
}

/* ==========================================================================
   Admin panel (/admin)
   Reuses the public components; only the few admin-specific pieces live here.
   ========================================================================== */

.admin-badge {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.admin-login { max-width: 380px; margin: 40px auto; }

.flash {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}
.flash--ok  { background: var(--green-tint); color: var(--green);
              box-shadow: inset 0 0 0 1px var(--green-line); }
.flash--err { background: var(--brand-tint); color: var(--brand);
              box-shadow: inset 0 0 0 1px rgba(178, 37, 36, .3); }

/* Photo and credit sit side by side; the details form takes the full width. */
.admin-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}
.admin-cols__wide { grid-column: 1 / -1; }

.admin-photo { display: flex; justify-content: center; }
/* Outside the player-head flex row the card photo has no height to fill, so
   give it one here rather than letting it collapse. */
.admin-photo .player-photo--card { width: 164px; flex: 0 0 auto; height: 210px; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
}
.admin-grid .field input,
.admin-grid .field select { width: 100%; }

.admin-cols code, .page-head code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 12px;
}

/* ==========================================================================
   Front page
   Built around leaders rather than a leaderboard, so the components here are
   faces and reigns rather than dense stat rows.
   ========================================================================== */

.hero-lead {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
  padding: 30px 28px;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-tint) 0%, transparent 62%),
    var(--surface);
  box-shadow: var(--shadow);
}
.hero-lead__copy { flex: 2 1 380px; min-width: 280px; }
.hero-lead__copy h1 { font-size: 34px; letter-spacing: -.02em; }
.hero-lead__copy p {
  margin: 8px 0 0;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.hero-lead__search { display: flex; gap: 8px; margin-top: 18px; max-width: 460px; }
.hero-lead__search input {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.hero-lead__search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.hero-lead__stats {
  flex: 1 1 220px;
  display: grid;
  gap: 12px;
  margin: 0;
}
.hero-lead__stats div {
  padding-left: 14px;
  border-left: 3px solid var(--brand);
}
.hero-lead__stats dt {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-4);
}
.hero-lead__stats dd {
  margin: 1px 0 0;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.section-head { margin-top: 30px; }
.section-head h2 { font-size: 20px; }

/* ---------------------------------------------------- spotlight players -- */

/* Two columns, fixed — not auto-fit. There are always four cards, and letting
   the browser choose gave three across at desktop width, orphaning the fourth
   on a row of its own. Two columns divides four evenly at every size. */
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .spotlight-grid { grid-template-columns: repeat(2, 1fr); }
}

/* An editorial card rather than a profile chip: upright portrait on the left,
   the numbers that justify the spotlight on the right. Two per row keeps the
   photo at 140px, which is under the 200px stored width — a four-across grid
   stretched it past its native size and it showed. */
.spot {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.spot:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(16, 20, 26, .13);
}

.spot__photo { position: relative; flex: 0 0 140px; }

.player-photo--tile {
  width: 140px;
  height: 180px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: 50% 16%;
  border: 1px solid var(--border);
  display: block;
}
span.player-photo--tile { display: flex; }

/* All-time standing, sat on the portrait — the one number that says why this
   player is worth looking at. */
.spot__rank {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 9px;
  border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.spot__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spot__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot__years { margin-top: 1px; color: var(--ink-4); font-size: 12px; }

.spot__count { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.spot__count-num {
  font-size: 40px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.spot__count-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-4);
}

.spot__split {
  display: flex;
  height: 6px;
  margin-top: 11px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}
.spot__split span { background: var(--green); }
.spot__split span.is-league { background: var(--gold); }

.spot__key { margin-top: 6px; font-size: 11px; color: var(--ink-3); }

.spot__sig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.spot__sig-label { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot__sig-count { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .spot { flex-direction: column; align-items: center; text-align: center; }
  .spot__sig { width: 100%; }
}


/* ------------------------------------------------------------- boards -- */

.board { list-style: none; margin: 0; padding: 0; }

.board li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.board li:last-child { border-bottom: 0; }
.board li:nth-child(even) { background: var(--surface-2); }

.board__rank {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  color: var(--ink-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.board__rank.is-first  { color: var(--gold); }
.board__rank.is-streak { color: var(--green); font-size: 17px; }
.board__rank.is-crown  { color: var(--gold); font-size: 12px; min-width: 38px; }

.board__player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.board__player:hover { color: var(--brand); text-decoration: none; }
.board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board__name small { display: block; color: var(--ink-4); font-weight: 400; font-size: 11px; }

.board__team  { color: var(--ink-4); font-size: 12px; }
.board__note  { color: var(--ink-3); font-size: 12px; text-align: right; }
.board__value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.board__value--big { font-size: 20px; color: var(--brand); }

.board__split {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  font-size: 11px;
  color: var(--ink-4);
}
.board__major { color: var(--green); }

/* The rich board gives its faces more room. */
.board--rich li { padding: 11px 16px; }
.board--rich .player-photo--round { width: 44px; height: 44px; border-width: 1px; }

.grid--two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }


@media (max-width: 640px) {
  .hero-lead { padding: 22px 18px; }
  .hero-lead__copy h1 { font-size: 26px; }
  .hero-lead__stats { grid-template-columns: repeat(3, 1fr); }
  .hero-lead__stats dd { font-size: 17px; }
  .board__split, .board__note { display: none; }
}

/* A utility bar directly under the nav: for the visitor who already knows the
   season they want and does not need the spotlight to sell them one. Deliberately
   quieter than the hero it sits above — one line, no card chrome. */
.browse-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.browse-bar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-4);
}

.browse-bar__field { display: flex; align-items: center; gap: 7px; }
.browse-bar__field > span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}
.browse-bar__field select {
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.browse-bar__field select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.browse-bar .btn { padding: 6px 13px; }

.browse-bar__link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.browse-bar__link:hover { color: var(--brand); }

@media (max-width: 620px) {
  .browse-bar__label { width: 100%; }
  .browse-bar__link { margin-left: 0; }
}