/* MLB Research Hub — Home Run Zone grid (/mlb/research-hub/home-runs)
   Scoped under #mlb-hrz-hub so nothing leaks. Mirrors mlb-pitcher-matchups.css
   for consistency with the sibling research-hub sections. */

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

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

/* Filter pill bar — replaces the old title/subtitle header. Pills follow
   the same cyan-accent visual language as the drawer tabs. */
#mlb-hrz-hub .hrz-filter-host { min-height: 36px; }
#mlb-hrz-hub .hrz-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
}
#mlb-hrz-hub .hrz-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #94a3b8;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
#mlb-hrz-hub .hrz-pill:hover {
  color: #cbd5e1;
  border-color: rgba(255,255,255,.16);
}
#mlb-hrz-hub .hrz-pill.is-active {
  color: #f8fafc;
  background: rgba(34, 211, 238, .14);
  border-color: rgba(34, 211, 238, .45);
}
#mlb-hrz-hub .hrz-pill-count {
  font-size: .68rem; font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
}
#mlb-hrz-hub .hrz-pill.is-active .hrz-pill-count {
  background: rgba(34, 211, 238, .22);
  color: #ecfeff;
}

/* "HR last game" chip — warm amber so it pops against the cool cyan
   tab/pill accent and the green/red tier colors. Same pill geometry
   as .hrz-hand etc. so it sits cleanly in the chip row. */
#mlb-hrz-hub .hrz-b2b-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(245, 158, 11, .16);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .35);
}
#mlb-hrz-hub .hrz-b2b-chip i { font-size: .7em; }

/* Drought chip — cool slate/blue so it reads as "cold streak" against
   the warm amber HR-last-game chip and the violet B2B HRs chip. The
   .is-clickable variant gets cursor + hover affordance because the
   chip carries a popover with the historical drought-break rate. */
#mlb-hrz-hub .hrz-drought-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(56, 189, 248, .12);
  color: #93c5fd;
  border: 1px solid rgba(56, 189, 248, .30);
}
#mlb-hrz-hub .hrz-drought-chip.is-clickable {
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease;
}
#mlb-hrz-hub .hrz-drought-chip.is-clickable:hover,
#mlb-hrz-hub .hrz-drought-chip[aria-expanded="true"] {
  background: rgba(56, 189, 248, .20);
  border-color: rgba(56, 189, 248, .55);
}

/* Click-to-reveal popover infra — shared between B2B HRs (violet)
   and drought (sky-blue) chips. Each chip is wrapped in a relative
   container so the popover sibling absolutely positions below it. */
#mlb-hrz-hub .hrz-popover-wrap {
  position: relative;
  display: inline-flex;
}

/* Base popover. Variant classes (.hrz-b2b-rate-popover /
   .hrz-drought-popover) override the border accent only. */
#mlb-hrz-hub .hrz-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  padding: 10px 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  color: #e2e8f0;
  font-size: .75rem;
  line-height: 1.4;
  white-space: nowrap;
}
/* JS swaps to this when the default left-anchored popover would clip
   the card's right edge — pin to the chip's right instead. */
#mlb-hrz-hub .hrz-popover.is-right-aligned {
  left: auto;
  right: 0;
}
#mlb-hrz-hub .hrz-pop-fraction {
  color: #f1f5f9;
  font-weight: 600;
}
#mlb-hrz-hub .hrz-pop-fraction strong {
  font-weight: 700;
}
#mlb-hrz-hub .hrz-pop-headline {
  margin-top: 2px;
  color: #cbd5e1;
}
#mlb-hrz-hub .hrz-pop-meta {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #94a3b8;
  font-size: .65rem;
  letter-spacing: .3px;
}

/* B2B HRs chip — violet accent. */
#mlb-hrz-hub .hrz-b2b-rate-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(139, 92, 246, .14);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, .32);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease;
}
#mlb-hrz-hub .hrz-b2b-rate-chip:hover,
#mlb-hrz-hub .hrz-b2b-rate-chip[aria-expanded="true"] {
  background: rgba(139, 92, 246, .22);
  border-color: rgba(139, 92, 246, .55);
}
#mlb-hrz-hub .hrz-b2b-rate-popover {
  border-color: rgba(139, 92, 246, .35);
}
#mlb-hrz-hub .hrz-b2b-rate-popover .hrz-pop-fraction strong {
  color: #c4b5fd;
}

/* Drought popover — sky-blue accent matching the chip border. */
#mlb-hrz-hub .hrz-drought-popover {
  border-color: rgba(56, 189, 248, .35);
}
#mlb-hrz-hub .hrz-drought-popover .hrz-pop-fraction strong {
  color: #93c5fd;
}

/* Masonry layout — JS-distributed columns (3/2/1 by viewport). Matches
   pitcher-matchups so the two pages feel like siblings. */
#mlb-hrz-hub .hrz-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
#mlb-hrz-hub .hrz-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#mlb-hrz-hub .hrz-grid-loading { min-height: 120px; }

/* Card shell. Two click zones inside (head opens game page, body opens
   player dashboard) — same pattern as pitcher-matchups. */
#mlb-hrz-hub .hrz-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  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;
}

#mlb-hrz-hub .hrz-card [data-hrz-target] {
  cursor: pointer;
  transition: background 120ms ease;
}
#mlb-hrz-hub .hrz-card [data-hrz-target]:hover {
  background: rgba(34, 211, 238, .05);
}
#mlb-hrz-hub .hrz-card [data-hrz-target]:focus-visible {
  outline: 2px solid rgba(34, 211, 238, .5);
  outline-offset: -2px;
}
#mlb-hrz-hub .hrz-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 18px 18px;
}

/* Head: matchup + time */
#mlb-hrz-hub .hrz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#mlb-hrz-hub .hrz-matchup {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #f8fafc;
  font-size: .92rem;
}
#mlb-hrz-hub .hrz-team-logo { width: 22px; height: 22px; object-fit: contain; }
#mlb-hrz-hub .hrz-code      { letter-spacing: .02em; }
#mlb-hrz-hub .hrz-code-own  { color: #f8fafc; }
#mlb-hrz-hub .hrz-vs        { color: #64748b; font-weight: 600; font-size: .8rem; }
#mlb-hrz-hub .hrz-time {
  font-size: .78rem; color: #94a3b8; font-weight: 600; letter-spacing: .3px;
}

/* Name + chips + avatar */
#mlb-hrz-hub .hrz-name-row {
  display: flex; align-items: center;
  gap: 10px;
}
#mlb-hrz-hub .hrz-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  display: block;
}
#mlb-hrz-hub .hrz-avatar.is-fallback {
  object-fit: contain; padding: 4px; background: rgba(255,255,255,.04);
}
#mlb-hrz-hub .hrz-avatar-wrap {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: inline-block;
}
#mlb-hrz-hub .hrz-avatar-team-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #0b1220;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
#mlb-hrz-hub .hrz-avatar-wrap.is-fallback .hrz-avatar-team-badge { display: none; }
#mlb-hrz-hub .hrz-avatar-wrap.is-fallback .hrz-avatar {
  object-fit: contain; padding: 4px; background: rgba(255,255,255,.04);
}
#mlb-hrz-hub .hrz-name-col {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
}
#mlb-hrz-hub .hrz-name {
  font-size: 1.05rem; font-weight: 700; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mlb-hrz-hub .hrz-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#mlb-hrz-hub .hrz-hand,
#mlb-hrz-hub .hrz-order,
#mlb-hrz-hub .hrz-vs-hand {
  font-size: .65rem; 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);
}
#mlb-hrz-hub .hrz-hand-l { background: rgba(79,143,247,.18);  color: #7dd3fc; }
#mlb-hrz-hub .hrz-hand-r { background: rgba(239,68,68,.18);   color: #fca5a5; }
#mlb-hrz-hub .hrz-hand-s { background: rgba(168,85,247,.18);  color: #d8b4fe; }

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

#mlb-hrz-hub .hrz-score-block {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
#mlb-hrz-hub .hrz-score { display: flex; align-items: baseline; gap: 5px; }
#mlb-hrz-hub .hrz-score-label {
  font-size: .62rem; letter-spacing: .8px; font-weight: 700; color: #64748b;
}
#mlb-hrz-hub .hrz-score-val {
  font-size: 1.1rem; font-weight: 700; color: #f8fafc;
}
/* Odds line under HR PROB — mirrors the "o0.5 +320" pattern used on
   game-detail and weather props pages. The line text stays muted; the
   +/- number gets a brighter color so it reads as the primary value. */
#mlb-hrz-hub .hrz-score-odds {
  font-size: .68rem; font-weight: 600; letter-spacing: .3px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
#mlb-hrz-hub .hrz-score-odds-val {
  color: #cbd5e1;
  font-weight: 700;
  margin-left: 2px;
}

/* 4 stat cells */
#mlb-hrz-hub .hrz-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#mlb-hrz-hub .hrz-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-hrz-hub .hrz-stat-label {
  font-size: .62rem; letter-spacing: .8px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
  margin-bottom: 6px;
}
#mlb-hrz-hub .hrz-stat-val {
  font-size: 1rem; font-weight: 700; color: #e2e8f0;
}

/* Stat tier colors — green = HR-friendly, red = tough */
#mlb-hrz-hub .hrz-green-3 { color: #bbf7d0; }
#mlb-hrz-hub .hrz-green-2 { color: #d9f99d; }
#mlb-hrz-hub .hrz-green-1 { color: #ecfccb; }
#mlb-hrz-hub .hrz-red-2   { color: #fca5a5; }
#mlb-hrz-hub .hrz-red-3   { color: #fecaca; }

/* Expandable factor-breakdown drawer */
#mlb-hrz-hub .hrz-factors-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-hrz-hub .hrz-factors-toggle:hover {
  background: rgba(34, 211, 238, .08);
  color: #f1f5f9;
}
#mlb-hrz-hub .hrz-factors-caret {
  font-size: .7rem; color: #64748b;
  transition: transform 150ms ease, color 120ms ease;
}
#mlb-hrz-hub .hrz-factors-toggle[aria-expanded="true"] .hrz-factors-caret {
  transform: rotate(180deg);
  color: #cbd5e1;
}
#mlb-hrz-hub .hrz-factors-toggle[aria-expanded="true"] {
  background: rgba(34, 211, 238, .06);
  color: #f1f5f9;
}

#mlb-hrz-hub .hrz-factors {
  padding: 10px 12px 14px;
  background: rgba(0,0,0,.14);
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Tab pill row — same visual language as the pitcher-matchups batters
   toolbar so the two drawers feel like siblings. */
#mlb-hrz-hub .hrz-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 4px 0 10px;
}
#mlb-hrz-hub .hrz-tab {
  padding: 4px 12px;
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  color: #94a3b8;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
#mlb-hrz-hub .hrz-tab:hover {
  color: #cbd5e1;
  border-color: rgba(255,255,255,.14);
}
#mlb-hrz-hub .hrz-tab.is-active {
  color: #f8fafc;
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .40);
}
#mlb-hrz-hub .hrz-tab-body { display: block; }

/* ---- Matchup tab ---- */
#mlb-hrz-hub .hrz-m-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}
#mlb-hrz-hub .hrz-m-sp {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
/* Pitcher headshot — same wrapper pattern as the card's .hrz-avatar
   but sized down for the drawer header. Team logo overlays the
   bottom-right when a real headshot resolves; if the headshot fails,
   the wrapper falls back to the team logo and hides the badge to
   avoid showing the same crest twice. */
#mlb-hrz-hub .hrz-m-sp-avatar-wrap {
  position: relative;
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-block;
}
#mlb-hrz-hub .hrz-m-sp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  display: block;
}
#mlb-hrz-hub .hrz-m-sp-avatar.is-fallback {
  object-fit: contain; padding: 3px; background: rgba(255,255,255,.04);
}
#mlb-hrz-hub .hrz-m-sp-team-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 13px; height: 13px;
  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-hrz-hub .hrz-m-sp-avatar-wrap.is-fallback .hrz-m-sp-team-badge { display: none; }
#mlb-hrz-hub .hrz-m-sp-avatar-wrap.is-fallback .hrz-m-sp-avatar {
  object-fit: contain; padding: 3px; background: rgba(255,255,255,.04);
}
#mlb-hrz-hub .hrz-m-sp-name {
  font-size: .92rem; font-weight: 700; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mlb-hrz-hub .hrz-m-hand {
  font-size: .6rem; font-weight: 700; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(239,68,68,.18); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.30);
}
#mlb-hrz-hub .hrz-m-mult { display: flex; align-items: baseline; gap: 5px; }
#mlb-hrz-hub .hrz-m-mult-label {
  font-size: .58rem; letter-spacing: .8px; font-weight: 700; color: #64748b;
  text-transform: uppercase;
}
#mlb-hrz-hub .hrz-m-mult-val {
  font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#mlb-hrz-hub .hrz-m-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
#mlb-hrz-hub .hrz-m-cell {
  background: rgba(148,163,184,.05);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#mlb-hrz-hub .hrz-m-cell-label {
  font-size: .58rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
}
#mlb-hrz-hub .hrz-m-cell-val {
  font-size: .92rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
/* Tier overrides — `.hrz-m-cell-val` is defined after the generic tier
   rules so we need higher-specificity selectors for the colors to win.
   Same hex values as the card-stat tiers above; just stacked classes. */
#mlb-hrz-hub .hrz-m-cell-val.hrz-green-3 { color: #bbf7d0; }
#mlb-hrz-hub .hrz-m-cell-val.hrz-green-2 { color: #d9f99d; }
#mlb-hrz-hub .hrz-m-cell-val.hrz-green-1 { color: #ecfccb; }
#mlb-hrz-hub .hrz-m-cell-val.hrz-red-2   { color: #fca5a5; }
#mlb-hrz-hub .hrz-m-cell-val.hrz-red-3   { color: #fecaca; }
#mlb-hrz-hub .hrz-m-cell-sub {
  font-size: .56rem; font-weight: 600; color: #64748b;
  letter-spacing: .3px;
}

#mlb-hrz-hub .hrz-m-grade {
  margin-top: 10px;
  padding: 6px 0 0;
  text-align: center;
  font-size: .72rem; color: #94a3b8;
  border-top: 1px solid rgba(255,255,255,.04);
}
#mlb-hrz-hub .hrz-m-grade strong { color: #f1f5f9; font-weight: 700; }
#mlb-hrz-hub .hrz-m-mix-label { color: #64748b; margin-left: 4px; }

/* The grade-data wrap carries the tier class. Inner <strong> and the
   mix-label span inherit the wrap's color so both pieces of the
   "X/100 · Favorable" text shift together. Default (no tier) keeps
   the existing high-contrast white for the number and muted gray for
   the label, matching the previous look. */
#mlb-hrz-hub .hrz-m-grade-data { font-weight: 700; }
#mlb-hrz-hub .hrz-m-grade-data.hrz-green-3,
#mlb-hrz-hub .hrz-m-grade-data.hrz-green-2,
#mlb-hrz-hub .hrz-m-grade-data.hrz-green-1,
#mlb-hrz-hub .hrz-m-grade-data.hrz-red-2,
#mlb-hrz-hub .hrz-m-grade-data.hrz-red-3 {
  /* color set by the tier rules below — listed here so descendants inherit. */
}
#mlb-hrz-hub .hrz-m-grade-data.hrz-green-3 { color: #bbf7d0; }
#mlb-hrz-hub .hrz-m-grade-data.hrz-green-2 { color: #d9f99d; }
#mlb-hrz-hub .hrz-m-grade-data.hrz-green-1 { color: #ecfccb; }
#mlb-hrz-hub .hrz-m-grade-data.hrz-red-2   { color: #fca5a5; }
#mlb-hrz-hub .hrz-m-grade-data.hrz-red-3   { color: #fecaca; }
#mlb-hrz-hub .hrz-m-grade-data[class*="hrz-green-"] strong,
#mlb-hrz-hub .hrz-m-grade-data[class*="hrz-green-"] .hrz-m-mix-label,
#mlb-hrz-hub .hrz-m-grade-data[class*="hrz-red-"]   strong,
#mlb-hrz-hub .hrz-m-grade-data[class*="hrz-red-"]   .hrz-m-mix-label {
  color: inherit;
}

/* Color legend — sits at the foot of the matchup tab, explains the
   tier coloring used across all four cells AND the grade line. */
#mlb-hrz-hub .hrz-m-legend {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px;
  font-size: .62rem; color: #94a3b8;
  letter-spacing: .3px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
#mlb-hrz-hub .hrz-m-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
}
#mlb-hrz-hub .hrz-m-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
#mlb-hrz-hub .hrz-m-legend-batter  { background: #bbf7d0; }
#mlb-hrz-hub .hrz-m-legend-neutral { background: #94a3b8; }
#mlb-hrz-hub .hrz-m-legend-pitcher { background: #fca5a5; }

/* ---- Weather tab ---- */
/* The conditions strip + windy-field SVG come from gameWeatherMLB.js
   (same components the player-dashboard Q2 weather panel uses) — we
   just frame them. Don't restyle the strip itself; it owns its layout. */
#mlb-hrz-hub .hrz-w-loading,
#mlb-hrz-hub .hrz-w-empty {
  padding: 24px 8px; text-align: center;
  color: #64748b; font-size: .78rem; font-style: italic;
}
#mlb-hrz-hub .hrz-w-field {
  margin-top: 10px;
  display: flex; justify-content: center;
}
#mlb-hrz-hub .hrz-w-field svg {
  max-width: 100%;
  height: auto;
}
#mlb-hrz-hub .hrz-w-field-empty {
  padding: 24px 8px; text-align: center;
  color: #64748b; font-size: .75rem; font-style: italic;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 8px;
}
#mlb-hrz-hub .hrz-w-venue {
  margin-top: 8px;
  text-align: center;
  font-size: .78rem; font-weight: 700; color: #cbd5e1;
}

/* ---- Detailed Stats tab ---- */
/* The factor chips + summary keep their original look; we add a small
   inputs table below for the model's underlying numbers. */
#mlb-hrz-hub .hrz-d-rows {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 4px;
}
#mlb-hrz-hub .hrz-d-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-size: .72rem;
}
#mlb-hrz-hub .hrz-d-row-label {
  color: #94a3b8;
}
#mlb-hrz-hub .hrz-d-row-val {
  color: #e2e8f0; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#mlb-hrz-hub .hrz-factors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
#mlb-hrz-hub .hrz-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-hrz-hub .hrz-factor-label {
  font-size: .58rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
  margin-bottom: 3px;
}
#mlb-hrz-hub .hrz-factor-val {
  font-size: .85rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

#mlb-hrz-hub .hrz-factors-summary {
  display: flex; gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  justify-content: center;
}
#mlb-hrz-hub .hrz-factors-sum-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#mlb-hrz-hub .hrz-factors-sum-label {
  font-size: .58rem; letter-spacing: .6px; font-weight: 700;
  color: #64748b; text-transform: uppercase;
}
#mlb-hrz-hub .hrz-factors-sum-val {
  font-size: .9rem; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
#mlb-hrz-hub .hrz-factors-empty {
  padding: 12px 8px; text-align: center;
  color: #64748b; font-size: .75rem; font-style: italic;
}

#mlb-hrz-hub .hrz-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 factor grid to 3 columns; the 5-col grid would be
   too cramped to read on phones. */
@media (max-width: 700px) {
  #mlb-hrz-hub .hrz-factors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}