/* ClubIQ feature: Pitch view ---------------------------------------------- */
.pitch {
  --pitch-turf: color-mix(in srgb, var(--good) 7%, var(--surface-2));
  --pitch-line: color-mix(in srgb, var(--text-muted) 55%, transparent);
}
.pitch-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; }
.pitch-top > div:first-child { min-width: 0; flex: 1 1 240px; }
.pitch-toggle { flex-wrap: wrap; max-width: 100%; }
.pitch-toggle button { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.pitch-sides { display: grid; gap: 18px; margin-top: 12px; }
.pitch[data-view="a"] .pitch-side[data-side="b"],
.pitch[data-view="b"] .pitch-side[data-side="a"] { display: none; }
.pitch[data-view="both"] .pitch-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pitch-side { min-width: 0; }
.pitch-side-title { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }
.pitch-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Single side: possession + shots next to each other (widths match the two viewBoxes so heights align) */
.pitch-figs { display: grid; grid-template-columns: minmax(0, 320fr) minmax(0, 220fr); gap: 16px; }
.pitch[data-view="both"] .pitch-figs { grid-template-columns: minmax(0, 1fr); }
.pitch[data-view="both"] .pitch-fig-shot .pitch-svg { max-width: 72%; }
.pitch-fig { margin: 0; min-width: 0; }
.pitch-fig figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; }
.pitch-fig .pitch-svg { display: block; width: 100%; height: auto; }
.pitch-notes { margin-top: 6px; }
.pitch-notes .insight .v { font-size: 16px; }
.pitch-key { margin: 12px 0 0; }

/* SVG */
.pitch-svg .pitch-turf { fill: var(--pitch-turf); }
.pitch-svg .pitch-lines rect, .pitch-svg .pitch-lines line, .pitch-svg .pitch-lines circle, .pitch-svg .pitch-lines path { fill: none; stroke: var(--pitch-line); stroke-width: 1.2; }
.pitch-svg .pitch-lines .pitch-third { stroke-dasharray: 4 4; stroke: color-mix(in srgb, var(--text-secondary) 70%, transparent); }
.pitch-svg .pitch-tile { stroke: none; }
.pitch-svg text { font-family: var(--font); fill: var(--text-primary); }
.pitch-svg .pitch-head-t { font-size: 11px; font-weight: 600; fill: var(--text-secondary); }
.pitch-svg .pitch-lab { font-size: 10px; font-weight: 700; letter-spacing: .08em; fill: var(--text-secondary); }
.pitch-svg .pitch-big { font-family: var(--display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pitch-svg .pitch-unit, .pitch-svg .pitch-pct { font-size: 10.5px; fill: var(--text-secondary); }
.pitch-svg .pitch-pct { font-weight: 600; fill: var(--text-primary); }
.pitch-svg .pitch-foot { font-size: 11px; fill: var(--text-secondary); }
.pitch-svg .pitch-net { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pitch-svg .pitch-net.up { fill: var(--good); }
.pitch-svg .pitch-net.down { fill: var(--bad); }
.pitch-svg .pitch-net.flat { fill: var(--text-muted); }

@media (max-width: 860px) {
  .pitch[data-view="both"] .pitch-sides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pitch-figs { grid-template-columns: minmax(0, 1fr); }
  .pitch-fig-shot .pitch-svg { max-width: 280px; margin: 0 auto; }
}