/* ── Matchup dashboard: "Split Command" layout ────────────────────────────
 *
 * design/design_handoff_matchup_split_command, approved by Kyle 2026-08-01.
 *
 * The brief, in his words: "I like all the info and the function but I don't
 * think the space is being used as well as it could be. The actual matchup
 * data should be the main focus."
 *
 * The single worst defect in the old layout was a dead void — the left column
 * ended at Season Splits while the right kept scrolling, leaving ~40% of the
 * viewport black. This layout removes that BY CONSTRUCTION rather than by
 * tuning: both panes are the same height and each scrolls independently, so
 * whichever side has less content cannot leave a hole.
 *
 * Tokens are the app's own (--bg-card, --accent, --text2 …) rather than the
 * handoff's OKLCH set, per the handoff's own instruction to prefer existing
 * equivalents. Only the few with no counterpart are defined here.
 *
 * NOT touched by this file: the top bar logo and hamburger. Kyle: "I want to
 * make sure that the logo and the three line menu in the top left stay."
 */

/* ── What lives here now ───────────────────────────────────────────────────
 * Only rules the APP SHELL owns: the player rail, the game ticker, and the
 * chrome around them. Those elements belong to public/app.html.
 *
 * The Split Command layout itself (.pv-root.split, .ms-*) moved into
 * public/components/player-view.js on 2026-08-01. It had been here, and this
 * stylesheet is linked ONLY from app.html — so the standalone /player/:id
 * page, which mounts the same component, rendered that markup with no rules
 * and the probability ladder collapsed into full-width empty rows. Kyle caught
 * it there.
 *
 * The rule: markup emitted by a component is styled by that component. A
 * page-level stylesheet cannot follow it to every page that mounts it.
 */

/* ── Player rail: 320px → 210px ────────────────────────────────────────────
 * Kyle, 2026-08-01: "I want the left side bar with the players to be smaller
 * like on the design files."
 *
 * The handoff's rail is 218px expanded (46px collapsed). 110px of the old
 * width was empty row space, so this is reclaimed width rather than lost
 * information — the rows themselves only needed tightening, not truncating.
 * Sticky is kept: now that the PAGE scrolls, a sticky rail means the player
 * list stays reachable instead of scrolling away with the content.
 */
.player-view { grid-template-columns: 210px 1fr; }
.player-rail { padding: 8px 7px; }
.player-rail .pr-section-hdr { padding: 6px 4px 4px; margin-bottom: 4px; font-size: 9px; }
/* Rows: the projection and swap control move onto the name line, which is what
   removes the need for the extra 110px. */
.player-rail .pr-row { padding: 5px 6px; gap: 6px; }
.player-rail .pr-name { font-size: 12px; }
.player-rail .pr-sub  { font-size: 9px; }
.player-rail .pr-proj { font-size: 10px; }
.player-rail .pr-search input,
.player-rail input[type="search"],
.player-rail input[type="text"] { font-size: 11px; padding: 5px 8px; }
.player-rail .pr-filter button,
.player-rail .pr-team-btn { font-size: 10px; padding: 3px 7px; }

/* ── Game ticker: shorter, so more of the page is data ─────────────────────
 * Kyle: "the top ticker bar with the games to also be smaller so more data can
 * be seen." Every field is kept — teams, live score, and both starters' K
 * projections, which the handoff specifically moves INTO the chip so the old
 * separate projections bar can disappear. Only the padding and type scale
 * come down; nothing is dropped.
 */
.game-strip-meta { padding: 6px 12px; }
.game-tile { padding: 4px 10px; gap: 2px; }
.gt-logo { width: 14px; height: 14px; }
.gt-teams { gap: 4px; font-size: 12px; }
.gt-at { font-size: 9px; }
.gt-meta { font-size: 9px; }
.gt-score { font-size: 10px; gap: 4px; }
.gt-score-runs { font-size: 12px; }
.gt-score-dash { font-size: 10px; }
.gt-score-status, .gt-score-inning { font-size: 8px; }
.gt-pk-chip { padding: 1px 5px; gap: 3px; }
.gt-pk-name { font-size: 8.5px; max-width: 46px; }
.gt-pk-k { font-size: 9.5px; }

/* ── Band: shorter, projection on the far right ────────────────────────────
 * Kyle, 2026-08-01: the band was "too tall", and the projection belonged at
 * the far right rather than tucked beside the name.
 *
 * Most of the height was a card inside a card — .pv-header carried its own
 * padding, border and background inside .ms-band's. Flattening the inner one
 * is the real saving; trimming the outer padding is the rest.
 */
.ms-band { padding: 6px 12px; gap: 12px; }
.ms-band > .pv-header {
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
  display: flex; align-items: center; gap: 10px;
}
.ms-band .pv-headshot { width: 40px; height: 40px; }
.ms-band .pv-name { font-size: 15px; }
.ms-band .pv-meta { font-size: 10px; }
.ms-band > .pv-proj-block {
  margin-left: 22px; text-align: right; padding: 0; border: 0; background: none;
}
.ms-band > .pv-proj-block .pv-proj-num { font-size: 26px; line-height: 1; }
.ms-band > .pv-proj-block .pv-proj-label,
.ms-band > .pv-proj-block .pv-proj-line { font-size: 9.5px; margin-top: 2px; }
/* The band's child is .pv-tabs-row (prop tabs AND Over/Under), not .pv-tabs —
   an earlier rule here named the inner element and therefore did nothing.
   margin-left:auto pushes BOTH controls to the right, which is what Kyle asked
   for on each of them. */
.ms-band > .pv-tabs-row {
  margin: 0 0 0 auto; padding: 0; border: 0; background: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}

/* ── Game/Player toggle, now in the top bar ────────────────────────────── */
.tb-viewmode {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-right: 8px; gap: 2px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px;
}
.tb-viewmode .vm-pill { font-size: 11px; padding: 4px 12px; border-radius: 6px; }
/* Its old row is empty now, so it must not keep charging vertical space. */
.view-controls:empty { display: none !important; }

/* ── "Today's Top Projections" bar: removed ────────────────────────────────
 * Kyle, 2026-08-01: "lot of wasted space in the circled area ... with all the
 * space we save from taking out the space i circled can we move it up?"
 *
 * The bar rendered as a title and almost nothing else — a full-width strip
 * spending ~40px of the fold on the word "Today's Top Projections".
 *
 * It is also the exact thing the handoff deletes: it lists "a near-empty
 * Today's Top Projections bar" among the three pieces of chrome that ate the
 * fold, and its numbers were moved INTO the game chips. Those chips already
 * carry both starters' K projections (Ashcraft 7.14K · Abbott 5.32K), so the
 * data is not lost, only de-duplicated.
 *
 * Hidden rather than deleted: the markup and its loader are untouched, so
 * dropping this rule brings it straight back.
 */
#highlightsSection { display: none !important; }

/* ── Book grid drops BELOW the odds row ────────────────────────────────────
 * Kyle, 2026-08-01: "this should show up under not inbetween, it should show
 * up like it used to."
 *
 * My bug. renderBettingRow returns the bar AND the book drawer as siblings;
 * making .ms-odds a flex row laid them side by side, so an 8-column grid got
 * squeezed into whatever width was left beside the stepper. Explicit order
 * keeps the bar and ladder on the first line and gives the drawer its own
 * full-width line underneath, which is where it always used to be.
 */
.ms-odds { flex-wrap: wrap; }
.ms-odds > .pv-bet-bar { order: 1; flex: 1 1 auto; min-width: 0; }
.ms-odds > .ms-ladder  { order: 2; }
.ms-odds > .pv-bet-drawer { order: 3; flex: 0 0 100%; width: 100%; margin-top: 8px; }

/* ── Matchup pane tabs: Lineup / Team / Arsenal ───────────────────────────
 * The real answer to "I don't want to scroll to see the opponent stats":
 * Team shows those four numbers alone at the top of the pane. Reordering the
 * Lineup view to achieve the same thing wedged a summary between a header and
 * the table it describes, which is what looked bad.
 */
.ms-mtabs {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; flex-shrink: 0;
}
.ms-mtab {
  background: none; border: 0; cursor: pointer;
  color: var(--text2); font: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: none;
  padding: 4px 11px; border-radius: 6px; transition: all .12s;
}
.ms-mtab:hover { color: var(--text); }
.ms-mtab.active { background: var(--accent-dim); color: var(--accent); }
.ms-pane.matchup .ms-pane-h { gap: 12px; }

/* ── Percentile line: one row, never wrapped ───────────────────────────────
 * Kyle, 2026-08-01: "we need to figure out a better way to show the
 * percentiles because right now they are making the boxes too long."
 *
 * "24th %ile · szn" wrapped to THREE lines in a ~70px tile, so every tile grew
 * to fit the label rather than the number. Shortened to "24th pct" with the
 * scope shown only when it is not the season, and pinned to one line — the
 * full "Nth percentile in MLB (season)" is still on hover.
 */
.pv-tile-pctile-lbl {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 9px; line-height: 1.2;
}
.pv-tile-pctile { margin-top: 5px; }

/* ── Opponent team + arsenal, side by side and boxed ───────────────────────
 * Kyle, 2026-08-01: "a lot of wasted space in these two circled areas ... put
 * the opponent team stats and pitch arsenal side by side but make them boxes
 * so it is clear where each box of stats starts and stops."
 *
 * Both were full-width blocks of four short label/value rows, so most of every
 * line was the gap between label and number. Two half-width boxes spend the
 * same vertical space on twice the content, and the borders answer the second
 * half of the ask — where one set of stats ends and the next begins.
 */
.ms-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
  margin: 8px 0;
}
.ms-duo > .pv-mc-section {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  min-width: 0;
}
/* Narrower boxes close the label/value gap on their own — these just stop the
   numbers colliding with the labels at the tightest widths. */
.ms-duo .pv-team-row { gap: 6px; }
.ms-duo .pv-team-k { font-size: 10px; }
.ms-duo .pv-arsenal-own-hdr,
.ms-duo .pv-arsenal-own-row { font-size: 10px; gap: 4px; }
.ms-duo .pv-arsenal-own-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-duo .pv-team-toggles { flex-wrap: wrap; gap: 4px; }
.ms-duo .pv-pill-sm { font-size: 9px; padding: 2px 6px; }

/* Below ~1180px the panes already stack, so stop forcing two columns too. */
@media (max-width: 1180px) { .ms-duo { grid-template-columns: 1fr; } }

/* ── Opposing-pitcher stats: 4 across, not 2 ───────────────────────────────
 * Kyle, 2026-08-01: "it looks like theres wasted space here on the batter card
 * pitcher matchup maybe we can add more stats or something else?"
 *
 * Both. The two-column grid stretched each label away from its own number, so
 * the widest thing on the row was the gap. Four columns closes it, and the row
 * now carries eight stats instead of six — HH%, the only Savant field the
 * server sends for this pitcher that the card never showed, and IP/ST, which
 * answers the question a hitter actually has here: how long do I face him.
 */
.ms-pane .pv-mc-stats { grid-template-columns: repeat(4, 1fr); gap: 5px 10px; }
.ms-pane .pv-mc-row { gap: 5px; }
@media (max-width: 1180px) { .ms-pane .pv-mc-stats { grid-template-columns: repeat(3, 1fr); } }

/* ── Stat tiles: fit the pane instead of overflowing it ────────────────────
 * .pv-tiles is a fixed repeat(8, 1fr). That was fine full-width; inside a
 * ~570px pane the eighth column runs past the edge and the last tile's
 * percentile gets clipped (BB% "57th pct" was cut in half).
 *
 * auto-fit with a minimum lets the row carry as many tiles as actually fit and
 * wrap the rest, so the count can change per prop tab without re-tuning a
 * column number that only ever worked for one width.
 */
.ms-pane .pv-tiles {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}