/*
 * The match player sheet (MatchPlayerSheet.js): a player on the pitch of a
 * match, opened from the fixture page's Lineups tab — who they are, and what
 * they did in this fixture.
 *
 * The shell is the bet builder's — scrim, rounded panel on --rest-y /
 * --drag-y, the same dragging states, the same z-index band — so the two
 * sheets rise and fall identically over the same page. The head is this
 * file's own: a portrait with the pitch's rating pill on its corner, the name
 * with its shirt number set back, and a position · club line.
 *
 * The body is a column of flat, titled blocks — no cards. Two hold graphics
 * that belong to other files: the heatmap's cloud is the player page's
 * (`HeatCanvas`, HeatCloud.js) and the shot map is the Statistics tab's
 * (`ShotMap.js`, shot-map.css); the rules here only place them. Between
 * them sit the fact cards — the one boxed thing on the sheet, a soft tint
 * with a chip naming who is speaking: the match's own Highlights in green,
 * SureSCOUT's picks in the product's blue. The stat sections are lists under
 * a title: one row per figure, label left, value right, a hairline between.
 */

.match-player {
  --rest-y: 100%;

  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--app-max-width);
  margin-inline: auto;
}

.match-player[hidden] {
  display: none;
}

.match-player__scrim {
  position: absolute;
  inset: 0;
  background: var(--text);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
  transition-delay: var(--stagger-step);
}

.match-player[data-open="true"] .match-player__scrim {
  opacity: 0.4;
  transition-delay: 0ms;
}

.match-player__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 860px);
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-floating);
  transform: translateY(calc(var(--rest-y) + var(--drag-y, 0px)));
  transition: transform var(--exit-duration, var(--duration)) var(--easing);
}

.match-player[data-open="true"] .match-player__panel {
  --rest-y: 0%;

  transition: transform var(--spring-duration) var(--spring) var(--stagger-step);
}

.match-player[data-dragging="true"] .match-player__panel {
  transition: none;
}

.match-player[data-dragging="released"] .match-player__panel {
  transition: transform var(--spring-duration) var(--spring);
}

/* --- Head ------------------------------------------------------------------------ */

.match-player__grabber {
  display: grid;
  place-items: center;
  padding: var(--space-2) 0 var(--space-1);
  cursor: grab;
  touch-action: none;
}

.match-player__bar {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
}

.match-player__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The pitch node's own arrangement — photo with the rating pill overlapping
   its top-right corner — at portrait size. The pill's geometry is the
   pitch's (season-stats.css); only its offset is retuned for a photo half
   again as large, so it still reads as hung on the corner rather than
   floating beside it. */
.match-player__portrait {
  position: relative;
  flex: 0 0 auto;
}

.match-player__portrait .avatar {
  display: block;
}

.match-player__rating {
  top: -3px;
  right: -9px;
}

.match-player__rating[hidden] {
  display: none;
}

.match-player__identity {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.match-player__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.match-player__number {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.match-player__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.match-player__position {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.match-player__club {
  min-width: 0;
}

.match-player__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  /* Buttons are tap targets, not part of the drag surface — the pointerdown
     guard in the component skips them, and this keeps them from reading as
     draggable. */
  touch-action: auto;
}

/* --- Body --------------------------------------------------------------------------- */

.match-player__body {
  flex: 1 1 auto;
  min-height: 160px;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* The body's contents, 15% smaller on a phone — `zoom`, for the reasons
     `.fixture-details__panels` gives (fixture-details.css): a layout scale,
     not a transform, so taps land and type re-renders. A step past that
     page's 0.9, because the cards here were authored at the page's density
     and then stacked in a sheet that starts a third of the way down the
     screen, where the same density reads as oversized. The head above is
     not scaled: it is the identity strip, and it sits against the fixture
     header's own sizes. */
  zoom: 0.85;
}

@media (min-width: 500px) {
  .match-player__body {
    zoom: 1;
  }
}

.match-player__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The stand-in note — the bet builder's `.bb-note`, warning-toned, since it
   says the numbers below are another match's. */
.match-player__note {
  padding: var(--space-2) var(--space-3);
  background: var(--warning-soft);
  border-radius: var(--radius-md);
  color: var(--warning-strong);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.match-player__status {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* --- Summary strip ---------------------------------------------------------------- */

/* One tile per headline figure, equal widths, on the sunken surface the
   Statistics tab's figures sit on. The label is small and above; the number
   is the thing. */
.match-player__summary {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
}

.match-player__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--space-1) 0;
}

.match-player__figure-label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-player__figure-value {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- Blocks ------------------------------------------------------------------------ */

/* A title on the left, the block's one figure on the right, then whatever
   the block holds — a graphic or a list. Flat: the sheet's own ground is the
   card. */
.match-player__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.match-player__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.match-player__section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text);
}

/* "Touches 51": the label in the running size, the value bold beside it. A
   plain aside (the shot map's caption) is the same line without the bold. */
.match-player__aside {
  flex: none;
  color: var(--text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.match-player__aside-value {
  font-weight: var(--weight-bold);
}

.match-player__empty-line {
  padding-block: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* --- Heatmap ------------------------------------------------------------------------ */

/* The player page's heatmap pitch (player-performance.css), under this
   sheet's classes: a landscape pitch on white with grey markings, the cloud
   stretched over it, the direction-of-play badge in a thin SVG on top. White
   rather than --pitch because the cloud is read for its colour — see
   --heat-* in tokens.css. */
.match-player__pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 105 / 68;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.match-player__pitch-lines,
.match-player__cloud,
.match-player__marks,
.match-player__generation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.match-player__generation {
  display: block;
}

.match-player__pitch-line {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 0.8;
}

.match-player__pitch-spot {
  fill: var(--border-strong);
  stroke: none;
}

.match-player__marks {
  pointer-events: none;
}

/* The direction-of-play badge: a grey pill on the halfway line with white
   chevrons — `AttackBadge` in HeatCloud.js. */
.match-player__attack-badge {
  fill: var(--text-muted);
}

.match-player__attack {
  fill: none;
  stroke: var(--surface);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Fact cards -------------------------------------------------------------------- */

/* A soft tinted card: a chip naming who is speaking, then a line per fact.
   The tint and the chip take one colour per tone — the match's highlights
   in green, SureSCOUT's picks in the product's own blue (`.scout-head__product`
   on the Player Props tab is `--accent`) — so the two are told apart and the
   chip never needs reading to know which it is. */
.match-player__fact {
  --fact-rgb: var(--success-rgb);
  --fact-ink: var(--success-strong);

  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgb(var(--fact-rgb) / 0.1);
  border-radius: var(--radius-lg);
}

.match-player__fact[data-tone="scout"] {
  --fact-rgb: var(--accent-rgb);
  --fact-ink: var(--accent);
}

.match-player__fact-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgb(var(--fact-rgb) / 0.16);
  border-radius: var(--radius-full);
  color: var(--fact-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.match-player__fact-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.match-player__fact-line {
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.4;
}

/*
 * The SureSCOUT row — the app's carousel (carousel.css) holding one fact
 * card per pick. It bleeds to the sheet's edge, like the Catch-Up recap's
 * row does to the page's, so a peeking card is cut by the screen and not by
 * the body's gutter; the track's own padding then puts the first card back
 * on the gutter the blocks above it sit on. The cards are stretched to one
 * height, so a pick with a longer sentence does not leave the row ragged as
 * it swipes; the track's own `align-items` would leave each at its own.
 */
.match-player__scout {
  margin-inline: calc(var(--space-4) * -1);
}

.match-player__scout .carousel__track {
  align-items: stretch;
}

/* A SureSCOUT card's first line: the call, and its chance set off to the
   right of it. */
.match-player__fact-call {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.match-player__fact-chance {
  flex: none;
  color: var(--fact-ink);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* --- Shot map ----------------------------------------------------------------------- */

/* The Statistics tab colours its markers by the side whose shots are shown,
   through `--stat-home` / `--stat-away` — tokens that only resolve under a
   fixture page's `[data-team-colours]`. This sheet is mounted beside the
   page, not in it, so it takes the sides' own base colours directly. Two
   classes deep on purpose: the graphic's root is a `.shot-map`, whose own
   `--shot-colour` would otherwise win on load order. */
.match-player[data-side="home"] .shot-map {
  --shot-colour: rgb(var(--side-home-rgb));
}

.match-player[data-side="away"] .shot-map {
  --shot-colour: rgb(var(--side-away-rgb));
}

/* --- Stat rows ----------------------------------------------------------------------- */

.match-player__rows {
  display: flex;
  flex-direction: column;
}

.match-player__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}

.match-player__row:last-child {
  border-bottom: 0;
}

.match-player__row-label {
  color: var(--text);
}

.match-player__row-value {
  flex: none;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}