/* Hot Zones + player-page visuals (matchup card maps, player maps, movement profile). Own file (2026-10-25) so the college portal's
   player pages load the same rules as the MLB site and the college Match-Maker - never a copy. Uses the MLB tokens (--color-*, --ui-*);
   the college portal maps its own tokens onto them (college.css .cb-zbridge). */
/* HOT ZONES on the matchup card (owner 2026-10-23): red = good for the hitter, blue = good for the pitcher, gray = league average */
.zones-card { --z-hot: #e34948; --z-cold: #2a78d6; --z-mid: #f0efec; --z-line: var(--color-bg-primary); --z-dot: #1c1f24; --z-dot-ring: #fff; }
:root[data-theme="dark"] .zones-card { --z-hot: #e66767; --z-cold: #3987e5; --z-mid: #383835; --z-dot: #f5f5f2; --z-dot-ring: #1c1f24; }
.zhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px; }
.zscale { display: inline-flex; background: var(--ui-fill); border-radius: 999px; padding: 2px; }
.zscale button { border: 0; background: transparent; font: 600 11px/1 var(--font-sans); padding: 5px 9px; border-radius: 999px; color: var(--ui-ink); cursor: pointer; }
.zscale button.on { background: var(--ui-ink); color: var(--ui-on-ink); }
.zmaps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.zmap.zbig { grid-column: 1 / -1; }
.zmap.zbig svg { max-width: 447px; }
.zmap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zmap svg { width: 100%; max-width: 329px; height: auto; display: block; }
.zmap .zcell { stroke: var(--z-line); stroke-width: 1.2; }
.zmap .zbox { fill: none; stroke: var(--color-text-primary); stroke-width: 1; opacity: .55; pointer-events: none; }
.zmap .zv { font: 700 6.4px/1 var(--font-mono, ui-monospace, monospace); text-anchor: middle; pointer-events: none; }
.zmap .zv.zo { font-size: 5.6px; }
.zmap .zdot { fill: var(--z-dot); stroke: var(--z-dot-ring); stroke-width: .6; opacity: .9; pointer-events: none; }
.zmap figcaption { text-align: center; font-size: 12px; line-height: 1.3; display: flex; flex-direction: column; }
.zmap figcaption span { color: var(--color-text-secondary); font-size: 11.5px; }
.zkey { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 11.5px; color: var(--color-text-secondary); margin: 12px 0 4px; }
.zkey i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--z-cold), var(--z-mid), var(--z-hot)); }
.zlines { margin: 10px 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.zmap .zv.zl { font-size: 5.4px; }
.zmap .zplate { fill: var(--color-bg-primary); stroke: var(--color-text-tertiary); stroke-width: .8; }
.zmap .zboxout { fill: none; stroke: var(--color-text-tertiary); stroke-width: .8; }
.zmap .zside { font: 700 5.6px/1 var(--font-sans); letter-spacing: .06em; fill: var(--color-text-tertiary); text-anchor: middle; }
/* hot zones: one pitch at a time (owner 2026-10-23) - a scrolling row of pitch buttons, "All" first */
.zpitches { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; }
.zpitches::-webkit-scrollbar { display: none; }
.zpitches button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 6px 11px; font: 600 12px/1.1 var(--font-sans); background: var(--ui-fill); color: var(--ui-ink); cursor: pointer; white-space: nowrap; }
.zpitches button small { font-weight: 500; opacity: .7; margin-left: 2px; }
.zpitches button.on { background: var(--ui-ink); color: var(--ui-on-ink); }
/* "Where they meet" heat map (2026-10-24): smooth blue-white-red, zone + shadow band drawn over it */
.zmap .zhit { fill: transparent; }
.zmap.zheat .zbox { stroke-width: 1.4; opacity: .9; }
.zmap .zgrid { fill: none; stroke: var(--color-text-primary); stroke-width: .4; opacity: .35; pointer-events: none; }
.zmap .zshadow { fill: none; stroke: var(--color-text-tertiary); stroke-width: .6; stroke-dasharray: 1.6 1.6; pointer-events: none; }
.zheatkey { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--color-text-secondary); }
.zheatkey i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--z-cold), transparent 50%, var(--z-hot)); box-shadow: inset 0 0 0 .5px var(--color-text-tertiary); }
.zdetail { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--color-border-primary, rgba(127,127,127,.2)); font: 600 12px/1 var(--font-sans); color: var(--color-text-secondary); }
/* pitch ranking on Hot Zones (owner 2026-10-24) */
.zrankhead { font-size: 11.5px; color: var(--color-text-secondary); margin: 2px 0 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
/* pitch pills as gauges (owner 2026-10-24): his best pitch full; the rest fill by how close they come to it */
.zpitches button.zfill { background: linear-gradient(to right, color-mix(in oklab, var(--z-cold) 34%, var(--ui-fill)) var(--zf), var(--ui-fill) var(--zf)); }
.zpitches button.zfill.on { background: linear-gradient(to right, color-mix(in oklab, var(--z-cold) 70%, var(--ui-ink)) var(--zf), var(--ui-ink) var(--zf)); }
.zrankkey { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-tertiary); }
.zrankkey i { width: 14px; height: 8px; border-radius: 4px; display: inline-block; }
.zrankkey i.b { background: linear-gradient(to right, color-mix(in oklab, var(--z-cold) 55%, var(--ui-fill)) 60%, var(--ui-fill) 60%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--z-cold) 30%, transparent); }
.zpitches .zrank { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-right: 6px; border-radius: 999px; font: 700 10px/1 var(--font-sans); background: var(--ui-ink); color: var(--ui-on-ink); opacity: .75; }
.zpitches button.on .zrank { background: var(--ui-on-ink); color: var(--ui-ink); }
.zrankline { font-size: 13px; color: var(--color-text-secondary); margin: 8px 0 2px; }

/* player pages (owner 2026-10-25): hot zones (the card's player maps, both measures, either hand) + movement profile with the Glitch+ signal */
.pz-card .zpitches { padding-bottom: 6px; }
.pz-sub { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 10px; }
.pz-head { margin-top: 0; padding-top: 0; border-top: 0; }
.mv-card { --mv-grid: var(--color-border-tertiary); --mv-axis: var(--color-border-secondary); --mv-ink: var(--color-text-tertiary); --mv-sig: #d0342c; --mv-ring: var(--color-bg-primary); }
:root[data-theme="dark"] .mv-card { --mv-sig: #ff6b5e; }
.mv-head { margin-top: 0; padding-top: 0; border-top: 0; }
.mv-signal { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--color-bg-tertiary); font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }
.mv-signal b { font-size: 13px; }
.mv-signal span { color: var(--color-text-secondary); }
.mv-signal.on { box-shadow: inset 3px 0 0 var(--mv-sig); }
.mv-wrap { display: flex; justify-content: center; }
.mv-svg { width: 100%; max-width: 360px; height: auto; display: block; }
.mv-svg .mv-g { stroke: var(--mv-grid); stroke-width: .6; }
.mv-svg .mv-g0 { stroke: var(--mv-axis); stroke-width: 1; }
.mv-svg .mv-tk { font: 500 8px/1 var(--font-sans); fill: var(--mv-ink); }
.mv-svg .mv-ax { font: 600 9px/1 var(--font-sans); fill: var(--color-text-secondary); letter-spacing: .02em; }
.mv-svg .mv-typ { fill-opacity: .07; stroke-opacity: .7; stroke-width: 1.1; stroke-dasharray: 3 2.5; }
.mv-svg .mv-dot { fill-opacity: .5; stroke: var(--mv-ring); stroke-width: .5; }
.mv-svg .mv-mean { stroke: var(--mv-ring); stroke-width: 2; }
.mv-svg .mv-slot { stroke: var(--color-text-tertiary); stroke-width: 1; stroke-dasharray: 2 3; }
.mv-svg .mv-slotp { fill: var(--color-bg-primary); stroke: var(--color-text-primary); stroke-width: 1.4; }
.mv-svg .mv-sig { stroke: var(--mv-sig); stroke-width: 1.3; stroke-linecap: round; fill: none; }
.mv-svg .mv-sigh { fill: var(--mv-sig); }
.mv-svg .mv-sig-halo { stroke: var(--mv-ring); stroke-width: 3.4; stroke-linecap: round; fill: none; }
.mv-svg .mv-sigh-halo { fill: var(--mv-ring); stroke: var(--mv-ring); stroke-width: 2.2; stroke-linejoin: round; }
.mv-svg .mv-armb { stroke: var(--mv-axis); stroke-width: 1.2; }
.mv-svg .mv-arml { stroke: var(--color-text-secondary); stroke-width: 2.4; stroke-linecap: round; }
.mv-svg .mv-armb2 { fill: var(--color-text-secondary); }
.mv-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 10px; }
.mv-legend button { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 5px 10px; font: 600 11.5px/1 var(--font-sans); background: var(--ui-fill); color: var(--ui-ink); cursor: pointer; }
.mv-legend button i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mv-legend button.off { opacity: .4; text-decoration: line-through; }
.mv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mv-table th { font: 600 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-tertiary); text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--color-border-tertiary); }
.mv-table th:first-child, .mv-table td:first-child { text-align: left; }
.mv-table td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--color-border-tertiary); vertical-align: top; }
.mv-table td small { display: block; font-size: 10.5px; color: var(--color-text-tertiary); margin-top: 1px; }
.mv-table .mv-name { display: flex; align-items: flex-start; gap: 6px; }
.mv-table .mv-name i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-top: 3px; flex: 0 0 auto; }
.mv-table .mv-name small.mv-listed { display: block; }
.mv-wrap { position: relative; }
.mv-svg .mv-hit { fill: transparent; cursor: pointer; outline: none; }
.mv-svg .mv-mean, .mv-svg .mv-typ, .mv-svg .mv-slot, .mv-svg .mv-slotp, .mv-svg .mv-sig, .mv-svg .mv-sigh, .mv-svg .mv-sig-halo, .mv-svg .mv-sigh-halo, .mv-svg .mv-arm { pointer-events: none; }
.mv-svg .mv-hit:focus-visible { stroke: var(--color-text-primary); stroke-width: 1.2; }
.mv-pop { position: absolute; transform: translate(-50%, calc(-100% - 6px)); z-index: 5; background: var(--color-bg-primary); color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-secondary); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); padding: 7px 10px; font-size: 12px;
  line-height: 1.35; white-space: nowrap; }
.mv-pop.below { transform: translate(-50%, 6px); }
.mv-pop-h { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.mv-pop-h i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mv-pop-h span { font-weight: 500; color: var(--color-text-secondary); margin-left: 4px; }
.mv-pop-s { font-size: 11.5px; color: var(--color-text-secondary); margin: -2px 0 4px; }
.mv-pop-g { display: grid; grid-template-columns: auto auto; gap: 1px 12px; font-variant-numeric: tabular-nums; }
.mv-pop-g span { color: var(--color-text-secondary); }
.mv-pop-g b { font-weight: 600; text-align: right; }
/* player page: the two tabs under the percentile rankings (owner 2026-10-25), the matchup card's tab style (.mx-tabs / .mx-tab) */
.pv-drops.mx-panel-card { margin: 1.25rem 0 0.75rem; padding: 0.6rem; }
.pv-drops .mx-tabs { margin-top: 0; }
#pv-drop:not(:empty) { margin: 0 0 1.25rem; }
.pv-drop-box .mx-panel-card { margin-top: 0; }
.mv-table tr.mv-none td { color: var(--color-text-tertiary); }
/* where each pitch gets better (owner 2026-10-25): one smoothed square per pitch, heat-map colors */
.gn-block { margin-top: 0; }
.gn-head { font: 600 12px/1 var(--font-sans); color: var(--color-text-secondary); margin-bottom: 10px; }
.gn-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 10px; }
.gn-map { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gn-map svg { width: 100%; max-width: 190px; height: auto; display: block; }
.gn-map .gn-bg { fill: var(--color-bg-primary); }
.gn-map .gn-frame { fill: none; stroke: var(--color-border-secondary); stroke-width: .8; }
.gn-map .gn-axis { stroke: var(--color-text-tertiary); stroke-width: .4; stroke-dasharray: 1.5 2; opacity: .6; }
.gn-map .gn-zero { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.gn-map .gn-dot { stroke: var(--color-bg-primary); stroke-width: 1.6; }
.gn-map .gn-lab { font: 600 7px/1 var(--font-sans); fill: var(--color-text-tertiary); }
.gn-map figcaption { text-align: center; font-size: 12px; line-height: 1.3; display: flex; flex-direction: column; }
.gn-map figcaption b { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.gn-map figcaption b i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gn-map figcaption span { color: var(--color-text-secondary); font-size: 11.5px; }
.gn-map figcaption .gn-odd { font-size: 10.5px; color: var(--color-text-tertiary); font-style: italic; }
.gn-map .gn-out { fill: var(--color-bg-primary); opacity: .45; }
.gn-block .gn-head { margin: 0 0 10px; padding-top: 0; border-top: 0; flex-wrap: wrap; }

/* the hitter figure beside each zone map (owner 2026-10-25) */
.zmap .zbatter { fill: var(--color-text-tertiary); opacity: .45; }

/* where he throws it (pitcher pages): the left of three maps */
.zmaps.z3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .zmaps.z3 { grid-template-columns: 1fr 1fr; } .zmaps.z3 > .zuse { grid-column: 1 / -1; } }

/* college player pages: show one, two or three maps (owner 2026-10-26) */
.pz-show { margin-bottom: 6px; }
.zmaps.zn1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.zmaps.zn2 { grid-template-columns: 1fr 1fr; }
.mv-table td.mv-stuff { font-weight: 700; }
.mv-table td.mv-dim { color: var(--color-text-tertiary); }

/* matchup card: Defense tab (owner 2026-10-26) */
.df-head { font-size: 13.5px; margin-bottom: 8px; }
.df-wrap { display: grid; grid-template-columns: minmax(0, 470px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 640px) { .df-wrap { grid-template-columns: 1fr; } }
.df-svg { width: 100%; height: auto; }
.df-line, .df-fence { fill: none; stroke: var(--color-border-secondary, #c9c9c9); stroke-width: 1; }
.df-dirt { fill: none; stroke: #c9a67a; stroke-width: 1; stroke-dasharray: 3 2; }
.df-diamond { fill: none; stroke: var(--color-border-secondary, #c9c9c9); stroke-width: 0.8; }
.df-gb { fill: #a8673a; opacity: 0.55; }
.df-air { fill: #2b8fd6; opacity: 0.45; }
.df-std { fill: var(--color-bg-primary, #fff); stroke: var(--color-text-secondary, #777); stroke-width: 1.1; stroke-dasharray: 2 1.5; }
.df-pos { fill: var(--color-text-primary, #111); }
.df-arrow { stroke: var(--color-text-primary, #111); stroke-width: 1.4; }
.df-lab { fill: var(--color-bg-primary, #fff); font: 700 4.4px/1 var(--font-sans, sans-serif); text-anchor: middle; }
.df-gbline { font-size: 12.5px; color: var(--color-text-secondary); margin: 6px 0; }
.df-key { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 6px; }
.df-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.df-k-pos { background: var(--color-text-primary, #111); } .df-k-std { border: 1px dashed var(--color-text-tertiary, #999); }
.df-k-gb { background: #a8673a; } .df-k-air { background: #2b8fd6; }
.gn-bleed-bg { fill: var(--color-bg-secondary, #eee); opacity: 0.85; }
.gn-bleed-line { stroke: var(--color-text-tertiary, #999); stroke-width: 1.2; }
.gn-bleed { stroke: var(--color-text-tertiary, #999); stroke-width: 0.6; stroke-dasharray: 2 1.5; }
.gn-bleed-lab { font: 600 6.5px/1 var(--font-sans, sans-serif); fill: var(--color-text-secondary, #555); }
/* the two grades sit together, a little apart from the measurements (owner 2026-10-26) */
.mv-table .mv-g1 { width: 1%; white-space: nowrap; padding-left: 10px; padding-right: 8px; }
.mv-table .mv-g2 { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 20px; border-right: 1px solid var(--color-border-tertiary); }
.mv-table th.mv-g1, .mv-table th.mv-g2 { text-align: right; }

/* field-level view (owner 2026-10-27): each fielder's area shaded by the hitter's share of balls there, moves labeled in feet */
.df-card { --z-hot: #e34948; --z-cold: #2a78d6; }
:root[data-theme="dark"] .df-card { --z-hot: #e66767; --z-cold: #3987e5; }
.df-zone { stroke: var(--color-bg-primary, #fff); stroke-width: 0.8; } .df-zone.hot { fill: var(--z-hot); } .df-zone.cold { fill: var(--z-cold); }
.df-zpct { fill: var(--color-text-primary, #111); font: 700 7px/1 var(--font-sans, sans-serif); text-anchor: middle; opacity: 0.85; }
.df-ft { fill: var(--color-text-primary, #111); font: 800 6.6px/1 var(--font-sans, sans-serif); paint-order: stroke; stroke: var(--color-bg-primary, #fff); stroke-width: 2.5px; }
.df-headfill { fill: var(--color-text-primary, #111); }
.df-k-heat { width: 34px !important; height: 8px !important; border-radius: 4px !important; background: linear-gradient(90deg, #2a78d6, #f0efec, #e34948); box-shadow: inset 0 0 0 .5px var(--color-text-tertiary); }
.df-moves li b { min-width: 2em; display: inline-block; }
.df-few { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 6px; font-style: italic; }