/* MLB Research Hub — Park Factors leaderboard (/mlb/research-hub/park-factors)
   Scoped under #mlb-pf-hub so nothing leaks. Mirrors the layout
   conventions of mlb-pitcher-matchups.css and mlb-home-run-zone.css. */

#mlb-pf-hub {
  width: 100%;
  padding: 20px 20px 32px;
  box-sizing: border-box;
}

#mlb-pf-hub .pf-page {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Filter bar — sized to its content rather than full page width so
   it doesn't visually overrun the card grid. Centered horizontally
   above the grid. Wraps onto a second row when there isn't enough
   horizontal space. */
#mlb-pf-hub .pf-filters-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
#mlb-pf-hub .pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 10px 16px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
#mlb-pf-hub .pf-filter-group {
  display: flex; align-items: center;
  gap: 10px;
}
#mlb-pf-hub .pf-filter-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .7px;
  color: #64748b; text-transform: uppercase;
}
#mlb-pf-hub .pf-pill-row { display: flex; gap: 6px; }
#mlb-pf-hub .pf-pill {
  padding: 6px 16px;
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  color: #f1f5f9;
  font-size: .85rem; font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
#mlb-pf-hub .pf-pill:hover {
  border-color: rgba(255,255,255,.20);
}
#mlb-pf-hub .pf-pill.is-active {
  color: #f8fafc;
  background: rgba(34, 211, 238, .15);
  border-color: rgba(34, 211, 238, .50);
}
#mlb-pf-hub .pf-select {
  padding: 5px 10px;
  background: rgba(15,23,42,.6);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
}
#mlb-pf-hub .pf-select:hover { border-color: rgba(34,211,238,.40); }

/* Grid + columns — same masonry scheme as the sibling research-hub pages. */
#mlb-pf-hub .pf-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
#mlb-pf-hub .pf-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#mlb-pf-hub .pf-grid-loading,
#mlb-pf-hub .pf-loading {
  flex: 1;
  padding: 36px 24px; text-align: center;
  color: #64748b; font-style: italic;
}

/* Card shell */
#mlb-pf-hub .pf-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}

/* Head — wraps the single combined pill. The pill itself provides
   the visual border + bg, so the head is just a thin padding shell
   to inset the pill from the card edges. */
#mlb-pf-hub .pf-head {
  padding: 14px 14px 8px;
}
#mlb-pf-hub .pf-team {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
#mlb-pf-hub .pf-team-logo {
  width: 34px; height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
#mlb-pf-hub .pf-team-name-col {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  /* align-items: flex-start avoids flex's default `stretch` on the
     children; combined with explicit text-align: left this keeps the
     team name flush with the venue line below it (the bold/italicized
     team name was rendering off-center against the lighter venue). */
  align-items: flex-start;
}
#mlb-pf-hub .pf-team-name {
  font-size: .92rem; font-weight: 700; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
#mlb-pf-hub .pf-venue {
  font-size: .72rem; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
/* The combined head pill — matchup + time on the left, PF on the
   right. Single bordered container; whole thing is a link to the
   game-detail page when a game's scheduled. */
#mlb-pf-hub .pf-head-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
#mlb-pf-hub .pf-head-pill.is-game {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
#mlb-pf-hub .pf-head-pill.is-game:hover {
  background: rgba(34, 211, 238, .10);
  border-color: rgba(34, 211, 238, .35);
}

/* Left section: matchup row on top, time row below. */
#mlb-pf-hub .pf-head-matchup {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#mlb-pf-hub .pf-head-teams {
  display: flex; align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#mlb-pf-hub .pf-head-teams .pf-team-logo {
  width: 24px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
#mlb-pf-hub .pf-head-teams .pf-team-name {
  font-size: .95rem; font-weight: 500; color: #f1f5f9;
  white-space: nowrap;
  letter-spacing: .1px;
  font-style: normal;
}
#mlb-pf-hub .pf-head-at {
  font-size: .85rem; font-weight: 500;
  color: #64748b;
  margin: 0 2px;
  font-style: normal;
}
/* Time line below the matchup. Centered under the matchup row so it
   sits visually in the middle of the team labels above, with a
   lighter weight than the team names so the matchup remains the
   dominant element. */
#mlb-pf-hub .pf-head-time-row {
  display: flex; align-items: baseline; justify-content: center;
  gap: 5px;
}
#mlb-pf-hub .pf-head-time-val {
  font-size: .82rem; font-weight: 400;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}
/* "ET" matches the time value's styling — same size, weight, color,
   no caps treatment — so it reads as a continuation of the time
   rather than a separate label. */
#mlb-pf-hub .pf-head-time-label {
  font-size: .82rem; font-weight: 400;
  color: #cbd5e1;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}
#mlb-pf-hub .pf-head-no-game {
  font-size: .7rem; font-weight: 500;
  color: #64748b;
  letter-spacing: .3px;
  text-align: center;
  font-style: normal;
}
/* PF block — value on top, label below. Sits on the right side of
   the head pill (after the matchup + time on the left). */
#mlb-pf-hub .pf-head-pf {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  text-align: right;
}
#mlb-pf-hub .pf-head-pf-val {
  font-size: 1.05rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
#mlb-pf-hub .pf-head-pf-label {
  font-size: .62rem; letter-spacing: .7px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
  white-space: nowrap;
}

/* Venue name below the field — bigger and bolder than the old
   subtitle treatment so the park identity reads at a glance. */
#mlb-pf-hub .pf-venue-below {
  text-align: center;
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: .2px;
}

/* Time block inside the head pill — value on top, "ET" label below.
   Same vertical rhythm as the home pill's PF value+label so the two
   sides feel symmetric. */
#mlb-pf-hub .pf-head-time {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
#mlb-pf-hub .pf-head-time-val {
  font-size: .95rem; font-weight: 800; color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
}
#mlb-pf-hub .pf-head-time-label {
  font-size: .52rem; letter-spacing: .7px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
}

#mlb-pf-hub .pf-game-none {
  font-size: .68rem; font-weight: 600; letter-spacing: .4px;
  color: #64748b; font-style: italic;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* Body — score row + meta chips + headline stats */
#mlb-pf-hub .pf-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 18px 18px;
}
#mlb-pf-hub .pf-score-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
#mlb-pf-hub .pf-tier {
  font-size: .68rem; font-weight: 700; letter-spacing: .6px;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase;
}
#mlb-pf-hub .pf-tier-elite        { background: rgba(34,197,94,.22);  color: #bbf7d0; border: 1px solid rgba(34,197,94,.45); }
#mlb-pf-hub .pf-tier-target       { background: rgba(34,197,94,.12);  color: #d9f99d; border: 1px solid rgba(34,197,94,.28); }
#mlb-pf-hub .pf-tier-neutral      { background: rgba(148,163,184,.10); color: #cbd5e1; border: 1px solid rgba(255,255,255,.08); }
#mlb-pf-hub .pf-tier-tough        { background: rgba(239,68,68,.18);  color: #fca5a5; border: 1px solid rgba(239,68,68,.35); }
#mlb-pf-hub .pf-tier-elite-tough  { background: rgba(239,68,68,.30);  color: #fecaca; border: 1px solid rgba(239,68,68,.55); }
#mlb-pf-hub .pf-tier-unknown      { background: rgba(148,163,184,.06); color: #64748b; border: 1px solid rgba(255,255,255,.04); }

#mlb-pf-hub .pf-score { display: flex; align-items: baseline; gap: 5px; }
#mlb-pf-hub .pf-score-label {
  font-size: .58rem; letter-spacing: .8px; font-weight: 700; color: #64748b;
}
#mlb-pf-hub .pf-score-val {
  font-size: 1.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#mlb-pf-hub .pf-field {
  display: flex; justify-content: center;
  margin: 2px 0 4px;
}
/* Stage wraps the SVG + the absolutely-positioned overlay so they share
   one positioned container. The 360px cap matches what looked balanced
   against the rest of the card content. */
#mlb-pf-hub .pf-field-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  display: block;
}
#mlb-pf-hub .pf-field-stage .wh-stage { width: 100%; }
#mlb-pf-hub .pf-field svg { width: 100%; height: auto; display: block; }

/* Plain-language sentence above the field. The % portion is wrapped
   in a tier-colored <span> so the magnitude jumps out while the rest
   of the line stays readable white. Slightly larger than the meta
   chips below — this is the headline takeaway for the card. */
#mlb-pf-hub .pf-sentence {
  font-size: .92rem;
  line-height: 1.35;
  color: #e2e8f0;
  text-align: center;
  padding: 4px 4px 2px;
}
#mlb-pf-hub .pf-sentence-emph {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#mlb-pf-hub .pf-emph-elite       { color: #4ade80; }
#mlb-pf-hub .pf-emph-target      { color: #a3e635; }
#mlb-pf-hub .pf-emph-neutral     { color: #f8fafc; }
#mlb-pf-hub .pf-emph-tough       { color: #fca5a5; }
#mlb-pf-hub .pf-emph-elite-tough { color: #f87171; }

/* Tier badge + bat-side + condition pills now share one row above the
   field. Replaces the separate score row + meta row. */
#mlb-pf-hub .pf-tier-row {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}

#mlb-pf-hub .pf-meta { display: flex; gap: 6px; flex-wrap: wrap; }
#mlb-pf-hub .pf-side,
#mlb-pf-hub .pf-cond {
  font-size: .58rem; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(148,163,184,.10); color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.06);
  text-transform: uppercase;
}
#mlb-pf-hub .pf-side-l { background: rgba(79,143,247,.18);  color: #7dd3fc; }
#mlb-pf-hub .pf-side-r { background: rgba(239,68,68,.18);   color: #fca5a5; }
#mlb-pf-hub .pf-side-s { background: rgba(168,85,247,.18);  color: #d8b4fe; }

/* 4 headline stat cells */
#mlb-pf-hub .pf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#mlb-pf-hub .pf-stat {
  background: rgba(148,163,184,.04);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}
#mlb-pf-hub .pf-stat-label {
  font-size: .62rem; letter-spacing: .8px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
  margin-bottom: 6px;
}
#mlb-pf-hub .pf-stat-val {
  font-size: 1.1rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

/* Index tier colors — green = hitter-friendly, red = pitcher-friendly */
#mlb-pf-hub .pf-green-3 { color: #bbf7d0; }
#mlb-pf-hub .pf-green-2 { color: #d9f99d; }
#mlb-pf-hub .pf-green-1 { color: #ecfccb; }
#mlb-pf-hub .pf-red-2   { color: #fca5a5; }
#mlb-pf-hub .pf-red-3   { color: #fecaca; }

/* Detail drawer */
#mlb-pf-hub .pf-detail-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 11px 18px;
  background: rgba(255,255,255,.02);
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #cbd5e1;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#mlb-pf-hub .pf-detail-toggle:hover {
  background: rgba(34, 211, 238, .08);
  color: #f1f5f9;
}
#mlb-pf-hub .pf-detail-caret {
  font-size: .7rem; color: #64748b;
  transition: transform 150ms ease, color 120ms ease;
}
#mlb-pf-hub .pf-detail-toggle[aria-expanded="true"] .pf-detail-caret {
  transform: rotate(180deg);
  color: #cbd5e1;
}
#mlb-pf-hub .pf-detail-toggle[aria-expanded="true"] {
  background: rgba(34, 211, 238, .06);
  color: #f1f5f9;
}

#mlb-pf-hub .pf-detail {
  padding: 12px 14px 14px;
  background: rgba(0,0,0,.14);
  border-top: 1px solid rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 12px;
}
#mlb-pf-hub .pf-detail-group { display: flex; flex-direction: column; gap: 6px; }
#mlb-pf-hub .pf-detail-group-label {
  font-size: .58rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
}
#mlb-pf-hub .pf-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
#mlb-pf-hub .pf-detail-cell {
  background: rgba(148,163,184,.05);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#mlb-pf-hub .pf-detail-label {
  font-size: .56rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
}
#mlb-pf-hub .pf-detail-val {
  font-size: .85rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
#mlb-pf-hub .pf-detail-empty {
  padding: 12px 8px; text-align: center;
  color: #64748b; font-size: .75rem; font-style: italic;
}

/* Props expand drawer — toggle button + table of relevant props for
   the selected metric + bat side. Same visual conventions as the
   pitcher-matchups card's "Batters facing" drawer. */
#mlb-pf-hub .pf-props-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 11px 18px;
  background: rgba(255,255,255,.02);
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #cbd5e1;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#mlb-pf-hub .pf-props-toggle:hover {
  background: rgba(34, 211, 238, .08);
  color: #f1f5f9;
}
#mlb-pf-hub .pf-props-caret {
  font-size: .7rem; color: #64748b;
  transition: transform 150ms ease, color 120ms ease;
}
#mlb-pf-hub .pf-props-toggle[aria-expanded="true"] .pf-props-caret {
  transform: rotate(180deg);
  color: #cbd5e1;
}
#mlb-pf-hub .pf-props-toggle[aria-expanded="true"] {
  background: rgba(34, 211, 238, .06);
  color: #f1f5f9;
}

#mlb-pf-hub .pf-props {
  padding: 4px 12px 12px;
  background: rgba(0,0,0,.14);
  border-top: 1px solid rgba(255,255,255,.04);
}
#mlb-pf-hub .pf-props-toolbar {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: #94a3b8;
  padding: 8px 4px 6px;
}
#mlb-pf-hub .pf-props-empty {
  padding: 18px 8px; text-align: center;
  color: #64748b; font-size: .78rem; font-style: italic;
}

#mlb-pf-hub .pf-props-table {
  width: 100%; border-collapse: collapse;
  font-size: .76rem;
}
#mlb-pf-hub .pf-props-table th {
  text-align: right;
  padding: 6px 6px 8px;
  font-size: .58rem; font-weight: 700; letter-spacing: .5px;
  color: #64748b; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#mlb-pf-hub .pf-props-table th.pf-props-col-name,
#mlb-pf-hub .pf-props-table td.pf-props-name { text-align: left; }
#mlb-pf-hub .pf-props-table td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  color: #e2e8f0;
}
#mlb-pf-hub .pf-props-table tbody tr:last-child td { border-bottom: none; }
/* Batter cell — avatar (with corner team-logo badge) + stacked
   first/last name + hand chip. Mirrors the visual treatment used in
   the home-run-zone cards. */
#mlb-pf-hub .pf-props-name {
  color: #f1f5f9;
  max-width: 220px;
}
#mlb-pf-hub .pf-props-name-cell {
  display: flex; align-items: center;
  gap: 8px;
  min-width: 0;
}
#mlb-pf-hub .pf-props-avatar-wrap {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-block;
}
#mlb-pf-hub .pf-props-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: block;
  flex-shrink: 0;
}
#mlb-pf-hub .pf-props-avatar.is-fallback {
  object-fit: contain; padding: 3px;
  background: rgba(255,255,255,.04);
}
#mlb-pf-hub .pf-props-avatar-team-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0b1220;
  padding: 1px;
  box-sizing: border-box;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
#mlb-pf-hub .pf-props-avatar-wrap.is-fallback .pf-props-avatar-team-badge { display: none; }
#mlb-pf-hub .pf-props-avatar-wrap.is-fallback .pf-props-avatar {
  object-fit: contain; padding: 3px;
}
#mlb-pf-hub .pf-props-name-text {
  display: flex; flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
#mlb-pf-hub .pf-props-link {
  color: inherit; text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease;
  display: flex; flex-direction: column;
  min-width: 0;
}
#mlb-pf-hub .pf-props-link:hover { color: #22d3ee; }
#mlb-pf-hub .pf-props-link:hover .pf-props-name-first,
#mlb-pf-hub .pf-props-link:hover .pf-props-name-last { text-decoration: underline; text-underline-offset: 2px; }
#mlb-pf-hub .pf-props-name-first {
  font-size: .68rem; font-weight: 500;
  color: #94a3b8;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mlb-pf-hub .pf-props-name-last {
  font-size: .82rem; font-weight: 700;
  color: #f1f5f9;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#mlb-pf-hub .pf-props-line,
#mlb-pf-hub .pf-props-odds,
#mlb-pf-hub .pf-props-prob {
  text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Score pill — clickable, color-tiered by score magnitude relative
   to the prop type's baseline. Click toggles the breakdown sub-row
   directly below this prop's row. */
#mlb-pf-hub .pf-props-score {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .76rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(148,163,184,.10);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: filter 120ms ease, background 120ms ease;
}
#mlb-pf-hub .pf-props-score:hover { filter: brightness(1.15); }
#mlb-pf-hub .pf-props-score-caret {
  font-size: .58rem; opacity: .7;
  transition: transform 150ms ease;
}
#mlb-pf-hub .pf-props-score[aria-expanded="true"] .pf-props-score-caret {
  transform: rotate(180deg);
}

#mlb-pf-hub .pf-score-elite   { background: rgba(34,197,94,.22);  color: #bbf7d0; border-color: rgba(34,197,94,.45); }
#mlb-pf-hub .pf-score-target  { background: rgba(34,197,94,.12);  color: #d9f99d; border-color: rgba(34,197,94,.28); }
#mlb-pf-hub .pf-score-neutral { background: rgba(148,163,184,.12); color: #cbd5e1; }
#mlb-pf-hub .pf-score-meh     { background: rgba(148,163,184,.08); color: #94a3b8; }
#mlb-pf-hub .pf-score-weak    { background: rgba(239,68,68,.18);  color: #fca5a5; border-color: rgba(239,68,68,.35); }

/* Breakdown sub-row — drops down below a prop row when its score
   pill is clicked. Spans all 4 columns of the table. */
#mlb-pf-hub .pf-props-breakdown-row td {
  padding: 0;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
#mlb-pf-hub .pf-props-breakdown {
  padding: 12px 14px 14px;
}
#mlb-pf-hub .pf-props-factors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
#mlb-pf-hub .pf-props-factor {
  background: rgba(148,163,184,.05);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
}
#mlb-pf-hub .pf-props-factor-label {
  font-size: .54rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
  margin-bottom: 3px;
}
#mlb-pf-hub .pf-props-factor-val {
  font-size: .82rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
#mlb-pf-hub .pf-mult-up-3   { color: #bbf7d0; }
#mlb-pf-hub .pf-mult-up-2   { color: #d9f99d; }
#mlb-pf-hub .pf-mult-up-1   { color: #ecfccb; }
#mlb-pf-hub .pf-mult-down-2 { color: #fca5a5; }
#mlb-pf-hub .pf-mult-down-3 { color: #f87171; }
#mlb-pf-hub .pf-props-summary {
  display: flex; gap: 14px; justify-content: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
#mlb-pf-hub .pf-props-summary > div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#mlb-pf-hub .pf-props-summary span {
  font-size: .54rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
}
#mlb-pf-hub .pf-props-summary strong {
  font-size: .85rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
#mlb-pf-hub .pf-props-no-factors {
  padding: 12px 8px; text-align: center;
  color: #64748b; font-size: .72rem; font-style: italic;
}

@media (max-width: 700px) {
  #mlb-pf-hub .pf-props-factors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#mlb-pf-hub .pf-props-hand {
  display: inline-block;
  margin-left: 6px;
  font-size: .55rem; font-weight: 700;
  letter-spacing: .4px;
  padding: 1px 5px; border-radius: 3px;
  vertical-align: middle;
}
#mlb-pf-hub .pf-props-hand-l { background: rgba(79,143,247,.18);  color: #7dd3fc; }
#mlb-pf-hub .pf-props-hand-r { background: rgba(239,68,68,.18);   color: #fca5a5; }
#mlb-pf-hub .pf-props-hand-s { background: rgba(168,85,247,.18);  color: #d8b4fe; }

#mlb-pf-hub .pf-empty {
  flex: 1;
  padding: 48px 24px; text-align: center;
  color: #64748b; font-style: italic;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 12px;
}

/* Mobile — drop the detail grids to 4 cols since 6 gets cramped. The
   headline 4-col grid stays as-is; cards already render one-per-row. */
@media (max-width: 700px) {
  #mlb-pf-hub .pf-detail-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile-tablet (≤1000px) layout polish — pickColumnCount() keeps
   2 cards per row in this range, but at ~700-900px viewports each
   card was only ~340px wide with 16px column gap and generous head/
   field padding eating the available space. Tighten the gutter and
   inner paddings so the SVG can fill more of the card, and bump the
   visible content font sizes since the card now has the room.
   Field's max-width isn't touched — at 2-column widths the card's
   own width (~360-400px) is the real ceiling. */
@media (max-width: 1000px) {
  /* Edge-to-edge: page padding off, gutters minimal so the two cards
     get every available pixel. The 100vw + negative-margin trick
     bursts the hub out past any parent's horizontal padding (we don't
     control every ancestor on the research-hub route), so the grid
     reliably spans the full viewport even if some wrapper changes. */
  #mlb-pf-hub {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box;
  }
  #mlb-pf-hub .pf-grid { gap: 6px; }
  #mlb-pf-hub .pf-col  { gap: 10px; }

  /* Reclaim card inner padding so content + SVG span more of the card. */
  #mlb-pf-hub .pf-head     { padding: 8px 8px 4px; }
  #mlb-pf-hub .pf-sentence { padding: 4px 6px 2px; }
  #mlb-pf-hub .pf-field    { margin: 2px 0 4px; }

  /* ─── Filter bar mobile compression ──────────────────────────────
     Drop the "Show / Metric / Bat side" text labels — the pill copy
     ("Playing today", "HR", "RHB") communicates the category clearly
     enough on phone-sized viewports. A wider horizontal gap between
     groups visually segments the categories without needing a literal
     divider. The bar's panel chrome (background + border) goes
     transparent so the pills float against the page background. */
  #mlb-pf-hub .pf-filter-label { display: none; }
  #mlb-pf-hub .pf-filters {
    background: transparent;
    border: none;
    padding: 8px 8px;
    gap: 12px 36px;   /* row-gap (when wrapping) × column-gap between groups */
  }
  #mlb-pf-hub .pf-filter-group { gap: 8px; }
  #mlb-pf-hub .pf-pill {
    padding: 12px 22px;
    font-size: 1.05rem;
  }

  /* ─── Content font bumps ─── desktop sizes were tuned for the
     wide-grid layout. At 2-col mobile widths each card has ~360-400px
     of horizontal room, so visible card text can grow noticeably. */
  #mlb-pf-hub .pf-team-name      { font-size: 1.25rem; }
  #mlb-pf-hub .pf-venue          { font-size: 0.95rem; }
  #mlb-pf-hub .pf-score-val      { font-size: 1.5rem; }
  #mlb-pf-hub .pf-score-label    { font-size: 0.78rem; }
  #mlb-pf-hub .pf-sentence       { font-size: 1.15rem; line-height: 1.35; }
  #mlb-pf-hub .pf-venue-below    { font-size: 1.35rem; }
  #mlb-pf-hub .pf-props-toggle   { font-size: 1.05rem; padding: 14px 14px; }
  #mlb-pf-hub .pf-team-logo      { width: 42px; height: 42px; }

  /* ─── View Props popup (the leaderboard table that drops down when
     the "View props" toggle is expanded) — bump everything inside the
     drawer to match the new card-content scale. ─────────────────── */
  #mlb-pf-hub .pf-props-toolbar      { font-size: 1rem; padding: 12px 4px 10px; }
  #mlb-pf-hub .pf-props-table        { font-size: 1.05rem; }
  #mlb-pf-hub .pf-props-table th     { font-size: 0.85rem; padding: 10px 6px 12px; }
  #mlb-pf-hub .pf-props-table td     { padding: 12px 6px; }
  #mlb-pf-hub .pf-props-name-first   { font-size: 0.95rem; }
  #mlb-pf-hub .pf-props-name-last    { font-size: 1.2rem; }
  #mlb-pf-hub .pf-props-hand         { font-size: 0.8rem; padding: 3px 8px; }
  #mlb-pf-hub .pf-props-score        { font-size: 1.1rem; padding: 7px 14px; }
  #mlb-pf-hub .pf-props-score-caret  { font-size: 0.8rem; }
  #mlb-pf-hub .pf-props-avatar,
  #mlb-pf-hub .pf-props-avatar-wrap  { width: 46px; height: 46px; }
  #mlb-pf-hub .pf-props-avatar-team-badge { width: 18px; height: 18px; }
}