/* Pitch charts at window size — the touch map, the pass network, the attack
 * sides and the lineup, each drawing the shared PitchMarkings geometry under
 * its own marks. The turf layers under stage/layers/ draw the same data
 * objects into the stage's coordinate system; these draw them in a box.
 * ---------------------------------------------------------------------- */

@layer components {
  .pitch-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 36rem;
    position: relative;
  }

  .pitch-chart__svg {
    inline-size: 100%;
    block-size: auto;
  }

  .pitch-chart__pitch rect,
  .pitch-chart__pitch line,
  .pitch-chart__pitch circle {
    fill: none;
    stroke: var(--color-ink-lighter);
    stroke-width: 0.4;
  }

  .pitch-chart__pitch .pitch-chart__spot {
    fill: var(--color-ink-lighter);
    stroke: none;
  }

  .touch-map__cell {
    fill: var(--theme-home, oklch(var(--lch-blue-dark)));
  }

  .pitch-chart__side--home {
    --pitch-chart-color: var(--theme-home, oklch(var(--lch-blue-dark)));
  }

  .pitch-chart__side--away {
    --pitch-chart-color: var(--theme-away, oklch(var(--lch-pink-medium)));
  }

  .pass-network__edge {
    stroke: var(--pitch-chart-color);
    stroke-opacity: 0.45;
    stroke-linecap: round;
  }

  .pass-network__node {
    fill: var(--pitch-chart-color);
    fill-opacity: 0.9;
    stroke: var(--color-surface);
    stroke-width: 0.25;
  }

  .pass-network__number {
    fill: var(--color-surface);
    font-size: 1.4px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
  }

  .attack-sides__shaft {
    stroke: var(--pitch-chart-color);
    stroke-opacity: 0.75;
    stroke-linecap: round;
  }

  .attack-sides__head {
    fill: var(--pitch-chart-color);
    fill-opacity: 0.75;
  }

  .attack-sides__label {
    fill: var(--color-ink-medium);
    font-size: 2px;
    font-family: var(--font-mono);
    text-anchor: middle;
  }

  .lineup-pitch__dot {
    fill: var(--pitch-chart-color);
    stroke: var(--color-surface);
    stroke-width: 0.25;
  }

  .lineup-pitch__number {
    fill: var(--color-surface);
    font-size: 1.8px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
  }

  .lineup-pitch__name {
    fill: var(--color-ink);
    font-size: 1.7px;
    text-anchor: middle;
  }

  .lineup-pitch__player {
    text-decoration: none;
  }
}