/* ==========================================================================
   mlb-search-matchup.css — the matchup panel under the MLB Search player card
   (docs/phone-search-tab-implementation.md, slice F2; the panel is
   static/js/mlb/mlbSearchMatchup.js).

   WHAT IS ALREADY ON THE WIRE, AND THEREFORE NOT HERE.
   /mlb/search links mlb-game-detail.css, mlb-game-phone.css,
   mlb-player-dashboard.css, mlb-pitcher-dashboard.css and (via
   workbench.css's @import) workbench-table.css, and <body> carries
   `is-mlb-route` on every MLB shell route (templates/index.html:882). So:
     * the pitch-mix panel's base rules (.mlb-gd-pm2-*) apply — unscoped in
       mlb-game-detail.css;
     * its PHONE pass applies too — mlb-player-dashboard.css:3786+ is prefixed
       `body.is-mlb-route`, which this route has;
     * the whole weather tree (.wx-*, .wx-ph-*) applies — unscoped;
     * .q2-wrap / .q2-empty / .q2-legend* / .q2-player-card-avatar apply —
       unscoped in the two dashboard sheets.
   None of that is duplicated below.

   WHAT IS HERE, and why each block has to be.
     1. The two rules the pitch-mix panel scopes to a HOST id. There are two
        hosts today (mlb-player-dashboard.css:3763 `#mlb-player-dashboard
        .q2-pm2` and :3768 `#tv-pm-popup .tv-pm2`); this is the third, with
        the same comment shape.
     2. The Q2 STATS phone rules. All 40 of them are written
        `#mlb-player-dashboard .q2-*` (mlb-player-dashboard.css:3405-3411,
        :3497-3617), so in any other host they match NOTHING and the compact
        rows render at desktop sizes — about 10px on glass. Re-prefixed to
        #mlb-search-matchup, values copied, not re-tuned.
     3. The compact view's own COLOUR rules. tierClass() returns q2-green-N /
        q2-red-N, but the table rules for those names are written
        `.q2-table .q2-green-3` — outside a table they match nothing, which is
        why the values first rendered flat white on the dashboard too. The six
        text-colour tiers at :3608-3613 are the fix, and a port that forgets
        them repeats the bug.
     4. The panel's own chrome (.pbm-*): the mode pills in their own
        namespace, the context line, and the lineup headline. The pills are
        NOT .q2-mode-pill — mlbDashboardQ2.js:770-820 delegates that class,
        [data-q2-full], [data-q2-compact] and .q2-season-pill on `document`
        with no host guard, so a second surface emitting them gets dead pills
        and leaks the dashboard's mode.
     5. Phone sizes for the two blocks whose app rules are desktop-only: the
        lineup rows (.tv-info-*, authored 11-14px for a popup that carries
        `zoom: 1.35`, so neither those numbers nor the #tv-pm-popup phone pass
        at mlb-player-dashboard.css:3894+ can be copied here — this panel is
        not zoomed) and .q2-empty (0.82rem = 5.2px on glass).
     6. The card's doubled bottom clearance, trimmed — see the last block.

   mlb-game-detail.css is stored DOUBLE-ENCODED and its comments are
   ASCII-only (memory mlb-game-detail-css-mojibake). Nothing below was copied
   out of it as bytes, and that file is not edited.

   Authored on the app's 980px phone canvas (the shell ships no viewport
   meta): glass pt = px / 2.513. Everything is inside
   @media (max-width: 1000px) except the host reset, which the dashboard also
   leaves un-gated so the panel looks the same at every width.
   ========================================================================== */

/* ── 1. host reset for the shared pitch-mix panel ─────────────────────────
   The renderer's own sheet caps it at 660px and, under 1000px, at 96vw —
   both assume a modal. Undo them for a panel that already has its width.
   Lives here rather than in mlb-game-detail.css because that file is stored
   double-encoded and is best left alone. */
#mlb-search-matchup .q2-pm2 { max-width: none; width: auto; padding: 0; }

/* ── 2. the panel shell ────────────────────────────────────────────────── */

#mlb-search-matchup .pbm {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The dashboard's own reservation for this card on the phone tier
     (mlb-player-dashboard.css:3497 `#mlb-dash-q2 { min-height: 390px }`,
     "natural 384 compact"). The skeleton carries it too, so Phase B swaps
     one 390px box for another and the page below does not jump. */
  min-height: 390px;
}
/* No box-sizing reset: search.css :94 gives every node under .pb-search
   border-box, and this host is inside it (searchCore hostsHtml). */

#mlb-search-matchup .pbm-skel { justify-content: flex-start; }

@media (max-width: 1000px) {
  /* The skeleton's blocks are .mlb-skel-row-lg / -md, which are 56px / 40px
     in mlb-player-dashboard.css:574-575 — desktop numbers on a canvas where
     the filled panel's own rows are 86px tall. Sized so four blocks plus the
     gap reach the 390px the .pbm above reserves. */
  #mlb-search-matchup .pbm-skel .mlb-skel { gap: 18px; }
  #mlb-search-matchup .pbm-skel .mlb-skel-row-lg { height: 110px; border-radius: 12px; }
  #mlb-search-matchup .pbm-skel .mlb-skel-row-md { height: 72px; border-radius: 12px; }

  /* ── 3. panel chrome ──────────────────────────────────────────────────
     The card above names the player and the opposing starter's surname, but
     never the opponent, the first pitch or the park — so the modes below get
     a stated subject. Same grammar as the dashboard's phone matchup strip
     (mlbPlayerDashboardCore.js:251-253). */
  #mlb-search-matchup .pbm-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  #mlb-search-matchup .pbm-ctx {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: #94a3b8;
  }
  #mlb-search-matchup .pbm-ctx-dot { color: #475569; }

  /* mlb-player-dashboard.css:1123-1130 with the phone override at :3411
     (gap 6, padding 5). Centred, because on this tier the dashboard hides the
     "Matchup" title and the base rule's justify-content:center takes over. */
  #mlb-search-matchup .pbm-mode-pills {
    display: inline-flex;
    align-self: center;
    gap: 6px;
    background: rgba(148, 163, 184, .06);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 999px;
    padding: 5px;
  }
  /* :1131-1143 with the phone override at :3410 (font-size 25, padding
     12/24). That made a ~54px pill, half the 110 tap floor the doc's
     non-negotiables set; the 96px box + the -7/+7 ::before below is the pair
     search.css gives its position pills, and the least the track can grow. */
  #mlb-search-matchup .pbm-mode-pill {
    position: relative;
    min-height: 96px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-family: inherit;
    font-size: 25px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color 120ms ease, background-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  /* 96px box, 110px touch target. The 7px overshoot ends 1px past the track
     (5px padding + 1px border), where nothing else is tappable. */
  #mlb-search-matchup .pbm-mode-pill::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    bottom: -7px;
  }
  #mlb-search-matchup .pbm-mode-pill:hover:not(.is-active) { color: #e2e8f0; }
  /* :1145-1148 */
  #mlb-search-matchup .pbm-mode-pill.is-active {
    color: #0a1628;
    background: rgba(0, 211, 189, 0.75);
  }

  /* ── 4. STATS — the Q2 compact matchup, re-prefixed ───────────────────
     mlb-player-dashboard.css:3501-3617. One row per player: identity on the
     left, five stats across. Built by the same compactSection helpers and the
     same tierClass, so the green/red here means exactly what it means in the
     dashboard's own tables. */
  #mlb-search-matchup .q2-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Grid, not flex, so the identity column is the SAME width on both rows and
     the two stat grids start at the same x — the hitter's AVG sits directly
     above the pitcher's OBA. Under flex each row sized its identity to its own
     name, so a long name shunted that row's stats right. */
  #mlb-search-matchup .q2-cs-row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
  }
  /* Avatar is a sibling of the whole [name / qualifier] stack, so align-items
     centre balances it against BOTH lines rather than against the name alone. */
  #mlb-search-matchup .q2-cs-id {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  #mlb-search-matchup .q2-cs-id .q2-player-card-avatar { width: 58px; height: 58px; flex: 0 0 auto; }
  #mlb-search-matchup .q2-cs-idtext {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  /* Wraps rather than nowrap: the identity column is a fixed 300px, so a long
     name folds inside it instead of pushing the stats out of alignment with
     the row above. */
  #mlb-search-matchup .q2-cs-name {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: #f8fafc;
  }
  #mlb-search-matchup .q2-cs-name a { color: inherit; font-weight: inherit; }
  /* mlb-player-dashboard.css:45-54 — the deep link is not underlined until
     hover. Repeated here because those rules are written
     `#mlb-player-dashboard .mlb-dash-player-link`. */
  #mlb-search-matchup .mlb-dash-player-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease;
  }
  #mlb-search-matchup .mlb-dash-player-link:hover { color: #67e8f9; text-decoration: underline; }
  /* The side this row is split by. Sits under the name because it qualifies
     every number to its right — without it ".285" is an unattributed stat. */
  #mlb-search-matchup .q2-cs-qual {
    font-size: 20px;
    font-weight: 500;
    color: #94a3b8;
  }
  /* Five equal columns — equal so the eye can compare down the two rows even
     though the two players' stats are different measures. */
  #mlb-search-matchup .q2-cs-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }
  #mlb-search-matchup .q2-cs-stat { text-align: center; min-width: 0; }
  #mlb-search-matchup .q2-cs-k {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
  }
  #mlb-search-matchup .q2-cs-v {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* LOAD-BEARING. tierClass() returns the same q2-green-N / q2-red-N names
     the full tables use, but THOSE rules are scoped `.q2-table .q2-green-3` —
     outside a table they match nothing, which is why the dashboard's own
     compact values first rendered flat white. Re-expressed as TEXT colour (a
     filled cell background would be far too heavy at this size), reusing the
     classes rather than inventing a parallel scale. */
  #mlb-search-matchup .q2-cs-v.q2-green-3 { color: #4ade80; }
  #mlb-search-matchup .q2-cs-v.q2-green-2 { color: #86efac; }
  #mlb-search-matchup .q2-cs-v.q2-green-1 { color: #bbf7d0; }
  #mlb-search-matchup .q2-cs-v.q2-red-1   { color: #fecaca; }
  #mlb-search-matchup .q2-cs-v.q2-red-2   { color: #fca5a5; }
  #mlb-search-matchup .q2-cs-v.q2-red-3   { color: #f87171; }

  /* mlb-player-dashboard.css:1310-1333. The dashboard shows this legend under
     the FULL splits tables, which have no phone pass, so the sizes are
     re-authored for this tier (0.7rem would be 4.5px on glass); the colours
     and the wording are the sheet's. Rendered on a pitcher's Stats mode only. */
  #mlb-search-matchup .q2-legend {
    gap: 24px;
    margin-top: 14px;
    padding-top: 16px;
    font-size: 20px;
  }
  #mlb-search-matchup .q2-legend-item { gap: 10px; }
  #mlb-search-matchup .q2-legend-swatch { width: 16px; height: 16px; border-radius: 4px; }

  /* :1415-1418 is 0.82rem — 5.2px on glass, and the dashboard has no phone
     override because its own empty states sit inside tables that are already
     hidden on this tier. 26px lands the same 13px a desktop reader sees. */
  #mlb-search-matchup .q2-empty {
    font-size: 26px;
    padding: 16px 0;
  }

  /* ── 5. PITCH MIX ─────────────────────────────────────────────────────
     Everything else comes from mlb-game-detail.css (base) and
     mlb-player-dashboard.css:3787-3830 (`body.is-mlb-route`, which this route
     carries). The one rule that does not reach us is the head padding, which
     is host-scoped at :3814. padding-right is (facecol 124 - face 78)/2 =
     23px, landing the rating chip's right edge on the batter portrait's right
     edge rather than on the panel's. */
  #mlb-search-matchup .mlb-gd-pm2-head { padding: 2px 23px 22px 2px; }

  /* ── 6. LINEUP (a pitcher's middle pill) ──────────────────────────────
     workbench-table.css:1884-1998. Those values are desktop AND that markup
     normally renders inside .tv-pm-modal, which carries `zoom: 1.35` — so
     neither the raw numbers nor the #tv-pm-popup phone pass (authored x1.862,
     mlb-player-dashboard.css:3873-3890 says so explicitly) can be copied
     here: this panel is not zoomed. Each size below is the desktop value at
     about x2, landing it beside .q2-cs-k / .q2-cs-v rather than beside a
     zoomed popup. Structure, class names and colours are unchanged. */
  #mlb-search-matchup .tv-info-rows {
    gap: 14px;
    padding: 24px 28px;
    border-radius: 16px;
  }
  #mlb-search-matchup .tv-info-rows-title { font-size: 21px; letter-spacing: .8px; }
  #mlb-search-matchup .tv-info-rows-subtitle { font-size: 21px; margin-bottom: 10px; }
  #mlb-search-matchup .tv-info-row { gap: 20px; font-size: 24px; }
  #mlb-search-matchup .tv-info-row-label { gap: 20px; }
  #mlb-search-matchup .tv-info-row-val { gap: 10px; }
  #mlb-search-matchup .tv-info-row-val-num { font-size: 30px; }
  #mlb-search-matchup .tv-info-row-val-unit { font-size: 19px; letter-spacing: .6px; }
  #mlb-search-matchup .tv-info-row-avatar {
    width: 66px;
    height: 66px;
    font-size: 22px;
    font-weight: 700;
  }
  #mlb-search-matchup .tv-info-row-batter-first { font-size: 20px; }
  #mlb-search-matchup .tv-info-row-batter-last { font-size: 26px; }
  /* Two ADDITIONS to that row, both stated rather than styled in: the batting
     order (the list is sorted by it, so the number has to be visible or the
     sort looks arbitrary) and the sample the K% is drawn from. */
  #mlb-search-matchup .tv-info-row-ord {
    flex: 0 0 46px;
    font-size: 22px;
    font-weight: 700;
    color: #475569;
    font-variant-numeric: tabular-nums;
  }
  #mlb-search-matchup .tv-info-row-pa {
    font-size: 20px;
    font-weight: 500;
    color: #64748b;
    margin-right: 8px;
  }
  /* The lineup headline. Never a probability — the rate the strikeout model
     read, beside the 0-100 sub-grade it produced from it. */
  #mlb-search-matchup .pbm-lineup-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 4px 4px;
  }
  #mlb-search-matchup .pbm-lineup-k {
    font-size: 30px;
    font-weight: 700;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
  }
  #mlb-search-matchup .pbm-lineup-grade {
    font-size: 22px;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #mlb-search-matchup .pbm-lineup-grade-d { color: #475569; font-weight: 500; }

  /* ── 7. the card's doubled bottom clearance ───────────────────────────
     mlb-search-card.css:118-120 is the game page's own
     `padding: 14px 16px 180px` on the props tab panel, re-prefixed by the
     generator: on the game page that 180px clears the bottom nav, because the
     card is the last thing on the screen. In Search it is not — the view's
     own `.pb-search { padding-bottom: 200px }` (search.css:91) already clears
     the nav and the parlay pill, so the 180px is 180px of dead space between
     the card and this panel. Trimmed here rather than in the GENERATED sheet
     (re-running scripts/gen_search_card_css.py would undo an edit there) and
     rather than in search.css, which slice C owns. Same specificity as the
     rule it answers (1-1-1), and this sheet is linked after it
     (templates/index.html:269-270), so source order decides. */
  #mlb-search-card .mlb-gd-tab-panel[data-panel="props"] { padding-bottom: 0; }
}