/* Taxonomy — canonical pill styling for country badges */


/* --exp-accent/--imp-accent live at :root, not .taxonomy — js/index.js's arc drawing
   (outside any .taxonomy-classed ancestor: the tooltip and player table aren't under #tab-teams/#tab-tournament)
   reads them too, via getComputedStyle(document.documentElement). One shared export/import
   color pair for the whole page instead of the map maintaining its own separate hardcoded
   copy — the deeper blue/red here was originally the map arcs' own choice, picked for contrast
   against the choropleth terrain; kept as the canonical value since it reads fine at pill scale
   too, not just enlarged on the map. */
:root {
  --exp-accent: #1d4ed8;
  --imp-accent: #dc2626;
}
.taxonomy {
  --darkest-text:  #333;
  --medium-text:   #555;
  --light-text:    #999;
}

/* Default: darkest text */
.taxonomy .elo-name { color: var(--darkest-text); }

/* Readability trial: black instead of the muted gray default, now that pills carry a
   colored gradient background — applies to every sort column (elo pts, pop, exp/imp counts). */
.taxonomy .elo-pts, .taxonomy .elo-pts-primary { color: #000; }

/* Qualified vs. non qualified: solid 1px border vs. no border */
.taxonomy .elo-item--qualified { --elo-border: 1px solid #888; border: var(--elo-border); }
.taxonomy .elo-item--qualified:not(.elo-item--knocked-out) { border-width: 1.5px;} 
.taxonomy .elo-item:not(.elo-item--qualified) { border: none; }

/* Qualified but knocked out: dashed border only — signals "no longer alive". */
.taxonomy .elo-item--qualified.elo-item--knocked-out { border-style: dashed; border-color: #aaa;}

/* Schrödinger's team: fixture for the currently-viewed stage hasn't been played yet — could
   still go either way. Wavy top AND bottom edges (sides keep the pill's own normal border
   untouched) — a mask directly on the pill itself, not a separate border/pseudo-element (the
   feTurbulence/feImage/border-image attempts tried earlier all drew a duplicate border shape
   instead; see git history).
   A single repeating-radial-gradient mask can do ONE edge (add-composited pair of huge-radius
   circles, nearly flat except right at that edge — tried and kept simple for bottom-only
   earlier). Combining top+bottom that way doesn't work: CSS mask-composite only folds layers
   left-to-right (no parenthesized grouping), so there's no ordering of composite keywords that
   correctly expresses "(top pair unioned) intersected with (bottom pair unioned)" — every
   combination tried either erased one edge's notches or destroyed the whole shape. An SVG tile
   with its own internal <mask> sidesteps that entirely: circles are plain black/white shapes
   resolved once, correctly, inside the image itself, and the *result* (opaque where kept,
   transparent where notched) is what CSS then tiles as a normal luminance mask — no composite
   algebra needed at the CSS layer at all. 12×29 matches the tile period to this pill's own
   *rendered* height (29px, measured — not the 20px flag + 3px×2 padding = 26px it naively adds
   up to; borders/line-height push it a bit taller) — mask-repeat: repeat-x doesn't repeat
   vertically, so a mismatched height here silently clips whatever falls outside the tile
   (which is exactly how an earlier 26px version lost its entire bottom border). Update this if
   the pill's own box model changes. */
/* .elo-item--pending is a no-op outside match-display — no border tweak, no dimmed name,
   nothing distinguishes a pending team from a decided one in team-display, exactly as if the
   class weren't applied at all. Every effect below is scoped under .elo-viz--match
   (js/elo_ranking.js's `set displayMode`, driven by control_sidebar.js's
   csb-display-match/csb-display-team radios) for that reason — "pending" is a fixture-pairing
   concept (this specific matchup isn't decided), meaningless without a fixture to pair against. */
.elo-viz--match .elo-item--qualified.elo-item--pending {
  border-width: 1px;
  border-color: #888;
}
.elo-viz--match .elo-item--pending {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='29'%3E%3Cmask id='m'%3E%3Crect width='12' height='29' fill='%23fff'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23000'/%3E%3Ccircle cx='12' cy='0' r='2.5' fill='%23000'/%3E%3Ccircle cx='6' cy='0' r='2.5' fill='%23fff'/%3E%3Ccircle cx='0' cy='29' r='2.5' fill='%23000'/%3E%3Ccircle cx='12' cy='29' r='2.5' fill='%23000'/%3E%3Ccircle cx='6' cy='29' r='2.5' fill='%23fff'/%3E%3C/mask%3E%3Crect width='12' height='29' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-size: 12px 29px;
}
/* .elo-viz--match .elo-item--pending .elo-name { color: var(--light-text); } */

/* Non-FIFA: light, italic text */
.taxonomy .elo-item--nonfifa .elo-name { color: var(--light-text); font-style: italic; }

/* Three-band gradient background — red (imports) | white (players born & selected by the same
   country) | blue (exports). Colors and band-boundary positions (--imp-pivot / --native-pivot)
   are set inline per pill by pillStyle in elo_ranking.js, proportional to each group's share of
   the country's total player pool. Excludes :hover/--active so those states' own background
   still shows through. */
.taxonomy .elo-item {
  background: linear-gradient(to right,
    var(--imp-color, #fff) 0%,
    #fff var(--imp-pivot, 0%),
    #fff var(--native-pivot, 0%),
    var(--exp-color, #fff) 100%);
  /* Default background-clip (border-box) paints the gradient under the border, relying on the
     border itself to fully cover it — at a pill's near-semicircular tip (border-radius = half
     the height), the border and background rasterize with slightly different anti-aliasing, so
     a hairline of the gradient's edge color (red/blue) can peek past the border ring. Clipping
     to padding-box keeps the gradient strictly inside the border instead, closing that seam. */
  background-clip: padding-box;
}

/* No map centroid: dimmed flag */
.taxonomy .elo-item--no-map .elo-flag { opacity: 0.35; }

/* Match-display mode: lost a decided fixture — grey out the flag, name stays legible */
.taxonomy .elo-item--lost .elo-flag { filter: grayscale(1); opacity: 0.75; }

/* Match-display mode: winner of a decided fixture gets a green check on the pill's own
   bottom-right corner — just the mark, no badge/background. Scoped to .elo-pair (never
   .elo-solo — a lone/unpaired row has no opponent to have won against) and
   :not(.elo-pair--pending) (undecided fixtures have no winner yet, and neither side carries
   --lost, so both would otherwise qualify).
   images/green-check-mark-icon.svg masked (not background-image'd) so its color is CSS's
   own to control — same technique .elo-item--pending's wavy border uses above for an
   external SVG that needs a color CSS itself controls.
   Anchored to .elo-item-wrap (js/elo_ranking.js), not .elo-item itself — .elo-item carries
   overflow:hidden for width-clamping (global.css) and would clip a pseudo-element poking
   past its own edge; the wrapper is a sibling of that clipped box, not a descendant of it,
   so it isn't. */
.taxonomy .elo-pair:not(.elo-pair--pending) .elo-item-wrap:has(> .elo-item:not(.elo-item--lost)) {
  position: relative;
}
.taxonomy .elo-pair:not(.elo-pair--pending) .elo-item-wrap:has(> .elo-item:not(.elo-item--lost))::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: #22c55e;
  -webkit-mask: url('../images/green-check-mark-icon.svg') no-repeat center / contain;
  mask: url('../images/green-check-mark-icon.svg') no-repeat center / contain;
}
/* Left pill (first-child) sits flush against its own right edge — near the separator, same
   side as before. Right pill (last-child) mirrors it: left-aligned instead, since a
   right-aligned check there would land away from the separator/its flag, off on the pts side. */
.taxonomy .elo-pair:not(.elo-pair--pending) .elo-item-wrap:first-child:has(> .elo-item:not(.elo-item--lost))::after {
  right: -7px;
}
.taxonomy .elo-pair:not(.elo-pair--pending) .elo-item-wrap:last-child:has(> .elo-item:not(.elo-item--lost))::after {
  left: -7px;
}

/* Dots via pseudo-elements — both on the right of the name. Fixed accent colors (not
   count-scaled — the pill's gradient background already carries that signal). */
.taxonomy .elo-item--exp:not(.elo-item--imp) .elo-name::after {
  content: '▶'; color: var(--exp-accent); font-size: 14px; margin-left: 2px; /* vertical-align: super;  ● */
}
.taxonomy .elo-item--imp:not(.elo-item--exp) .elo-name::after {
  content: '◀'; color: var(--imp-accent); font-size: 14px; margin-left: 2px; /* vertical-align: super; */
}
.taxonomy .elo-item--exp.elo-item--imp .elo-name::after {
  content: '◀▶'; font-size: 14px; margin-left: 2px; /* vertical-align: super; */
  background: linear-gradient(90deg, var(--imp-accent) 45%, var(--exp-accent) 55%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Fixture rows (global.css's .elo-pair) reverse the left team's pill so its flag ends up
   innermost, next to the separator — which also flips this dot to the inner/separator side as
   an unwanted side effect (::after is generated content inside .elo-name itself, unaffected by
   the parent's flex-direction: row-reverse). Swapping to ::before with a mirrored margin here
   keeps it on the outer side instead, matching the right team's (unreversed) dot.
   Anonymous :first-child (not .elo-item-wrap:first-child) — see js/elo_ranking.js's
   .elo-item-wrap comment: exactly one wrapper sits between li.elo-pair and .elo-item, so
   whichever element is first-child of the row *is* the left side's wrapper. */
.elo-pairs > li.elo-pair :first-child .elo-item .elo-name::after { content: none; }
.elo-pairs > li.elo-pair :first-child .elo-item--exp:not(.elo-item--imp) .elo-name::before {
  content: '▶'; color: var(--exp-accent); font-size: 14px; margin-right: 2px;
}
.elo-pairs > li.elo-pair :first-child .elo-item--imp:not(.elo-item--exp) .elo-name::before {
  content: '◀'; color: var(--imp-accent); font-size: 14px; margin-right: 2px;
}
.elo-pairs > li.elo-pair :first-child .elo-item--exp.elo-item--imp .elo-name::before {
  content: '◀▶'; font-size: 14px; margin-right: 2px;
  background: linear-gradient(90deg, var(--imp-accent) 45%, var(--exp-accent) 55%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}