/*
 * The Shots section's graphic — goal mouth, half pitch, and the card naming
 * whichever shot is selected (ShotMap.js).
 *
 * It sits inside a `.stat-card`, so it inherits that card's `--stat-home` /
 * `--stat-away` pair and never names a colour of its own: which team's shots
 * are on screen is the toggle's business, and the markers follow through
 * `--shot-colour` below. That indirection is what lets one stylesheet draw
 * either side without a rule per team.
 *
 * The pitch takes the pitch tokens rather than a surface directly — the same
 * call `match-lineup.css` makes. Those tokens are neutral greys now rather
 * than turf greens, but they stay the way in: what a pitch's ground and its
 * markings are is one decision, made once in tokens.css, and both graphics
 * that draw a pitch read it from there.
 */

.shot-map {
  --shot-colour: var(--stat-home);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}

/* Which side's shots are drawn resolves once, here, and every marker below
   reads it. */
.stat-card__graphic:has(.shot-map__teams[data-active="away"]) .shot-map {
  --shot-colour: var(--stat-away);
}

/* --- Team toggle -------------------------------------------------------------
 *
 * The period control's widget at a smaller size, with a crest in place of a
 * word. Two segments and a fixed count, so unlike that one it can keep the
 * plain 50% transform `ClubMatches`' own toggle uses.
 */

.shot-map__teams {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: center;
  width: 132px;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
}

.shot-map__team-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  transition: transform var(--duration) var(--easing);
}

.shot-map__teams[data-active="away"] .shot-map__team-indicator {
  transform: translateX(100%);
}

.shot-map__team {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-block: var(--space-1);
}

/* The unselected crest steps back rather than disappearing — it is still the
   control's label for the side you would switch to. */
.shot-map__team[aria-selected="false"] {
  opacity: 0.45;
  transition: opacity var(--duration) var(--easing);
}

/* --- Goal mouth ---------------------------------------------------------------- */

.shot-map__goal {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.shot-map__sky {
  fill: var(--surface-sunken);
}

/* The deeper of the two steps, not --pitch: the sky above is --surface-sunken
   and --pitch resolves to the same grey, which would leave the goal panel
   with no horizon at all under the frame. One rung down is what draws it. */
.shot-map__turf,
.shot-map__grass {
  fill: var(--pitch-deep);
}

.shot-map__frame {
  fill: var(--text);
}

/* Mesh, not a grid. Low enough that the ball's placement dot is never read
   against a competing pattern. */
.shot-map__net {
  fill-opacity: 0.15;
}

.shot-map__line {
  fill: var(--pitch-line);
}

/* The one dot on the panel: where the selected shot crossed the line. */
.shot-map__mouth-disc {
  fill: var(--surface);
  stroke: var(--shot-colour);
  stroke-width: 1.5;
}

.shot-map__mouth-pip {
  fill: var(--shot-colour);
}

.shot-map__mouth-dots {
  transition: opacity var(--duration) var(--easing);
}

/* --- Pitch ---------------------------------------------------------------------- */

.shot-map__pitch {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* --- Markers --------------------------------------------------------------------
 *
 * Three forms, and the difference between on-target and off-target is a single
 * centre dot. Kept quiet on purpose — see the note on `Marker` in ShotMap.js.
 */

.shot-map__shot {
  cursor: pointer;
  /* The tap target is the drawn disc, which at 8.8 units on a ~340px-wide
     graphic is comfortably over 24px on screen. Nothing larger is added: the
     markers overlap, and an invisible padded hit area would steal taps meant
     for the marker underneath. */
}

.shot-map__disc {
  fill: var(--surface);
  stroke: var(--shot-colour);
  transition: stroke var(--duration) var(--easing);
}

.shot-map__pip,
.shot-map__ball {
  fill: var(--shot-colour);
  color: var(--shot-colour);
}

.shot-map__ball path {
  fill: currentColor;
}

/* Focus has to be visible on a `<g>` that is reachable by tab but is not a
   button — the browser draws nothing for these on its own. */
.shot-map__shot:focus-visible {
  outline: none;
}

.shot-map__shot:focus-visible .shot-map__disc {
  stroke: var(--ring);
  stroke-width: 2.2;
}

/* --- Selection -------------------------------------------------------------------
 *
 * Ring, trajectory and block bar, all in the same near-black. Deliberately not
 * the club colour: the annotation has to read *over* markers already wearing
 * that colour, and a ring in the same hue as the disc it surrounds would
 * vanish into it.
 */

.shot-map__selection {
  fill: none;
  stroke: var(--text);
  pointer-events: none;
  transition: opacity var(--duration) var(--easing);
}

/* The light stroke under the ring — see `Selection` in ShotMap.js for why it
   is there rather than being a lighter ring on its own. */
.shot-map__ring-halo {
  stroke: var(--surface);
}

.shot-map__ring,
.shot-map__ring-halo,
.shot-map__trajectory,
.shot-map__block {
  transition:
    cx var(--duration) var(--easing),
    cy var(--duration) var(--easing);
}

/* --- Shot card --------------------------------------------------------------------- */

.shot-map__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.shot-map__card[hidden] {
  display: none;
}

.shot-map__card-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
}

.shot-map__step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--accent);
}

.shot-map__face {
  display: grid;
  place-items: center;
}

.shot-map__player {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot-map__minute {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/*
 * Six figures on a three-wide grid, so the two rows line up column for column
 * — xG over Situation, xGOT over Shot type, Outcome over Goal zone. A flex
 * wrap would let a long value ("Right footed") push its neighbour out of line
 * and break the reading down each column.
 */
.shot-map__figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-2);
  /* `base.css` resets `h1`-`h4` and `p` but not the description-list pair, so
     the UA's own `margin-block: 1em` on a `<dl>` survives and opens a hole
     inside a card that spaces itself with `gap`. Same call
     `.pick__facts` makes for the same reason. */
  margin: 0;
}

.shot-map__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.shot-map__figure-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.shot-map__figure-value {
  /*
   * The one that actually shows. A `<dd>` carries a UA
   * `margin-inline-start: 40px`, which does not indent the text so much as
   * shrink the box it is centred in — so every value sat 20px right of the
   * label above it while both were, individually, perfectly centred. The
   * labels looked aligned and the values looked broken, which is what makes
   * this worth a comment rather than a silent `margin: 0`.
   */
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.shot-map__empty {
  padding-block: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.shot-map__empty[hidden] {
  display: none;
}