/* ============================================================================
   wc26.css  World Cup 2026 estate component library + CLASS CONTRACT.
   SOLE OWNER: Lane P1 (design system). All other lanes CONSUME these class
   names; they MUST NOT define their own styling for them. If a lane needs a
   new visual primitive, it adds the MARKUP with a class from the contract
   below and Lane P1 styles it. Loaded after style.css (wc26 body only).
   Brand: navy #0a1628 / cream #f5f0e6 / PL-red #c8102e. Fraunces / Newsreader
   / General Sans / JetBrains Mono. Hairline rules, newspaper grid, NO rounded
   shadow cards, NO gradients beyond the brand pair, NO pixel filters on faces.
   Polish P1 (Jun 11): mobile-perfect <= 640/480/380, premium components,
   OG card quality, focus-visible states, tap targets >= 44px.
   ============================================================================ */

/* ---- TOKENS ------------------------------------------------------------- */
/* wc26.css owns a COMPLETE token set for the estate so no surface depends on
   style.css variable leakage. `--hairline` was referenced 23x across estate
   templates but defined nowhere; it is defined here. Brand-aligned aliases for
   the chrome tokens keep wc26 pages self-consistent under the wc26 body. */
:root{
  /* brand core */
  --navy:#0a1628; --cream:#f5f0e6; --red:#c8102e; --red-deep:#8b0a1f;
  /* tier moat */
  --gold:#b8860b; --silver:#8a8d91; --bronze:#a6692e;
  /* surfaces + rules */
  --paper-2:#efe7d6; --paper-3:#e6dcc4;
  --rule:rgba(10,22,40,.15); --rule-strong:rgba(10,22,40,.32);
  --hairline:rgba(10,22,40,.15); --hairline-strong:rgba(10,22,40,.32);
  /* ink ramp (brand-aligned so the estate never inherits style.css drift) */
  --ink:#0a1628; --ink-2:#1f2e44; --ink-3:#46546b;
  --ink-40:rgba(10,22,40,.4); --ink-60:rgba(10,22,40,.6);
  --ink-4:rgba(10,22,40,.55); --ink-5:rgba(10,22,40,.42);
  --accent:#c8102e;
  --green-live:#1f7a3d; --live:#1f7a3d;
  /* type families (mirror style.css so wc26 markup can name them) */
  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-body:"Newsreader",Georgia,"Times New Roman",serif;
  --ff-sans:"General Sans",-apple-system,system-ui,sans-serif;
  --ff-mono:"JetBrains Mono","Courier New",monospace;
  /* rhythm */
  --step:.5rem; --gutter:clamp(1rem,3.5vw,1.6rem); --measure:980px;
  /* tap target floor (WCAG 2.5.5) */
  --tap:44px;
}

/* ---- ESTATE BASE (premium broadsheet, wc26 body only) ------------------- */
body.wc26{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wc26 main{ font-family:var(--ff-body); }

/* the one shared page container the estate templates use */
.wc-wrap{ max-width:var(--measure); margin:0 auto; padding:1.6rem var(--gutter) 4rem; }
.wc-wrap--narrow{ max-width:880px; }

/* answer-first lede + freshness microcopy */
body.wc26 .answer-lede{ font:400 clamp(1.04rem,2.4vw,1.22rem)/1.55 var(--ff-body);
  color:var(--ink-2); margin:.2rem 0 1.1rem; max-width:62ch;
  border-left:2px solid var(--red); padding-left:1.1rem; }
body.wc26 .answer-lede b,body.wc26 .answer-lede strong{ color:var(--navy); font-weight:600; }
body.wc26 .freshness{ font:.74rem/1.4 var(--ff-mono); color:var(--ink-60);
  letter-spacing:.01em; margin:0 0 1.2rem; }
body.wc26 .freshness::before{ content:"\25CF"; color:var(--green-live);
  margin-right:.45rem; font-size:.55rem; vertical-align:middle; }

/* estate H1 / section heads as utilities */
.wc26 .wc-h1{ font:600 clamp(1.6rem,4.6vw,2.55rem)/1.14 var(--ff-display);
  letter-spacing:-.012em; color:var(--navy); margin:.2rem 0 1rem; }
.wc26 .eyebrow{ font:600 .68rem/1 var(--ff-sans); letter-spacing:.13em;
  text-transform:uppercase; color:var(--red); margin:0 0 .55rem; }

/* prose links inside estate bodies: branded underline, no slab */
.wc26 main p a:not(.card):not(.tag-paid):not(.tag-free){
  color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); transition:border-color .14s ease,color .14s ease; }
.wc26 main p a:not(.card):hover{ color:var(--red); border-bottom-color:var(--red); }

/* ---- GLOBAL FOCUS VISIBLE (all estate interactive elements) ------------- */
/* Real :focus-visible so keyboard users have a high-contrast ring. The default
   browser outline is suppressed for pointer users via :focus:not(:focus-visible). */
.wc26 a:focus-visible,
.wc26 button:focus-visible,
.wc26 [tabindex]:focus-visible{
  outline:2px solid var(--red); outline-offset:2px; }
/* kill the legacy :focus ring for mouse / touch (not keyboard) */
.wc26 a:focus:not(:focus-visible),
.wc26 button:focus:not(:focus-visible){ outline:none; }

/* ---- breadcrumb (UI + sits above H1 on every estate page) --------------- */
.crumbs{ font:600 .7rem/1.4 var(--ff-sans); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-60);
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 1rem;
  padding:0 0 .7rem; border-bottom:1px solid var(--rule); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.crumbs li{ list-style:none; display:flex; gap:.5rem; align-items:center; }
.crumbs li+li::before{ content:"\203A"; color:var(--ink-40); font-weight:400; }
.crumbs a{ color:var(--ink-60); text-decoration:none; border-bottom:1px solid transparent;
  /* tap target: min inline size so a crumb link is always 44px tall */
  display:inline-flex; align-items:center; min-height:var(--tap); }
.crumbs a:hover{ color:var(--red); border-bottom-color:var(--red); }
.crumbs a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.crumbs [aria-current]{ color:var(--navy); }

/* ---- verified badge (the CITED-over-VISITED proof; confident, not loud) -- */
/* Polish P1: sharper borders, tighter tracking, green dot is more present. */
.verified{ display:inline-flex; align-items:center; gap:.5rem;
  font:600 .72rem/1 var(--ff-sans); letter-spacing:.03em;
  padding:.5rem .76rem; border:1px solid var(--rule-strong); background:#fff;
  color:var(--navy); box-shadow:0 1px 2px rgba(10,22,40,.07);
  vertical-align:middle; }
.verified::before{ content:""; width:.62rem; height:.62rem; border-radius:50%;
  background:var(--green-live); box-shadow:0 0 0 3px rgba(31,122,61,.18);
  flex:0 0 auto; }
.verified b{ font-weight:700; }
.verified .src{ color:var(--ink-60); font-weight:500; }
.verified .dot{ color:var(--ink-40); margin:0 .2rem; }
.verified--live{ border-color:var(--green-live); background:rgba(31,122,61,.04); }
.verified--live::before{ animation:vpulse 1.7s ease-in-out infinite; }
.verified--live .lbl::after{ content:" \00B7 LIVE"; color:var(--green-live); font-weight:700; letter-spacing:.04em; }
@keyframes vpulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(31,122,61,.18); }
  50%{ box-shadow:0 0 0 7px rgba(31,122,61,.05); } }
@media (prefers-reduced-motion:reduce){ .verified--live::before{ animation:none; } }

/* ---- source-tier badges (the editorial moat; honour the tier) ----------- */
.tier{ display:inline-block; font:700 .64rem/1 var(--ff-sans);
  letter-spacing:.07em; text-transform:uppercase; padding:.32rem .5rem; border:1px solid; }
.tier-1{ color:var(--gold); border-color:var(--gold); background:rgba(184,134,11,.08); }
.tier-2{ color:var(--silver); border-color:var(--silver); background:rgba(138,141,145,.08); }
.tier-3{ color:var(--bronze); border-color:var(--bronze); background:rgba(166,105,46,.08); }
.tier-rumour{ color:var(--ink-60); border:1px dashed var(--rule-strong); background:transparent; }

/* ---- flag chip (consumed by schedule/group/match/squad rows) ------------ */
/* Polish P1: slightly larger flag image, better vertical centering on mobile. */
.flag-chip{ display:inline-flex; align-items:center; gap:.48rem; white-space:nowrap; }
.flag-chip img,.flag-chip .flag-img{ width:1.55rem; height:1.08rem; object-fit:cover;
  border:1px solid var(--rule); box-shadow:0 1px 0 rgba(10,22,40,.08); flex:0 0 auto;
  background:var(--paper-2); }
.flag-chip b,.flag-chip .fc-nm{ font-weight:600; color:var(--navy); }
.flag-chip--lg img,.flag-chip--lg .flag-img{ width:2.4rem; height:1.68rem; }
.flag-chip a{ text-decoration:none; color:var(--navy); border-bottom:1px solid transparent; }
.flag-chip a:hover{ border-bottom-color:var(--red); }

/* ---- card + card-grid (matches, news, related, contenders) -------------- */
/* hairline-welded tiles: one shared rule between cells, lift to paper on hover.
   No rounded corners, no drop shadow; the lift is the only motion. */
.card-grid{ display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); margin:1.2rem 0; }
.card-grid--tight{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); }
.card{ background:var(--cream); padding:1.05rem 1.15rem; display:flex;
  flex-direction:column; gap:.5rem; min-height:100%; text-decoration:none;
  color:var(--navy); position:relative; transition:background .14s ease,box-shadow .14s ease; }
a.card{ cursor:pointer; }
a.card::after{ content:""; position:absolute; left:0; top:0; width:0; height:2px;
  background:var(--red); transition:width .18s ease; }
a.card:hover{ background:#fffdf8; box-shadow:inset 0 0 0 1px var(--rule); }
a.card:hover::after{ width:100%; }
a.card:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
.card .eyebrow{ font:600 .66rem/1 var(--ff-sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--red); margin:0; }
.card h3,.card .card-title{ font:600 1.08rem/1.2 var(--ff-display);
  letter-spacing:-.01em; margin:0; color:var(--navy); }
.card .sub{ font:.86rem/1.45 var(--ff-body); color:var(--ink-2); margin:0; }
.card .meta{ font:.74rem/1.4 var(--ff-mono); color:var(--ink-60); margin-top:auto;
  display:flex; flex-wrap:wrap; gap:.2rem .7rem; align-items:center; }
.card .go{ font:600 .72rem/1 var(--ff-sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--red); margin-top:.2rem; }
.card--media{ padding:0; overflow:hidden; }
.card--media img{ display:block; width:100%; height:auto; }
.card--media .card-body{ padding:.95rem 1.15rem; display:flex; flex-direction:column; gap:.45rem; }

/* ---- match card hero (two flags + venue strip) -------------------------- */
.matchcard-flags{ display:flex; align-items:center; gap:.7rem;
  font:600 1rem/1.1 var(--ff-display); color:var(--navy); flex-wrap:wrap; }
.matchcard-flags .vs{ color:var(--ink-40); font-style:italic;
  font-family:var(--ff-display); font-weight:400; }

/* ---- hero (per-surface; match=venue photo, NOT the shared stadium) ------- */
/* Polish P1: richer figcaption gradient + credit colour + spacing. */
.wc-hero{ position:relative; margin:1.1rem 0 1.5rem; border:1px solid var(--rule);
  overflow:hidden; background:var(--navy); }
.wc-hero img{ display:block; width:100%; height:auto; filter:saturate(.97); }
.wc-hero figcaption{ position:absolute; left:0; bottom:0; right:0;
  font:.7rem/1.4 var(--ff-sans); color:#f5f0e6;
  background:linear-gradient(to top,rgba(10,22,40,.9) 0%,rgba(10,22,40,.4) 60%,rgba(10,22,40,0) 100%);
  padding:2.4rem .95rem .7rem; display:flex; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; align-items:flex-end; }
.wc-hero .credit{ color:rgba(245,240,230,.6); font-size:.66rem; }
.wc-hero .credit a{ color:rgba(245,240,230,.6); text-decoration:none;
  border-bottom:1px solid rgba(245,240,230,.3); }
.wc-hero .credit a:hover{ color:var(--cream); border-bottom-color:var(--cream); }
.wc-hero--match figcaption{ font-weight:600; letter-spacing:.01em; }

/* ---- player face grid (squad pages; the verified faces) ----------------- */
/* Polish P1: slightly tighter min-width for very small screens. */
.face-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(114px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); margin:1.1rem 0; }
.face{ background:var(--cream); padding:.78rem .62rem; display:flex; flex-direction:column;
  align-items:center; gap:.5rem; text-align:center; transition:background .14s ease; }
a.face{ text-decoration:none; }
a.face:hover{ background:#fffdf8; }
a.face:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
.face .face-img,.face img{ width:84px; height:84px; object-fit:cover; object-position:top center;
  border:1px solid var(--rule); background:var(--paper-2); }
.face .nm{ font:600 .8rem/1.16 var(--ff-sans); color:var(--navy); }
.face .pos{ font:.64rem/1 var(--ff-mono); color:var(--ink-60);
  letter-spacing:.05em; text-transform:uppercase; }
.face--noimg .face-img{ display:flex; align-items:center; justify-content:center;
  font:600 1.5rem/1 var(--ff-display); color:var(--ink-40); }

/* ---- data-viz table (toughness index, ladder, leaderboards) ------------- */
/* Polish P1: taller rows for easier reading, richer bar track. */
.viz{ margin:1.3rem 0; }
.viz-row{ display:grid; grid-template-columns:1.7rem 1fr auto; align-items:center;
  gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--rule); }
.viz-row:first-child{ border-top:1px solid var(--rule-strong); }
.viz-rank{ font:600 .92rem/1 var(--ff-display); color:var(--ink-60); text-align:right; }
.viz-label{ font:600 .9rem/1.25 var(--ff-sans); color:var(--navy); }
.viz-track{ position:relative; background:var(--paper-3); height:.6rem; width:100%;
  margin-top:.32rem; }
.viz-bar{ height:.6rem; background:var(--navy); min-width:3px; display:block;
  transition:width .3s ease; }
.viz-bar--red{ background:var(--red); }
.viz-val{ font:.82rem/1 var(--ff-mono); color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums; }

/* ---- named-device caption (so engines attribute the IG object) ---------- */
.device-name{ font:italic 600 .84rem/1.35 var(--ff-display); color:var(--red);
  letter-spacing:.01em; margin:.4rem 0 .85rem; }
.device-name::before{ content:"\25C6\00A0"; color:var(--red); font-style:normal; }

/* ---- pull-stat (the citable number; big, screenshot-friendly) ----------- */
.pull-stat{ border-top:2px solid var(--navy); border-bottom:1px solid var(--rule);
  padding:1.2rem 0; margin:1.4rem 0; display:flex; gap:1.2rem; align-items:baseline; }
.pull-stat .n{ font:800 clamp(2.2rem,7vw,2.9rem)/.88 var(--ff-display);
  color:var(--red); letter-spacing:-.02em; flex:0 0 auto; }
.pull-stat .t{ font:400 1rem/1.45 var(--ff-body); color:var(--navy); max-width:36ch; }
.pull-stat .t b{ font-weight:600; }

/* ---- paid / free tag (India where-to-watch) ----------------------------- */
/* Polish P1: ensure tap target via min-height inside flex containers. */
.tag-paid,.tag-free{ font:700 .6rem/1 var(--ff-sans); letter-spacing:.06em;
  text-transform:uppercase; padding:.28rem .46rem; border:1px solid;
  vertical-align:middle; white-space:nowrap; }
.tag-paid{ color:var(--red); border-color:var(--red); background:rgba(200,16,46,.06); }
.tag-free{ color:var(--green-live); border-color:var(--green-live); background:rgba(31,122,61,.06); }

/* ---- section eyebrow (consistent sectioning across dense pages) ---------- */
.eyebrow-rule{ display:flex; align-items:center; gap:.85rem; margin:2.1rem 0 1rem; }
.eyebrow-rule h2{ font:600 .78rem/1 var(--ff-sans); letter-spacing:.11em;
  text-transform:uppercase; color:var(--navy); margin:0; white-space:nowrap; }
.eyebrow-rule::after{ content:""; flex:1; height:1px; background:var(--rule-strong); }
.eyebrow-rule .count{ font:.72rem/1 var(--ff-mono); color:var(--ink-60);
  letter-spacing:0; text-transform:none; white-space:nowrap; }

/* ---- news-mesh inbound block (the weld; squad/match -> news) ------------- */
.news-weld{ border:1px solid var(--rule); border-left:2px solid var(--red);
  background:#fff; padding:.85rem 1rem; margin:1.1rem 0;
  display:flex; gap:.8rem; align-items:flex-start; }
.news-weld .nw-tier{ flex:0 0 auto; }
.news-weld a{ color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); }
.news-weld a:hover{ color:var(--red); border-bottom-color:var(--red); }
.news-weld a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.news-weld .nw-time{ font:.7rem/1 var(--ff-mono); color:var(--ink-40); }

/* ============================================================================
   ESTATE LAYOUT UTILITIES  (lanes may emit these, Lane P1 owns them)
   ============================================================================ */

/* inline link rows (the "Full schedule . Matches today . Bracket" strips) */
.section-links{ font:.92rem/1.7 var(--ff-sans); margin:.2rem 0 1rem;
  display:flex; flex-wrap:wrap; gap:.2rem .2rem; align-items:center; }
.section-links a{ color:var(--navy); text-decoration:none; font-weight:600;
  border-bottom:1px solid var(--rule-strong); padding:.1rem 0;
  min-height:var(--tap); display:inline-flex; align-items:center; }
.section-links a:hover{ color:var(--red); border-bottom-color:var(--red); }
.section-links a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.section-links .sep{ color:var(--ink-40); margin:0 .55rem; }

/* time-zone switcher grid (hub + schedule). Tappable hairline chips. */
/* Polish P1: explicit min-height so every chip is 44px+ */
.tz-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); margin:.6rem 0 1rem; }
.tz-grid a{ background:var(--cream); padding:.6rem .8rem; text-decoration:none;
  font:600 .82rem/1.2 var(--ff-sans); color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  transition:background .14s ease; min-height:var(--tap); }
.tz-grid a:hover{ background:#fffdf8; color:var(--red); }
.tz-grid a:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
.tz-grid a .code{ font:.7rem/1 var(--ff-mono); color:var(--ink-60); }
.tz-grid a:hover .code{ color:var(--red); }

/* link-list with mono caption (Trackers / Format sections on the hub) */
.linklist{ list-style:none; margin:.4rem 0 1rem; padding:0; }
.linklist li{ padding:.5rem 0; border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; gap:.12rem; }
.linklist li:first-child{ border-top:1px solid var(--rule); }
.linklist .ll-head{ font:600 1.02rem/1.3 var(--ff-display); color:var(--navy);
  text-decoration:none; border-bottom:1px solid transparent; width:max-content; max-width:100%;
  min-height:var(--tap); display:inline-flex; align-items:center; }
.linklist .ll-head:hover{ color:var(--red); border-bottom-color:var(--red); }
.linklist .ll-head:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.linklist .ll-sub{ font:.78rem/1.4 var(--ff-mono); color:var(--ink-60); }

/* match-card (briefing / hub next-matches as cards, two stacked flag rows) */
.matchcard{ background:var(--cream); border:1px solid var(--rule);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.5rem;
  text-decoration:none; color:var(--navy); transition:background .14s ease,box-shadow .14s ease; }
.matchcard:hover{ background:#fffdf8; box-shadow:inset 0 0 0 1px var(--rule); }
.matchcard:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
.matchcard .mc-stage{ font:600 .62rem/1 var(--ff-sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--red); }
.matchcard .mc-side{ display:flex; align-items:center; gap:.5rem;
  font:600 1rem/1.15 var(--ff-display); color:var(--navy); }
.matchcard .mc-meta{ font:.7rem/1.3 var(--ff-mono); color:var(--ink-60); margin-top:.1rem; }

/* calendar day block (hub matchday calendar) */
.calendar-day{ margin:0 0 1.5rem; }
.calendar-day .cd-date{ font:600 .76rem/1 var(--ff-sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-60); margin:0 0 .55rem;
  padding:0 0 .3rem; border-bottom:1px solid var(--rule); }
.calendar-day ul{ list-style:none; margin:0; padding:0; }
.calendar-day li{ display:flex; gap:1rem; align-items:baseline;
  font:.96rem/1.9 var(--ff-body); }
.calendar-day li .ct{ font:.74rem/1 var(--ff-mono); color:var(--ink-60);
  min-width:4rem; flex:0 0 auto; }
.calendar-day li .cv{ font:.72rem/1 var(--ff-mono); color:var(--ink-40); }
.calendar-day li a{ color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  min-height:var(--tap); display:inline-flex; align-items:center; }
.calendar-day li a:hover{ color:var(--red); border-bottom-color:var(--red); }
.calendar-day li a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* data-desk byline strip (estate footer signature) */
.data-desk{ border-top:1px solid var(--navy); padding-top:1rem; margin-top:2.4rem; }
.data-desk p{ font:.72rem/1.5 var(--ff-mono); color:var(--ink-60); margin:0; }
.data-desk .mesh{ font:.86rem/1.9 var(--ff-sans); margin-top:.8rem;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.2rem 1.1rem; }
.data-desk .mesh a{ color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); width:max-content; max-width:100%; }
.data-desk .mesh a:hover{ color:var(--red); border-bottom-color:var(--red); }

/* button-row (briefing pills: today's briefing / news) */
.btn-row{ display:flex; gap:.55rem; flex-wrap:wrap; margin:1.2rem 0 .4rem;
  font-family:var(--ff-sans); }
.btn-row a{ text-decoration:none; font-size:.84rem; font-weight:600;
  padding:.5rem .95rem; border:1px solid var(--navy); color:var(--navy);
  transition:background .14s ease,color .14s ease;
  min-height:var(--tap); display:inline-flex; align-items:center; }
.btn-row a.is-primary{ background:var(--navy); color:var(--cream); }
.btn-row a.is-primary:hover{ background:var(--red); border-color:var(--red); }
.btn-row a:hover{ background:var(--navy); color:var(--cream); }
.btn-row a.is-quiet{ border-color:var(--rule-strong); color:var(--ink-2); }
.btn-row a.is-quiet:hover{ border-color:var(--navy); background:var(--navy); color:var(--cream); }
.btn-row a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* hairline-framed callout panel (build-up status, coverage strip) */
.panel{ border:1px solid var(--rule); background:#fff; padding:.9rem 1.1rem; margin:1.1rem 0; }
.panel--quiet{ background:transparent; border-top:1px solid var(--navy);
  border-left:0; border-right:0; border-bottom:0; padding:1rem 0 0; }
.panel .pk{ font:.72rem/1.5 var(--ff-mono); color:var(--ink-60); margin:0; }

/* ============================================================================
   GLOBAL CHROME  (wc26-scoped masthead / nav / footer polish)
   ============================================================================ */

/* countdown pill in the masthead: make it the estate's heartbeat, not a chip */
.wc26 .window-pill{ background:var(--navy); color:var(--cream);
  font-family:var(--ff-mono); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--navy); }
.wc26 .masthead .dateline-right{ color:var(--ink-3); }

/* nav: mark the live World Cup section so the estate feels "current" */
.wc26 .utility-inner a[href="/world-cup-2026/"][aria-current]{ color:var(--red); }
.wc26 .utility-inner a[href="/world-cup-2026/"][aria-current]::after{
  content:""; display:inline-block; width:.34rem; height:.34rem; border-radius:50%;
  background:var(--green-live); margin-left:.4rem; vertical-align:middle;
  box-shadow:0 0 0 2px rgba(31,122,61,.18); }

/* footer mesh: keep intact, just align the wc26 estate link colour */
.wc26 footer .footer-grid a:hover{ color:var(--red); }

/* ============================================================================
   MOBILE: dense schedule/india table scroll container -- shared utility
   ============================================================================ */
/* Exported from stats_head to this file so the rule lives in one place. */
.wc26 .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  /* snapping for a smoother swipe on phones */
  scroll-snap-type:x mandatory; }
.wc26 .table-scroll table.data{ scroll-snap-align:start; }
/* The india-IST and generic schedule tables need a reasonable min-width so
   columns don't collapse to unreadable widths on small phones. */
@media (max-width:760px){
  .wc26 .table-scroll table.data{ min-width:32rem; }
}
/* For the full 104-row schedule (more columns), ensure flag-chip column doesn't
   lose its flag image on small phones. */
.wc26 .kickoff-grid td{ vertical-align:middle; }

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* ---- <=760px: two-column tz-grid, tighter eyebrow-rule ---- */
@media (max-width:760px){
  .eyebrow-rule{ margin:1.7rem 0 .85rem; }
  .tz-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- <=640px: reflow major grids, tighter type, mobile card-grid ---- */
@media (max-width:640px){
  .wc-wrap{ padding:1.2rem 1rem 3rem; }
  .pull-stat{ flex-direction:column; gap:.45rem; }
  .pull-stat .n{ font-size:2.1rem; }
  .face-grid{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
  .face .face-img,.face img{ width:72px; height:72px; }
  .card-grid{ grid-template-columns:1fr 1fr; }
  .card-grid--tight{ grid-template-columns:1fr 1fr; }
  .wc26 table.data{ font-size:.82rem; }
  .wc26 table.data thead th,.wc26 table.data tbody td{ padding:.5rem .5rem; }
  .calendar-day li{ flex-wrap:wrap; gap:.2rem .8rem; }
  .crumbs{ font-size:.66rem; }
  /* matchcard-flags: stack on very narrow viewports */
  .matchcard-flags{ gap:.5rem; }
  /* news-weld: tighten for small screen */
  .news-weld{ padding:.7rem .85rem; gap:.6rem; }
  /* verified badge: allow wrap on small screens */
  .verified{ flex-wrap:wrap; }
  /* tz-grid: keep 2-col */
  .tz-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- <=480px: narrowest common phone (e.g. iPhone SE, older Android) ---- */
@media (max-width:480px){
  /* Single-column layouts everywhere to prevent any overflow */
  .card-grid,.card-grid--tight{ grid-template-columns:1fr; }
  .tz-grid{ grid-template-columns:1fr; }
  /* face-grid: 2-wide so faces are comfortably large */
  .face-grid{ grid-template-columns:1fr 1fr; }
  .face .face-img,.face img{ width:68px; height:68px; }
  /* matchcard: full-width chips */
  .matchcard-flags{ font-size:.92rem; }
  .flag-chip--lg img,.flag-chip--lg .flag-img{ width:1.9rem; height:1.33rem; }
  /* pull-stat: tighten number */
  .pull-stat .n{ font-size:1.85rem; }
  /* viz: tighter rank column */
  .viz-row{ grid-template-columns:1.4rem 1fr auto; gap:.5rem; }
  /* section-links: single column so a long city/team name wraps cleanly */
  .section-links{ flex-direction:column; align-items:flex-start; gap:.2rem; }
  .section-links .sep{ display:none; }
  /* wc-h1 */
  .wc26 .wc-h1{ font-size:1.5rem; }
  /* table-scroll: narrower min */
  .wc26 .table-scroll table.data{ min-width:28rem; }
  /* btn-row: full-width buttons */
  .btn-row{ flex-direction:column; }
  .btn-row a{ justify-content:center; }
  /* data-desk mesh: single column */
  .data-desk .mesh{ grid-template-columns:1fr; }
}

/* ---- <=380px: very small phones (Galaxy A-series base, older iPhones) ---- */
@media (max-width:380px){
  /* absolute minimum padding so content never butts against screen edge */
  .wc-wrap{ padding:1rem .75rem 2.5rem; }
  /* face images can shrink a touch more */
  .face .face-img,.face img{ width:60px; height:60px; }
  /* flag chip: compact in tight rows */
  .flag-chip img,.flag-chip .flag-img{ width:1.35rem; height:.94rem; }
  /* table text size */
  .wc26 table.data{ font-size:.75rem; }
  .wc26 table.data thead th,.wc26 table.data tbody td{ padding:.42rem .35rem; }
  /* wc-h1 absolute floor */
  .wc26 .wc-h1{ font-size:1.32rem; }
  /* answer-lede: tighter left border clearance */
  body.wc26 .answer-lede{ padding-left:.75rem; font-size:1rem; }
  /* pull-stat */
  .pull-stat .n{ font-size:1.65rem; }
  /* viz row: compress rank further */
  .viz-row{ grid-template-columns:1.2rem 1fr auto; gap:.4rem; }
  .viz-rank{ font-size:.78rem; }
  /* card: reduce padding */
  .card{ padding:.85rem .9rem; }
}