/* Match stats view (stats-view.js): the report's Overview. Shot map + top stats on top, stat cards in two columns,
   then the player table. Rows read home value | stat | away value, and the side that leads a stat gets its team colour as a pill. */
.sv { display:grid; gap:20px }
.sv-key { display:flex; justify-content:flex-end; gap:16px; font-size:13px; color:var(--fg-2) }
.sv-key > span { display:inline-flex; align-items:center; gap:7px }
.sv-sw { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none }
.sv-card { background:var(--surface); border-radius:20px; padding:22px 22px 20px; min-width:0 }
.sv-title { font:700 17px/1.2 var(--display); letter-spacing:-.015em; color:var(--fg); margin:0 0 16px; text-align:center }
.sv-cap { margin:12px 0 0; font-size:12.5px; color:var(--fg-2); text-align:center }
.sv-empty { margin:6px 0 0; color:var(--fg-2); font-size:14px; text-align:center }

/* Top row: shot map | top stats */
.sv-hero { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
/* Not measured in this clip: a quiet "—" row, and maps show an empty pitch with a note on it */
.sv-gap { margin-right:auto; color:var(--fg-3) }
.sv-row.off .sv-k, .sv-row.off .sv-v { color:var(--fg-3); font-weight:500 }
.sv-off { position:relative }
.sv-off svg { opacity:.55 }
.sv-off p { position:absolute; inset:50% 12% auto; translate:0 -50%; margin:0; padding:12px 16px; border-radius:14px; background:var(--surface-2);
  color:var(--fg-2); font-size:13.5px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.08) }

/* Stat rows */
.sv-rows { display:grid; gap:4px; max-width:560px; margin-inline:auto }   /* keeps the two values close enough to compare in wide cards */
.sv-row { display:grid; grid-template-columns:minmax(76px,auto) 1fr minmax(76px,auto); align-items:center; gap:10px; min-height:38px; font-size:14px }
.sv-k { text-align:center; color:var(--fg-2); font-weight:500 }
.sv-v { justify-self:start; padding:5px 10px; border-radius:999px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg); white-space:nowrap }
.sv-row > .sv-v:last-child { justify-self:end }
.sv-v small { font-size:12px; font-weight:600; opacity:.75 }
.sv-v.lead { background:var(--c); color:#fff }
.sv-v.lead small { opacity:.85 }

/* Possession: one split bar */
.sv-poss-k { text-align:center; font-size:13px; font-weight:600; color:var(--fg-2); margin-bottom:8px }
.sv-poss { display:flex; gap:3px; height:32px; max-width:560px; margin:0 auto 12px; border-radius:999px; overflow:hidden }
.sv-poss span { display:flex; align-items:center; padding:0 14px; color:#fff; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums }
.sv-poss span:last-child { justify-content:flex-end }

/* Shot map */
.sv-shot-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.sv-shot-head .sv-title { margin:0; text-align:left }
.sv-step { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--fg-2) }
.sv-step button { width:32px; height:32px; border-radius:50%; background:var(--surface-2); color:var(--fg); font-size:20px; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,.1); transition:transform .12s var(--ease), opacity .2s }
.sv-step button:active { transform:scale(.92) }
.sv-step button[disabled] { opacity:.35; cursor:default }
.sv-shot-who { display:flex; align-items:center; gap:8px; font-size:15px }
.sv-shot-facts { display:flex; flex-wrap:wrap; gap:8px 24px; margin:10px 0 14px }
.sv-shot-facts div { display:grid; gap:2px }
.sv-shot-facts dt { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-2) }
.sv-shot-facts dd { margin:0; font-size:16px; font-weight:700 }
.sv-pitch svg { display:block; width:100%; height:auto }
.sv-dot { cursor:pointer }
.sv-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:12px; font-size:12.5px; color:var(--fg-2) }
.sv-legend span { display:inline-flex; align-items:center; gap:6px }
.sv-legend i { width:10px; height:10px; border-radius:50%; border:1.5px solid var(--fg-2) }
.sv-legend i.f { background:var(--fg-2) }
.sv-legend i.g { background:#fff; box-shadow:inset 0 0 0 2.5px var(--fg-2) }
.sv-score { display:flex; align-items:center; gap:8px; font-size:15px; margin:2px 0 10px }
.sv-score b { font-size:20px; padding:0 4px }

/* Stat cards: an even two-column grid, so cards side by side share their top and bottom edges */
.sv-groups { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px }
.sv-groups > .sv-card:last-child:nth-child(odd) { grid-column:1 / -1 }   /* an odd card out spans the row instead of leaving a hole */

/* Player table */
.sv-players { padding-bottom:12px }
.sv-players .sv-title { text-align:left }
.sv-chips { display:flex; gap:8px; overflow-x:auto; margin:-4px 0 14px; padding-bottom:2px }
.sv-chips button { flex:none; height:34px; padding:0 16px; border-radius:999px; background:var(--surface-2); color:var(--fg-2); font-size:13.5px; font-weight:600; box-shadow:inset 0 0 0 1px var(--line); transition:background .2s, color .2s }
.sv-chips button[aria-selected="true"] { background:var(--brand); color:var(--on-brand); box-shadow:none }
.sv-table { overflow-x:auto; margin:0 -22px; padding:0 22px }
.sv-table table { width:100%; border-collapse:collapse; font-size:14px }
.sv-table th { padding:0 10px 10px; text-align:left; font-size:12px; font-weight:600; color:var(--fg-2); white-space:nowrap; border-bottom:1px solid var(--line) }
.sv-table th.r, .sv-table td.r { text-align:right }
.sv-table th button { font-weight:600; color:inherit }
.sv-table th[aria-sort] button { color:var(--fg) }
.sv-table td { padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap }
.sv-table tr:last-child td { border-bottom:0 }
.sv-table tbody tr { cursor:pointer; transition:background .15s }
.sv-table tbody tr:hover { background:color-mix(in srgb,var(--brand) 6%,transparent) }
.sv-pl { display:flex; align-items:center; gap:10px }
.sv-pl b { display:block; font-weight:600 }
.sv-pl small { display:block; font-size:12px; color:var(--fg-2) }
.sv-jersey { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700 }
.sv-best { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--brand); color:var(--on-brand); font-weight:700 }

/* From the model */
.sv-foot dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin:0 }
.sv-foot dl div { display:grid; gap:2px; text-align:center }
.sv-foot dt { font-size:12px; color:var(--fg-2) }
.sv-foot dd { margin:0; font-size:17px; font-weight:700 }

/* Player card (in the bottom sheet): ‹ who › header, heatmap with a whole / on / off switch, then his stats as label-value lists */
.pc { display:grid; gap:14px; padding-bottom:4px }
.pc-head { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px; padding:4px 0 6px }
.pc-nav { width:40px; height:40px; border-radius:50%; background:var(--surface); color:var(--fg); font-size:22px; line-height:1; transition:transform .12s var(--ease), opacity .2s }
.pc-nav:active { transform:scale(.92) }
.pc-nav[disabled] { opacity:.3; cursor:default }
.pc-id { display:grid; justify-items:center; gap:4px; text-align:center; min-width:0 }
.pc-id h2 { margin:6px 0 0; font:700 20px/1.2 var(--display); letter-spacing:-.02em }
.pc-id > span:last-child { font-size:13px; color:var(--fg-2) }
.pc-badge { width:64px; height:64px; font-size:20px; box-shadow:0 0 0 4px var(--surface), 0 8px 20px rgba(0,0,0,.12) }
.pc-sec { background:var(--surface); border-radius:18px; padding:16px 16px 14px }
.pc-sec h3 { margin:0 0 10px; font:700 16px/1.2 var(--display); letter-spacing:-.015em }
.pc-sec-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.pc-touch { font-size:13px; color:var(--fg-2) }
.pc-touch b { color:var(--fg); font-size:15px; margin-left:4px }
.pc-modes { margin:0 0 12px }
.pc-modes button { height:30px; padding:0 13px; font-size:12.5px }
.pc-list { display:grid; margin:0 }
.pc-list div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--line) }
.pc-list div:last-child { border-bottom:0; padding-bottom:2px }
.pc-list dt { color:var(--fg-2); font-size:14px }
.pc-list dd { margin:0; font-weight:700; font-size:15px }
.pc-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12.5px; color:var(--fg-2) }

@media (max-width:860px) {
  .sv-hero { grid-template-columns:1fr }
  .sv-groups { grid-template-columns:1fr }
}
@media (max-width:520px) {
  .sv-card { padding:18px 14px 16px; border-radius:18px }
  .sv-row { grid-template-columns:minmax(64px,auto) 1fr minmax(64px,auto); gap:6px; font-size:13px }
  .sv-v { padding:4px 8px }
  .sv-key { justify-content:center }
  .sv-table { margin:0 -14px; padding:0 14px }
}