/*
  WC 2026 article block styles. Loaded conditionally by
  article_published_template.html when an article contains any wc_*
  block type. All rules scoped under `.wcab` so they can't leak into
  the surrounding article chrome.

  Visual language extracted from `templates/wc_lineup_share_card.html`
  and `templates/club_hub/_overview_wc_nation.html` — keeps the article
  blocks visually consistent with the on-site nation hub + share cards.
*/

:root {
  --wcab-brand:        #E8652E;
  --wcab-brand-deep:   #C24D1C;
  --wcab-text:         #0A0A0B;
  --wcab-text-2:       #4D4D55;
  --wcab-text-3:       #8B8B92;
  --wcab-text-4:       #C8C8CC;
  --wcab-surface:      #FFFFFF;
  --wcab-surface-2:    #F4F4F5;
  --wcab-border:       #E4E4E7;
  --wcab-border-soft:  #EFEFF2;
  --wcab-win:          #16A34A;
  --wcab-draw:         #71717A;
  --wcab-loss:         #DC2626;
  --wcab-pitch:        #FAFCF7;
  --wcab-pitch-line:   rgba(20, 80, 40, 0.30);
  --wcab-radius:       12px;
}

/* Player-profile + match-page links: any wcab-* element rendered as <a>
   for navigation should look identical to the non-link <div> variant —
   no underline, no colour change. Hover gets a subtle lift so users
   know it's clickable. */
a.wcab-token,
a.wcab-key-cell,
a.wcab-team-key,
a.wcab-lb-row,
a.wcab-fx-row,
a.wcab-team-fx-row {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
a.wcab-token:hover .wcab-token-name,
a.wcab-key-cell:hover .wcab-key-name,
a.wcab-team-key:hover .wcab-team-key-name { color: var(--wcab-brand); }
a.wcab-team-key:hover,
a.wcab-lb-row:hover,
a.wcab-fx-row:hover,
a.wcab-team-fx-row:hover { background: var(--wcab-surface-2); }
a.wcab-fx-row:hover .wcab-fx-name,
a.wcab-team-fx-row:hover .wcab-team-fx-opp strong { color: var(--wcab-brand); }

.wcab {
  background: var(--wcab-surface);
  border: 1px solid var(--wcab-border);
  border-radius: var(--wcab-radius);
  padding: 20px 22px;
  margin: 24px 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--wcab-text);
}

.wcab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.wcab-head > div { min-width: 0; flex: 1; }
.wcab-title {
  font: 800 18px/1.1 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: var(--wcab-text);
  margin: 0;
}
/* Scope/period context line under each block title — keeps the reader
   honest about what data they're looking at without bloating the
   block UI. Mirrors a "data caveat" footnote. */
.wcab-sub {
  font: 500 11.5px/1.4 'Inter', sans-serif;
  color: var(--wcab-text-3);
  margin: 5px 0 0;
  letter-spacing: .01em;
}
.wcab-mode-pill {
  display: inline-flex; align-items: center;
  font: 800 10px/1 'Inter', sans-serif;
  letter-spacing: .10em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 99px;
  background: var(--wcab-brand); color: #fff;
}
.wcab-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--wcab-text-2); }
.wcab-formation { font-weight: 800; }
.wcab-cap { color: var(--wcab-brand); font-weight: 700; }
.wcab-empty {
  font-style: italic; color: var(--wcab-text-3);
  text-align: center; padding: 20px 0;
}

/* ─── Pitch (wc_lineup_pitch) ─────────────────────────────────────── */
.wcab-pitch { padding: 22px 24px 26px; }
.wcab-pitch .wcab-head { margin-bottom: 18px; }
.wcab-formation-badge {
  font: 800 12px/1 'Inter', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 99px;
  background: var(--wcab-surface-2);
  color: var(--wcab-text-2);
  border: 1px solid var(--wcab-border);
}
.wcab-pitch-wrap { max-width: 520px; margin: 0 auto; }
.wcab-pitch-field {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 130;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg, #E7F5D6 0%, #C9E9C2 100%);
  border: 1px solid #B8D6AF;
  border-radius: 12px;
  padding: 16px 10px;
  overflow: hidden;
}
.wcab-pitch-lines {
  position: absolute; inset: 12px;
  pointer-events: none;
  color: rgba(20, 80, 40, 0.38);
}
.wcab-pitch-lines svg { width: 100%; height: 100%; display: block; }
.wcab-pitch-rows {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: space-around;
  padding: 6px 6px;
}
.wcab-pitch-row {
  display: flex; justify-content: space-evenly; align-items: flex-start; gap: 6px;
}
.wcab-token {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; flex: 1; max-width: 110px;
}
.wcab-token-circle {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2.5px solid var(--team-primary, var(--wcab-brand));
  background: #fff;
  overflow: visible;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.wcab-token-circle img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  display: block;
}
.wcab-token-ini {
  font: 800 18px/1 'Inter', sans-serif;
  color: var(--team-primary, var(--wcab-brand));
  letter-spacing: -.02em;
}
.wcab-token-cap {
  position: absolute;
  left: -4px; top: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FBBF24;
  color: #0A0A0B;
  font: 800 10px/20px 'Inter', sans-serif;
  text-align: center;
  border: 2px solid #fff;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.wcab-token-name {
  /* No pill chrome — name renders directly on the pitch with a thin
     white text-shadow outline that holds up against the green
     gradient. Cheaper than the pill and reads more like a tactics
     overlay than a UI element. */
  font: 800 11.5px/1.15 'Inter', sans-serif;
  letter-spacing: .02em;
  color: var(--wcab-text);
  text-align: center;
  background: transparent;
  padding: 0;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0   -1px 0 #fff,
     0    1px 0 #fff,
    -1px  0   0 #fff,
     1px  0   0 #fff;
}

/* ─── Team form band (wc_team_form_band) ──────────────────────────── */
.wcab-tf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--wcab-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wcab-surface);
}
.wcab-tf-cell {
  padding: 12px 14px;
  position: relative;
  border-top: 1px solid var(--wcab-border-soft);
}
.wcab-tf-cell:nth-child(-n+4) { border-top: none; }
.wcab-tf-cell:not(:nth-child(4n+1))::before {
  content: ""; position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 1px; background: var(--wcab-border-soft);
}
.wcab-tf-l {
  display: block;
  font: 800 10px/1.15 'Inter', sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--wcab-text-2);
  margin-bottom: 6px;
}
.wcab-tf-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.wcab-tf-v {
  font: 800 22px/0.95 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: var(--wcab-text);
  font-variant-numeric: tabular-nums;
}
.wcab-tf-key .wcab-tf-v { color: var(--wcab-brand); }
.wcab-tf-rank {
  display: inline-flex; align-items: baseline;
  font: 800 10.5px/1 'Inter', sans-serif;
  padding: 4px 6px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.wcab-tf-rank-of { font-weight: 700; opacity: .55; margin-left: 1px; }
.wcab-tf-rank-good { background: rgba(22,163,74,.16); color: var(--wcab-win); }
.wcab-tf-rank-mid  { background: var(--wcab-surface-2); color: var(--wcab-text-2); }
.wcab-tf-rank-low  { background: rgba(220,38,38,.16); color: var(--wcab-loss); }

/* ─── Form leaderboards (wc_form_leaders) ─────────────────────────── */
.wcab-lb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 18px;
}
.wcab-lb { display: flex; flex-direction: column; min-width: 0; }
.wcab-lb-h { margin-bottom: 10px; }
.wcab-lb-lbl {
  display: inline-block;
  font: 800 15px/1 'Inter', sans-serif;
  letter-spacing: -.01em;
  color: var(--wcab-text);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--wcab-brand);
}
.wcab-lb.is-highlight .wcab-lb-lbl { background: rgba(232,101,46,.08); padding: 4px 8px 6px; border-radius: 6px 6px 0 0; }
.wcab-lb-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.wcab-lb-row {
  display: grid;
  grid-template-columns: 14px 28px 1fr auto;
  align-items: center; gap: 9px;
  padding: 3px 0;
  min-width: 0;
}
.wcab-lb-rank {
  font: 800 11.5px/1 'Inter', sans-serif;
  color: var(--wcab-text-4);
  text-align: center; font-variant-numeric: tabular-nums;
}
.wcab-lb-row.r1 .wcab-lb-rank { color: var(--wcab-brand); }
.wcab-lb-photo {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--wcab-surface-2);
  border: 1.5px solid var(--wcab-border);
  overflow: visible;
}
.wcab-lb-photo img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: top center; display: block;
}
.wcab-lb-ini {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  font: 800 10px/1 'Inter', sans-serif;
  color: var(--wcab-text-3);
}
.wcab-lb-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--wcab-surface);
  overflow: hidden;
  display: grid; place-items: center;
}
.wcab-lb-badge img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }
.wcab-lb-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wcab-lb-name {
  font: 800 12.5px/1.1 'Inter', sans-serif;
  letter-spacing: -.005em;
  color: var(--wcab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcab-lb-sub {
  font: 600 10px/1 'Inter', sans-serif;
  color: var(--wcab-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcab-lb-val {
  font: 800 16px/1 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: var(--wcab-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wcab-lb-row.r1 .wcab-lb-val { color: var(--wcab-brand); }

/* ─── Key players (wc_key_players) ────────────────────────────────── */
.wcab-key-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 18px;
}
.wcab-key-cell {
  /* No card chrome — sits cleanly in the article body. The photo
     itself anchors each player; name + position + stars stack below
     with no surrounding box. */
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 2px;
}
.wcab-key-photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--wcab-surface-2);
  overflow: hidden;
  margin-bottom: 10px;
}
.wcab-key-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.wcab-key-ini {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 800 32px/1 'Inter', sans-serif;
  color: var(--wcab-text-3);
}
.wcab-key-name {
  font: 800 16px/1.2 'Inter', sans-serif;
  letter-spacing: -.01em;
  color: var(--wcab-text);
}
.wcab-key-pos {
  font: 600 10.5px/1 'Inter', sans-serif;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--wcab-text-3);
  margin-top: 2px;
}
.wcab-key-stars {
  font: 800 13px/1 'Inter', sans-serif;
  color: #F59E0B;
  letter-spacing: 1px;
  margin-top: 6px;
}
.wcab-key-stars .dim { color: #E5E7EB; }
.wcab-key-stars .half { color: #F59E0B; opacity: .85; font-size: 11px; }

/* ─── Group fixtures rail (wc_group_fixtures) ─────────────────────── */
.wcab-fx-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.wcab-fx-row {
  display: grid;
  grid-template-columns: 60px 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--wcab-border-soft);
}
.wcab-fx-row:last-child { border-bottom: none; }
.wcab-fx-date {
  font: 800 11px/1 'Inter', sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wcab-text-2);
}
.wcab-fx-flag {
  width: 32px; height: 22px; border-radius: 3px;
  overflow: hidden; background: var(--wcab-surface-2);
}
.wcab-fx-flag img { width: 100%; height: 100%; object-fit: cover; }
.wcab-fx-opp { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wcab-fx-prefix {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--wcab-text-3);
}
.wcab-fx-name {
  font: 800 14px/1 'Inter', sans-serif;
  letter-spacing: -.01em;
  color: var(--wcab-text);
}
.wcab-fx-time {
  font: 700 12px/1 'Inter', sans-serif;
  color: var(--wcab-text-2);
  font-variant-numeric: tabular-nums;
}

/* ─── Verdict callout (wc_verdict_callout) ────────────────────────── */
.wcab-verdict {
  /* Plain editorial pull-out — no orange accent on the border. The
     "Will reach" tag word still carries the brand colour so the reader
     can spot the verdict at a glance. */
  background: var(--wcab-surface);
  border: 1px solid var(--wcab-border);
  padding: 20px 22px;
}
.wcab-verdict-tag {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wcab-text-2);
  margin-bottom: 10px;
}
.wcab-verdict-tag strong { color: var(--wcab-brand); }
.wcab-verdict-quote {
  font: 600 17px/1.45 'Inter', sans-serif;
  color: var(--wcab-text);
  margin: 0;
  letter-spacing: -.005em;
}

/* ─── Nations grid (wc_nation_grid, hub article) ─────────────────────
   Vertical-stack layout: one row card per team, grouped A→L. Pitch on
   the left, key players + fixtures on the right. Stacks on mobile. */
.wcab-grid > .wcab-gng { margin-top: 28px; }
.wcab-grid > .wcab-gng:first-of-type { margin-top: 4px; }
.wcab-gng-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--wcab-border);
}
.wcab-gng-title {
  font: 800 16px/1 'Inter', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wcab-text);
  margin: 0;
}
.wcab-gng-count {
  font: 700 11px/1 'Inter', sans-serif;
  color: var(--wcab-text-3);
}
.wcab-gng-list { display: flex; flex-direction: column; gap: 14px; }

.wcab-team-row {
  background: var(--wcab-surface);
  border: 1px solid var(--wcab-border);
  border-radius: 14px;
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.wcab-team-row-head {
  display: flex; align-items: center; gap: 12px;
}
.wcab-team-flag {
  width: 36px; height: 26px;
  border-radius: 4px; overflow: hidden;
  background: var(--wcab-surface-2);
  flex-shrink: 0;
}
.wcab-team-flag img { width: 100%; height: 100%; object-fit: cover; }
.wcab-team-id { flex: 1; min-width: 0; }
.wcab-team-name {
  font: 800 18px/1.1 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: var(--wcab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcab-team-meta {
  font: 600 11.5px/1.3 'Inter', sans-serif;
  color: var(--wcab-text-3);
  margin-top: 4px;
  display: inline-flex; flex-wrap: wrap; gap: 4px 6px;
}
.wcab-team-meta span:first-child {
  font-weight: 800;
  color: var(--team-primary, var(--wcab-brand));
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wcab-team-guide {
  font: 700 12px/1 'Inter', sans-serif;
  color: var(--team-primary, var(--wcab-brand));
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--wcab-border);
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .1s, color .1s, border-color .1s;
}
.wcab-team-guide:hover {
  background: var(--team-primary, var(--wcab-brand));
  color: #FFF;
  border-color: var(--team-primary, var(--wcab-brand));
}
.wcab-team-edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--wcab-border);
  border-radius: 99px;
  background: var(--wcab-surface);
  color: var(--wcab-text-2);
  font: 700 12px/1 'Inter', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s, border-color .1s;
}
.wcab-team-edit:hover {
  background: var(--team-primary, var(--wcab-brand));
  color: #FFF;
  border-color: var(--team-primary, var(--wcab-brand));
}

/* Body — two columns on desktop. Pitch ~360px wide so it has room
   for player names; detail column fills the rest. */
.wcab-team-body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 22px;
  align-items: start;
}
.wcab-team-pitch { min-width: 0; }
.wcab-team-pitch .wcab-pitch-field {
  /* Override the global wcab-pitch-field height — this version
     is smaller and lives in a card row. */
  width: 100%;
  aspect-ratio: 100 / 130;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg, #E7F5D6 0%, #C9E9C2 100%);
  border: 1px solid #B8D6AF;
  border-radius: 10px;
  padding: 12px 8px;
  overflow: hidden;
  position: relative;
}
.wcab-team-pitch .wcab-pitch-lines {
  position: absolute; inset: 10px;
  pointer-events: none;
  color: rgba(20, 80, 40, 0.35);
}
.wcab-team-pitch .wcab-pitch-lines svg { width: 100%; height: 100%; display: block; }
.wcab-team-pitch .wcab-pitch-rows {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: space-around;
  padding: 4px 4px;
}
.wcab-team-pitch .wcab-pitch-row {
  display: flex; justify-content: space-evenly; align-items: flex-start; gap: 4px;
}
.wcab-team-pitch .wcab-token {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1; min-width: 0; max-width: 80px;
}
.wcab-team-pitch .wcab-token-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--team-primary, var(--wcab-brand));
  background: #fff;
  position: relative;
  overflow: visible;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.wcab-team-pitch .wcab-token-circle img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  display: block;
}
.wcab-team-pitch .wcab-token-ini {
  font: 800 13px/1 'Inter', sans-serif;
  color: var(--team-primary, var(--wcab-brand));
}
.wcab-team-pitch .wcab-token-cap {
  position: absolute;
  left: -4px; top: -4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FBBF24;
  color: #0A0A0B;
  font: 800 8px/14px 'Inter', sans-serif;
  text-align: center;
  border: 1.5px solid #fff;
}
.wcab-team-pitch .wcab-token-name {
  font: 800 9.5px/1.15 'Inter', sans-serif;
  letter-spacing: .02em;
  color: var(--wcab-text);
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow:
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
     0   -1px 0 #fff,  0    1px 0 #fff,
    -1px  0   0 #fff,  1px  0   0 #fff;
  background: transparent;
  padding: 0;
}

/* Detail column */
.wcab-team-detail {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.wcab-team-section { display: flex; flex-direction: column; gap: 8px; }
.wcab-team-section-head {
  font: 800 10.5px/1 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wcab-text-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wcab-border-soft);
}

.wcab-team-keys { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wcab-team-key {
  display: flex; align-items: center; gap: 10px;
}
.wcab-team-key-photo {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--wcab-surface-2);
  overflow: hidden;
  flex-shrink: 0;
}
.wcab-team-key-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wcab-team-key-ini {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  font: 800 13px/1 'Inter', sans-serif;
  color: var(--wcab-text-3);
}
.wcab-team-key-meta { flex: 1; min-width: 0; }
.wcab-team-key-name {
  font: 800 13px/1.2 'Inter', sans-serif;
  letter-spacing: -.01em;
  color: var(--wcab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcab-team-key-rating {
  font: 800 12px/1 'Inter', sans-serif;
  letter-spacing: .5px;
  margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}
.wcab-team-key-rating.wcab-tier-gold   { color: #F59E0B; }
.wcab-team-key-rating.wcab-tier-silver { color: #9CA3AF; }
.wcab-team-key-rating.wcab-tier-bronze { color: #C97B47; }
.wcab-team-key-rating.wcab-tier-none   { color: var(--wcab-text-3); }
.wcab-team-key-rating .dim  { color: #E5E7EB; }
.wcab-team-key-rating .half { font-size: 10px; opacity: .85; }
.wcab-team-key-num {
  font-size: 10px;
  color: var(--wcab-text-3);
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 4px;
}

.wcab-team-fx { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.wcab-team-fx-row {
  display: grid;
  grid-template-columns: 56px 24px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--wcab-border-soft);
}
.wcab-team-fx-row:last-child { border-bottom: none; }
.wcab-team-fx-date {
  font: 800 10.5px/1 'Inter', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wcab-text-2);
}
.wcab-team-fx-flag {
  width: 24px; height: 17px; border-radius: 2px;
  overflow: hidden; background: var(--wcab-surface-2);
}
.wcab-team-fx-flag img { width: 100%; height: 100%; object-fit: cover; }
.wcab-team-fx-opp {
  font: 600 12.5px/1.2 'Inter', sans-serif;
  color: var(--wcab-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcab-team-fx-opp strong { color: var(--wcab-text); font-weight: 800; }
.wcab-team-fx-time {
  font: 700 11px/1 'Inter', sans-serif;
  color: var(--wcab-text-2);
  font-variant-numeric: tabular-nums;
}

.wcab-team-predict .wcab-team-section-head {
  display: flex; align-items: center; justify-content: space-between;
}
.wcab-team-predict-edit {
  background: transparent;
  border: 1px solid var(--wcab-border);
  border-radius: 999px;
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wcab-text-2);
  padding: 5px 9px;
  cursor: pointer;
}
.wcab-team-predict-edit:hover {
  background: var(--wcab-surface-2);
  color: var(--wcab-text);
}
.wcab-team-predict-val {
  font: 800 16px/1.2 'Inter', sans-serif;
  letter-spacing: -.01em;
  color: var(--wcab-text);
  padding-top: 2px;
}
.wcab-team-predict-empty {
  font-weight: 500;
  color: var(--wcab-text-3);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* Mobile — stack pitch above detail column, give the head room to breathe.
   Use flex-wrap with a 100% flex-basis on .wcab-team-id so any action
   buttons (Full guide / Edit XI) wrap to a fresh row below the team
   name — the name is never truncated behind a button. */
@media (max-width: 720px) {
  .wcab-team-row { padding: 14px; }
  .wcab-team-row-head { flex-wrap: wrap; gap: 10px; }
  .wcab-team-row-head .wcab-team-id { flex: 1 1 calc(100% - 48px); min-width: 0; }
  .wcab-team-name { font-size: 16px; white-space: normal; }
  .wcab-team-meta { font-size: 11px; }
  .wcab-team-guide { font-size: 11px; padding: 6px 10px; }
  .wcab-team-edit  { font-size: 11px; padding: 6px 10px; }
  .wcab-team-body  { grid-template-columns: 1fr; gap: 16px; }

  /* Pitch: fill the whole card width (no max-width cap), smaller tokens so
     4-DEF rows breathe, surnames wrap to two lines instead of truncating. */
  .wcab-team-pitch { max-width: none; margin: 0; }
  .wcab-team-pitch .wcab-pitch-field {
    aspect-ratio: 100 / 145;
    padding: 14px 4px;
  }
  .wcab-team-pitch .wcab-pitch-rows { padding: 4px 2px; }
  .wcab-team-pitch .wcab-pitch-row { gap: 2px; }
  .wcab-team-pitch .wcab-token { max-width: none; }
  .wcab-team-pitch .wcab-token-circle { width: 28px; height: 28px; border-width: 1.5px; }
  .wcab-team-pitch .wcab-token-cap { width: 11px; height: 11px; font-size: 7px; line-height: 11px; left: -3px; top: -3px; border-width: 1px; }
  .wcab-team-pitch .wcab-token-name {
    font-size: 9.5px;
    line-height: 1.1;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
  }

  .wcab-team-fx-row {
    grid-template-columns: 50px 22px 1fr auto;
    gap: 8px; padding: 8px 0;
  }
  .wcab-team-fx-opp { font-size: 12px; }
}

/* Extra-narrow viewports (<420px) — phones in portrait. Shrink card
   padding so the pitch gets every pixel of horizontal room, smaller
   tokens, smaller name font. */
@media (max-width: 420px) {
  .wcab-team-row { padding: 12px 10px; }
  .wcab-team-pitch .wcab-pitch-field { padding: 12px 2px; }
  .wcab-team-pitch .wcab-pitch-row { gap: 1px; }
  .wcab-team-pitch .wcab-token-circle { width: 24px; height: 24px; border-width: 1.5px; }
  .wcab-team-pitch .wcab-token-name { font-size: 8.5px; }
  .wcab-team-flag { width: 30px; height: 22px; }
  .wcab-team-name { font-size: 15px; }
}

/* ─── Nation nav (wc_nation_nav, hub article only) ────────────────── */
.wcab-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.wcab-nav-group {
  background: var(--wcab-surface-2);
  border: 1px solid var(--wcab-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.wcab-nav-letter {
  font: 800 11px/1 'Inter', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--wcab-brand);
  margin-bottom: 10px;
}
.wcab-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wcab-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
  font: 700 13px/1 'Inter', sans-serif;
  color: var(--wcab-text);
  text-decoration: none;
}
.wcab-nav-link:hover { color: var(--wcab-brand); }
.wcab-nav-flag {
  width: 22px; height: 16px; border-radius: 2px;
  overflow: hidden; background: var(--wcab-surface);
  flex-shrink: 0;
}
.wcab-nav-flag img { width: 100%; height: 100%; object-fit: cover; }
.wcab-nav-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .wcab { padding: 16px 14px; margin: 18px 0; border-radius: 10px; }
  .wcab-head { margin-bottom: 14px; gap: 10px; }
  .wcab-title { font-size: 16px; }
  .wcab-sub { font-size: 11px; line-height: 1.35; margin-top: 4px; }
  .wcab-mode-pill, .wcab-formation-badge { font-size: 9.5px; padding: 5px 9px; }

  /* Team form: 4-cell grid stays the same shape but tighter. */
  .wcab-tf { grid-template-columns: repeat(2, 1fr); }
  .wcab-tf-cell { padding: 10px 11px; }
  .wcab-tf-cell:nth-child(-n+4) { border-top: 1px solid var(--wcab-border-soft); }
  .wcab-tf-cell:nth-child(-n+2) { border-top: none; }
  .wcab-tf-cell:not(:nth-child(4n+1))::before { display: none; }
  .wcab-tf-cell:not(:nth-child(2n+1))::before {
    content: ""; position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 1px; background: var(--wcab-border-soft);
  }
  .wcab-tf-v { font-size: 18px; }
  .wcab-tf-l { font-size: 9.5px; }
  .wcab-tf-rank { font-size: 10px; padding: 3px 5px; }

  /* Key players: keep the 3-up row on mobile so the section stays
     compact (avoid a 3-deep vertical stack that's ALL scroll). Photos
     drop to 62px so all three fit comfortably in the row. */
  .wcab-key-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .wcab-key-photo { width: 62px; height: 62px; margin-bottom: 8px; }
  .wcab-key-ini { font-size: 20px; }
  .wcab-key-name { font-size: 12.5px; line-height: 1.2; }
  .wcab-key-pos { font-size: 9px; }
  .wcab-key-stars { font-size: 10.5px; letter-spacing: 0.5px; margin-top: 4px; }

  /* Leader board: 2 columns on mobile (Goals/Assists row, Shots/SoT row)
     instead of single-column stack — keeps the section to ~10 rows tall
     rather than 20+. Rank number is dropped on mobile (the implicit
     top-to-bottom ordering is enough; saves ~14px of horizontal space
     for the player name). Photos shrink and value tightens. */
  .wcab-lb-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .wcab-lb-lbl { font-size: 13px; }
  .wcab-lb-row { grid-template-columns: 22px 1fr auto; gap: 7px; padding: 2px 0; }
  .wcab-lb-rank { display: none; }
  .wcab-lb-photo { width: 22px; height: 22px; border-width: 1px; }
  /* Club badge overlay dropped on mobile — at 22px photo the badge
     becomes a 9-10px speck that's unreadable, while the club name
     in the sub-text already conveys the same info. */
  .wcab-lb-badge { display: none; }
  .wcab-lb-name { font-size: 11.5px; }
  .wcab-lb-sub { font-size: 9px; }
  .wcab-lb-val { font-size: 13px; }

  /* Pitch: shrink to a less-tall ratio + smaller tokens so it doesn't
     dominate the mobile scroll. Names also tightened. */
  .wcab-pitch { padding: 18px 16px 20px; }
  .wcab-pitch-wrap { max-width: 100%; }
  .wcab-pitch-field { aspect-ratio: 100 / 120; padding: 12px 6px; }
  .wcab-pitch-rows { padding: 4px 2px; }
  .wcab-token-circle { width: 40px; height: 40px; border-width: 2px; }
  .wcab-token-ini { font-size: 14px; }
  .wcab-token-cap { width: 16px; height: 16px; font-size: 8px; line-height: 16px; left: -3px; top: -3px; }
  .wcab-token { gap: 4px; max-width: 84px; }
  /* Two-line wrap on mobile — surnames + first initials need the room
     when each token cell is only ~50-70px wide on a phone. The white
     outline carries over from the desktop default. */
  .wcab-token-name {
    font-size: 10px;
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: clip;
    word-break: keep-all;
    hyphens: none;
  }

  /* Group fixtures: tighten the row. */
  .wcab-fx-row { grid-template-columns: 50px 26px 1fr auto; gap: 9px; padding: 10px 2px; }
  .wcab-fx-flag { width: 26px; height: 18px; }
  .wcab-fx-name { font-size: 13px; }
  .wcab-fx-date { font-size: 10px; }
  .wcab-fx-time { font-size: 11px; }

  /* Verdict: same content but tighter padding + smaller quote. */
  .wcab-verdict { padding: 16px 16px; }
  .wcab-verdict-quote { font-size: 15px; line-height: 1.4; }

  /* Nation nav (hub article): single column on mobile so cards aren't
     squashed two-up. */
  .wcab-nav-grid { grid-template-columns: 1fr; gap: 14px; }
  .wcab-nav-group { padding: 12px 14px; }
}

/* Very narrow phones — extra trim. */
@media (max-width: 420px) {
  .wcab-key-photo { width: 54px; height: 54px; }
  .wcab-key-name { font-size: 11.5px; }
  .wcab-token-circle { width: 34px; height: 34px; }
  .wcab-token-name { font-size: 8.5px; max-width: 70px; }
  .wcab-pitch-field { aspect-ratio: 100 / 115; }
}