/* ==========================================================================
   MLB Hub — Tile Priority Layer
   Scoped under .mlb-hub to avoid leaking into the rest of the app.
   Uses global design tokens from style.css (:root).
   ========================================================================== */

.mlb-hub {
    --mlb-tile-bg: linear-gradient(180deg, #242841 0%, #1c1f35 100%);
    --mlb-tile-border: #303558;
    --mlb-priority-high: #eab308;      /* amber */
    --mlb-priority-medium: #64748b;    /* slate */
    --mlb-priority-low: #2d3148;       /* subtle */
    --mlb-live: #ef4444;

    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 16px 96px;
}

/* ---------- Hub header ---------- */
.mlb-hub__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Bulk action controls in the hub header. Greens / reds keep the
   intent obvious without needing to read the label. */
.mlb-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mlb-bulk-btn {
    font-size: 0.78rem;
    padding: 6px 12px;
    font-weight: 700;
}
.mlb-bulk-btn--bet {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.mlb-bulk-btn--bet:hover { background: #15803d; border-color: #15803d; }
.mlb-bulk-btn--cancel {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
}
.mlb-bulk-btn--cancel:hover {
    background: #6b7280;
    color: #fff;
}
/* Source-Aware Betting (Commit B): the green primary button still bets
   ALL recommended of any source; this --espn variant is the new yellow
   button for secondary-only bulk placement. Visual distinction
   matches the per-tile badge so the user maps the section, the button,
   and the badge to the same trust level at a glance. */
.mlb-bulk-btn--espn {
    background: #ca8a04;
    border-color: #ca8a04;
    color: #fff;
}
.mlb-bulk-btn--espn:hover { background: #a16207; border-color: #a16207; }
.mlb-bulk-btn:disabled { opacity: 0.6; cursor: wait; }
.mlb-bulk-msg { font-size: 0.78rem; margin-left: 4px; }
.mlb-hub__title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.mlb-hub__subtitle {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

/* ---------- Sections ---------- */
.mlb-section {
    margin: 24px 0;
}
.mlb-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 2px;
}
.mlb-section__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.mlb-section__count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

/* ---------- Tile grid (was a horizontal scroll rail) ----------
   Strict 3-column max on desktop, wraps to new rows. Matches the
   app-wide .tiles-container breakpoints so the MLB hub reads the same
   as the lobby. Removed the old overflow-x scroll and fixed-width tiles. */
.mlb-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 2px 12px;
}
@media (max-width: 1024px) {
    .mlb-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .mlb-rail { grid-template-columns: minmax(0, 1fr); }
}
.mlb-rail > [role="listitem"] {
    min-width: 0;  /* let grid cells shrink below tile intrinsic width */
}

/* ---------- Tile ---------- */
.mlb-tile {
    position: relative;
    display: block;
    width: 100%;  /* fill grid cell instead of the old fixed 288px rail width */
    padding: 14px 16px 12px;
    background: var(--mlb-tile-bg);
    border: 1px solid var(--mlb-tile-border);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.mlb-tile:hover,
.mlb-tile:focus-visible {
    transform: translateY(-2px);
    border-color: #3b416a;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    outline: none;
}
.mlb-tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Team color accents — thin vertical stripes on the left edge */
.mlb-tile__accent-away,
.mlb-tile__accent-home {
    position: absolute;
    left: 0;
    width: 3px;
    height: 50%;
}
.mlb-tile__accent-away { top: 0; }
.mlb-tile__accent-home { bottom: 0; }

/* Priority top border */
.mlb-tile--priority-high {
    border-top: 2px solid var(--mlb-priority-high);
    box-shadow: 0 0 0 1px rgba(234,179,8,0.15) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.mlb-tile--priority-medium {
    border-top: 2px solid var(--mlb-priority-medium);
}
.mlb-tile--priority-low {
    border-top: 2px solid var(--mlb-priority-low);
}

/* Tile header */
.mlb-tile__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 20px;
}
.mlb-tile__status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.mlb-tile--live .mlb-tile__status {
    color: var(--mlb-live);
}
.mlb-tz {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: normal;
}

/* Live pulsing dot */
.mlb-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mlb-live);
    box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
    animation: mlb-live-pulse 1.8s infinite;
}
@keyframes mlb-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.65); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) {
    .mlb-live-dot { animation: none; }
}

/* Priority chip */
.mlb-chip {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
}
.mlb-chip--high {
    color: #1a1300;
    background: var(--mlb-priority-high);
}
.mlb-chip--medium {
    color: var(--text-primary);
    background: rgba(100,116,139,0.3);
    border: 1px solid rgba(100,116,139,0.5);
}

/* Teams — live tile */
.mlb-tile--live .mlb-tile__teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mlb-tile--live .mlb-tile__team {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: 10px;
}
.mlb-tile--live .mlb-tile__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mlb-tile__abbr {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.mlb-tile__name {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mlb-tile__score {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 32px;
    text-align: right;
}

/* Teams — upcoming tile */
.mlb-tile--upcoming .mlb-tile__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.mlb-tile--upcoming .mlb-tile__team {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.mlb-tile--upcoming .mlb-tile__abbr {
    font-size: 16px;
}
.mlb-tile--upcoming .mlb-tile__name {
    font-size: 11px;
    color: var(--text-muted);
}
.mlb-tile--upcoming .mlb-tile__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* Record + streak chips (shared by live + upcoming) */
.mlb-record {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mlb-streak {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.3;
}
.mlb-streak--w {
    background: rgba(34,197,94,0.14);
    color: #86efac;
}
.mlb-streak--l {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
}

/* Pitcher records — small parenthetical next to pitcher name */
.mlb-pitcher {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mlb-pitcher-record {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Pitchers row on live tile — slightly more compact than upcoming */
.mlb-tile__pitchers--live {
    padding-top: 6px;
    margin-top: 6px;
    font-size: 11px;
}

/* Mock bet indicator — small target icon pinned in the tile header
   when the logged-in user already has a pending bet on this game. */
.mlb-bet-indicator {
    font-size: 13px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(34,197,94,0.45));
}

/* Tile receives a subtle green rail when the user has a pending bet on it,
   so the scanning eye picks it up without needing to read the icon. */
.mlb-tile--has-bet {
    border-right: 2px solid rgba(34,197,94,0.5);
}

/* Persistent "MY PICK" row on decision tiles — renders directly under
   the team matchup, above the Model/Market/Edge stats. Subtle green
   wash + monospaced odds so a scanning user can confirm at a glance
   what they bet on this game without hovering or opening the popup.
   Restored 2026-05-02 after the decision-first rewrite collapsed the
   old action chip that carried this info. */
.mlb-tile__user-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(34,197,94,0.10);
    border-left: 3px solid #22c55e;
    font-size: 12px;
    line-height: 1.3;
    color: #d1fae5;
}
.mlb-tile__user-pick-icon {
    font-size: 11px;
    line-height: 1;
}
.mlb-tile__user-pick-label {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6ee7b7;
}
.mlb-tile__user-pick-team {
    font-weight: 600;
    color: #ecfdf5;
}
.mlb-tile__user-pick-odds {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #a7f3d0;
}

/* Stacked teams + matchup context on decision tiles (2026-05-04).
   Two rows: away on top, home on bottom. Each row carries abbr, name,
   record, optional streak, and optional score (live games). The meta
   block (record + streak) right-aligns so a vertical seam aligns the
   numeric data across both rows for easy comparison. */
.mlb-tile__teams--stacked {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 8px;
}
.mlb-tile__team-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.92rem;
    line-height: 1.3;
    flex-wrap: wrap;
}
.mlb-tile__team-row .mlb-tile__abbr {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.mlb-tile__team-row .mlb-tile__name {
    font-weight: 600;
    color: var(--text-primary);
}
.mlb-tile__team-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8rem;
}
.mlb-tile__record {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.mlb-tile__record--missing {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.72rem;
}
.mlb-tile__streak {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}
.mlb-tile__streak--w {
    background: rgba(62,207,142,0.15);
    color: #6ee7b7;
}
.mlb-tile__streak--l {
    background: rgba(227,93,93,0.15);
    color: #fbb;
}
.mlb-tile__team-row .mlb-tile__score {
    margin-left: 4px;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Pitchers row — single horizontal line, matchup-style. */
.mlb-tile__pitchers {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.mlb-tile__pitcher {
    font-weight: 500;
    color: var(--text-primary);
}
.mlb-tile__pitcher-record {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
.mlb-tile__pitcher-sep {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: lowercase;
}

/* "✓ Bet Placed" pill — replaces "Bet This" once the user has a bet.
   Subtle green outline, not the gold/green high-contrast CTA fill —
   the bet is already in, no further action required. Click navigates
   to the bet-detail page where the user can review or cancel. */
.mlb-bet-btn--placed {
    background: rgba(34,197,94,0.08);
    color: #6ee7b7;
    border: 1px solid rgba(34,197,94,0.45);
    text-decoration: none;
}
.mlb-bet-btn--placed:hover {
    background: rgba(34,197,94,0.16);
    color: #ecfdf5;
}
.mlb-tile__vs {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Pitchers row */
.mlb-tile__pitchers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    margin-top: 2px;
}
.mlb-tile__pitcher-sep {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Action layer (Watch Now / Best Bet / Mock Bet button) ---------- */
.mlb-tile__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(45,49,72,0.6);
}
/* Action chip — shared base. The `--primary` and `--secondary` modifiers
   set visual weight. Primary gets a filled background; secondary gets a
   muted outline so it reads as "also available" without competing. */
.mlb-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: none;
}
.mlb-action__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mlb-action__reason {
    font-weight: 500;
    letter-spacing: 0;
    font-size: 10px;
    opacity: 0.85;
    text-transform: none;
}
.mlb-action__reason::before {
    content: "·";
    margin-right: 4px;
    opacity: 0.6;
}
/* Pick text on an action chip — shows the actual team/line instead of the
   generic reason ("Model edge vs market"). Answers "who do I bet on?" */
.mlb-action__pick {
    font-weight: 600;
    letter-spacing: 0;
    font-size: 10px;
    opacity: 0.95;
    text-transform: none;
    margin-left: 4px;
}

/* Watch Now (red family) */
.mlb-action--watchnow.mlb-action--primary {
    background: rgba(239,68,68,0.18);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,0.5);
}
.mlb-action--watchnow.mlb-action--secondary {
    background: transparent;
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.25);
    opacity: 0.85;
}

/* Best Bet (green family) */
.mlb-action--bestbet.mlb-action--primary {
    background: rgba(34,197,94,0.18);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,0.5);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.15) inset;
}
.mlb-action--bestbet.mlb-action--secondary {
    background: transparent;
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.25);
    opacity: 0.85;
}

/* Confidence mini-bar under primary action chips. Renders a thin fill
   along the bottom edge of the pill. Secondary chips stay subdued (no bar). */
.mlb-action {
    position: relative;
}
.mlb-action__conf {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 2px;
    height: 2px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
    overflow: hidden;
}
.mlb-action__conf-fill {
    display: block;
    height: 100%;
    background: currentColor;
    opacity: 0.55;
    border-radius: 1px;
}

/* Bet Placed — user already has a pending mock bet on this game. */
.mlb-action--betplaced.mlb-action--primary {
    background: rgba(201,148,58,0.18);
    color: #fde68a;
    border: 1px solid rgba(201,148,58,0.55);
    box-shadow: 0 0 0 1px rgba(234,179,8,0.12) inset;
}

/* "View Bet" button — replaces Mock Bet button when user has a pending bet. */
.mlb-bet-btn--view {
    color: #fde68a;
    border-color: rgba(234,179,8,0.55);
    background: rgba(234,179,8,0.08);
    text-decoration: none;
}
.mlb-bet-btn--view:hover,
.mlb-bet-btn--view:focus-visible {
    background: rgba(234,179,8,0.25);
    color: #fef3c7;
    outline: none;
}

/* Market Movement chip — three states, mutually exclusive in the template:
     mlb-action--movement-warn    (sharp move AGAINST the rec — caution)
     mlb-action--movement-support (sharp move WITH the rec — confirmation)
     mlb-action--movement         (movement detected, neither support nor warn)
   Same base shape as other action chips so it lines up visually. */
.mlb-action--movement {
    background: rgba(99,102,241,0.14);
    color: #c7d2fe;
    border: 1px solid rgba(99,102,241,0.35);
}
.mlb-action--movement-support {
    background: rgba(34,197,94,0.18);
    color: #bbf7d0;
    border-color: rgba(34,197,94,0.5);
}
.mlb-action--movement-warn {
    background: rgba(239,68,68,0.18);
    color: #fecaca;
    border-color: rgba(239,68,68,0.55);
}

/* Focus banner empty state — rendered when no game's recommendation
   status is 'recommended'. Single muted line so the user sees an explicit
   "no strong plays" state rather than wondering whether the banner is
   missing or the data feed is broken. Visually subordinate to the active
   focus banner — same horizontal slot, lower contrast. */
.mlb-focus-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: rgba(234,179,8,0.05);
    border: 1px dashed rgba(234,179,8,0.25);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.mlb-focus-empty__icon {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.85;
}
.mlb-focus-empty__text {
    font-weight: 500;
}

/* Focus banner — single "do this right now" surface at the top of the hub. */
.mlb-focus {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
    background: linear-gradient(135deg, rgba(234,179,8,0.12) 0%, rgba(34,38,64,1) 60%);
    border: 1px solid rgba(234,179,8,0.35);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.mlb-focus:hover,
.mlb-focus:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(234,179,8,0.18), 0 4px 16px rgba(0,0,0,0.35);
    outline: none;
}
.mlb-focus__accent {
    width: 4px;
    flex: 0 0 4px;
}
.mlb-focus__body {
    flex: 1;
    padding: 14px 18px;
    display: grid;
    gap: 6px;
}
.mlb-focus__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fde68a;
}
.mlb-focus__flame { font-size: 12px; }
.mlb-focus__matchup {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.mlb-focus__at {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
}
/* Pick line on the focus banner — tells the user the actual team + line.
   `.mlb-focus__pick--user` uses accent green when showing the user's own bet. */
.mlb-focus__pick {
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.mlb-focus__pick-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}
.mlb-focus__pick-odds {
    color: var(--text-muted);
    font-weight: 500;
}
.mlb-focus__pick--user strong {
    color: #22c55e;
}
.mlb-focus__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
}
.mlb-focus__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
}
.mlb-focus__action--bestbet {
    background: rgba(34,197,94,0.2);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,0.4);
}
.mlb-focus__action--watchnow {
    background: rgba(239,68,68,0.18);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,0.4);
}
.mlb-focus__reason {
    color: var(--text-secondary);
}
.mlb-focus__confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.mlb-focus__conf-bar {
    display: inline-block;
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.mlb-focus__conf-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #c9943a, #eab308);
    border-radius: 2px;
}

/* Top Opportunity — gold accent. Used sparingly (n=1 default). */
.mlb-top-opp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1300;
    background: linear-gradient(135deg, #eab308 0%, #c9943a 100%);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(234,179,8,0.35);
}
.mlb-top-opp__star {
    font-size: 11px;
    line-height: 1;
}

.mlb-bet-btn {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.mlb-bet-btn:hover,
.mlb-bet-btn:focus-visible {
    background: var(--accent);
    color: #1a1300;
    outline: none;
}
/* CTA copy varies with decision status — green for "Bet This", grey for
   "Not Recommended". Click is always enabled; we guide, not block. */
.mlb-bet-btn--bet-this {
    color: #fff;
    background: #16a34a;
    border-color: #16a34a;
}
.mlb-bet-btn--bet-this:hover,
.mlb-bet-btn--bet-this:focus-visible {
    background: #15803d;
    color: #fff;
    border-color: #15803d;
}
.mlb-bet-btn--not-recommended {
    color: #9ca3af;
    background: transparent;
    border-color: #6b7280;
}
.mlb-bet-btn--not-recommended:hover,
.mlb-bet-btn--not-recommended:focus-visible {
    background: #6b7280;
    color: #fff;
    border-color: #6b7280;
}

/* Decision-section headers — color-coded accents to reinforce hierarchy. */
.mlb-section--elite .mlb-section__title { color: #facc15; }
.mlb-section--recommended .mlb-section__title { color: #22c55e; }
.mlb-section--not-recommended .mlb-section__title { color: var(--text-muted); }
.mlb-section--unrated .mlb-section__title { color: #94a3b8; }

/* Not-recommended rail dims the whole tile set as a group so the eye skips
   past — still clickable, still readable, hover restores full opacity. */
.mlb-rail--dimmed > [role="listitem"] { opacity: 0.7; }
.mlb-rail--dimmed > [role="listitem"]:hover { opacity: 1; }

/* Empty state when no elite plays qualify — keeps the slot intact so the
   three-section rhythm doesn't collapse into a single "recommended" block. */
.mlb-empty-state { padding: 20px; text-align: center; }

/* "Why this matters" footer */
.mlb-tile__why {
    margin-top: 10px;
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 8px;
    background: rgba(201,148,58,0.08);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent);
}
.mlb-tile--priority-medium .mlb-tile__why {
    color: var(--text-secondary);
    background: rgba(100,116,139,0.1);
    border-left-color: var(--mlb-priority-medium);
}
.mlb-tile--priority-low .mlb-tile__why {
    color: var(--text-muted);
    background: transparent;
    border-left-color: var(--border);
}

/* Injury row — renders below the team rows when a team has a meaningful
   injury. Compact red-tinted lines so the info is scannable but doesn't
   dominate the tile. Most severe player listed per side. */
.mlb-tile__injuries {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(239,68,68,0.25);
    font-size: 11px;
}
.mlb-injury {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: #fca5a5;
    min-width: 0;
}
.mlb-injury__abbr {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fecaca;
    flex: 0 0 auto;
}
.mlb-injury__note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    opacity: 0.9;
}
.mlb-injury::before {
    content: "⚕";
    color: rgba(239,68,68,0.7);
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
}

/* ---------- Future games list ---------- */
.mlb-section--future {
    margin-top: 32px;
}
.mlb-future-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-secondary);
}
.mlb-future-row + .mlb-future-row {
    border-top: 1px solid var(--border);
}
.mlb-future-link {
    display: grid;
    grid-template-columns: 70px 90px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "date time matchup"
        "date time pitchers";
    gap: 2px 14px;
    align-items: center;
    padding: 12px 14px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 120ms ease;
    min-height: 56px;
}
.mlb-future-link:hover,
.mlb-future-link:focus-visible {
    background: var(--bg-card);
    outline: none;
}
.mlb-future-date {
    grid-area: date;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mlb-future-time {
    grid-area: time;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.mlb-future-matchup {
    grid-area: matchup;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.mlb-future-team {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mlb-future-at {
    color: var(--text-muted);
    font-weight: 500;
}
.mlb-future-pitchers {
    grid-area: pitchers;
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Responsive ---------- */

/* Tablet — tiles slightly wider, rail keeps horizontal */
@media (min-width: 600px) {
    .mlb-tile { width: 320px; }
}

/* Desktop — tiles in a responsive grid for today (no horizontal scroll)
   while Live stays as a rail because live games are time-sensitive and
   prioritized — the user wants to glance left-to-right. */
@media (min-width: 900px) {
    .mlb-hub__title { font-size: 32px; }
    .mlb-tile { width: 300px; }
}

/* Phone — tighter layout for future list */
@media (max-width: 480px) {
    .mlb-hub { padding: 12px 12px 96px; }
    .mlb-hub__header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .mlb-future-link {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "date matchup"
            "time pitchers";
        gap: 4px 10px;
    }
    .mlb-tile { width: 260px; padding: 12px 14px; }
    .mlb-tile__name { display: none; }   /* keep abbreviation + score, drop long name */
    .mlb-tile--upcoming .mlb-tile__name { display: block; }
}

/* =====================================================================
   Source-Aware Betting (Commit B) — visual differentiation
   ===================================================================== */

/* Per-tile source badge — appears at the top of the actions row inside
   every tile that has a recommendation. Matches the tooltip pattern of
   the other action chips so users recognise the shape. */
.mlb-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
}
.mlb-source-badge--verified {
    background: rgba(34,197,94,0.16);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.45);
}
.mlb-source-badge--espn {
    background: rgba(234,179,8,0.16);
    color: #fde68a;
    border: 1px solid rgba(234,179,8,0.45);
}

/* Section header inline tag — shown in the section title to remind users
   what trust level they're looking at. Visually quieter than the per-
   tile badge since the section header already announces the bucket. */
.mlb-section__source-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.mlb-section__source-tag--verified {
    background: rgba(34,197,94,0.14);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.35);
}
.mlb-section__source-tag--espn {
    background: rgba(234,179,8,0.14);
    color: #fde68a;
    border: 1px solid rgba(234,179,8,0.35);
}

/* ESPN section gets a slightly muted overall feel so it visually
   reads as "use with caution" without being alarming. */
.mlb-section--espn {
    border-left: 3px solid rgba(234,179,8,0.45);
    padding-left: 12px;
    margin-left: -15px;
    background: rgba(234,179,8,0.025);
}

/* ---------- Decision groups (Recommended vs Not Recommended) ----------
   Outer bordered box wrapping multiple inner sections so the user sees
   at a glance "these are the BET picks" vs "these are the FADE picks".
   The box is intentionally subtle (1px border + faint tinted bg) so it
   frames without screaming — the inner section headers still carry the
   primary visual weight. The hint text on the head explains the parent
   classification once so we don't have to repeat the rationale on every
   inner section. */
.mlb-decision-group {
    margin: 28px 0;
    padding: 14px 16px 4px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
}
.mlb-decision-group__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 10px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.mlb-decision-group__icon {
    font-size: 18px;
    line-height: 1;
}
.mlb-decision-group__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.mlb-decision-group__hint {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
/* Recommended group — green tint on border + bg, matching the
   Recommended Bets section title color so they read as one family. */
.mlb-decision-group--recommended {
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.04);
}
.mlb-decision-group--recommended .mlb-decision-group__title {
    color: #22c55e;
}
/* Fade group — neutral gray. Intentionally NOT red: a fade isn't a
   negative recommendation, it's the absence of edge. Red would over-
   signal "danger" for what's really just "no model conviction". */
.mlb-decision-group--fade {
    border-color: rgba(148,163,184,0.30);
    background: rgba(148,163,184,0.025);
}
.mlb-decision-group--fade .mlb-decision-group__title {
    color: var(--text-muted);
}
/* Inner sections inside a group lose their top margin so they sit
   flush under the group head — the outer group provides the spacing. */
.mlb-decision-group .mlb-section:first-of-type {
    margin-top: 8px;
}
.mlb-decision-group .mlb-section:last-of-type {
    margin-bottom: 12px;
}

/* Bet-type filter chip used by Tiered Intelligence to isolate one
   bet category (Moneyline / Spread / Total) at a time. is-hidden
   collapses any decision-group element when the filter excludes it. */
.is-hidden {
    display: none !important;
}
.mlb-bet-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 4px 0;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}
.mlb-bet-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(148,163,184,0.08);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mlb-bet-type-chip:hover {
    color: var(--text-primary);
    background: rgba(148,163,184,0.16);
    border-color: rgba(148,163,184,0.4);
}
.mlb-bet-type-chip.is-active {
    color: #0b1020;
    background: var(--accent, #facc15);
    border-color: var(--accent, #facc15);
    font-weight: 700;
}

/* Opportunity groups (Phase 1: Spread + Total). Border + tint are
   intentionally distinct from the green Recommended Plays group so
   the eye reads "different category" before reading any text. The
   "informational only" hint is bolded on these to drive home the
   non-recommendation status. */
.mlb-decision-group--opportunity {
    border-color: rgba(56,189,248,0.30);
    background: rgba(56,189,248,0.025);
}
.mlb-decision-group--opportunity .mlb-decision-group__title {
    color: #38bdf8;
}
.mlb-decision-group__hint--warn {
    color: #f59e0b;
    font-weight: 600;
}
/* Per-card "informational only" footer. Repeats the disclaimer at
   each card so the meaning travels even if a screenshot crops out
   the parent group header. */
.mlb-opportunity-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px dashed rgba(56,189,248,0.35);
    border-radius: 10px;
    background: rgba(56,189,248,0.015);
}
.mlb-opportunity-card__signal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.20);
    font-size: 13px;
}
.mlb-opportunity-card__signal-type {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(56,189,248,0.15);
    color: #7dd3fc;
}
.mlb-opportunity-signal--large_favorite {
    background: rgba(244,114,182,0.15);
    color: #f0abfc;
}
.mlb-opportunity-signal--high_scoring {
    background: rgba(248,113,113,0.15);
    color: #fca5a5;
}
.mlb-opportunity-signal--low_scoring {
    background: rgba(96,165,250,0.15);
    color: #93c5fd;
}
.mlb-opportunity-card__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.mlb-opportunity-card__detail {
    color: var(--text-muted);
}
.mlb-opportunity-card__disclaimer {
    margin: 0;
    padding: 6px 8px;
    background: rgba(245,158,11,0.08);
    border-left: 3px solid rgba(245,158,11,0.55);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 500;
    border-radius: 0 4px 4px 0;
}

/* Phase 1 disabled "Coming Soon" bulk buttons for Spread + Total.
   Rendered visually muted so they read as "not yet available" without
   being invisible. The architectural intent (these markets exist,
   and bulk action is on the roadmap) is communicated visually. */
.mlb-bulk-btn--coming-soon {
    background: rgba(56,189,248,0.10);
    color: #7dd3fc;
    border: 1px dashed rgba(56,189,248,0.50);
    cursor: not-allowed;
    opacity: 0.85;
}
.mlb-bulk-btn--coming-soon:hover {
    /* No hover state — emphasizes "this isn't clickable". */
    background: rgba(56,189,248,0.10);
    color: #7dd3fc;
}
.mlb-bulk-btn--coming-soon em {
    font-style: italic;
    font-size: 0.85em;
    opacity: 0.85;
    margin-left: 2px;
}
.mlb-bulk-btn--coming-soon[disabled] {
    /* Browsers vary on disabled+button styling; pin it explicitly. */
    pointer-events: none;
}

/* ----- Phase 2: Lean badge + Leans Only filter chip + title suffix ---- */

/* Yellow Lean pill — used inline next to the signal-type pill on
   opportunity cards. Distinct from the green Recommended labels by
   color (amber/yellow) and by the explicit "Lean" copy + supporting
   stats. The trust-tier ladder for the user is now:
       green Recommended  >  yellow Lean  >  cyan Signal Only
*/
.mlb-lean-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(250,204,21,0.18);
    border: 1px solid rgba(250,204,21,0.55);
    color: #fde047;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mlb-lean-badge__data {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(253,224,71,0.85);
    font-size: 10px;
}

/* "(Market Signals Only)" subtitle in the section header — when the
   leans flag is on, the section can carry both raw signals and
   data-supported leans, so we soften the section title with a hint
   that it's the union of both. */
.mlb-decision-group__title-suffix {
    font-weight: 500;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Leans Only filter chip — yellow rim + glow when active so users can
   see at a glance that they're in the data-supported view. */
.mlb-bet-type-chip--leans {
    border-color: rgba(250,204,21,0.55);
}
.mlb-bet-type-chip--leans.is-active {
    background: #fde047;
    border-color: #fde047;
    color: #1c1917;
    box-shadow: 0 0 0 2px rgba(250,204,21,0.35);
}

/* ----- Phase 3: Promoted Recommendations (Proven Edge) -------------- */

/* Green-bordered group for promoted spread/total recommendations.
   Visual hierarchy: green Moneyline Recommended Plays → green Spread/
   Total Recommendations (Proven Edge) → cyan Opportunity Signals →
   gray Not Recommended. Same green family as the moneyline
   Recommended group so trust tier is unmistakable across markets. */
.mlb-decision-group--proven {
    border-color: rgba(34,197,94,0.45);
    background: rgba(34,197,94,0.04);
}
.mlb-decision-group--proven .mlb-decision-group__title {
    color: #22c55e;
}
/* Per-card "proven edge" wrapper — solid green border, brighter than
   the dashed cyan opportunity-card border. */
.mlb-opportunity-card--proven {
    border: 1px solid rgba(34,197,94,0.55);
    background: rgba(34,197,94,0.03);
}
.mlb-opportunity-card--proven .mlb-opportunity-card__signal {
    background: rgba(34,197,94,0.08);
}
/* Green Recommended badge — solid green pill, stronger than the
   yellow Lean badge so the eye reads "highest tier" before reading. */
.mlb-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(34,197,94,0.22);
    border: 1px solid rgba(34,197,94,0.65);
    color: #4ade80;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mlb-rec-badge__data {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(74,222,128,0.90);
    font-size: 10px;
}
/* Green Recommended filter chip — completes the trust-tier ladder
   alongside the existing Leans Only chip. */
.mlb-bet-type-chip--recommended {
    border-color: rgba(34,197,94,0.55);
}
.mlb-bet-type-chip--recommended.is-active {
    background: #22c55e;
    border-color: #22c55e;
    color: #052e16;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.35);
}
/* Activated spread/total bulk-bet button — replaces the
   "Coming Soon" disabled state when promoted recs exist. Emerald
   green to read as BET-tier action; matches the moneyline
   --bet button family in feel without being identical. */
.mlb-bulk-btn--bet-rec {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.mlb-bulk-btn--bet-rec:hover {
    background: #15803d;
    border-color: #15803d;
}

/* ----- 2026-04-27 strict correction: Value Plays section ------------ */

/* Orange-bordered group for high-edge / low-probability picks. The
   color is intentionally distinct from green Recommended (safe) and
   yellow Lean (statistical edge) — value is "interesting but risky",
   which orange reads as. The dashed border signals "informational,
   not actionable in bulk". */
.mlb-decision-group--value {
    border-color: rgba(249,115,22,0.45);
    background: rgba(249,115,22,0.04);
}
.mlb-decision-group--value .mlb-decision-group__title {
    color: #fb923c;
}
.mlb-section--value .mlb-section__title {
    color: #fb923c;
}