/* ── MLB Dashboard: additions only ──────────────────────────────
   The shell (bar, games strip, main grid, cards) comes from optimizer.css so
   fonts and palette are shared, not copied. Everything here is either new
   (game cards, sidebar lists) or a small correction. */

.mdash { min-height: 60vh; }

.mdash-panel-title { font: 700 13px var(--n-sans); color: var(--n-text); letter-spacing: .01em; }
.mdash-count { margin-left: auto; font: 600 11px var(--n-mono); color: var(--n-text3); }
.mdash-arrows { display: inline-flex; gap: 5px; margin-left: 10px; }
.mdash-arrows .nopt-btn { width: 28px; padding: 0; height: 26px; line-height: 1; font-size: 15px; }
.mdash-arrows .nopt-btn:disabled { opacity: .3; cursor: default; }
.mdash-pos-tabs { margin-left: 12px; }

/* ── section menu: full-width bar under the games strip ─────────
   The .nopt design tokens are scoped to that wrapper, and on Lineups this nav
   lives outside it — so the accent resolved to nothing and the active item
   rendered black. Declare local fallbacks so the bar is self-sufficient
   wherever it is placed. */
.mdash-sections {
  --n-accent: #3b82f6;
  --n-text3:  #7d8fad;
  --n-panel:  #ffffff;
  --n-line:   #d7dfec;
  --n-bg2:    #eef2f9;
  --n-sans:   'Archivo', var(--font, sans-serif);
  display: flex; align-items: stretch; gap: 2px; padding: 0 12px;
  background: var(--n-panel); border-bottom: 1px solid var(--n-line); flex-wrap: wrap; }
:root[data-theme="dark"] .mdash-sections {
  --n-panel: #13233b; --n-line: #21344f; --n-bg2: #0f1c2f; --n-text3: #7d8fad; }
.mdash-sections button, .mdash-sections a, .mdash-sections span {
  appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 700 13px var(--n-sans); color: var(--n-text3);
  padding: 11px 16px; border-bottom: 3px solid transparent; }
.mdash-sections button:hover, .mdash-sections a:hover { color: var(--n-text); background: var(--n-bg2, rgba(0,0,0,.04)); }
.mdash-sections button.active,
.mdash-sections a.active {
  color: var(--n-accent);
  border-bottom-color: var(--n-accent);
  background: rgba(59,130,246,.10);
}
.mdash-sections .is-soon { opacity: .38; cursor: not-allowed; }
.mdash-sections .is-soon:hover { background: none; color: var(--n-text3); }

/* error/notice only when there is something to say */
.mdash-msg { margin: 10px 18px 0; }
.mdash-msg.nopt-hide { display: none !important; }
.mdash-pos-tabs.nopt-hide, .mdash-arrows.nopt-hide,
.mdash-rail.nopt-hide, .mdash-tablewrap.nopt-hide { display: none !important; }

/* ── slate summary: game cards, 3 across ─────────────────────── */
.mdash-rail { overflow: hidden; padding: 12px; }
.mdash-track { display: flex; gap: 12px; transition: transform .3s cubic-bezier(.3,.8,.4,1); }
.mg-card { flex: 0 0 calc((100% - 24px) / 3); border: 1px solid var(--n-line);
  border-radius: 10px; overflow: hidden; background: var(--n-panel); display: flex; flex-direction: column; }

/* header: away left, home right, slanted colour blend behind both.
   Moneyline sits UNDER the team name — side by side it collided in the middle
   ("-137+127" ran together). */
.mg-head { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 14px; padding: 10px 12px; }
.mg-h { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mg-h-home { flex-direction: row-reverse; }
.mg-logo { width: 42px; height: 42px; object-fit: contain; flex: none;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.mg-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mg-h-home .mg-id { align-items: flex-end; text-align: right; }
.mg-alias { font: 800 17px var(--n-mono); letter-spacing: .02em; }
.mg-name { font: 500 10px var(--n-sans); font-style: normal; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mg-ml { font: 700 12px var(--n-mono); font-style: normal; opacity: .95; margin-top: 1px; }

/* pitchers sit directly under their team */
.mg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--n-line); }
/* SP on two lines: at 3 cards across a single row truncated every name
   ("Drew Ras…"). Name gets the full width, figures sit beneath it. */
.mg-sp { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 1px 6px; padding: 7px 9px; min-width: 0; align-items: center; }
.mg-lbl { grid-row: 1 / span 2; font: 800 9px var(--n-sans); letter-spacing: .1em; opacity: .7; }
.mg-sp-name { font: 700 11.5px var(--n-sans); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-sp-fig { display: flex; align-items: baseline; gap: 7px; }
.mg-sp-fig b { font: 800 12px var(--n-mono); }
.mg-sp-fig i { font: 600 10px var(--n-mono); font-style: normal; opacity: .85; }

/* top hitters under each team */
.mg-hits { background: var(--n-line); }
.mg-hitters { list-style: none; margin: 0; padding: 6px; display: grid; gap: 3px; background: var(--n-panel); }
.mg-hitters li { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.mg-bo { font: 800 10px var(--n-mono); color: var(--n-text3); width: 9px; flex: none; }
.mg-hn { font: 500 11px var(--n-sans); color: var(--n-text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-hr { font: 800 11px var(--n-mono); color: var(--n-accent); flex: none; }
.mg-hs { font: 600 10px var(--n-mono); color: var(--n-text3); flex: none; }
.mg-none { color: var(--n-text3); font-style: italic; font-size: 11px; }

.mg-foot { display: flex; justify-content: space-between; padding: 7px 11px;
  font: 600 11px var(--n-mono); color: var(--n-text3); border-top: 1px solid var(--n-line); }

/* ── tables reuse .nopt-pool-table; only extras here ─────────── */
.mdash-tablewrap { max-height: 70vh; }
.mdash-table .ok   { color: var(--n-green); font-weight: 800; }
.mdash-table .proj { color: var(--n-text3); }
.mdash-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px;
  font: 800 10px var(--n-mono); letter-spacing: .02em; }
.mdash-chip img { width: 12px; height: 12px; object-fit: contain; }
.mdash-empty { text-align: center; color: var(--n-text3); font-style: italic; padding: 24px; }

/* ── sidebar ─────────────────────────────────────────────────── */
.mdash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mdash-stat { background: var(--n-bg2, #0f1c2f); border: 1px solid var(--n-line); border-radius: 7px; padding: 8px 10px; }
.mdash-stat b { display: block; font: 800 17px var(--n-mono); color: var(--n-text); }
.mdash-stat span { font: 600 9px var(--n-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--n-text3); }

.mdash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mdash-list li { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px;
  background: var(--n-bg2, #0f1c2f); font-size: 11px; }
.mdash-list .r { font: 800 12px var(--n-mono); color: var(--n-accent); width: 34px; }
.mdash-list .n { font: 500 11px var(--n-sans); color: var(--n-text); flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mdash-list .s { font: 600 10px var(--n-mono); color: var(--n-text3); }

@media (max-width: 1180px) {
  .mg-card { flex: 0 0 calc((100% - 12px) / 2); }
}
@media (max-width: 860px) {
  .mg-card { flex: 0 0 100%; }
}

/* ── tiered slate summary ────────────────────────────────────── */
.mdash-rail { overflow: visible; }
.mdash-track { display: block; transform: none !important; }
.mg-tier + .mg-tier { margin-top: 14px; }
.mg-tier-hd { display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font: 800 11px var(--n-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--n-text3); }
.mg-tier-hd::after { content: ''; flex: 1; height: 1px; background: var(--n-line); }
.mg-tier-hd i { font: 700 10px var(--n-mono); font-style: normal; color: var(--n-text3); order: 3; }
.mg-tier-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mg-tier-row .mg-card { flex: none; }

/* ── table alignment: names left, figures right, keys centred ─── */
.mdash-table th.l, .mdash-table td.l { text-align: left; }
.mdash-table th.c, .mdash-table td.c { text-align: center; }
.mdash-table th.r, .mdash-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.mdash-table td.strong, .mdash-table th.strong { font-weight: 800; }
.mdash-table td.c .mdash-chip { margin: 0 auto; }

@media (max-width: 1180px) { .mg-tier-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px)  { .mg-tier-row { grid-template-columns: 1fr; } }

/* ── league mark + team logos in the games strip ─────────────── */
.nopt-games-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.mg-league { width: 30px; height: 30px; object-fit: contain; }
.mg-mini-logo { width: 15px; height: 15px; object-fit: contain; margin-right: 4px; vertical-align: -3px; }
.nopt-game-team { display: inline-flex; align-items: center; }

/* ── zebra rows + heat cells ─────────────────────────────────── */
.mdash-table tbody tr:nth-child(even) { background: var(--n-bg2, rgba(0,0,0,.035)); }
.mdash-table tbody tr:hover { background: rgba(59,130,246,.10); }
/* the shaded cell must win over the zebra stripe */
.mdash-table tbody td.vh1 { background: rgba(59,130,246,.12); }
.mdash-table tbody td.vh2 { background: rgba(59,130,246,.24); }
.mdash-table tbody td.vh3 { background: rgba(59,130,246,.40); color: #08203f; }
.mdash-table tbody td.vh4 { background: rgba(59,130,246,.60); color: #fff; }
.mdash-table tbody td.vh5 { background: rgba(37,99,235,.85); color: #fff; }
:root[data-theme="dark"] .mdash-table tbody td.vh3 { color: #eaf2ff; }
/* top 3 for that stat within its position group */
.mdash-table tbody td.is-top3 { box-shadow: inset 0 0 0 1.5px var(--n-accent); font-weight: 800; }

/* MLB accent: red / white / blue */
.mdash .nopt-title { display: flex; align-items: center; gap: 8px; }
.mdash .nopt-site button.active { background: #c8102e; border-color: #c8102e; }

/* P sits apart from the hitter positions */
.mdash-pos-tabs .is-p { margin-right: 10px; position: relative; }
.mdash-pos-tabs .is-p::after { content: ''; position: absolute; right: -6px; top: 18%; bottom: 18%;
  width: 1px; background: var(--n-line); }
/* shared nav renders as links now */
.mdash-sections a { display: inline-flex; align-items: center; }

/* Standalone nav (pages with no .nopt shell) must clear the fixed site header —
   otherwise it renders at top:0, behind the header, and looks like it vanished. */
.mdash-sections.is-standalone {
  margin-top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h));
}
.mdash-sections.is-standalone + * { margin-top: 0 !important; }

/* Keep the banner locked in while the page scrolls — the lineups and pool pages
   are long, and losing the section menu halfway down is disorienting.
   The lineups page has its own sticky title bar at the same offset and the same
   z-index, so the two landed on top of each other; the banner sits above it and
   pages with their own sticky bar get pushed down by --mlb-nav-h. */
.mdash-sections {
  --mlb-nav-h: 41px;
  position: sticky;
  top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h));
  z-index: 45;
  box-shadow: 0 1px 0 var(--n-line), 0 6px 14px -10px rgba(0,0,0,.5);
}
/* page-level sticky bars stack UNDER the shared banner */
.lu-menu-bar,
.mdash-sections ~ .nopt .nopt-bar[style*="sticky"] {
  top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h) + 41px) !important;
  z-index: 39;
}
/* standalone pages already push down by the header height; sticking to 0 there
   would double-count the offset */
.mdash-sections.is-standalone { top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h)); margin-top: 0; }
.mdash-sections.is-standalone + * { margin-top: 0 !important; }

/* ══ Phone layout ════════════════════════════════════════════════════
   The sticky stack assumes a 41px single-row nav. On a phone the nav wraps
   to two rows, so the bar offset beneath it was covered by the half it did
   not account for. Two pinned bars also cost about a third of the screen
   before any data shows, so on a phone they scroll away instead. */
@media (max-width: 700px) {
  .mdash-sections,
  .lu-menu-bar,
  .mdash-sections ~ .nopt .nopt-bar {
    position: static !important;
    top: auto !important;
    box-shadow: none;
  }
  .mdash-sections { --mlb-nav-h: auto; }
}