.hub-lede { color: var(--ink-2); font-size: 14px; max-width: 62ch; margin: 10px 0 30px; }

.cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 18px 18px 16px;
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
a.card:hover { border-color: var(--rule); transform: translateY(-1px); }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.005em; }
.card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.card .meta {
  margin-top: auto; padding-top: 10px;
  font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.card .row { display: flex; align-items: center; gap: 8px; }
.tag {
  font-size: 10px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.tag.live    { color: #006300; background: rgba(12,163,12,.12); }
.tag.planned { color: var(--ink-muted); background: var(--row-hover); }
:root[data-theme="dark"] .tag.live { color: #0ca30c; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .tag.live { color: #0ca30c; }
}
.card.planned { opacity: .72; }

/* ---- card thumbnails ------------------------------------------------
   Drawn from real data by build_thumbs.py. The field tokens are the page's
   own, copied value-for-value, so the card inherits the audit those colours
   already passed rather than inventing a second palette that has to be
   re-checked -- and so it keeps looking like the page it previews. */
:root {
  --t-grass:  #eef1f5;
  --t-stands: #e6e9ee;
  --t-fence:  #39424e;
  --t-chalk:  #58616d;
  --t-hit1:   #a1880d;   /* single */
  --t-hit2:   #1857d5;   /* extra bases */
  --t-hit3:   #740918;   /* left the yard */
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --t-grass:#191e25; --t-stands:#151a20; --t-fence:#c2ccd8; --t-chalk:#99a3af;
    --t-hit1:#806d0a; --t-hit2:#759be6; --t-hit3:#f2b6be;
  }
}
:root[data-theme="dark"] {
  --t-grass:#191e25; --t-stands:#151a20; --t-fence:#c2ccd8; --t-chalk:#99a3af;
  --t-hit1:#806d0a; --t-hit2:#759be6; --t-hit3:#f2b6be;
}

.cards > li { display: flex; }
.card { gap: 0; flex: 1; }
.thumb {
  margin: -18px -18px 14px; border-bottom: 1px solid var(--ring);
  border-radius: 10px 10px 0 0; overflow: hidden;
  background: var(--row-hover); line-height: 0;
}
.thumb-svg { display: block; width: 100%; height: auto; }

/* A planned card has nothing to preview. Say that deliberately -- a faint
   hatch at the same aspect as a real thumbnail -- rather than leaving a flat
   panel that reads as a broken image. */
.thumb-empty {
  aspect-ratio: 300 / 190; background: var(--row-hover);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 7px, var(--ring) 7px 8px);
}
.card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* leaderboard grid */
.t-name { fill: var(--ink); opacity: .16; }
.tc0{fill:var(--b0)}  .tc1{fill:var(--b1)}  .tc2{fill:var(--b2)}
.tc3{fill:var(--b3)}  .tc4{fill:var(--b4)}  .tc5{fill:var(--b5)}
.tc6{fill:var(--b6)}  .tc7{fill:var(--b7)}  .tc8{fill:var(--b8)}
.tc9{fill:var(--b9)}  .tc10{fill:var(--b10)}

/* batted-ball field: the page's spray overlay */
.t-stands { fill: var(--t-stands); }
.t-fair   { fill: var(--t-grass); }
.t-wall   { fill: none; stroke: var(--t-fence); stroke-width: 1.3; opacity: .9; }
.t-foul   { fill: none; stroke: var(--t-chalk); stroke-width: 1.1; opacity: .75; }
.th1 { fill: var(--t-hit1); }
.th2 { fill: var(--t-hit2); }
.th3 { fill: var(--t-hit3); }

/* heartbreak hotel: club lines. Each line brings its own light and dark
   colour (--l / --d) from build_thumbs.py, solved against this ground. */
.t-season { stroke: var(--rule); stroke-width: .6; }
.t-line   { fill: none; stroke: var(--l); stroke-linejoin: round; stroke-linecap: round; }
.t-zero   { stroke-width: 1; }
.t-dim    { stroke-width: .7; }
.t-picked { stroke-width: 1.7; }
:root[data-theme="dark"] .t-line { stroke: var(--d); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .t-line { stroke: var(--d); }
}

@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }