/* compare-tool.css — the player-compare tool, shared by /he|/en/pl/compare and
   /ipl/compare. ONE stylesheet for both leagues: the two pages are the same design
   with a different fetch URL, which is the only way they stay identical (the same
   obligation iplSetPieceTakersService's header states for the set-piece boards).

   RTL: everything positional uses LOGICAL properties (inset-inline-*, margin-inline-*,
   text-align:start/end). A physical `left` here would not just mis-place an element —
   it does not clear `inset-inline-start`, so the element ends up anchored to BOTH
   edges and stretches. Hebrew is the primary locale for IPL, so RTL is the default
   case, not the exception.

   Theme: colours come from the theme variables so light mode works; the few literal
   colours are the categorical ones (breakdown segments, difficulty bands) that must
   stay stable across themes to remain readable as a legend. */

/* ── Picker ─────────────────────────────────────────────────────────────────── */
.cmp-pick { position: relative; margin-bottom: 10px; max-width: 460px; }
.cmp-search {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--vc-input-border); background: var(--vc-input-bg);
  color: var(--vc-text); font-family: inherit; font-size: 0.95rem;
}
.cmp-search:focus { outline: 2px solid var(--vc-accent); outline-offset: 1px; }
.cmp-menu {
  position: absolute; z-index: 30; inset-inline-start: 0; inset-inline-end: 0;
  top: calc(100% + 4px); background: var(--vc-surface);
  border: 1px solid var(--vc-border); border-radius: 10px;
  max-height: 300px; overflow-y: auto; box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  display: none;
}
.cmp-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; cursor: pointer; font-size: 0.9rem; color: var(--vc-text);
}
.cmp-opt:hover, .cmp-opt.active { background: var(--vc-surface2); }
.cmp-opt .meta { color: var(--vc-text-sub); font-size: 0.8rem; }
/* Each row carries position + club + price so two similar names are tellable apart. */
.cmp-opt .who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-opt .who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-opt .pos-badge { margin-top: 0; min-width: 38px; }
/* Header above the default (unsearched) list — "top by expected points". */
.cmp-opt-head {
  padding: 8px 13px 6px; font-size: 0.72rem; font-weight: 700;
  color: var(--vc-text-sub); text-transform: none; letter-spacing: 0.2px;
  border-bottom: 1px solid var(--vc-border);
}
.cmp-opt[aria-disabled="true"] { opacity: 0.42; cursor: default; }
.cmp-hint { font-size: 0.82rem; color: var(--vc-text-sub); margin-bottom: 16px; }

/* Selected-player chips — the "who am I comparing" line, always visible so the
   picker never becomes a place you can lose track of what you chose. */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--vc-chip-bg); border: 1px solid var(--vc-chip-border);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 0.85rem; color: var(--vc-text);
}
html[dir="rtl"] .cmp-chip { padding: 5px 12px 5px 6px; }
.cmp-chip b { font-weight: 700; }
.cmp-chip .team { color: var(--vc-text-sub); font-size: 0.78rem; }
.cmp-chip button {
  border: none; background: var(--vc-surface2); color: var(--vc-text-sub);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  font-size: 0.85rem; line-height: 1; display: grid; place-items: center;
}
.cmp-chip button:hover { background: #c53030; color: #fff; }

/* ── Section chrome ─────────────────────────────────────────────────────────── */
.cmp-section { margin: 0 0 22px; }
.cmp-section-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; color: var(--vc-accent);
}
.cmp-section-h .sub { font-size: 0.8rem; font-weight: 500; color: var(--vc-text-sub); }

/* The one grid every section aligns to — set inline as --cmp-cols so the player
   columns line up down the whole page instead of each section choosing its own. */
.cmp-grid { display: grid; grid-template-columns: repeat(var(--cmp-cols), minmax(0, 1fr)); gap: 10px; }

/* ── Player header cards ────────────────────────────────────────────────────── */
.cmp-head { margin-bottom: 18px; }
.cmp-card {
  background: var(--vc-card-bg); border: 1px solid var(--vc-card-border);
  border-radius: 14px; padding: 14px 10px 12px; text-align: center; position: relative;
}
.cmp-card.leader { border-color: var(--vc-accent); box-shadow: 0 0 0 1px var(--vc-accent) inset; }
/* Centred WITHOUT translateX(-50%): that shifts along the writing direction, so the
   pill sat off-centre in RTL. Pinning both edges and letting auto margins do the
   work is direction-agnostic. */
.cmp-card .lead-tag {
  position: absolute; top: -9px; inset-inline: 0;
  margin-inline: auto; width: fit-content;
  background: var(--vc-accent); color: #fff;
  font-size: 0.66rem; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
/* A FACE is a head-and-shoulders crop: circular, tight to the top of the frame, on
   a subtle ring so it reads as a portrait rather than a floating cut-out. */
.cmp-face {
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: var(--vc-surface2);
  box-shadow: 0 0 0 1px var(--vc-border), 0 2px 6px rgba(0,0,0,0.22);
  margin: 0 auto 9px; display: block;
}
/* A SHIRT is the fallback when a player has no face. Cropping a shirt into a circle
   slices the sleeves off and looks like a mistake, so it is shown WHOLE, unringed
   and slightly smaller — visibly a placeholder rather than a bad portrait. */
.cmp-face.is-shirt {
  object-fit: contain; object-position: center;
  background: transparent; box-shadow: none;
  width: 52px; height: 52px; padding: 2px;
}
/* Last step of the face chain — the player's initials. A real class rather than an
   inline style, because the markup used to be built into an onerror="" attribute and
   its quotes broke the attribute open (see faceHtml). */
.cmp-face-ini { display: grid; place-items: center; font-weight: 800; color: var(--vc-text-sub); font-size: 0.9rem; }
/* ⚠ A NAME WITH NOTHING TO BREAK AT MUST STILL BREAK. Four cards on a 360px phone
   leave each one about 76px wide, and "B.Fernandes" is a single unbreakable token —
   no space, no hyphen — so normal wrapping had nowhere to go and the text ran out
   past the card's border. "Strand Larsen" and "Calvert-Lewin" always looked fine,
   which is why this reads as a long-name bug rather than a layout one: it is only
   the names that offer no break opportunity. `anywhere` gives the browser
   permission to break mid-token as a last resort, and it shrinks the intrinsic
   min-width so the grid stops being forced wider than its column. */
.cmp-card .nm {
  font-weight: 800; font-size: 0.95rem; color: var(--vc-text); line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto;
}
.cmp-card .tm { color: var(--vc-text-sub); font-size: 0.78rem; margin-top: 2px; overflow-wrap: anywhere; }
.cmp-card .pr { color: var(--vc-text); font-size: 0.82rem; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* The SITE's position pill, copied from public/vc/xpts.html so compare matches the
   xPts board it is read beside — tinted background, coloured text, not a solid fill.
   Labels are localised in compare-tool.js (שוער/מגן/קשר/חלוץ for Hebrew readers). */
.pos-badge {
  display: inline-block; min-width: 44px; padding: 2px 7px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3px; text-align: center;
  margin-top: 7px;
}
.pos-badge.gk  { background: rgba(255,204,2,0.15); color: #ffcc02; }
.pos-badge.def { background: rgba(79,195,247,0.15); color: #4fc3f7; }
.pos-badge.mid { background: rgba(129,199,132,0.15); color: #81c784; }
.pos-badge.fwd { background: rgba(239,154,154,0.15); color: #ef9a9a; }

/* Availability dot — one legend for both leagues (compareModel canonicalises the
   two engines' incompatible vocabularies into these four states). */
.avail { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--vc-text-sub); margin-top: 6px; }
.avail::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #38a169; }
.avail.doubtful::before { background: #dd6b20; }
.avail.out::before, .avail.suspended::before { background: #c53030; }

/* ── Verdict strip ──────────────────────────────────────────────────────────── */
.cmp-verdict .v-cell {
  background: var(--vc-surface); border: 1px solid var(--vc-border);
  border-radius: 12px; padding: 14px 8px; text-align: center;
}
.cmp-verdict .v-cell.best { border-color: var(--vc-accent); background: var(--vc-surface2); }
.cmp-verdict .big {
  font-size: 1.7rem; font-weight: 800; color: var(--vc-text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cmp-verdict .v-cell.best .big { color: var(--vc-accent); }
.cmp-verdict .cap { font-size: 0.72rem; color: var(--vc-text-sub); margin-top: 4px; }
.cmp-verdict .per { font-size: 0.78rem; color: var(--vc-text-sub); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* A LOCKED cell keeps the layout it would have had. The point of a paywall cell is
   that the reader SEES the thing they cannot read; an empty or absent one reads as
   "no data" and sells nothing. */
.cmp-verdict .v-cell.locked { border-style: dashed; background: var(--vc-surface); }
.cmp-verdict .lock-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.86rem; font-weight: 800; color: var(--vc-accent);
  line-height: 1.1; padding: 6px 0;
}
.cmp-verdict .lock-badge::before { content: '🔒'; font-size: 0.9rem; }

.cmp-table tr.row-locked th.metric { opacity: 0.75; }
.lock-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; color: var(--vc-accent);
  background: var(--vc-chip-bg); border: 1px dashed var(--vc-chip-border);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.lock-pill::before { content: '🔒'; font-size: 0.7rem; }

/* The horizon control and its caption travel together, pushed to the far end of the
   fixtures header. `margin-inline-start: auto` (not `margin-left`) — the header is a
   flex row that flips in RTL. They wrap as ONE unit, so the caption can never end up
   orphaned on a line above the buttons it describes. */
/* This control decides what EVERY section below is about, so it is built as a BAR
   rather than as a caption: its own tinted, bordered pill, the label at the page's
   text weight instead of a muted footnote, and buttons big enough to read as buttons.
   Before this it was easy to miss entirely. */
.cmp-hz-wrap {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 11px;
  flex-wrap: nowrap; padding: 6px 6px 6px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vc-accent) 38%, transparent);
  background: color-mix(in srgb, var(--vc-accent) 9%, transparent);
}
html[dir="rtl"] .cmp-hz-wrap { padding: 6px 13px 6px 6px; }
.cmp-hz-label {
  font-size: 0.85rem; font-weight: 700; color: var(--vc-text); white-space: nowrap;
}

/* Horizon segmented control */
.cmp-horizon {
  display: inline-flex; border: 1px solid var(--vc-border); border-radius: 999px;
  overflow: hidden; background: var(--vc-surface);
}
.cmp-horizon button {
  border: none; background: transparent; color: var(--vc-text-sub);
  padding: 7px 15px; font-size: 0.88rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.14s ease, color 0.14s ease;
}
.cmp-horizon button:hover:not([aria-pressed="true"]) { background: var(--vc-surface2); color: var(--vc-text); }
.cmp-horizon button + button { border-inline-start: 1px solid var(--vc-border); }
.cmp-horizon button[aria-pressed="true"] {
  background: var(--vc-accent); color: #fff; font-weight: 800;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
}
.cmp-horizon .short { display: none; }

/* ── Fixture run ────────────────────────────────────────────────────────────── */
.fx-col { background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: 12px; padding: 10px; display: grid; gap: 6px; }
/* The tile is FILLED with its difficulty colour (the FDR ramp), so a run reads as a
   ticker before a single number is parsed. Text colour is picked per tile from the
   fill's luminance in compare-tool.js, so both ends of the ramp stay legible. */
.fx-row {
  display: grid; grid-template-columns: 1fr; align-items: center;
  padding: 7px 9px; border-radius: 8px;
  background: var(--vc-surface2);
  text-align: center;
}
/* A fixture with no difficulty keeps the neutral surface and the normal text colour
   — an uncoloured tile is "we don't know", not "easy". */
.fx-row.no-diff { color: var(--vc-text); }
.fx-row .opp { font-size: 0.84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row .ven { font-style: normal; font-size: 0.72rem; opacity: 0.75; margin-inline-start: 3px; }
.fx-row.bye { opacity: 0.55; font-style: italic; }

/* Run verdict — attack and defence answered separately, in words. The meter fills
   toward GOOD (five segments = an easy run), which is the direction a reader assumes
   without being told; a bare total needed the scale, the direction and the run length
   explained before it said anything at all. */
.fx-tot { display: grid; gap: 5px; margin-top: 4px; }
.fx-tot-chip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px;
  background: var(--vc-surface2); border-radius: 8px; padding: 6px 8px;
  cursor: default;
}
.fx-tot-chip i { font-style: normal; font-size: 0.72rem; color: var(--vc-text-sub); font-weight: 600; }
.fx-tot-chip b { font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.fx-tot-chip .meter { display: inline-flex; gap: 2px; align-items: center; }
.fx-tot-chip .meter .seg {
  width: 7px; height: 9px; border-radius: 2px;
  background: var(--vc-border); opacity: 0.55;
}
.fx-tot-chip .meter .seg.on { opacity: 1; }

/* ── Detail table ───────────────────────────────────────────────────────────── */
/* The table MUST paint its own surface. Every other block here sits on --vc-surface
   or --vc-card-bg; the table was the one element with no background of its own, so
   under the light theme its cells drew --vc-text (dark) straight onto the page
   ground (which stays dark) and the whole grid went dark-on-dark. These are the
   site's own table tokens — both have a light-theme variant. */
.cmp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px;
  background: var(--vc-table-wrap-bg);
  border: 1px solid var(--vc-table-wrap-border);
}
.cmp-table { border-collapse: collapse; width: 100%; }
.cmp-table th, .cmp-table td {
  padding: 10px 12px; text-align: center; font-size: 0.88rem; color: var(--vc-text);
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--vc-table-row-border);
}
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; }
.cmp-table th.metric {
  text-align: start; color: var(--vc-text-sub); font-weight: 600; font-size: 0.8rem;
  white-space: nowrap; background: var(--vc-table-head-bg);
  position: sticky; inset-inline-start: 0; z-index: 1;
}
.cmp-table td.best { color: var(--vc-accent); font-weight: 800; }
/* Column header: the player's face above his name, so a long table still says WHO each
   column belongs to without scrolling back up to the cards. Desktop only — see
   tableHeadCell; four faces do not fit a phone header beside a sticky first column. */
.cmp-table thead .th-who { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.cmp-table thead .th-face .cmp-face { width: 34px; height: 34px; margin: 0; }
.cmp-table thead .th-face .cmp-face.is-shirt { width: 30px; height: 30px; }
.cmp-table thead .th-face .cmp-face-ini { width: 34px; height: 34px; font-size: 0.72rem; }
/* Same break-anywhere rule as the header cards, for the same reason: the column is
   narrow on a phone and a name with no space in it has nothing else to break at. */
.cmp-table thead .th-nm { line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.cmp-table td .sub { display: block; font-size: 0.72rem; color: var(--vc-text-sub); font-weight: 400; }

/* ── Locked / empty / loading ───────────────────────────────────────────────── */
.cmp-lock {
  background: var(--vc-surface); border: 1px dashed var(--vc-border); border-radius: 12px;
  padding: 18px 16px; text-align: center; color: var(--vc-text-sub); font-size: 0.88rem;
}
.cmp-lock h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--vc-text); }
.cmp-lock ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.cmp-lock li::before { content: '🔒 '; }
.cmp-lock a {
  display: inline-block; background: var(--vc-accent); color: #fff;
  padding: 8px 18px; border-radius: 9px; font-weight: 700; text-decoration: none; font-size: 0.85rem;
}
.cmp-empty { text-align: center; padding: 44px 16px; color: var(--vc-text-sub); }
.cmp-empty h2 { color: var(--vc-text); margin: 0 0 8px; font-size: 1.08rem; }

/* ── Season-stats block ─────────────────────────────────────────────────────
   Deliberately the SAME table, section header and lock vocabulary as the blocks
   above it — this is one more answer about the same players, not a second tool
   bolted on, and a new visual language here would make the page read as two. */

/* The picker opener sits at the far end of the section header. `margin-inline-start:
   auto` and not `margin-left`: the header is a flex row that flips in RTL, and a
   physical margin would pin the button to the wrong side in Hebrew. */
/* The opener has to LOOK like the control it is. As a muted grey pill it read as a
   caption and nobody would guess the table is configurable — so it now carries the
   accent, its own icon, and a live count of what is selected. The count is the part
   that actually invites the click: "5" beside "choose stats" says there is a set here
   and it is yours to change. */
.st-pick-btn {
  margin-inline-start: auto;
  border: 1px solid color-mix(in srgb, var(--vc-accent) 45%, transparent);
  background: color-mix(in srgb, var(--vc-accent) 12%, transparent);
  color: var(--vc-accent);
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  padding: 7px 8px 7px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.35;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
}
/* Sliders, not a cog: a cog means "settings for this page", sliders mean "adjust what
   you are looking at", which is what this does. Inline SVG so it is one shape in every
   browser — the emoji cog rendered at a different size and colour in each. */
.st-pick-btn .st-ico { width: 15px; height: 15px; flex: none; }
.st-pick-btn .st-count {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--vc-accent); color: #fff;
  font-size: 0.72rem; font-weight: 800; line-height: 19px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.st-pick-btn:hover {
  background: var(--vc-accent); border-color: var(--vc-accent); color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
}
.st-pick-btn:hover .st-count { background: rgba(255, 255, 255, 0.9); color: var(--vc-accent); }
.st-pick-btn:active { transform: translateY(0); }
.st-pick-btn:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 2px; }
/* Open: solid, so the button reads as the panel's own header while the panel is out. */
.st-pick-btn.on {
  background: var(--vc-accent); border-color: var(--vc-accent); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.st-pick-btn.on .st-count { background: rgba(255, 255, 255, 0.9); color: var(--vc-accent); }

.st-picker {
  background: var(--vc-table-wrap-bg); border: 1px solid var(--vc-table-wrap-border);
  border-radius: 12px; padding: 14px 16px 6px; margin: 0 0 12px;
}
.st-picker-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--vc-text-sub); margin: 0 0 12px;
}
.st-reset {
  margin-inline-start: auto; border: none; background: none; padding: 0;
  color: var(--vc-accent); font-family: inherit; font-size: 0.78rem;
  font-weight: 600; cursor: pointer; text-decoration: underline;
}
.st-fam { margin: 0 0 14px; }
.st-fam-h {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--vc-text-sub); text-transform: uppercase; margin: 0 0 7px;
}
.st-opts { display: flex; flex-wrap: wrap; gap: 7px; }
/* Each option is a whole tappable chip, not a bare checkbox with a label beside it —
   a 13px box is under every touch-target guideline, and the chip is 32px tall. */
.st-opt {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--vc-border); background: var(--vc-surface);
  border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; color: var(--vc-text-sub);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  user-select: none;
}
.st-opt:hover { border-color: var(--vc-accent); color: var(--vc-text); }
.st-opt.on {
  border-color: var(--vc-accent); color: var(--vc-text); font-weight: 600;
  background: color-mix(in srgb, var(--vc-accent) 12%, transparent);
}
.st-opt input { accent-color: var(--vc-accent); margin: 0; width: 14px; height: 14px; cursor: pointer; }
/* The graphic's row picker at its ceiling: what is already ticked stays live, the
   rest go quiet. Untick something to make room, rather than tick an eleventh row and
   have the renderer drop it. */
.st-opt.is-full { opacity: 0.42; cursor: not-allowed; }
.st-opt.is-full:hover { border-color: var(--vc-border); color: var(--vc-text-sub); }
.st-opt.is-full input { cursor: not-allowed; }
.st-opt .st-lock {
  font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--vc-accent);
  border: 1px dashed var(--vc-chip-border); border-radius: 999px; padding: 1px 7px;
}
.st-opt .st-lock::before { content: '🔒'; font-size: 0.62rem; margin-inline-end: 3px; }

/* The metric column carries the lock, so it stops being a single nowrap line. */
.cmp-table tr.row-locked th.metric {
  white-space: normal;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* A withheld cell shows the padlock, muted — NOT a dash. A dash in a stats table
   means "no data", and the whole point of a locked row is that the data exists. */
.cmp-table td.locked-cell { color: var(--vc-text-sub); opacity: 0.5; }
.lock-glyph { width: 15px; height: 15px; vertical-align: -2px; }

/* Admin-only graphic button (IPL compare page). Styled as the PL bar's is — this is
   an internal affordance, so it stays quiet rather than competing with the tool. */
.cmp-gfx-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.cmp-gfx-btn {
  border: 1px solid var(--vc-accent); background: transparent; color: var(--vc-accent);
  font-family: inherit; font-size: 0.8rem; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; cursor: pointer;
}
.cmp-gfx-btn:hover:not(:disabled) { background: var(--vc-accent); color: #fff; }
.cmp-gfx-btn:disabled { opacity: 0.6; cursor: default; }

/* ── The shared site mark, inside the first column header ───────────────────
   vc-shell.js injects `.vc-data-watermark` into `thead th.metric` (the empty cell
   above the metric names) — the same anchor the FDR boards use, so the mark sits
   above every row and lands inside a cropped screenshot. Only the fit is ours: that
   cell is sticky and was sized for nothing, so it needs a floor width and the
   header row needs the height. */
.cmp-table thead th.metric.vc-cmp-metric-watermarked {
  min-width: 168px; padding-top: 9px; padding-bottom: 9px;
}
.cmp-table thead th.metric .vc-data-watermark { font-size: 0.7rem; opacity: 0.75; }
.cmp-table thead th.metric .vc-data-watermark img { width: 14px; height: 14px; }

.st-note {
  margin: 9px 2px 0; font-size: 0.76rem; color: var(--vc-text-sub); line-height: 1.5;
}
.st-none {
  border: 1px dashed var(--vc-border); border-radius: 12px; padding: 22px 16px;
  text-align: center; color: var(--vc-text-sub); font-size: 0.85rem;
}

/* ── Narrow screens ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cmp-grid { gap: 7px; }
  .cmp-card { padding: 11px 5px 10px; border-radius: 11px; }
  .cmp-face { width: 42px; height: 42px; }
  .cmp-card .nm { font-size: 0.82rem; }
  .cmp-card .tm, .cmp-card .pr { font-size: 0.72rem; }
  /* FOUR columns on a phone is ~76px each, and break-anywhere is a safety net, not a
     look — "B.Fernan/des" fits but reads badly. A step down in type buys the whole
     name a line at the widths people actually hold, and leaves the break as the last
     resort it should be. Three players or fewer keep the larger size. */
  .cmp-cols-4 .cmp-card .nm { font-size: 0.72rem; letter-spacing: -0.01em; }
  .cmp-cols-4 .cmp-card .tm, .cmp-cols-4 .cmp-card .pr { font-size: 0.66rem; }
  /* (the cols-4 header name size now comes from the shared floor rule below) */
  .cmp-verdict .big { font-size: 1.3rem; }
  /* Six verbose options do not fit a phone — the last one ended up past the edge and
     could not be tapped. The labels collapse to their gameweek number, which the
     control's own heading ("how many gameweeks to compare") already qualifies. */
  .cmp-horizon .full { display: none; }
  .cmp-horizon .short { display: inline; }
  .cmp-horizon button { padding: 6px 0; min-width: 38px; text-align: center; font-size: 0.85rem; }
  .cmp-table th, .cmp-table td { padding: 8px 9px; font-size: 0.8rem; }
  /* The picker on a phone: the opener drops to its own line rather than squeezing the
     section title, and the option chips get a little more room to breathe. */
  /* On a phone the opener drops to its own line and takes a full-size tap target
     rather than sitting as a small pill beside a wrapped title. */
  .st-pick-btn { margin-inline-start: 0; padding: 9px 10px 9px 16px; font-size: 0.85rem; }
  /* On a phone the caption + control take their own full line under the title rather
     than squeezing beside it. */
  /* ABOVE the section title on a phone (owner, 2026-08-14). The control sets the
     window every section below reads over, so on the screen where everything is
     stacked it should be the first thing met, not something found after the heading.
     `order` works because .cmp-section-h is already a flex row that wraps — the wrap
     takes a line of its own and is pulled in front of the title and its caption. */
  .cmp-section-h { align-items: center; }
  .cmp-hz-wrap {
    order: -1; margin-inline-start: 0; width: 100%;
    justify-content: space-between; margin-bottom: 4px;
    /* ⚠ AND IT MUST BE ALLOWED TO WRAP. Six 40px options plus the Hebrew caption come
       to more than a 390px phone has, and the base rule is `nowrap` — so the sixth
       option hung past the edge of the screen where it could not be tapped, which is
       the same failure the label-shortening above was written to fix. On a narrow
       phone the control now drops to its own line instead of off the page. */
    flex-wrap: wrap; row-gap: 8px;
  }
  .cmp-hz-label { font-size: 0.8rem; }
  .cmp-horizon { flex: 1 1 auto; justify-content: center; }
  .cmp-horizon button { padding: 7px 0; min-width: 40px; text-align: center; flex: 1 1 auto; }
  /* THE HEADER FACES COME OFF AT FOUR COLUMNS, AND ONLY THERE. Four of them beside
     a sticky metric column is still more than a 390px header row can hold — but at
     two or three there is room, and taking them off was what left the name carrying
     the column on its own. It could not: the player columns are what is left after a
     sticky metric column, so a name with no space in it breaks mid-word, and it is
     worst in English where the metric labels are longest ("Projected points at 90
     mins per match") — "B.Fer/nan/des" over three lines. With the portrait back the
     face carries the identity, the name underneath can take the smaller step, and
     nothing is read by a broken word. Scoped exactly like the .cmp-cols-4 type step
     above, and for the same reason: the constraint was never "a phone", it was four
     columns on one. */
  .cmp-cols-4 .cmp-table thead .th-face { display: none; }
  /* A step down from the desktop 34px: the header row on a phone is shorter, and the
     portrait only has to identify the column, not be the subject of it. */
  .cmp-table thead .th-face .cmp-face,
  .cmp-table thead .th-face .cmp-face-ini { width: 30px; height: 30px; }
  .cmp-table thead .th-face .cmp-face.is-shirt { width: 27px; height: 27px; }
  /* THE PLAYER COLUMNS GET A FLOOR, NOT A PERCENTAGE — and this is the rule that
     actually fixes the names.
     A percentage width is a share of a table that is itself viewport-sized, so it
     only ever holds at ONE screen width. Measured: `width: 23%` + 0.64rem put every
     name on one line at 430px (the Pro Max viewport it was tuned on) and broke all
     six of them again at 320/360/375, which is where real phones are. A fix that
     depends on the width you happened to test is not a fix.
     A min-width does not care about the viewport. The names need ~84px at this size
     and now always get it; what gives is the table's own width, and it is ALLOWED to
     give — .cmp-table-wrap is `overflow-x: auto` and the metric column is sticky, so
     the labels stay pinned while the player columns scroll. That is the designed
     affordance for a wide comparison table, and at 320px this table already scrolled
     before any of this (333px in a 320px viewport).
     Cost, measured: the table goes 333→420px, so it now also scrolls at 360-412px
     where it did not. That is the trade — a name you can read against a swipe the
     wrapper was built for. 0.68rem is the largest type that fits 84px; 0.72 needs 88
     and buys nothing but scroll.
     Applies at FOUR columns too: same mechanism, and four is strictly tighter than
     three, so leaving it out would ship the bug to the wider case. */
  /* AT THREE, ALL THREE COLUMNS MUST BE ON SCREEN. A min-width floor fixed the
     names but paid for it in horizontal scroll, and on a 375px phone that put the
     third player off-screen — you cannot compare three players you cannot see at
     once. Scroll is the wrong currency here.
     ⚠ `max-width` ON A TABLE CELL IS ADVISORY under auto layout: the metric column
     never shrank below its content, so capping it did nothing (measured: 168px at
     every cap from 130 down to 100). `table-layout: fixed` is what makes a declared
     column width authoritative — then 88px for the labels leaves the three players
     an equal share of whatever is left, at any viewport.
     88/0.62rem/5px is the combination where no name breaks even at 320px in either
     edition; 96 and 104 both break B.Fernandes there.
     The cost is VERTICAL: the metric labels wrap to 4-5 lines, so the table grows
     ~90px (~140px at 320px). That is the right trade — a page scrolls down by
     nature and sideways only by accident. No data cell clips at these widths. */
  .cmp-cols-3 .cmp-table { table-layout: fixed; }
  .cmp-cols-3 .cmp-table th.metric { width: 88px; min-width: 88px; max-width: 88px; }
  .cmp-cols-3 .cmp-table th, .cmp-cols-3 .cmp-table td { padding: 8px 5px; }
  .cmp-cols-3 .cmp-table thead th:not(.metric) { width: auto; min-width: 0; }
  .cmp-cols-3 .cmp-table thead .th-nm { font-size: 0.62rem; letter-spacing: -0.01em; }
  /* FOUR gets the same treatment, tighter — a floor-and-scroll four ran 283px wider
     than a 320px screen, which is not a comparison, it is a carousel. Fixed layout
     with an 76px label column leaves each player an equal quarter of the rest.
     🔑 AND THE FACES COME BACK AT FOUR. They were hidden because four of them did not
     fit beside a sticky metric column — true when auto layout gave each player 52px,
     no longer true now the column width is declared. That matters more here than at
     three: the name is down to 0.52rem to fit four across, and a portrait is what
     keeps the column identifiable at that size. 0.56rem breaks B.Fernandes at 320px;
     0.52 holds everywhere. */
  .cmp-cols-4 .cmp-table { table-layout: fixed; }
  .cmp-cols-4 .cmp-table th.metric { width: 76px; min-width: 76px; max-width: 76px; }
  .cmp-cols-4 .cmp-table th, .cmp-cols-4 .cmp-table td { padding: 8px 3px; }
  .cmp-cols-4 .cmp-table thead th:not(.metric) { width: auto; min-width: 0; }
  .cmp-cols-4 .cmp-table thead .th-nm { font-size: 0.52rem; letter-spacing: -0.01em; }
  .cmp-cols-4 .cmp-table thead .th-face { display: block; }
  .cmp-cols-4 .cmp-table thead .th-face .cmp-face,
  .cmp-cols-4 .cmp-table thead .th-face .cmp-face-ini { width: 26px; height: 26px; }
  /* AND THE METRIC COLUMN MAY WRAP AT THREE. The base rule is `white-space: nowrap`,
     which pins this column to its single longest label — measured at 237px of a
     430px phone for the English "Projected points at 90 mins per match", i.e. 57% of
     the table spent on the one column that carries no data, leaving the players 52px
     each. Letting it wrap costs one extra line on the one or two longest labels and
     measured back to 197px / 65-74px per player. Hebrew is unaffected (172px either
     way — its labels are shorter than the widest column the data needs).
     ⚠ Scoped to three because that is what was measured; four columns still carry
     the nowrap column and are squeezed harder, but changing them unmeasured is how
     the wrong fix ships. */
  .cmp-cols-3 .cmp-table th.metric,
  .cmp-cols-4 .cmp-table th.metric { white-space: normal; }
  /* The sticky metric column is already tight on a phone; the mark takes the smaller
     of the two sizes rather than forcing the column wider. */
  .cmp-table thead th.metric .vc-data-watermark { font-size: 0.62rem; gap: 4px; }
  .cmp-table thead th.metric .vc-data-watermark img { width: 12px; height: 12px; }
  /* ⚠ THE WATERMARK HAS TO FIT A COLUMN THAT IS NOW DECLARED, NOT DISCOVERED. It
     used to sit in a metric column wide enough to hold it (168px); once that column
     became 88px (76 at four) under `table-layout: fixed`, the cell could no longer
     grow to the mark and "vice-captain.com" ran out past its own square — measured
     97px of mark in a 78px content box at three, 70px at four, in BOTH tables.
     Smaller AND allowed to wrap: the URL is the point of the mark, so it stacks
     under the icon rather than being truncated or dropped. Costs nothing vertically
     — the header row is sized by the player cells (face + name), and its height is
     unchanged at 63px / 57px. 0.56rem still overflows the four-column cell. */
  .cmp-cols-3 .cmp-table thead th.metric .vc-data-watermark,
  .cmp-cols-4 .cmp-table thead th.metric .vc-data-watermark {
    font-size: 0.52rem; gap: 3px; flex-wrap: wrap; justify-content: center; line-height: 1.15;
  }
  .cmp-cols-3 .cmp-table thead th.metric .vc-data-watermark img,
  .cmp-cols-4 .cmp-table thead th.metric .vc-data-watermark img { width: 10px; height: 10px; }
  .st-picker { padding: 12px 12px 4px; }
  .st-opt { padding: 7px 11px; font-size: 0.78rem; }
  .st-opts { gap: 6px; }
  /* Metric + lock stack on a narrow first column instead of forcing a wide one. */
  .cmp-table tr.row-locked th.metric { gap: 5px; }
  .cmp-table tr.row-locked th.metric .lock-pill { font-size: 0.66rem; padding: 1px 7px; }
  .fx-col { padding: 8px; }
  .fx-row { padding: 5px 7px; gap: 6px; }
  .fx-row .opp { font-size: 0.76rem; }

  /* ── Crowded fixture columns ───────────────────────────────────────────────
     MEASURED, not guessed: at 390px with four columns the opponent cell is ~25px
     wide, so NO readable font size fits "הפועל באר שבע" on one line — shrinking the
     text alone still left 16 labels clipped. The tile therefore gives the NAME the
     full column width and drops the projection to a second line. Scoped to the
     pairs that actually crowd: PL ships 3-letter codes and only runs out at four
     players, IPL prints full Hebrew club names and runs out from three. */
  /* ⚠ PL AT THREE COLUMNS BELONGS HERE TOO. The note above says PL "only runs out at
     four" — true of the opponent NAME, false of the tile as a whole: the attack and
     defence chips carry a label, a five-segment meter and a verdict word on one line,
     and at three columns (116px each on a 390px phone) that needs 146px. `.fx-col` is
     overflow:visible, so the excess did not clip — it pushed the whole page 18px wide
     and the reader got a horizontal scrollbar on a page that otherwise fits. Two and
     four players were both fine, which is what made it look like nothing to do with
     column count. Reported 2026-08-15. */
  .cmp-cols-3 .fx-row,
  .cmp-cols-4 .fx-row { padding: 6px 5px; }
  .cmp-cols-3 .fx-row .opp,
  .cmp-cols-4 .fx-row .opp {
    white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15;
  }
  /* UCL sits with IPL, not with PL: both print a full HEBREW club name into the
     tile (Sport5 publishes no short form for either league, and the UCL names —
     'מנצ'סטר סיטי', 'פ.ס.וו איינדהובן' — are the longest on the site). PL keeps the
     larger size because its 3-letter FPL codes only run out at four columns. */
  .cmp-league-ipl.cmp-cols-3 .fx-row .opp,
  .cmp-league-ucl.cmp-cols-3 .fx-row .opp { font-size: 0.72rem; }
  .cmp-cols-4 .fx-row .opp { font-size: 0.66rem; }
  /* Four columns on a phone cannot hold label + meter + word on one line, so the
     chip stacks: label, meter, verdict. */
  .cmp-cols-3 .fx-tot-chip,
  .cmp-cols-4 .fx-tot-chip {
    grid-template-columns: 1fr; justify-items: center; gap: 3px; padding: 5px 4px; text-align: center;
  }
  .cmp-cols-3 .fx-tot-chip i,
  .cmp-cols-4 .fx-tot-chip i { font-size: 0.66rem; }
  .cmp-cols-3 .fx-tot-chip b,
  .cmp-cols-4 .fx-tot-chip b { font-size: 0.72rem; }
  .cmp-cols-3 .fx-tot-chip .meter .seg,
  .cmp-cols-4 .fx-tot-chip .meter .seg { width: 6px; height: 8px; }
  /* AND A BACKSTOP, because the rules above are per-column-count guesses about what
     fits and this failure is invisible until someone reports a scrollbar: a fixture
     tile may never be wider than its column, whatever it contains. */
  .fx-col, .fx-row, .fx-tot-chip { min-width: 0; }
  .fx-col { overflow: hidden; }
}

/* The share card's row picker — admin only, mounted beside the "generate" button by
   each compare page. Reuses the stats picker's chip vocabulary so the two panels read
   as one idea; slightly quieter, because this one configures an internal tool. */
.cmp-gfx-rows { margin: 0 0 12px; }
.cmp-gfx-rows .st-picker { margin: 0; padding: 12px 14px 4px; }
.cmp-gfx-rows .st-picker-h { margin-bottom: 9px; font-weight: 600; }
.cmp-gfx-rows .st-opt { font-size: 0.78rem; padding: 5px 10px; }

/* The graphic picker opens from its own button, because it lists EVERY metric the card
   can carry (the projection rows plus the whole season catalogue) and that is too much
   to leave permanently open above the tool. */
.cmp-gfx-rows .gfx-toggle { margin-inline-start: 0; }
.cmp-gfx-rows .gfx-rows { margin-top: 8px; max-height: 340px; overflow-y: auto; }
.cmp-gfx-rows .gfx-search {
  width: 100%; margin: 0 0 12px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--vc-input-border); background: var(--vc-input-bg);
  color: var(--vc-text); font-family: inherit; font-size: 0.85rem;
}
.cmp-gfx-rows .gfx-search:focus { outline: 2px solid var(--vc-accent); outline-offset: 1px; }
.cmp-gfx-rows .st-picker-h { gap: 8px; }
.cmp-gfx-rows .st-picker-h .st-reset:first-of-type { margin-inline-start: auto; }

/* ── The fantasy-game toggle ─────────────────────────────────────────────────
   Every competition here is played as more than one fantasy game (PL: FPL + 9
   Fantasy · IPL: Sport5 + 9 Fantasy · UCL: UEFA + Sport5 + 9 Fantasy), so all
   three compare pages mount `shared/fantasy-game-toggle.js`. The TRACK and the
   PILLS are that module's own, styled once in vc-theme.css (.vc-seg-toggle /
   .vc-seg-btn); these three lines are the WRAPPER's layout, and without them the
   control sits uncentred against the start edge and its caption renders at body
   type in body colour instead of the sub-text grey every other tool uses.

   ⛔ IT LIVES HERE RATHER THAN IN EACH SHELL, and that is the point: the same
   three declarations are copied verbatim into five other pages (pl/xpts.html,
   xpts.html, ucl/xpts.html, ucl/team-analyzer.html, shared/team-stats.css) and
   the compare pages are one tool with one stylesheet, so a fourth, fifth and
   sixth copy would be three more places for the control to drift. */
.vc-game-toggle { text-align: center; margin: 0 0 12px; }
.vc-game-toggle-caption { font-size: 0.9rem; font-weight: 700; color: var(--vc-text-sub); margin: 0 0 8px; }
.vc-game-toggle .vc-seg-toggle { margin: 0; }