/* =====================================================================
   swift-match.css — MATCH PAGE + PITCH + METRIC NAMES + FOTMOB MOBILE
   Owned by the MATCH lane. Linked from match.ejs (body-level <link>, which
   is valid HTML5 and unaffected by the script-src CSP). Styles also apply to
   screener / fixtures / predcards which share this stylesheet via the lane.
   RULES: uses ONLY existing :root theme vars (--bg,--surface,--surface-2,
   --line,--text,--muted,--brand,--brand-2,--accent,--warn,--danger,--win,
   --radius,--header-h) plus the safe derived tints already added in
   styles.css (--brand-tint,--brand-tint-2,--brand-3,--grad-brand). No new
   var NAMES are defined; we never edit styles.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SIGNATURE METRIC NAMING (SwiftScore / Power Rating / Form Index /
   Model Consensus). The naming partial (metric-name.ejs) tags our metrics
   .is-ours and standard ones .is-standard; here we give "our" metrics a
   subtle premium tint so the USP names read as branded, while keeping the
   standard cross-site numbers visually neutral for honest comparison.
   --------------------------------------------------------------------- */
.metric-name.is-ours .mn-label{color:var(--brand-3);font-weight:700;letter-spacing:-.01em}
.metric-name.is-standard .mn-label{color:var(--text)}
.metric-name .mn-label{font-weight:600}

/* The signature-metric tile used on the match page hero strip. Auto-fit so
   3 or 4 tiles flow neatly: 2x2 on a phone, a single row on wider screens. */
.swift-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin:.75rem 0 0}
.swift-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem .6rem;text-align:center;min-width:0}
.swift-tile .st-key{display:flex;justify-content:center;align-items:center;gap:.25rem;
  font-size:.74rem;color:var(--muted);margin-bottom:.3rem}
.swift-tile .st-val{font-size:1.45rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.swift-tile .st-sub{display:block;font-size:.7rem;color:var(--muted);margin-top:.25rem}
.swift-tile.is-signature{background:var(--brand-tint);border-color:var(--brand-2)}
.swift-tile.is-signature .st-val{color:var(--brand-3)}
.swift-tile .st-meter{height:5px;border-radius:99px;background:var(--line);margin-top:.45rem;overflow:hidden}
.swift-tile .st-meter span{display:block;height:100%;background:var(--grad-brand);border-radius:99px}

/* ---------------------------------------------------------------------
   2. MATCH PAGE — FotMob mobile polish. Sticky tabs already key off
   --header-h in styles.css; we tighten card rhythm, scroll-snap the tab
   strip, and make the hero/scoreline read like FotMob on a phone.
   --------------------------------------------------------------------- */
.match .card{margin:.7rem 0}
.match .card h2{font-size:1.06rem}

/* Tab strip: horizontal scroll + snap on small screens, no scrollbar. */
.match-tabs{display:flex;gap:.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-snap-type:x proximity;position:sticky;top:var(--header-h);z-index:30;
  background:var(--bg);padding:.4rem 0;margin:0 -2px;border-bottom:1px solid var(--line)}
.match-tabs::-webkit-scrollbar{display:none}
.match-tabs .mtab{scroll-snap-align:start;white-space:nowrap;flex:0 0 auto}

/* Sticky match header: STICKY COLLISION FIX. The score header (.sticky-match)
   and the tab strip (.match-tabs) were both pinned to top:var(--header-h) and
   overlapped on mobile. We let ONLY the tabs stick; the score header scrolls
   normally so the two never collide. (z-index kept harmless if it ever stacks.) */
.sticky-match{position:static;z-index:25}

/* Signature SwiftScore badge on the verdict block. */
.verdict-conf{display:inline-flex;align-items:center;gap:.3rem;font-weight:800}
.swift-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .55rem;border-radius:99px;
  background:var(--brand-tint-2);border:1px solid var(--brand-2);color:var(--brand-3);
  font-weight:800;font-size:.82rem;letter-spacing:-.01em}
.swift-badge .sb-num{font-variant-numeric:tabular-nums}

/* WEATHER + STADIUM panel (match facts, kickoff-day conditions). */
.match-conditions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.2rem}
@media (max-width:520px){.match-conditions{grid-template-columns:1fr}}
.mc-card{display:flex;gap:.65rem;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .8rem}
.mc-card .mc-ico{font-size:1.5rem;line-height:1;flex:0 0 auto}
.mc-card .mc-body{min-width:0}
.mc-card .mc-title{font-weight:700;font-size:.95rem;display:block;overflow:hidden;text-overflow:ellipsis}
.mc-card .mc-sub{color:var(--muted);font-size:.8rem;display:block;margin-top:.1rem}
.mc-wx-row{display:flex;flex-wrap:wrap;gap:.35rem .8rem;margin-top:.35rem}
.mc-wx-row span{font-size:.78rem;color:var(--muted)}
.mc-wx-row b{color:var(--text);font-weight:700}
.mc-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.mc-pill.is-wet{color:var(--accent);border-color:var(--accent)}
.mc-pill.is-windy{color:var(--warn);border-color:var(--warn)}

/* ---------------------------------------------------------------------
   3. PITCH — Gaffer / manager card on the formation pitch + owned-player
   gold polish. The pitch markup already emits a .lc-mgr span; we add a
   premium "Gaffer Card" treatment and tidy the dots for mobile taps.
   --------------------------------------------------------------------- */
.pitch{touch-action:pan-y}
.player b{font-size:.62rem}
.lc-mgr{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;color:var(--muted);font-weight:600}
.gaffer-card{display:inline-flex;align-items:center;gap:.4rem;padding:.16rem .5rem;border-radius:99px;
  background:linear-gradient(90deg,rgba(245,185,33,.16),rgba(245,185,33,.05));
  border:1px solid var(--warn);color:var(--warn);font-weight:700;font-size:.78rem}
.gaffer-card .gc-ico{font-size:.9rem;line-height:1}
.pitch-gaffers{display:flex;justify-content:space-between;gap:.5rem;margin:.5rem 0 .2rem;flex-wrap:wrap}
.pitch-gaffers .pg-side{display:flex;align-items:center;gap:.4rem;min-width:0}
.pitch-gaffers .pg-side .pg-team{font-size:.72rem;color:var(--muted);font-weight:600}
/* owned (SwiftSquad) gold highlight: the rich .player.is-owned i / .own-star
   rules now live ONLY in live.css (gold ring + glow, standardised on --warn).
   The weaker duplicates were removed from here so the live.css rule always wins
   and the owned gold is consistent across the pitch + lineup cards. */

/* ---------------------------------------------------------------------
   4. SCREENER — tap-friendly rows that are a REAL link (whole row), bigger
   touch targets, and a card layout on phones (tables don't fit a 380px
   viewport). Desktop keeps the dense FotMob-style table.
   --------------------------------------------------------------------- */
.screener-table tbody tr.clickable-row{cursor:pointer;transition:background .12s ease}
.screener-table tbody tr.clickable-row:hover,
.screener-table tbody tr.clickable-row:focus-within{background:var(--brand-tint)}
.screener-table td{padding-top:.7rem;padding-bottom:.7rem}
.screener-table .t-name a,.screener-table .row-link{color:inherit}
/* the whole-cell link makes the row a genuine, accessible anchor */
.screener-table .row-link{display:block;color:inherit;text-decoration:none;font-weight:700}
.screener-table .row-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

@media (max-width:680px){
  /* turn the screener table into stacked cards */
  .screener-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .screener-table,.screener-table tbody,.screener-table tr,.screener-table td{display:block;width:100%}
  .screener-table tr.clickable-row{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);margin:0 0 .6rem;padding:.7rem .85rem;position:relative}
  .screener-table td{padding:.12rem 0;border:0}
  .screener-table td.t-name{font-size:1.04rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.15rem}
  .screener-table td::before{content:attr(data-th);color:var(--muted);font-size:.72rem;
    font-weight:600;display:inline-block;min-width:84px}
  .screener-table td.t-name::before,.screener-table td.empty-cell::before{content:""}
  .screener-table td.empty-cell{text-align:center;color:var(--muted);padding:1rem 0}
  .screener-filters{grid-template-columns:1fr 1fr}
}

/* Filter form: clean FotMob-ish control grid. */
.screener-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.85rem;margin:.8rem 0}
.screener-filters label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:var(--muted);font-weight:600}
.screener-filters select{background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:.5rem .55rem;font-size:.9rem;min-height:42px}
.screener-filters .check-inline{flex-direction:row;align-items:center;gap:.45rem;align-self:end}
.screener-filters .btn{align-self:end;min-height:42px}

/* ---------------------------------------------------------------------
   5. FIXTURES / league filter chips — sticky, scroll-snap chip bar.
   --------------------------------------------------------------------- */
/* NOT sticky — the sticky league-filter + day-head collided and overlaid the top
   fixtures (the "dropdown over the fixture" bug, hiding Spain). Plain flow now. */
.league-filter{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-snap-type:x proximity;padding:.5rem 0 .9rem;
  margin:0 0 .4rem;border-bottom:1px solid var(--line);background:var(--bg)}
.league-filter::-webkit-scrollbar{display:none}
.league-filter .chip{scroll-snap-align:start;white-space:nowrap;flex:0 0 auto;min-height:36px;
  display:inline-flex;align-items:center}
.day-head{background:var(--bg);clear:both;
  padding:.4rem 0;margin:1.3rem 0 .5rem;font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ---------------------------------------------------------------------
   6. PREDCARD — premium FUT-ish polish for the shareable prediction card,
   tightened for mobile. (Base layout lives in cards.css; this adds the
   match-lane refinements + the signature SwiftScore confidence read.)
   --------------------------------------------------------------------- */
.predcard{transition:transform .12s ease,box-shadow .12s ease}
.predcard:active{transform:scale(.995)}
.predcard .pc-conf-num{font-weight:700}
.predcard .pc-pick-big{letter-spacing:-.01em}
/* SwiftScore tag inside the confidence row */
.pc-swift{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--brand-3);font-weight:700}
@media (max-width:420px){
  .predcard .pc-name{font-size:.92rem}
  .predcard .pc-pick-big{font-size:1.1rem}
}

/* ---------------------------------------------------------------------
   7. AI TAKE — class hooks so the inline-fallback styles in ai-take.ejs
   are upgraded to a proper card here (the partial only ships inline
   fallbacks). Scout Report keeps the gold (warn) accent.
   --------------------------------------------------------------------- */
.ai-take{position:relative;overflow:hidden}
.ai-take .ai-take-title{font-size:1rem}
.ai-take .ai-take-body{font-size:.95rem;line-height:1.55}
.ai-take.is-scout::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--warn)}

/* ---------------------------------------------------------------------
   8. Responsible-gambling micro-note styling reused across the lane.
   --------------------------------------------------------------------- */
.rg-note{color:var(--muted);font-size:.76rem;margin-top:.4rem}

/* SEO + a11y page heading above the visual scorebox (the exact head-term users search) */
.match-h1{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;margin:.1rem 0 .9rem;line-height:1.25;display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem}
.match-h1 > span:first-of-type{color:var(--brand)}
.match-h1 .match-h1-sub{flex-basis:100%;font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:.15rem}