/* /static/css/research/research-hub-landing.css
   ------------------------------------------------------------------
   Premium (>1000px) MLB Research Hub landing — Phase 1.

   Both layers are rendered into #research-hub-landing:
     .rh-premium       → the wide (>=1001px) shell, shown ONLY at >=1001px
     .rh-mobile-rich   → the SAME rich cards stacked single-column, shown
                         ONLY at <=1000px (styled in the max-width block below)
   Premium SHELL/LAYOUT styling is gated inside @media (min-width:1001px);
   the shared card-visual tokens live on .rh-premium, .rh-cards.
   ------------------------------------------------------------------ */

/* ---- token block (shared by the premium wrapper and the mobile rich stack;
   both carry .rh-cards) ---- */
.rh-premium,
.rh-cards {
  --rh-surface: #0B0C10;
  --rh-surface-2: #12141A;
  --rh-surface-3: #191C24;
  --rh-line: rgba(255, 255, 255, .07);
  --rh-line-strong: rgba(255, 255, 255, .12);
  --rh-text: #F4F5F7;
  --rh-text-2: #9298A6;
  --rh-text-3: #565D6B;
  --rh-hrz: #34d399;
  --rh-pitchers: #a78bfa;
  --rh-weather: #22d3ee;
  --rh-parks: #fbbf24;
  --rh-good: #6ee7b7;
  --rh-bad: #fca5a5;
  --rh-neutral: #64748b;
  --rh-live: #FF3B47;
  --rh-accent: #00D3BD; /* teal primary interaction accent */
}

/* ================================================================
   Breakpoint gating — the ONE place that decides which layer shows.
   ================================================================ */

/* Mobile (<=1000px): premium hidden, legacy tiles shown (untouched). */
@media (max-width: 1000px) {
  .rh-premium { display: none !important; }

  /* ===================================================================
     Mobile (<=1000px) rich featured cards — the SAME cards as the >1000px
     Featured Tools grid, stacked single-column. The desktop enhancement
     rules are gated to >=1001px, so the backdrop / badge-above / headshot /
     park-split treatment is re-declared here, scoped to .rh-mobile-rich.
     =================================================================== */
  /* Single column by default (narrow phones); the >=640px rule below promotes
     it to exactly two columns that FILL the width (no wasted side margins).
     minmax(0,1fr) lets the tracks shrink below content min so it never forces
     horizontal scroll, and font sizes stay untouched (text ellipsizes). */
  .rh-mobile-rich {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }
  .rh-mobile-rich .cs-card-rich { min-width: 0; }
  .rh-mobile-rich .cs-card-rich {
    width: 100%;
    background: var(--rh-surface-2);
    border: 1px solid var(--rh-line);
    border-radius: 16px;
  }
  .rh-mobile-rich .cs-card-rich:hover { border-color: var(--rh-line-strong); }

  /* --- player headshots on the rows --- */
  .rh-mobile-rich .cs-card-rich-shot {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--rh-surface-3);
    border: 1px solid var(--rh-line);
  }
  .rh-mobile-rich .cs-card-rich-shot-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--rh-text-2);
  }

  /* --- cinematic backdrop behind the header + summary --- */
  .rh-mobile-rich .cs-card-rich-hrz::before,
  .rh-mobile-rich .cs-card-rich-pitchers::before,
  .rh-mobile-rich .cs-card-rich-weather::before,
  .rh-mobile-rich .cs-card-rich-parks::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .rh-mobile-rich .cs-card-rich-hrz::before {
    background-position: 58% 20%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), url("hr-zone-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), image-set(url("hr-zone-bg.webp") type("image/webp"), url("hr-zone-bg.jpg") type("image/jpeg"));
  }
  .rh-mobile-rich .cs-card-rich-pitchers::before {
    background-position: center 22%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), url("pitchers-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), image-set(url("pitchers-bg.webp") type("image/webp"), url("pitchers-bg.jpg") type("image/jpeg"));
  }
  .rh-mobile-rich .cs-card-rich-weather::before {
    background-position: 62% 34%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), url("weather-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), image-set(url("weather-bg.webp") type("image/webp"), url("weather-bg.jpg") type("image/jpeg"));
  }
  .rh-mobile-rich .cs-card-rich-parks::before {
    background-position: center 40%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.02) 0%, rgba(11,12,16,0.12) 50%, rgba(18,20,26,0.82) 84%, var(--rh-surface-2) 100%), url("parks-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.02) 0%, rgba(11,12,16,0.12) 50%, rgba(18,20,26,0.82) 84%, var(--rh-surface-2) 100%), image-set(url("parks-bg.webp") type("image/webp"), url("parks-bg.jpg") type("image/jpeg"));
  }
  .rh-mobile-rich .cs-card-rich-hrz > *,
  .rh-mobile-rich .cs-card-rich-pitchers > *,
  .rh-mobile-rich .cs-card-rich-weather > *,
  .rh-mobile-rich .cs-card-rich-parks > * { position: relative; z-index: 1; }
  .rh-mobile-rich .cs-card-rich-hrz .cs-card-stripe,
  .rh-mobile-rich .cs-card-rich-pitchers .cs-card-stripe,
  .rh-mobile-rich .cs-card-rich-weather .cs-card-stripe,
  .rh-mobile-rich .cs-card-rich-parks .cs-card-stripe { display: none; }
  .rh-mobile-rich .cs-card-rich-hrz .cs-card-label,
  .rh-mobile-rich .cs-card-rich-hrz .cs-card-desc,
  .rh-mobile-rich .cs-card-rich-pitchers .cs-card-label,
  .rh-mobile-rich .cs-card-rich-pitchers .cs-card-desc,
  .rh-mobile-rich .cs-card-rich-weather .cs-card-label,
  .rh-mobile-rich .cs-card-rich-weather .cs-card-desc,
  .rh-mobile-rich .cs-card-rich-parks .cs-card-label,
  .rh-mobile-rich .cs-card-rich-parks .cs-card-desc { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
  .rh-mobile-rich .cs-card-rich-hrz .cs-card-rich-summary strong { color: #f8fafc; }

  /* --- accent pill on its own line above a single-line summary --- */
  .rh-mobile-rich .cs-card-rich-summary { display: block; }
  .rh-mobile-rich .cs-card-rich-summary .cs-card-rich-badge { margin-bottom: 6px; }
  .rh-mobile-rich .cs-card-rich-summary-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* --- Park Factors two-column RHB / LHB split --- */
  .rh-mobile-rich .cs-pf-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
  }
  .rh-mobile-rich .cs-pf-col-head {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rh-text-3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rh-line);
    margin-bottom: 4px;
  }
  .rh-mobile-rich .cs-pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
  }
  .rh-mobile-rich .cs-pf-name {
    font-size: 12.5px;
    color: var(--rh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .rh-mobile-rich .cs-pf-val {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: none;
  }
  .rh-mobile-rich .cs-pf-val.cs-metric-neutral { color: var(--rh-text-2); }
  .rh-mobile-rich .cs-pf-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rh-text-3);
    margin: 5px 0 3px;
    padding-top: 6px;
    border-top: 1px dashed var(--rh-line);
  }
  .rh-mobile-rich .cs-pf-sub-top { margin-top: 0; padding-top: 0; border-top: none; }
  .rh-mobile-rich .cs-pf-empty { color: var(--rh-text-3); font-size: 12px; padding: 4px 0; }

  /* ===================================================================
     Mobile shell — featured cards + Research by Game + Trending panels,
     stacked. The game/panel visuals come from the un-gated .rh-cards
     rules further down; below are only the mobile section-chrome and the
     mobile layout (games 2-up, panels always stacked).
     =================================================================== */
  .rh-mobile {
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    color: var(--rh-text);
    font-variant-numeric: tabular-nums;
  }
  .rh-mobile .rh-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
  }
  .rh-mobile .rh-section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--rh-text);
  }
  .rh-mobile .rh-section-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--rh-text-3);
    letter-spacing: .2px;
  }
  .rh-mobile .rh-section-tag {
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--rh-line-strong);
    background: var(--rh-surface-3);
    color: var(--rh-text-2);
    white-space: nowrap;
  }
  .rh-mobile .rh-section-tag-hrz { color: #6ee7b7; border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.09); }
  .rh-mobile .rh-section-tag-pitchers { color: #c4b5fd; border-color: rgba(167,139,250,.28); background: rgba(167,139,250,.09); }
  /* TEMPORARILY HIDDEN — for now the mobile view shows only the 4 featured
     cards. Delete this rule to restore Research by Game + the panels (they
     stay fully built and populated, just hidden). The #id prefix outranks the
     un-gated `.rh-cards .rh-row-panels { display: grid }` rule further down. */
  #research-hub-landing .rh-mobile .rh-games-section,
  #research-hub-landing .rh-mobile .rh-row-panels { display: none; }
  /* Research by Game: single column here; two-up added in the >=640px block. */
  #research-hub-landing .rh-mobile .rh-games { grid-template-columns: 1fr; }
  /* Trending panels: always stacked on mobile (drop the desktop equal-height). */
  #research-hub-landing .rh-mobile .rh-row-panels { grid-template-columns: 1fr; gap: 16px; }
  #research-hub-landing .rh-mobile .rh-panel .rh-rank { flex: none; }
  #research-hub-landing .rh-mobile .rh-panel .rh-rank-row { flex: none; }
}

/* From ~640px up to the desktop breakpoint: exactly two cards per row, filling
   the full content width (uses the side space instead of leaving big centered
   margins). Below 640px a second ~290px card can't fit without shrinking fonts
   or scrolling, so it stays single-column. */
@media (min-width: 640px) and (max-width: 1000px) {
  #research-hub-landing .rh-mobile-rich,
  #research-hub-landing .rh-mobile .rh-games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Wide (>=1001px): premium shown, mobile rich stack hidden. */
@media (min-width: 1001px) {
  /* The mobile shell (featured + games + panels) is the ≤1000px-only layer. */
  #research-hub-landing .rh-mobile { display: none !important; }

  /* Let the premium landing own the full centered width; the shared
     .research-hub-landing flex-centering still applies from
     research-hub.css but we override its narrow max-width via .rh-premium. */
  #research-hub-landing { width: 100%; }

  .rh-premium {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--rh-text);
    font-variant-numeric: tabular-nums;
    text-align: left;
  }

  /* ---------------- generic section chrome ---------------- */
  .rh-premium .rh-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
  }
  .rh-premium .rh-section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--rh-text);
  }
  .rh-premium .rh-section-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--rh-text-3);
    letter-spacing: .2px;
  }
  /* Pill/chip variant of the section subtitle (used on the ranked panels),
     tinted to the panel's accent. */
  .rh-premium .rh-section-tag {
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--rh-line-strong);
    background: var(--rh-surface-3);
    color: var(--rh-text-2);
    white-space: nowrap;
  }
  .rh-premium .rh-section-tag-hrz {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, .28);
    background: rgba(52, 211, 153, .09);
  }
  .rh-premium .rh-section-tag-pitchers {
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, .28);
    background: rgba(167, 139, 250, .09);
  }

  /* ---------------- Row 1 — header + snapshot ---------------- */
  .rh-premium .rh-row-top {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.35fr);
    gap: 28px;
    align-items: stretch;
  }
  .rh-premium .rh-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  .rh-premium .rh-title {
    margin: 0;
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.02;
    color: var(--rh-text);
  }
  .rh-premium .rh-subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--rh-text-2);
    max-width: 42ch;
  }

  /* ---- Slate Snapshot ---- */
  /* Horizontal padding lives on the cells (not the card) so the grid spans the
     full card width and its four 1fr columns — and thus the three vertical
     dividers — are evenly spaced edge to edge (equal outer margins and inner
     gaps). Vertical padding stays on the card. */
  .rh-premium .rh-snapshot {
    background: var(--rh-surface-2);
    border: 1px solid var(--rh-line);
    border-radius: 16px;
    padding: 18px 0;
  }
  .rh-premium .rh-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .rh-premium .rh-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 12px 20px;
    min-width: 0;
  }
  /* Horizontal divider between the two rows (top-row cells, spanning all four). */
  .rh-premium .rh-metric:nth-child(-n+4) {
    border-bottom: 1px solid var(--rh-line-strong);
  }
  /* Floating vertical dividers before every non-first-column cell — inset
     vertically (a short centred hairline) so they don't touch the horizontal
     divider or the cell edges. Use the stronger line token: at 2x DPR a 1px line
     lands on whatever subpixel the 1fr column edge falls on, and a fainter colour
     anti-aliases to ~half strength and disappears (which line vanishes shifts
     with viewport width). --rh-line-strong survives that and stays visible. */
  .rh-premium .rh-metric:not(:nth-child(4n + 1))::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 56%;
    width: 1px;
    background: var(--rh-line-strong);
  }
  .rh-premium .rh-metric-val {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--rh-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-premium .rh-metric-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--rh-text-3);
    text-transform: uppercase;
  }
  .rh-premium .rh-metric-accent .rh-metric-val { color: var(--rh-accent); }
  .rh-premium .rh-metric-pitchers .rh-metric-val { color: var(--rh-pitchers); }
  .rh-premium .rh-metric-parks .rh-metric-val { color: var(--rh-parks); }
  .rh-premium .rh-metric-weather .rh-metric-val { color: var(--rh-weather); }
  .rh-premium .rh-metric-hrz .rh-metric-val { color: var(--rh-hrz); }
  .rh-premium .rh-metric-live .rh-metric-val { color: var(--rh-live); }

  /* ---------------- Row 2 — Featured Tools ---------------- */
  /* The four existing rich cards live inside .rh-featured-grid. We reuse
     their .cs-card-rich styling from research-hub.css and only lay them
     out in a single row here. */
  .rh-premium .rh-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  /* Neutralize the legacy .cs-cards--mlb-rich 2-col grid expectations —
     inside the premium shell the four cards sit in one row and must fill
     their column. */
  .rh-premium .rh-featured-grid .cs-card-rich {
    width: 100%;
    background: var(--rh-surface-2);
    border-color: var(--rh-line);
    border-radius: 14px;
  }
  .rh-premium .rh-featured-grid .cs-card-rich:hover {
    border-color: var(--rh-line-strong);
  }
  /* Player headshot on the featured-card rows (HR Zone / Pitcher Matchups),
     replacing the rank number. Falls back to initials. */
  .rh-premium .cs-card-rich-shot {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--rh-surface-3);
    border: 1px solid var(--rh-line);
  }
  .rh-premium .cs-card-rich-shot-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--rh-text-2);
  }
  /* Cinematic photographic backdrop shared by the HR Zone (stadium / HR arc),
     Pitcher Matchups (pitcher / pitch-mix) and Weather (wind over the field)
     cards: a photo behind the header + summary, fading into the card surface for
     the ranked list below. */
  .rh-premium .cs-card-rich-hrz::before,
  .rh-premium .cs-card-rich-pitchers::before,
  .rh-premium .cs-card-rich-weather::before,
  .rh-premium .cs-card-rich-parks::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 250px;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
  }
  /* Per-card image + gradient. JPEG base (universal) then WebP via image-set. */
  .rh-premium .cs-card-rich-hrz::before {
    background-position: 58% 20%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), url("hr-zone-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), image-set(url("hr-zone-bg.webp") type("image/webp"), url("hr-zone-bg.jpg") type("image/jpeg"));
  }
  .rh-premium .cs-card-rich-pitchers::before {
    background-position: center 22%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), url("pitchers-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), image-set(url("pitchers-bg.webp") type("image/webp"), url("pitchers-bg.jpg") type("image/jpeg"));
  }
  .rh-premium .cs-card-rich-weather::before {
    background-position: 62% 34%;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), url("weather-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.12) 0%, rgba(11,12,16,0.30) 48%, rgba(18,20,26,0.88) 84%, var(--rh-surface-2) 100%), image-set(url("weather-bg.webp") type("image/webp"), url("weather-bg.jpg") type("image/jpeg"));
  }
  .rh-premium .cs-card-rich-parks::before {
    background-position: center 40%;
    height: 270px;
    background-image: linear-gradient(180deg, rgba(11,12,16,0.02) 0%, rgba(11,12,16,0.12) 50%, rgba(18,20,26,0.82) 84%, var(--rh-surface-2) 100%), url("parks-bg.jpg");
    background-image: linear-gradient(180deg, rgba(11,12,16,0.02) 0%, rgba(11,12,16,0.12) 50%, rgba(18,20,26,0.82) 84%, var(--rh-surface-2) 100%), image-set(url("parks-bg.webp") type("image/webp"), url("parks-bg.jpg") type("image/jpeg"));
  }
  /* Lift content above the backdrop; hide the top accent line; keep the header
     readable; move the card's slack ABOVE the summary so a clear image band
     opens after the header and the ranked list fills the former bottom gap. */
  .rh-premium .cs-card-rich-hrz > *,
  .rh-premium .cs-card-rich-pitchers > *,
  .rh-premium .cs-card-rich-weather > *,
  .rh-premium .cs-card-rich-parks > * { position: relative; z-index: 1; }
  .rh-premium .cs-card-rich-hrz .cs-card-stripe,
  .rh-premium .cs-card-rich-pitchers .cs-card-stripe,
  .rh-premium .cs-card-rich-weather .cs-card-stripe,
  .rh-premium .cs-card-rich-parks .cs-card-stripe { display: none; }
  .rh-premium .cs-card-rich-hrz .cs-card-label,
  .rh-premium .cs-card-rich-hrz .cs-card-desc,
  .rh-premium .cs-card-rich-pitchers .cs-card-label,
  .rh-premium .cs-card-rich-pitchers .cs-card-desc,
  .rh-premium .cs-card-rich-weather .cs-card-label,
  .rh-premium .cs-card-rich-weather .cs-card-desc,
  .rh-premium .cs-card-rich-parks .cs-card-label,
  .rh-premium .cs-card-rich-parks .cs-card-desc { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
  .rh-premium .cs-card-rich-hrz .cs-card-rich-summary,
  .rh-premium .cs-card-rich-pitchers .cs-card-rich-summary,
  .rh-premium .cs-card-rich-weather .cs-card-rich-summary,
  .rh-premium .cs-card-rich-parks .cs-card-rich-summary { margin-top: auto; }
  .rh-premium .cs-card-rich-hrz .cs-card-rich-footer,
  .rh-premium .cs-card-rich-pitchers .cs-card-rich-footer,
  .rh-premium .cs-card-rich-weather .cs-card-rich-footer,
  .rh-premium .cs-card-rich-parks .cs-card-rich-footer { margin-top: 0; }
  .rh-premium .cs-card-rich-hrz .cs-card-rich-summary strong { color: #f8fafc; }
  /* Uniform top section for every featured card: the accent pill sits on its own
     line ABOVE a single-line summary. Overriding the base flex-wrap layout makes
     the pill's placement independent of how long the text is, so all four
     summaries are exactly two lines tall and their dividers line up. */
  .rh-premium .cs-card-rich-summary { display: block; }
  .rh-premium .cs-card-rich-summary .cs-card-rich-badge { margin-bottom: 6px; }
  .rh-premium .cs-card-rich-summary-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* Park Factors card — top-2 RHB / top-2 LHB two-column split (parks in play). */
  .rh-premium .cs-pf-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
  }
  .rh-premium .cs-pf-col-head {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rh-text-3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rh-line);
    margin-bottom: 4px;
  }
  .rh-premium .cs-pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
  }
  .rh-premium .cs-pf-name {
    font-size: 12.5px;
    color: var(--rh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .rh-premium .cs-pf-val {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: none;
  }
  .rh-premium .cs-pf-val.cs-metric-neutral { color: var(--rh-text-2); }
  .rh-premium .cs-pf-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rh-text-3);
    margin: 5px 0 3px;
    padding-top: 6px;
    border-top: 1px dashed var(--rh-line);
  }
  /* "Top" sits directly under the RHB/LHB header — no divider (Bottom keeps it). */
  .rh-premium .cs-pf-sub-top { margin-top: 0; padding-top: 0; border-top: none; }
  .rh-premium .cs-pf-empty { color: var(--rh-text-3); font-size: 12px; padding: 4px 0; }

  /* ---------------- Row 3 — Today's Signals ---------------- */
  .rh-premium .rh-signals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .rh-premium .rh-signal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
    background: var(--rh-surface-2);
    border: 1px solid var(--rh-line);
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .rh-premium .rh-signal:hover {
    transform: translateY(-2px);
    border-color: var(--rh-line-strong);
    background: var(--rh-surface-3);
  }
  .rh-premium .rh-signal:focus-visible {
    outline: 2px solid var(--rh-accent);
    outline-offset: 2px;
  }
  .rh-premium .rh-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--rh-sig, var(--rh-accent));
  }
  .rh-premium .rh-signal-subject {
    font-size: 16px;
    font-weight: 700;
    color: var(--rh-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-premium .rh-signal-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--rh-text-2);
    letter-spacing: .2px;
    margin-top: -4px;
  }
  .rh-premium .rh-signal-line {
    font-size: 12px;
    line-height: 1.4;
    color: var(--rh-text-2);
    min-height: 34px;
  }
  .rh-premium .rh-signal-metrics {
    display: flex;
    gap: 14px;
    padding: 10px 0 2px;
    border-top: 1px solid var(--rh-line);
  }
  .rh-premium .rh-signal-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .rh-premium .rh-signal-metric-v {
    font-size: 14px;
    font-weight: 700;
    color: var(--rh-text);
    font-variant-numeric: tabular-nums;
  }
  .rh-premium .rh-signal-metric-k {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--rh-text-3);
  }
  .rh-premium .rh-signal-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--rh-sig, var(--rh-accent));
  }
  .rh-premium .rh-signal-action i { font-size: 10px; transition: transform .15s ease; }
  .rh-premium .rh-signal:hover .rh-signal-action i { transform: translateX(3px); }
}

/* ====================================================================
   Row 4 (Research by Game) + Row 5 (Trending panels) — UN-GATED and
   scoped to .rh-cards so BOTH the desktop premium shell (.rh-premium)
   and the mobile stack (.rh-mobile) render them. The wrong layer per
   breakpoint is display:none; mobile layout overrides (games 2-up,
   panels stacked) live in the max-width:1000px block near the top.
   ==================================================================== */
.rh-cards .rh-games {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .rh-cards .rh-game {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 12px;
    background: var(--rh-surface-2);
    border: 1px solid var(--rh-line);
    border-radius: 14px;
  }
  .rh-cards .rh-game-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .rh-cards .rh-game-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--rh-text-2);
    letter-spacing: .3px;
  }
  .rh-cards .rh-game-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--rh-live);
    font-variant-numeric: tabular-nums;
  }
  /* Completed game — same layout as the LIVE chip but muted (no pulse). */
  .rh-cards .rh-game-final {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--rh-text-2);
    font-variant-numeric: tabular-nums;
  }
  .rh-cards .rh-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rh-live);
    box-shadow: 0 0 0 0 rgba(255, 59, 71, .6);
    animation: rh-live-pulse 1.6s infinite;
  }
  @keyframes rh-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 71, .5); }
    70% { box-shadow: 0 0 0 6px rgba(255, 59, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 71, 0); }
  }
  .rh-cards .rh-game-park {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--rh-text-3);
    font-variant-numeric: tabular-nums;
  }
  .rh-cards .rh-game-park.is-good { color: var(--rh-parks); }
  .rh-cards .rh-game-park.is-bad { color: var(--rh-neutral); }

  .rh-cards .rh-game-teams {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .rh-cards .rh-game-team {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  .rh-cards .rh-game-logo {
    width: 24px; height: 24px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .rh-cards .rh-game-team-code {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--rh-text);
  }
  .rh-cards .rh-game-at {
    font-size: 11px;
    font-weight: 600;
    color: var(--rh-text-3);
  }

  .rh-cards .rh-game-sps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--rh-line);
    border-bottom: 1px solid var(--rh-line);
  }
  .rh-cards .rh-game-sp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    min-width: 0;
  }
  .rh-cards .rh-game-sp-side {
    flex-shrink: 0;
    width: 62px;
    font-size: 10px;
    font-weight: 700;
    color: var(--rh-text-3);
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-cards .rh-game-sp-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--rh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-cards .rh-game-sp-throws {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--rh-text-3);
  }
  .rh-cards .rh-game-sp-score {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--rh-text-2);
    font-variant-numeric: tabular-nums;
  }
  .rh-cards .rh-game-sp-score.is-hot { color: var(--rh-pitchers); }
  .rh-cards .rh-game-sp-score.is-cold { color: var(--rh-text-3); }

  .rh-cards .rh-game-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .rh-cards .rh-game-wind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--rh-text-2);
  }
  .rh-cards .rh-game-wind i { font-size: 10px; color: var(--rh-text-3); }
  .rh-cards .rh-game-wind.is-good { color: var(--rh-good); }
  .rh-cards .rh-game-wind.is-good i { color: var(--rh-good); }
  .rh-cards .rh-game-wind.is-bad { color: var(--rh-bad); }
  .rh-cards .rh-game-wind.is-bad i { color: var(--rh-bad); }
  .rh-cards .rh-game-take {
    font-size: 12px;
    line-height: 1.35;
    color: var(--rh-text-2);
  }

  .rh-cards .rh-game-actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
  }
  .rh-cards .rh-game-action {
    flex: 1;
    padding: 7px 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--rh-text-2);
    background: var(--rh-surface-3);
    border: 1px solid var(--rh-line);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .rh-cards .rh-game-action:hover {
    color: var(--rh-accent);
    border-color: var(--rh-accent);
    background: rgba(0, 211, 189, .08);
  }
  .rh-cards .rh-game-action:focus-visible {
    outline: 2px solid var(--rh-accent);
    outline-offset: 2px;
  }

  /* ---------------- Row 5 — ranked panels ---------------- */
  .rh-cards .rh-row-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;   /* both panels share the height of the taller one */
  }
  .rh-cards .rh-panel {
    background: var(--rh-surface-2);
    border: 1px solid var(--rh-line);
    border-radius: 16px;
    padding: 18px 20px 12px;
    display: flex;
    flex-direction: column;
  }
  /* Rows distribute to fill the (equalized) panel height, so the shorter panel
     never leaves an empty gap at the bottom and both panels stay in lockstep. */
  .rh-cards .rh-panel .rh-rank {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .rh-cards .rh-panel .rh-rank-row { flex: 1 1 0; }
  .rh-cards .rh-rank {
    display: flex;
    flex-direction: column;
  }
  .rh-cards .rh-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 10px;
    border-bottom: 1px solid var(--rh-line);
    cursor: pointer;
    transition: background .12s ease;
  }
  .rh-cards .rh-rank-row:last-child { border-bottom: none; }
  .rh-cards .rh-rank-row:hover { background: var(--rh-surface-3); }
  .rh-cards .rh-rank-row:focus-visible {
    outline: 2px solid var(--rh-accent);
    outline-offset: -2px;
  }
  .rh-cards .rh-rank-num {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--rh-text-3);
    font-variant-numeric: tabular-nums;
  }
  .rh-cards .rh-rank-shot {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--rh-surface-3);
    border: 1px solid var(--rh-line);
  }
  .rh-cards .rh-rank-shot-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--rh-text-2);
  }
  .rh-cards .rh-rank-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .rh-cards .rh-rank-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-cards .rh-rank-hand {
    font-size: 10px;
    font-weight: 700;
    color: var(--rh-text-3);
  }
  .rh-cards .rh-hot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fdba74;
    background: rgba(251, 146, 60, .12);
    border: 1px solid rgba(251, 146, 60, .3);
  }
  .rh-cards .rh-rank-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rh-text-3);
    min-width: 0;
  }
  .rh-cards .rh-rank-logo {
    width: 15px; height: 15px;
    object-fit: contain;
    flex-shrink: 0;
  }
  /* Away logo+name @ home name+logo — logos bookend the pairing. */
  .rh-premium .rh-mu {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex-shrink: 0;
  }
  .rh-premium .rh-mu-team {
    white-space: nowrap;
    color: var(--rh-text-2);
  }
  .rh-premium .rh-mu-at {
    color: var(--rh-text-3);
    opacity: .65;
  }
  .rh-cards .rh-rank-vs {
    color: var(--rh-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-cards .rh-rank-vs::before { content: "· "; }
  .rh-cards .rh-rank-metric {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .rh-cards .rh-rank-metric-v {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--rh-text);
  }
  .rh-cards .rh-panel-hitters .rh-rank-metric-v { color: var(--rh-hrz); }
  .rh-cards .rh-panel-pitchers .rh-rank-metric-v { color: var(--rh-pitchers); }
  .rh-cards .rh-rank-metric-k {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--rh-text-3);
  }

  /* tier chips (pitchers panel) */
  .rh-premium .rh-tier {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .rh-premium .rh-tier-elite { color: #fca5a5; background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .3); }
  .rh-premium .rh-tier-target { color: #fdba74; background: rgba(251, 146, 60, .12); border: 1px solid rgba(251, 146, 60, .3); }
  .rh-premium .rh-tier-neutral { color: var(--rh-text-2); background: rgba(148, 163, 184, .1); border: 1px solid var(--rh-line); }
  .rh-premium .rh-tier-tough { color: var(--rh-good); background: rgba(110, 231, 183, .1); border: 1px solid rgba(110, 231, 183, .25); }
  .rh-premium .rh-tier-unknown { color: var(--rh-text-3); background: rgba(148, 163, 184, .06); border: 1px solid var(--rh-line); }

  /* signal accent hooks */
  .rh-premium .rh-accent-hrz { --rh-sig: var(--rh-hrz); }
  .rh-premium .rh-accent-pitchers { --rh-sig: var(--rh-pitchers); }
  .rh-premium .rh-accent-weather { --rh-sig: var(--rh-weather); }
  .rh-premium .rh-accent-parks { --rh-sig: var(--rh-parks); }

  /* ---------------- empty states ---------------- */
  .rh-premium .rh-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    font-size: 13px;
    color: var(--rh-text-3);
    text-align: center;
  }
  .rh-premium .rh-empty i { font-size: 15px; opacity: .7; }
  /* span the whole grid width for section-level empties */
  .rh-premium .rh-signals > .rh-empty,
  .rh-cards .rh-games > .rh-empty { grid-column: 1 / -1; }

@media (min-width: 1001px) {
  /* ---------------- skeletons ---------------- */
  @keyframes rh-skel-pulse {
    0%, 100% { opacity: .5; }
    50% { opacity: .85; }
  }
  .rh-premium .rh-skel-block {
    width: 100%;
    height: 100%;
    min-height: 14px;
    border-radius: 6px;
    background: rgba(148, 163, 184, .09);
    animation: rh-skel-pulse 1.4s ease-in-out infinite;
  }
  .rh-premium .rh-skel-metric { min-height: 52px; padding: 10px 12px; }
  .rh-premium .rh-skel-signal { min-height: 176px; }
  .rh-premium .rh-skel-game { min-height: 200px; }
  .rh-premium .rh-skel-row {
    height: 44px;
    margin: 8px 0;
    border-radius: 8px;
    background: rgba(148, 163, 184, .09);
    animation: rh-skel-pulse 1.4s ease-in-out infinite;
  }
  .rh-premium .rh-skel-tall { height: 58px; }

  /* ---------------- responsive nudge for the 1001–1200 band ---------- */
  @media (min-width: 1001px) and (max-width: 1240px) {
    .rh-premium .rh-row-top { grid-template-columns: 1fr; }
    .rh-premium .rh-featured-grid { grid-template-columns: repeat(2, 1fr); }
    .rh-premium .rh-signals { grid-template-columns: repeat(2, 1fr); }
    .rh-cards .rh-games { grid-template-columns: repeat(2, 1fr); }
    .rh-premium .rh-title { font-size: 40px; }
  }

  /* ---------------- light theme parity ---------------- */
  [data-theme="light"] .rh-premium {
    --rh-surface: #F7F8FA;
    --rh-surface-2: #FFFFFF;
    --rh-surface-3: #F1F3F6;
    --rh-line: rgba(0, 0, 0, .08);
    --rh-line-strong: rgba(0, 0, 0, .14);
    --rh-text: #16181D;
    --rh-text-2: #55606E;
    --rh-text-3: #8A94A3;
  }
}

/* When the premium landing is active on wide screens, the shared
   .research-hub-landing centering block should top-align and not force
   the narrow legacy max-width onto our full-bleed premium wrapper.
   (Kept OUTSIDE the media query guard for the container is unnecessary —
   the width override above already scopes to >=1001px via .rh-mobile-rich
   hide; this rule is purely cosmetic top padding.) */
@media (min-width: 1001px) {
  #research-hub-landing { padding-top: 48px; padding-bottom: 48px; }
}