/* my-leagues.css — the styles for the shared My-Leagues board.
 *
 * `shared/my-leagues-view.js` owns the markup that wears this. Two pages cannot
 * drift apart on layout if neither page writes any, which is the same bargain
 * shared/team-stats.css makes with team-stats-view.js.
 *
 * The design is the WC golden (public/vc/wc/mini-leagues.html's inline <style>),
 * lifted rule-for-rule. Three deliberate changes, all forced by the fact that WC
 * was Hebrew-only and this file also dresses an English page:
 *
 *   1. LOGICAL PROPERTIES THROUGHOUT. `text-align: right` → `start`,
 *      `margin-left` → `margin-inline-start`, and so on. WC could hardcode
 *      physical sides because /en/wc/mini-leagues 301s away; PL renders both.
 *   2. THE "YOU" ROW MARKER IS A BORDER, NOT AN INSET BOX-SHADOW. WC used
 *      `box-shadow: inset -3px 0 0` on the first cell, which is right-edge in RTL
 *      and WRONG-edge in LTR — box-shadow has no logical form, so the marker had
 *      to become `border-inline-start`. Same 3px accent bar, correct edge in both.
 *   3. THE EO HINT POPOVER IS INSET-ANCHORED. WC pinned it `left: 0` with a
 *      `left: 7px` arrow. Mixing a physical inset with a logical one is the trap
 *      recorded in the RTL notes — the two never cancel — so both the popover and
 *      its arrow use inset-inline-start and flip together.
 *
 * Everything else — the tier-adaptive card grids, the 106px stat track that iOS
 * WebKit needs spelled out, the 600px table→cards swap — is WC's, including its
 * comments where they explain a non-obvious constraint.
 */

/* Hard guard: nothing here may force a horizontal scroll on mobile. The clip
   lives on #vc-shell ONLY — on html/body it also clips the position:fixed cookie
   banner, cutting it off at the viewport bottom. */
#vc-shell { overflow-x: clip; max-width: 100vw; }

/* ── League chips row (pinned leagues + ★ default + ✕ remove) ─────────────── */
.ml-leagues { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.ml-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--vc-border, #2c3340); background: var(--vc-card, #161b22);
  color: var(--vc-text, #e6edf3); cursor: pointer; font-size: 0.9rem; font-weight: 600;
  font-family: inherit;
}
.ml-chip.active { border-color: var(--vc-accent, #ffd166); color: var(--vc-accent, #ffd166); }
.ml-chip .ml-chip-rank { font-size: 0.82rem; color: var(--vc-accent, #ffd166); font-weight: 800; margin-inline-start: 4px; }
.ml-chip-star { cursor: pointer; opacity: 0.4; font-size: 1rem; line-height: 1; user-select: none; }
.ml-chip-star.is-fav { opacity: 1; color: var(--vc-accent, #ffd166); }
.ml-chip-star:hover { opacity: 0.85; }
.ml-chip-del { cursor: pointer; opacity: 0.45; font-size: 0.95rem; line-height: 1; user-select: none; }
.ml-chip-del:hover { opacity: 1; color: #ff8fa3; }

/* "+ add league" pill + its panel (a league-ID box; see the view's header note
   on why this is NOT WC's paste-a-share-link step). */
.ml-addbar { margin: 0 0 16px; }
.ml-add-toggle { display: inline-flex; align-items: center; gap: 9px;
  background: var(--vc-card, #161b22); border: 1px solid var(--vc-accent, #ffd166);
  color: var(--vc-accent, #ffd166); border-radius: 999px;
  /* LOGICAL, not physical: the 20px side is the one the + badge sits on, so it has
     to follow the text direction. In RTL this resolves to right:20 left:14 - byte
     identical to the physical shorthand it replaces, so Hebrew and IPL do not move -
     while LTR flips to left:20 right:14, which the physical form never did. */
  padding-block: 9px; padding-inline: 20px 14px;
  cursor: pointer; font-size: 0.95rem; font-weight: 700; font-family: inherit;
  transition: background .15s, color .15s; }
.ml-add-toggle:hover { background: var(--vc-accent, #ffd166); color: #1a1205; }
.ml-add-toggle .plus { width: 21px; height: 21px; border-radius: 50%; background: var(--vc-accent, #ffd166);
  color: #1a1205; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.ml-add-toggle:hover .plus { background: #1a1205; color: var(--vc-accent, #ffd166); }
.ml-addpanel { margin: 0 0 18px; padding: 16px; border: 1px solid var(--vc-border, #2c3340); border-radius: 12px; background: var(--vc-card, #161b22); }
.ml-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; margin-bottom: 8px; }
.ml-add input[type="text"] {
  flex: 1 1 240px; min-width: 0; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--vc-border, #2c3340); background: var(--vc-card, #161b22);
  color: var(--vc-text, #e6edf3); font-size: 0.95rem; direction: ltr; text-align: left;
}
.ml-add-btn { background: var(--vc-accent, #ffd166); color: #1a1205;
  border: 1px solid var(--vc-accent, #ffd166); border-radius: 10px;
  padding: 11px 22px; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: filter .15s, opacity .15s; }
.ml-add-btn:hover { filter: brightness(1.07); }
.ml-add-btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.ml-hint { font-size: 0.82rem; color: var(--vc-text-dim, #8b97a7); line-height: 1.6; }

/* ── Board toolbar ────────────────────────────────────────────────────────── */
.ml-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ml-toolbar .ml-league-name { font-size: 1.15rem; font-weight: 700; }
.ml-toolbar .ml-meta { font-size: 0.82rem; color: var(--vc-text-dim, #8b97a7); }
.ml-toolbar .ml-spacer { flex: 1; }
/* The staged wait message (see startWaitStages). Each stage fades in so the line
   reads as a progression rather than a flicker; `prefers-reduced-motion` drops the
   movement and keeps the text, which is the part that carries the meaning. */
.ml-wait { display: inline-block; }
.ml-wait.in { animation: ml-wait-in .32s ease-out both; }
@keyframes ml-wait-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-wait.in { animation: none; }
}

/* "Showing 200 of 692 members." — only when the table really is a slice. Sits
   under the toolbar so it reads as a caption on the board, not as an error. */
.ml-cap-note { font-size: 0.82rem; line-height: 1.5; color: var(--vc-text-sub, #8b97a7);
  margin: -4px 0 12px; }
.ml-iconbtn {
  background: none; border: 1px solid var(--vc-border, #2c3340); color: var(--vc-text-dim, #9aa);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 0.82rem; font-family: inherit;
}
.ml-iconbtn:hover { color: var(--vc-text, #e6edf3); }

/* ── Connect prompt — shown ONLY when the account has no team anywhere ────── */
.ml-connect-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--vc-text, #dfe6ee); background: rgba(94,194,255,0.08);
  border: 1px solid rgba(94,194,255,0.28); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
}
.ml-connect-prompt .ml-connect-txt,
.ml-connect-status .ml-connect-txt { flex: 1 1 auto; }
.ml-connect-prompt .ml-connect-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ml-connect-prompt .ml-connect-btn,
.ml-connect-status .ml-connect-btn {
  flex: 0 0 auto; white-space: nowrap; text-decoration: none; font-family: inherit;
  background: #5ec2ff; color: #08222f; border: 0; border-radius: 8px;
  padding: 7px 14px; font-weight: 700; font-size: 0.85rem; line-height: 1.25; cursor: pointer;
}
.ml-connect-prompt .ml-connect-btn:hover,
.ml-connect-status .ml-connect-btn:hover { background: #7bcdff; }
.ml-connect-prompt .ml-connect-btn:disabled { opacity: 0.6; cursor: default; }
/* "no, pick another" is EQUAL-weight, not a dismissive link — a suggestion is a
   genuine question, never an assertion. */
.ml-connect-prompt .ml-connect-alt {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--vc-text, #dfe6ee); border: 1px solid rgba(94,194,255,0.5);
  border-radius: 8px; padding: 6px 13px; font-weight: 600; font-size: 0.85rem; line-height: 1.25; text-decoration: none;
}
.ml-connect-prompt .ml-connect-alt:hover { background: rgba(94,194,255,0.12); }

/* ── The INLINE connect panel ───────────────────────────────────────────────
   Takes the FULL width of whichever host it lands in (the prompt bar inside the
   board, or the cold-start status panel), so it breaks onto its own line under
   the sentence rather than fighting it for the same row. Both hosts are flex
   with wrap, so `flex-basis:100%` is what forces that break. */
.ml-connect-panel { flex: 1 1 100%; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.ml-connect-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ml-connect-input {
  flex: 1 1 190px; min-width: 0; font-family: inherit; font-size: 0.85rem;
  padding: 7px 11px; border-radius: 8px; color: var(--vc-text, #e6edf3);
  background: var(--vc-bg, #0d1117); border: 1px solid rgba(94,194,255,0.4);
}
.ml-connect-input:focus { outline: 2px solid rgba(94,194,255,0.55); outline-offset: 1px; }
.ml-connect-help { margin: 0; font-size: 0.74rem; line-height: 1.45; color: var(--vc-text-dim, #8b97a7); }


/* The COLD START door — same CTA, rendered into the status panel because the
   board it normally lives in is still display:none with no league selected. */
.vc-status.ml-connect-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}

/* The three-step "how to get your share link" list, copied from the World Cup
   tool (public/vc/wc/mini-leagues.html) so the instructions look the same as the
   ones this flow is ported from. Logical properties throughout — the list is
   numbered on the leading side in both directions. */
.ml-steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: mlstep; }
.ml-steps li {
  position: relative; padding-inline-start: 32px; margin-bottom: 9px;
  color: var(--vc-text-dim, #9aa); font-size: 0.9rem; line-height: 1.5; counter-increment: mlstep;
}
.ml-steps li::before {
  content: counter(mlstep); position: absolute; inset-inline-start: 0; top: -1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vc-accent, #ffd166); color: #1a1205;
  font-weight: 800; font-size: 0.78rem; display: flex; align-items: center; justify-content: center;
}
.ml-steps b { color: var(--vc-text, #e6edf3); }
/* A pasted URL is LTR even on the Hebrew board. */
.ml-add input[inputmode="url"] { direction: ltr; text-align: left; }

/* ── Top-500 real-rank banner ─────────────────────────────────────────────── */
.gl-top { margin: 0 0 16px; }
.gl-card { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--vc-surface2, #16293d), var(--vc-surface, #102030));
  border: 1px solid var(--vc-border-soft, #345168); border-radius: 14px; padding: 14px 16px;
  text-decoration: none; color: var(--vc-text, #f7f7f7); }
.gl-card .gl-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.gl-card .gl-medal { font-size: 1.7rem; flex: 0 0 auto; }
.gl-card .gl-k { font-size: 0.78rem; color: var(--vc-text-sub, #b0b4e0); display: flex; align-items: center; gap: 6px; }
.gl-card .gl-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 2px; }
.gl-card .gl-v { font-size: 1.7rem; font-weight: 800; color: var(--vc-accent, #dbb580);
  font-variant-numeric: tabular-nums; line-height: 1.05; }
.gl-card .gl-of { font-size: 0.78rem; color: var(--vc-text-sub, #b0b4e0); }
.gl-card .gl-cta { flex: 0 0 auto; background: var(--vc-accent, #dbb580); color: #0b1521; font-weight: 800;
  font-size: 0.85rem; border-radius: 9px; padding: 9px 15px; white-space: nowrap; }
.gl-live { display: inline-flex; align-items: center; gap: 5px; color: var(--vc-accent, #dbb580); font-weight: 700; font-size: 0.76rem; }
.gl-live .gl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc-accent, #dbb580); animation: glGlow 2.2s ease-out infinite; }
@keyframes glGlow { 0% { box-shadow: 0 0 0 0 rgba(219,181,128,.55); } 70% { box-shadow: 0 0 0 6px rgba(219,181,128,0); } 100% { box-shadow: 0 0 0 0 rgba(219,181,128,0); } }
@media (prefers-reduced-motion: reduce) { .gl-live .gl-dot { animation: none; box-shadow: 0 0 0 3px rgba(219,181,128,.15); } }
.gl-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--vc-border-soft, #345168); color: var(--vc-text-sub, #b0b4e0);
  font-size: 0.66rem; font-weight: 800; cursor: help; font-family: Georgia, serif; }
.gl-info .gl-tip { position: absolute; bottom: calc(100% + 8px); inset-inline-start: -8px; width: min(290px, 76vw);
  background: var(--vc-surface, #0e1a2f); color: var(--vc-text-soft, #c9ccf0); border: 1px solid var(--vc-accent, #dbb580);
  border-radius: 10px; padding: 9px 11px; font-size: 0.76rem; font-weight: 500; line-height: 1.6; text-align: start;
  box-shadow: 0 8px 22px rgba(5,8,38,.55); opacity: 0; visibility: hidden; transition: opacity .14s; z-index: 30; pointer-events: none; }
.gl-info:hover .gl-tip, .gl-info:focus .gl-tip { opacity: 1; visibility: visible; }
.gl-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--vc-accent, #dbb580);
  color: var(--vc-accent, #dbb580); border-radius: 10px; padding: 10px 15px; font-size: 0.9rem; font-weight: 700; text-decoration: none; }

/* ── Board tabs (Standings | Statistics) — the FDR view-switcher treatment ── */
.ml-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 14px;
  background: var(--vc-surface2); border: 1px solid var(--vc-border); border-radius: 999px; }
.ml-tab { padding: 9px 22px; border-radius: 999px; border: none; background: transparent;
  color: var(--vc-text-sub); font-weight: 700; font-size: 0.98rem; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background 0.12s, color 0.12s; }
.ml-tab:hover { color: var(--vc-text); }
.ml-tab.active { background: var(--vc-accent); color: var(--vc-surface); box-shadow: 0 1px 6px rgba(0,0,0,0.22); }
.ml-tab .ml-tab-lock { margin-inline-start: 6px; font-size: 0.85em; opacity: 0.85; }

/* ── Standings table ──────────────────────────────────────────────────────── */
.ml-tablewrap { overflow-x: auto; }
table.ml-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.ml-table th, table.ml-table td { padding: 10px 8px; text-align: start; border-bottom: 1px solid var(--vc-border, #222b36); }
table.ml-table th { color: var(--vc-text-dim, #8b97a7); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
table.ml-table tr.ml-row { cursor: pointer; }
table.ml-table tr.ml-row:hover td { background: rgba(255,255,255,0.03); }
table.ml-table th.ml-th-c, table.ml-table td.ml-td-c { text-align: center; }
.ml-rank { font-weight: 700; color: var(--vc-accent, #ffd166); width: 2.6em; text-align: center; vertical-align: middle; }
.ml-team { font-weight: 600; }
.ml-manager { font-size: 0.8rem; color: var(--vc-text-dim, #8b97a7); }
.ml-total { font-weight: 700; }
.ml-round { color: var(--vc-text-dim, #b9c2cf); }
.ml-cap { font-size: 0.88rem; }
.ml-vice { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); margin-top: 2px; }
.ml-vice b { color: var(--vc-text, #e6edf3); font-weight: 600; }
.ml-muted { color: var(--vc-text-dim, #6b7686); }
/* Movement arrows. Rendered BELOW the rank (outside the mobile circle) so a big
   jump (▲224) cannot overflow and the colour stays readable on the gold leader
   circle. */
.ml-arrow { display: block; font-size: 0.6rem; font-weight: 800; white-space: nowrap; line-height: 1.15; margin-top: 1px; }
.ml-arrow.up { color: #4ade80; }
.ml-arrow.down { color: #ff8fa3; }
.ml-stale-mark { color: var(--vc-accent, #ffd166); font-weight: 800; }
/* Chip ledger (desktop): full-name pills, one per line, centered. */
.ml-chips { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ml-chips .ml-chip-pill { font-size: 0.68rem; line-height: 1.3; text-align: center; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--vc-border, #2c3340); color: var(--vc-text-dim, #9aa6b2); white-space: nowrap; }
.ml-chips .ml-chip-pill.used { text-decoration: line-through; opacity: 0.6; }
.ml-chips .ml-chip-pill.active { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166);
  background: rgba(255,209,102,0.12); font-weight: 700; }
/* Transfers: net points centered above the out → in lists. */
.ml-tf { font-size: 0.78rem; line-height: 1.5; text-align: center; }
/* The club BADGE that replaces the club name on a player row, where the game
   supplies one. Sized to the text line it stands in (not larger), and given a
   baseline nudge so a badge and a name never sit at different heights when a
   list mixes the two — which happens the moment one crest 404s and falls back. */
.ml-rl-crest {
  height: 1.05em; width: auto; max-width: 22px; vertical-align: -0.18em;
  object-fit: contain; display: inline-block;
}
.t-crest { display: inline-flex; align-items: center; margin-inline-start: 6px; }

/* ── The Sport5 / UEFA source toggle (UCL only) ── */
.ml-srctoggle { display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px;
  background: var(--vc-surface-2, #161b22); border: 1px solid var(--vc-border, #2b3138); border-radius: 999px; }
.ml-srcbtn { appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--vc-text-dim, #8b97a7); font: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 6px 16px; border-radius: 999px; transition: background .15s, color .15s; }
.ml-srcbtn:hover { color: var(--vc-text, #e6edf3); }
.ml-srcbtn.active { background: var(--vc-accent, #2f81f7); color: #fff; }

/* ── UEFA "twist" markers. Both sit INLINE beside the value they annotate
   (the captain name, the transfer count) rather than taking a column of their
   own: the table already hides three columns below 600px, and a fifth would
   either join them — making the marker invisible on the width where the
   intra-matchday window matters most — or push the round points off the card.
   The glyphs carry their meaning in `title`, and both are direction-neutral
   so the Hebrew edition needs no mirrored twin. ── */
.ml-capswitch {
  display: inline-block; margin-inline-start: 5px; font-size: 0.78rem; font-weight: 700;
  color: #fbbf24; cursor: help; direction: ltr; unicode-bidi: isolate;
}
.ml-subs {
  display: inline-block; margin-inline-start: 6px; font-size: 0.78rem; font-weight: 600;
  color: var(--vc-text-dim, #8b97a7); cursor: help; direction: ltr; unicode-bidi: isolate;
}
.mlc .ml-subs, .mlc .ml-capswitch { font-size: 0.74rem; }

.ml-tfnet { font-weight: 700; font-size: 0.82rem; }
.ml-tfnet.pos { color: #4ade80; } .ml-tfnet.neg { color: #ff8fa3; }
.ml-tf-hit { color: #ff8fa3; font-weight: 700; margin-inline-start: 4px; }
.ml-tfl { font-size: 0.76rem; }
.ml-tfl .l { color: var(--vc-text-dim, #8b97a7); }
.ml-played b { color: var(--vc-accent, #ffd166); font-weight: 800; }
.ml-played .t { color: var(--vc-text-dim, #8b97a7); }
.ml-overall { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); margin-top: 2px; }
.ml-overall b { color: var(--vc-text, #e6edf3); font-weight: 600; }
.ml-showmore { text-align: center; margin-top: 10px; }
.ml-more-btn { background: var(--vc-card, #161b22); border: 1px solid var(--vc-border, #2c3340);
  color: var(--vc-text, #e6edf3); border-radius: 999px; padding: 8px 22px; cursor: pointer; font-size: 0.88rem; font-family: inherit; }
.ml-more-btn:hover { border-color: var(--vc-accent, #ffd166); color: var(--vc-accent, #ffd166); }
.ml-rank-note { font-size: 0.8rem; line-height: 1.5; color: var(--vc-text-dim, #9aa6b2);
  border: 1px solid var(--vc-border, #2c3340); background: var(--vc-card, #161b22);
  border-radius: 9px; padding: 9px 12px; margin: 0 0 10px; }
.ml-legend { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.ml-legend span { color: var(--vc-text-dim, #8b97a7); font-size: 0.78rem; }
.ml-help { font-size: 0.82rem; color: var(--vc-text-dim, #8b97a7); margin: 14px 0 0; line-height: 1.6; }

/* "You" marker — a DISTINCT sky-blue, deliberately NOT the gold 1st-place frame,
   so your own team stands out even when it IS the leader. The leading-edge bar is
   a border, not an inset box-shadow: box-shadow has no logical form and WC's
   physical -3px would land on the wrong edge in LTR. */
.ml-self-tag { font-size: 0.68rem; font-weight: 700; color: #5ec2ff;
  border: 1px solid #5ec2ff; border-radius: 5px; padding: 0 5px; margin-inline-start: 6px; }
table.ml-table tr.ml-row.is-me td { background: rgba(94,194,255,0.10); }
table.ml-table tr.ml-row.is-me td:first-child { border-inline-start: 3px solid #5ec2ff; }

/* ── Mobile cards (LiveFPL-style; replace the table under 600px) ──────────── */
.ml-cards { display: none; }
/* The phone's stand-in for the table head — hidden wherever the head exists. */
.ml-sortbar { display: none; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ml-sortbar-l { font-size: 0.74rem; font-weight: 700; color: var(--vc-text-dim, #8b97a7); }

/* Chip filter — sits above the table on EVERY width, unlike .ml-sortbar which is
   the phone's stand-in for a table head. Logical properties throughout: this board
   ships RTL (he) and LTR (en) off one sheet. */
.ml-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.ml-filter { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 0.78rem; color: var(--vc-text-dim, #b9c2cf); user-select: none; }
.ml-filter input { accent-color: var(--vc-accent, #ffd166); width: 15px; height: 15px; cursor: pointer;
  /* A 15px box is under the 24px touch minimum, so the LABEL carries the target. */
  margin: 0; flex-shrink: 0; }
.ml-filter:hover { color: var(--vc-text, #e6edf3); }
.ml-filter-count { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); }
.ml-filter-count:empty { display: none; }
.mlc { background: var(--vc-card, #161b22); border: 1px solid var(--vc-border, #2c3340);
  border-radius: 13px; padding: 11px 13px; margin-bottom: 9px; cursor: pointer; }
.mlc.leader { box-shadow: inset 0 0 0 1px var(--vc-accent, #ffd166); }
/* Listed after .mlc.leader (+ the explicit combined selector) so a row that is
   both your team AND rank 1 reads in YOUR blue, not the gold leader frame. */
.mlc.is-me, .mlc.leader.is-me { box-shadow: inset 0 0 0 2px #5ec2ff; }
.mlc-top { display: flex; align-items: center; gap: 11px; }
.mlc-rankwrap { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; }
.mlc-rankwrap .ml-arrow { font-size: 0.58rem; }
.mlc-rank { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid var(--vc-border, #2c3340);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--vc-accent, #ffd166); }
.mlc.leader .mlc-rank { background: var(--vc-accent, #ffd166); color: #1a1205; border-color: transparent; }
.mlc-id { flex: 1; min-width: 0; }
.mlc-team { font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.mlc-mgr { font-size: 0.78rem; color: var(--vc-text-dim, #8b97a7); }
.mlc-overall { font-size: 0.72rem; color: var(--vc-text-dim, #8b97a7); }
.mlc-overall b { color: var(--vc-text-dim, #b9c2cf); font-weight: 600; }
.mlc-nums { display: flex; gap: 16px; }
.mlc-num { text-align: center; }
.mlc-num b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--vc-accent, #ffd166); line-height: 1.1; }
.mlc-num span { font-size: 0.66rem; color: var(--vc-text-dim, #8b97a7); }
.mlc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mlc-badge { font-size: 0.68rem; padding: 2px 9px; border-radius: 6px;
  border: 1px solid var(--vc-border, #2c3340); color: var(--vc-text, #e6edf3); white-space: nowrap; }
.mlc-badge.used { text-decoration: line-through; color: var(--vc-text-dim, #6b7686); opacity: 0.7; }
.mlc-badge.active { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166);
  background: rgba(255,209,102,0.12); font-weight: 700; }
.mlc-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin-top: 10px; font-size: 0.82rem; align-items: baseline; }
.mlc-grid .r { text-align: end; white-space: nowrap; }
.mlc-cap b { color: var(--vc-text, #e6edf3); }
.mlc-vc { font-size: 0.72rem; color: var(--vc-text-dim, #8b97a7); }
.mlc-vc b { color: var(--vc-text-dim, #b9c2cf); font-weight: 600; }
.mlc-played { color: var(--vc-text-dim, #8b97a7); white-space: nowrap; }
.mlc-played b { color: var(--vc-accent, #ffd166); }
.mlc-tflists { font-size: 0.78rem; line-height: 1.5; }
.mlc-tflists .ml-tfl .l { color: var(--vc-text-dim, #8b97a7); }
.mlc-net { font-weight: 700; align-self: end; }
.mlc-net-l { display: block; font-size: 0.68rem; font-weight: 400; color: var(--vc-text-dim, #8b97a7); margin-bottom: 1px; }
@media (max-width: 600px) {
  .ml-tablewrap { display: none; }
  .ml-cards { display: block; }
  .ml-sortbar { display: flex; }
  /* The four detail columns. The table is already swapped for cards at this
     width, so this is belt-and-braces for the same breakpoint — but the class is
     on the markup (WC's, and the old IPL page's) and was declared in neither
     stylesheet after the extraction, which is how a dangling class survives. */
  .ml-hide-sm { display: none; }
}


/* ── Statistics view ──────────────────────────────────────────────────────── */
.ml-own-note { font-size: 0.85rem; color: var(--vc-text-dim, #9aa); background: rgba(255,209,102,0.08);
  border: 1px solid rgba(255,209,102,0.25); border-radius: 8px; padding: 9px 13px; margin-bottom: 14px; line-height: 1.5; }
.ml-own-asof { color: var(--vc-text, #cdd6e0); background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.30); font-weight: 600; }
.ml-own-section { margin: 0 0 22px; }
.ml-own-h { font-size: 1.05rem; font-weight: 700; color: var(--vc-text, #e6edf3); margin: 0 0 4px; }
.ml-own-sub { font-size: 0.82rem; color: var(--vc-text-dim, #8b97a7); margin: 0 0 10px; line-height: 1.5; }
.ml-own-empty { color: var(--vc-text-dim, #6b7686); font-size: 0.9rem; padding: 14px 0; }
/* Section title + Own/EO column headers share one row (most-owned board only).
   padding-inline-end matches .ml-rl-row's own 12px side padding, so the labels
   land directly above the .ml-rl-col values sitting inside that padding. */
.ml-own-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding-inline-end: 12px; }
.ml-own-headrow .ml-own-h { margin: 0; }
/* WebKit (iPhone Safari included) does not reliably include fixed flex
   descendants + `gap` when resolving a nested RTL flexbox's intrinsic width.
   Spell out the 46+46+14 = 106px track; otherwise Safari collapses this wrapper
   and pushes EO off the edge. */
.ml-rl-collabels { display: flex; gap: 14px; flex: 0 0 106px; width: 106px; min-width: 106px;
  font-size: 0.68rem; font-weight: 700; color: var(--vc-text-dim, #8b97a7);
  text-transform: uppercase; letter-spacing: 0.02em; }
/* FIXED (not min-) width so the ▼/▲ on the active column cannot grow the box and
   desync it from the value column below. DIRECT-child only — the EO column wraps
   its sortable span and the (i) hint in a shared wrapper whose children must size
   naturally. */
.ml-rl-collabels > span { flex: 0 0 46px; min-width: 0; text-align: center; overflow: visible; }
.ml-rl-collabels span.sortable { cursor: pointer; user-select: none; }
.ml-rl-collabels span.sortable:hover { color: var(--vc-accent, #ffd166); }
.ml-rl-collabels span.sortable:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: 2px; border-radius: 3px; }
.ml-rl-collabels .sort-arrow { display: inline-block; margin-inline-start: 0.2em; font-size: 0.9em; opacity: 0.8; }
/* The EO column holds the sortable span and the (i) hint as SIBLINGS — a
   role="button" nested inside another made clicks land on whichever box happened
   to cover the point. */
.ml-collabel-eo-wrap { display: inline-flex; align-items: center; justify-content: center; }

/* EO info hint — same markup and copy as team-analyzer's .ta-eo-hint, so the
   explanation reads identically everywhere it appears. */
.ta-eo-hint { position:relative; display:inline-flex; align-items:center; justify-content:center; margin-inline-start:6px; width:15px; height:15px; border-radius:50%; border:1px solid var(--vc-accent); color:var(--vc-accent); font-size:0.66rem; font-weight:800; font-style:italic; line-height:1; cursor:help; vertical-align:middle; user-select:none; flex-shrink:0; text-transform:none; letter-spacing:normal; }
.ta-eo-hint-ic { transform:translateY(0.5px); }
/* ⛔ THIS WAS ANCHORED TO THE ICON, AND THE ICON IS NOWHERE NEAR AN EDGE.
   The rule here read: "Anchored to the icon's own LEADING edge and grown inward
   (where there is room) at every width — this hint sits near the section edge in
   both directions, so unlike team-analyzer's centered legend it never gets a
   mobile-only rule." The premise is false. The (i) lives inside the most-owned
   COLUMN-LABEL track, which is a fixed 106/166px box floating in the middle of the
   card — not at either edge. Measured with the popover open:

     390 (RTL, 3 columns): icon x=67 → popover x=-209, right=81.  209 of 290px cut.
     1440 (RTL):           icon x=104 → popover x=-168, right=122. 168px cut.

   `#vc-shell { overflow-x: clip }` does the cutting, so it was silent — no
   scrollbar, no overflow, just a tooltip that was 72% missing at 390 and unreadable
   at both widths. The conclusion "it never gets a mobile-only rule" was right, for
   the opposite reason: it needs an ALL-WIDTHS one.

   ⭐ ANCHORED TO `.ml-own-headrow` INSTEAD — the card-width row the labels sit in.
   That removes the guess entirely: there is no leading/trailing edge to reason
   about, so RTL and LTR resolve identically (verified: /he and /en both open at
   x=14..376 in a 390 viewport), and `width: min(290px, 100%)` cannot exceed the
   card whatever the language or the column count.
   ⚠ The icon must stay `position: static` for that to work — a positioned icon
   becomes the containing block again and reinstates the bug. */
.ml-own-headrow { position: relative; }
.ml-collabel-eo-wrap .ta-eo-hint { position: static; }
.ta-eo-hint-pop { position:absolute; top:calc(100% + 8px); bottom:auto; inset-inline-start:0; inset-inline-end:auto; width:min(290px,100%); background:var(--vc-surface,#0e1a2f); color:var(--vc-text); border:1px solid var(--vc-accent); border-radius:9px; padding:10px 12px; font-size:0.77rem; font-weight:500; line-height:1.55; text-align:start; box-shadow:0 8px 22px rgba(5,8,38,.55); z-index:30; opacity:0; visibility:hidden; transition:opacity .14s; pointer-events:none; text-transform:none; letter-spacing:normal; }
/* No arrow: it pointed at the icon, and the popover no longer hangs off it. A
   triangle under a card-width panel reads as a rendering fault, not a pointer. */
.ta-eo-hint:hover .ta-eo-hint-pop,
.ta-eo-hint:focus .ta-eo-hint-pop,
.ta-eo-hint.open .ta-eo-hint-pop { opacity:1; visibility:visible; pointer-events:auto; }

/* Ranked rows (most-owned). Two groups: .ml-rl-main (face+name, flexes) and
   .ml-rl-stats (fixed columns) — space-between pins the stats to the end with no
   auto-margin trick. */
.ml-rank-list { display: flex; flex-direction: column; gap: 6px; }
.ml-rl-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--vc-border, #2c3340); background: var(--vc-card, #161b22); }
.ml-rl-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0%; }
.ml-rl-name { font-weight: 600; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.ml-rl-name .t { font-size: 0.76rem; color: var(--vc-text-dim, #8b97a7); margin-inline-start: 6px; }
/* The explicit 106px basis is required for iPhone WebKit for the same reason as
   .ml-rl-collabels — flex-shrink:0 with an auto basis still mis-measures. */
.ml-rl-stats { display: flex; gap: 14px; flex: 0 0 106px; width: 106px; min-width: 106px; }
.ml-rl-col { flex: 0 0 46px; min-width: 0; text-align: center; font-size: 0.8rem; color: var(--vc-text-dim, #9aa6b2); white-space: nowrap; }
.ml-rl-col b { color: var(--vc-accent, #ffd166); font-weight: 800; }
.ml-rl-row.you { background: rgba(94,194,255,0.12); box-shadow: inset 0 0 0 1px rgba(94,194,255,0.4); }
/* ── A third stats column, once the round is being scored ────────────────
   The 106px track is 46+46+14; three columns are 46*3 + 14*2 = 166. BOTH tracks
   have to move together or the titles stop sitting over their values — and both
   are spelled out rather than left to `auto` for the WebKit reason given above:
   iPhone Safari mis-measures a nested RTL flexbox with fixed children and `gap`,
   and pushes the last column off the edge.
   The gap tightens on a phone instead of the columns, so a two-digit score never
   wraps: 34*3 + 8*2 = 118. */
.ml-own-section.has-pts .ml-rl-collabels,
.ml-own-section.has-pts .ml-rl-stats { flex: 0 0 166px; width: 166px; min-width: 166px; }
.ml-rl-pts b { color: var(--vc-text, #e6edf3); }


.ml-rl-you { color: #5ec2ff; font-weight: 700; }
.ml-rl-more { font-size: 0.8rem; color: var(--vc-text-dim, #6b7686); padding: 6px 12px; }

/* Player face — photo with an accent ring; falls back to initials. */
.ml-face { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  font-size: 0.66rem; font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,0.35); vertical-align: middle;
  background: #2c3340; color: #fff; border: 2px solid #2c3340; }
.ml-face.sm { width: 24px; height: 24px; font-size: 0.58rem; }
.ml-face.lg { width: 40px; height: 40px; font-size: 0.82rem; }
.ml-face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ml-face-ini { line-height: 1; }

/* Captains + small-league most-owned: compact 2-up cards. */
.ml-cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ml-cap-card { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--vc-border, #2c3340);
  border-radius: 10px; background: var(--vc-card, #161b22); min-width: 0; }
.ml-cap-card.you { background: rgba(94,194,255,0.12); box-shadow: inset 0 0 0 1px rgba(94,194,255,0.4); }
.ml-cap-info { min-width: 0; }
.ml-cap-name { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; line-height: 1.2; }
.ml-cap-stat { font-size: 0.74rem; color: var(--vc-text-dim, #9aa6b2); margin-top: 2px; }
.ml-cap-stat b { color: var(--vc-accent, #ffd166); font-weight: 800; }

/* Clubs boards — average players per club + defence EO, side by side.
   `minmax(min(260px,100%),1fr)` is .ml-chipboard's own track: two cards where
   there is room, one column on a phone, and the `min()` arm is what stops a long
   club name from forcing the grid ITEM wider than the viewport (the sideways-
   scroll trap this stylesheet hits every time a fixed minimum is used). */
.ml-club-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.ml-club-card { border: 1px solid var(--vc-border, #2c3340); border-radius: 12px; background: var(--vc-card, #161b22);
  padding: 12px 14px; min-width: 0; }
.ml-club-head { font-weight: 700; font-size: 0.92rem; color: var(--vc-text, #e6edf3); }
.ml-club-headsub { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); margin: 2px 0 10px; line-height: 1.45; }
.ml-club-list { display: flex; flex-direction: column; gap: 6px; }
.ml-club-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ml-club-rank { flex: 0 0 16px; text-align: center; font-size: 0.72rem; font-weight: 700;
  color: var(--vc-text-dim, #6b7686); }
.ml-club-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0%; }
.ml-club-name { font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; line-height: 1.25; }
.ml-club-sub { font-size: 0.72rem; color: var(--vc-text-dim, #8b97a7); overflow-wrap: anywhere; line-height: 1.35; }
.ml-club-val { flex: 0 0 auto; font-size: 0.8rem; color: var(--vc-text-dim, #9aa6b2); white-space: nowrap; }
.ml-club-val b { color: var(--vc-accent, #ffd166); font-weight: 800; font-size: 0.95rem; }
.ml-club-toggle { margin-top: 10px; }
.ml-club-toggle-btn { background: none; border: 1px solid var(--vc-border, #2c3340); border-radius: 8px;
  color: var(--vc-text-dim, #9aa6b2); font: inherit; font-size: 0.78rem; padding: 6px 12px; cursor: pointer; }
.ml-club-toggle-btn:hover { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166); }
.ml-club-toggle-btn:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: 2px; }

/* ── A member name opens their squad, everywhere it appears ───────────────
   The standings row has done this since day one; every other place the board
   names somebody printed inert text. One class, one delegated handler.
   The affordance is deliberately UNDERSTATED — these names sit inside dense
   lists, and a link colour on each would turn the chip board and the rooting
   cards into a wall of accent. Dotted underline at rest, full accent on hover. */
.ml-mlink { cursor: pointer; text-decoration: underline dotted;
  text-decoration-color: rgba(255,209,102,0.45); text-underline-offset: 3px; }
.ml-mlink:hover { color: var(--vc-accent, #ffd166); text-decoration-color: var(--vc-accent, #ffd166); }
.ml-mlink:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: 2px; border-radius: 6px; }
/* The combos holders and chip-board names are already pill-shaped, so an
   underline would fight their border — they take the ground instead. */
.mlc-holder.ml-mlink, .ml-cb-user.ml-mlink { text-decoration: none; }
.mlc-holder.ml-mlink:hover { border-color: var(--vc-accent, #ffd166); }
.ml-cb-user.ml-mlink:hover { color: var(--vc-accent, #ffd166); }

/* ── Sortable standings headers ───────────────────────────────────────────
   Rank is a sort key like the other two, not a hidden reset: going back to the
   league's own order is the commonest thing wanted after reading a round column,
   and burying it in a third unlabelled click is how a table traps somebody. */
th.ml-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.ml-th-sort:hover { color: var(--vc-accent, #ffd166); }
th.ml-th-sort.active { color: var(--vc-accent, #ffd166); }
th.ml-th-sort:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: -2px; }
.ml-th-arrow { display: inline-block; margin-inline-start: 0.25em; font-size: 0.85em; opacity: 0.85; }

/* The combinations picker's order switch, and the score it orders by. */
.mlc-sortbar { display: flex; gap: 6px; margin: 8px 0 6px; }
.mlc-sortbtn { font: inherit; font-size: 0.74rem; font-weight: 600; font-family: inherit; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; background: none;
  border: 1px solid var(--vc-border, #2c3340); color: var(--vc-text-dim, #8b97a7); }
.mlc-sortbtn:hover { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166); }
.mlc-sortbtn.active { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166);
  background: rgba(255,209,102,0.10); }
.mlc-sortbtn:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: 2px; }
.mlc-res-pts { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); white-space: nowrap; flex-shrink: 0; }
.mlc-res-pts b { color: var(--vc-text, #e6edf3); font-weight: 800; }

/* Chip-status board. */
.ml-chipboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.ml-cb-card { border: 1px solid var(--vc-border, #2c3340); border-radius: 12px; background: var(--vc-card, #161b22); padding: 12px 14px; }
.ml-cb-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.ml-cb-stat { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--vc-text-dim, #9aa6b2); margin: 3px 0; }
.ml-cb-stat b { color: var(--vc-text, #e6edf3); font-weight: 700; }
.ml-cb-stat.active b { color: var(--vc-accent, #ffd166); }
.ml-cb-avail { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 8px; }
.ml-cb-avail span { display: block; height: 100%; background: #4ade80; border-radius: 4px; }
.ml-cb-user { font-size: 0.74rem; color: var(--vc-text, #e6edf3); line-height: 1.4; overflow-wrap: anywhere; }
.ml-cb-target { color: var(--vc-accent, #ffd166); }
.ml-cb-usedby { margin-top: 8px; border-top: 1px solid var(--vc-border, #2c3340); padding-top: 7px; }
.ml-cb-usedby-l { font-size: 0.72rem; color: var(--vc-text-dim, #8b97a7); font-weight: 700; margin-bottom: 3px; }
.ml-cb-usedby-list { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ml-cb-more { font-size: 0.72rem; color: var(--vc-text-dim, #8b97a7); }
.ml-cb-holders { color: #ff8fa3; }

/* Rooting guide (per-fixture root for / against). */
.ml-root-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.ml-root-grid .ml-root-fix { margin-bottom: 0; }
.ml-root-fix { border: 1px solid var(--vc-border, #2c3340); border-radius: 12px; background: var(--vc-card, #161b22); padding: 11px 13px; margin-bottom: 10px; }
.ml-root-fix.live { border-color: rgba(255,209,102,0.6); box-shadow: inset 0 0 0 1px rgba(255,209,102,0.3); }
.ml-root-head { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.ml-root-meta { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); font-weight: 400; }
.ml-root-live { font-size: 0.74rem; color: var(--vc-accent, #ffd166); font-weight: 700; }
.ml-root-vs { color: var(--vc-text-dim, #8b97a7); font-weight: 400; }
.ml-crest { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin: 0 5px; border-radius: 3px; }
.ml-root-sec { font-size: 0.78rem; font-weight: 700; margin: 16px 0 4px; }
.ml-root-sec.threat { color: #ff8fa3; }
.ml-root-sec.mine { color: #4ade80; }
.ml-root-p { margin: 4px 0; font-size: 0.88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ml-root-name { font-weight: 600; }
.ml-root-num { font-size: 0.74rem; color: var(--vc-text-dim, #9aa6b2); margin-inline-start: auto; }
.ml-root-mgrs { font-size: 0.7rem; color: var(--vc-text-dim, #8b97a7); margin-top: 1px; flex-basis: 100%; }
.ml-root-solo { color: #4ade80; font-weight: 600; font-size: 0.8rem; }
/* Captaincy badge: the one multiplier a match card has to show. Sits on the name,
   not in the holder count, because it multiplies the damage rather than the reach. */
.ml-root-cap { font-size: 0.66rem; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 4px;
  background: rgba(255,143,163,0.16); color: #ff8fa3; letter-spacing: 0.02em; }
.ml-root-cap.you { background: rgba(74,222,128,0.16); color: #4ade80; }
.ml-root-more { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); margin: 3px 0 0; }
.ml-root-empty { color: var(--vc-text-dim, #8b97a7); font-size: 0.78rem; line-height: 1.4; margin-top: 12px; }

/* Head-to-head. */
.ml-h2h-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ml-h2h-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--vc-border, #2c3340);
  background: var(--vc-card, #161b22); color: var(--vc-text, #e6edf3); font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.ml-h2h-chip:hover { border-color: rgba(94,194,255,0.5); }
.ml-h2h-chip.active { border-color: #5ec2ff; background: rgba(94,194,255,0.15); font-weight: 700; }
.ml-h2h-quickrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ml-h2h-quick { padding: 6px 11px; border-radius: 9px; border: 1px solid var(--vc-border, #2c3340);
  background: var(--vc-card, #161b22); color: var(--vc-text-dim, #b9c2cf); font-size: 0.8rem; cursor: pointer; font-family: inherit; }
.ml-h2h-quick:hover { border-color: rgba(94,194,255,0.5); color: var(--vc-text, #e6edf3); }
.ml-h2h-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ml-h2h-pick select { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--vc-border, #2c3340);
  background: var(--vc-card, #161b22); color: var(--vc-text, #e6edf3); font-size: 0.9rem; max-width: 100%; font-family: inherit; }
.ml-h2h-score { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; font-size: 0.92rem; }
.ml-h2h-score .s { font-weight: 800; font-size: 1.4rem; color: var(--vc-accent, #ffd166); }
.ml-h2h-score .nm { color: var(--vc-text-dim, #9aa); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ml-h2h-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ml-h2h-col-h { font-size: 0.78rem; font-weight: 700; margin-bottom: 6px; color: var(--vc-text-dim, #b9c2cf); }
.ml-h2h-plist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ml-h2h-p { font-size: 0.8rem; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--vc-border, #2c3340); background: var(--vc-card, #161b22); display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.ml-h2h-p .pp { color: var(--vc-accent, #ffd166); font-weight: 700; flex-shrink: 0; }
.ml-h2h-pn { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.ml-h2h-p.mine { border-color: rgba(94,194,255,0.4); }
.ml-h2h-p.theirs { border-color: rgba(255,143,163,0.35); }
.ml-fix-none { color: var(--vc-text-dim, #6b7686); font-size: 0.78rem; }

/* Player search (collapsed disclosure). */
.ml-srch-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--vc-border, #2c3340); border-radius: 12px; background: var(--vc-card, #161b22);
  color: var(--vc-text, #e6edf3); cursor: pointer; font: inherit; }
.ml-srch-h { font-size: 1.05rem; font-weight: 700; }
.ml-srch-chev { transition: transform .15s; color: var(--vc-text-dim, #8b97a7); }
.ml-srch-toggle.open .ml-srch-chev { transform: rotate(180deg); }
.ml-srch-panel { margin-top: 10px; }
.ml-srch-input { width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--vc-border, #2c3340);
  background: var(--vc-card, #161b22); color: var(--vc-text, #e6edf3); font-size: 0.95rem; margin-bottom: 10px; font-family: inherit; }
.ml-srch-results { display: flex; flex-direction: column; gap: 6px; }
.ml-srch-row { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--vc-border, #2c3340);
  border-radius: 10px; background: var(--vc-card, #161b22); }
.ml-srch-id { flex: 1; min-width: 0; }
.ml-srch-name { font-weight: 600; overflow-wrap: anywhere; }
.ml-srch-name .t { font-size: 0.76rem; color: var(--vc-text-dim, #8b97a7); margin-inline-start: 6px; }
.ml-srch-owners { font-size: 0.72rem; color: var(--vc-text-dim, #8b97a7); margin-top: 2px; line-height: 1.4; }
.ml-srch-stat { font-size: 0.78rem; color: var(--vc-text-dim, #9aa6b2); white-space: nowrap; text-align: center; direction: ltr; }
.ml-srch-stat b { color: var(--vc-accent, #ffd166); font-weight: 800; display: block; }
.ml-srch-stat span { font-size: 0.68rem; display: block; }

/* League Template XI — the 1080×1350 graphic scaled to the column width. The
   iframe is sized by aspect-ratio; its body is scaled inside (see scaleTxi). */
.ml-txi-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.ml-txi-frame { display: block; width: 100%; aspect-ratio: 1080 / 1350; border: 0; border-radius: 14px; background: #0d1117; overflow: hidden; }
.ml-txi-actions { text-align: center; margin-top: 10px; }
.ml-txi-share { padding: 9px 22px; border-radius: 999px; border: 1px solid var(--vc-accent, #ffd166); background: rgba(255,209,102,0.12);
  color: var(--vc-accent, #ffd166); font-weight: 800; font-size: 0.9rem; cursor: pointer; font-family: inherit; }
.ml-txi-share:hover { background: rgba(255,209,102,0.2); }
.ml-txi-share:disabled { opacity: 0.6; cursor: default; }
.ml-txi-load { text-align: center; color: var(--vc-text-dim, #8b97a7); font-size: 0.85rem; padding: 20px 0; }

/* Automatic league recap CTA (a declared capability — see the view's
   capabilities note; PL serves it today, IPL's flips on with feature/recap-tiers). */
.ml-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 11px 15px;
  background: var(--vc-surface); border: 1px solid var(--vc-border); border-inline-start: 3px solid var(--vc-accent); border-radius: 12px; }
.ml-recap-txt { flex: 1 1 260px; min-width: 0; }
.ml-recap-t { font-weight: 800; font-size: 0.92rem; color: var(--vc-text); }
.ml-recap-s { font-size: 0.8rem; color: var(--vc-text-sub); margin-top: 1px; }
.ml-recap-btn { flex: none; padding: 8px 18px; border-radius: 9px; border: none; background: var(--vc-accent);
  color: var(--vc-surface); font-weight: 800; font-size: 0.85rem; cursor: pointer; font-family: inherit; text-decoration: none; }
.ml-recap-btn[disabled] { opacity: 0.6; cursor: default; }
.ml-recap-msg { width: 100%; font-size: 0.82rem; color: var(--vc-text-sub); }
.ml-recap-msg a { color: var(--vc-accent); }
.ml-recap-msg:empty { display: none; }
/* Sport5 only: a private league reads for a MEMBER, so connecting one needs its
   invite link. Sized to shrink before the button does — the button must never
   wrap to its own row on a phone. */
.ml-recap-invite { flex: 1 1 220px; min-width: 0; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--vc-border); background: var(--vc-bg); color: var(--vc-text);
  font-family: inherit; font-size: 0.85rem; }
.ml-recap-invite::placeholder { color: var(--vc-text-sub); opacity: 0.8; }
.ml-recap-invite:focus { outline: none; border-color: var(--vc-accent); }
/* The mail switch, for a league already connected. A real checkbox rather than a
   styled div: it is a two-state setting, and the native control is the one that
   already works with a keyboard, a screen reader and a long-press. */
.ml-recap-mail { flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 0.82rem; color: var(--vc-text-sub); user-select: none; }
.ml-recap-mail input { accent-color: var(--vc-accent); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.ml-recap-mail input[disabled] { opacity: 0.5; cursor: default; }

/* Mobile: stack the two-column grids so a narrow viewport cannot be forced wider. */
@media (max-width: 600px) {
  .ml-h2h-cols, .ml-root-grid { grid-template-columns: 1fr; }
  .ml-own-section { min-width: 0; }
  .ml-rl-row, .ml-cb-card, .ml-club-card, .ml-club-row, .mlc-group { min-width: 0; }
  .ml-own-section.has-pts .ml-rl-collabels,
  .ml-own-section.has-pts .ml-rl-stats { flex: 0 0 118px; width: 118px; min-width: 118px; gap: 8px; }
  .ml-own-section.has-pts .ml-rl-collabels > span,
  .ml-own-section.has-pts .ml-rl-col { flex: 0 0 34px; }
  /* ⚠ THE (i) HAS TO EARN ITS 34px. The columns shrink from 46px to 34px here, and
     in flow the icon is 15px + a 6px margin beside a 14px "EO" = 35px — one pixel
     over, so it overflowed the column and shoved the title off the centre its value
     column below is centred on (measured at 390: label at x=88, values centred at
     ~86). 3px makes it 32px and the title sits where its numbers do. Desktop keeps
     the 6px: 35px inside 46px was never tight. */
  .ml-collabel-eo-wrap .ta-eo-hint { margin-inline-start: 3px; }

  /* Chips 2-up on mobile (like the captains grid), tighter cards. */
  .ml-chipboard { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ml-cb-card { padding: 9px 10px; }
  .ml-cb-name { font-size: 0.86rem; margin-bottom: 6px; }
  .ml-cb-stat { font-size: 0.76rem; }
  /* Full-width segmented tabs, exactly like the FDR view switcher on mobile. */
  .ml-tabs { display: flex; width: 100%; }
  .ml-tab { flex: 1; padding: 10px 8px; font-size: 0.9rem; text-align: center; }
}

/* ── Modals ─────────────────────────────────────────────────────────────────
   Two contents, one shell: a rival's squad (tap a standings row) and the paid
   wall (a free member taps Statistics). Sharing the shell is what keeps the
   dismiss behaviour — backdrop, ×, Escape — identical for both. */
.ml-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8, 11, 16, 0.72); overflow-y: auto; }
/* `dvh` after `vh`, not instead of it. On mobile Safari `100vh` is the LARGE
   viewport — the height the page would have with the toolbars retracted — so a
   card sized to it is clipped by the toolbars that are actually on screen. `dvh`
   is the height there is right now; the `vh` line stays as the fallback for
   browsers that do not know the unit. */
.ml-modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--vc-card, #161b22); border: 1px solid var(--vc-border, #2c3340);
  border-radius: 16px; padding: 14px 20px 12px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.ml-modal-x { position: absolute; top: 8px; inset-inline-end: 10px; background: none; border: 0;
  color: var(--vc-text-dim, #8b97a7); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; font-family: inherit; }
.ml-modal-x:hover { color: var(--vc-text, #e6edf3); }
.ml-modal-body { min-width: 0; }

/* A rival's squad. */
/* The squad modal's header is ONE centred identity block — team, manager, bonus.
   The symmetric inline padding is what makes the centring true: the card carries
   a × in one top corner and the round score in the other, so text centred across
   the full width would sit visibly off-axis. */
.ml-sq-head { text-align: center; padding-inline: 68px; margin-bottom: 8px; }
.ml-sq-title { font-weight: 800; font-size: 1.05rem; }
.ml-sq-sub { font-size: 0.8rem; color: var(--vc-text-dim, #8b97a7); margin-top: 1px; }
/* This round's points, on the TEAM NAME'S OWN LINE and opposite the ×.
   LOGICAL insets, so it takes the top-right corner in Hebrew and mirrors to the
   top-left in English — the same corner relative to the reader, which a physical
   `right` would get wrong on one of the two.
   Positioned against the BODY, not the card: the body's top edge is exactly where
   `.ml-sq-head` starts, so `top: 0` puts the badge on the title's first line
   without anybody having to guess the card's padding. Matching font-size and
   inherited line-height then put the two baselines on the same pixel. */
.ml-modal-squad .ml-modal-body { position: relative; }
.ml-sq-gw { position: absolute; top: 0; inset-inline-start: 0;
  display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.ml-sq-gw b { font-size: 1.05rem; font-weight: 800; color: var(--vc-accent, #ffd166); }
.ml-sq-gw span { font-size: 0.7rem; color: var(--vc-text-dim, #8b97a7); }
/* ── A rival's XI, DRAWN AS THE XI GRAPHIC ───────────────────────────────────
   This was a list: fifteen rows and five position headings, which ran to 945px
   of content in an 802px phone card — so the bench sat below the fold and a
   glance ("who did they captain, what did they bench") had to be scrolled.
   A formation answers the same question in one look and in half the height,
   because the eleven spends the modal's WIDTH instead of its length.

   The anatomy is the Template XI pitch's, not a second design: `.ts-pitch` /
   `.ts-dot` in shared/team-stats.css, which is itself the on-page twin of the
   shared Best-XI PNG renderer (src/renderer/pl/plBestXiRenderer.js) that this
   very board already embeds as `.ml-txi-frame`. Those rules are scoped `.ts-page`
   and reaching them would mean pulling a whole page's stylesheet into a modal,
   so they are PORTED here at modal size — the same move team-stats.css itself
   records making from public/vc/team-news.html's lineup pitch. Keep the two in
   step: gradient, centre circle, halfway line, disc, rim crest, gold pill.

   The two bidi decisions travel with it, and they are not style choices:
   · The ROW is pinned `direction: ltr`. It is a GRID, whose columns flow along
     the container's direction, so on the Hebrew page the whole eleven would be
     mirrored and the left-back would line up on the right.
   · Nothing else is pinned. The rim badges use PHYSICAL left/right (as the PNG
     renderer does) so the armband and the crest sit on the same corners in both
     editions, and the name and club take `unicode-bidi: plaintext` so each picks
     its OWN direction — which is what keeps a Latin surname inside a Hebrew
     pitch from being reordered. */
.ml-pitch {
  background: linear-gradient(180deg, #1e5c28 0%, #2d7a3a 40%, #2d7a3a 60%, #1e5c28 100%);
  border-radius: 12px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  /* min-height, not height: the rows flex to fill it, so a 3-4-3 and a 3-5-2 are
     the same size instead of one leaving a band of empty grass. */
  min-height: 330px;
}
.ml-pitch::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
  pointer-events: none;
}
.ml-pitch::after {
  content: ''; position: absolute; top: 50%; left: 8%; right: 8%;
  height: 2px; background: rgba(255, 255, 255, 0.10); pointer-events: none;
}
.ml-pitch-rows { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.ml-pitch-row, .ml-pitch-bench-row {
  display: grid; width: 100%;
  justify-items: center; align-items: center;
  gap: 4px; position: relative; z-index: 1;
  direction: ltr;
}
.ml-pitch-row { flex: 1 1 auto; }
.ml-pitch-bench-row { align-items: start; }
/* ── The bench (dugout) ──────────────────────────────────────────────────────
   Inside the pitch but visibly OFF it: a darker strip below the grass, above the
   touchline rule. Same dot, dimmed and shrunk, because a bench player is the
   same kind of fact at a lower weight. `flex: 0 0 auto` keeps the strip its
   natural height so the eleven above still flexes to fill the grass. */
.ml-pitch-bench {
  flex: 0 0 auto; position: relative; z-index: 1;
  margin: 2px -8px -14px;            /* bleed to the pitch's padding edges */
  padding: 7px 8px 9px;
  background: rgba(0, 0, 0, 0.28);
  border-top: 2px solid rgba(255, 255, 255, 0.14);
}
.ml-pitch-bench-label {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72); margin-bottom: 5px; text-align: center;
}
.ml-pitch-bench .ml-pd { max-width: 74px; }
/* The dot carries its own dimming, not the strip — under Bench Boost these
   four DID score, and the class that says so is on the dot. */
.ml-pd.bench { opacity: 0.86; }
.ml-pitch-bench .ml-face.pitch { width: 34px; height: 34px; font-size: 0.6rem; }
.ml-pitch-bench .ml-pd-crest { width: 14px; height: 14px; }
.ml-pitch-bench .ml-pd-name { font-size: 0.6rem; }
.ml-pitch-bench .ml-pd-club { font-size: 0.54rem; }
.ml-pitch-bench .ml-pd-val { font-size: 0.58rem; padding: 0 7px; }

/* ── The dot ─────────────────────────────────────────────────────────────────
   A LIGHT DISC holding the face (not a bare photo — the disc is what makes
   fifteen different crops read as one set), the club crest on the rim, the
   armband as a gold pill on the opposite rim, then the name, the club, and the
   points pill. */
.ml-pd {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; max-width: 88px; min-width: 0; position: relative;
}
.ml-pd-disc { position: relative; display: inline-flex; flex: none; }
/* `.ml-face` is already a round, overflow-hidden disc — so the rim badges are
   its SIBLINGS inside `.ml-pd-disc`, never its children, or the disc would clip
   them. Light fill + dark initials, as on the pitch this is drawn from: a dark
   disc on dark grass loses the player's outline. */
.ml-face.pitch {
  width: 44px; height: 44px; font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.9); color: #1a3a22;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.ml-pd-crest {
  position: absolute; bottom: -2px; right: -4px;
  width: 17px; height: 17px; border-radius: 50%;
  object-fit: contain; background: #f7f7f7; padding: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* The armband, where the Best-XI renderer puts it: a gold pill on the disc's
   rim, ringed in the pitch green so it reads off the face behind it. It GROWS
   for `C×3` / `V×2` rather than clipping — the multiplier is the reason the
   score beside it is not the player's raw one. */
.ml-pd-cap {
  position: absolute; top: -4px; left: -6px; z-index: 2;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd166 0%, #fcc61d 100%);
  color: #102030; border: 2px solid #1e5c28; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.56rem; font-weight: 900; line-height: 1; white-space: nowrap;
  direction: ltr; unicode-bidi: isolate;
}
.ml-pd-cap.v { background: linear-gradient(180deg, #cfd8e3 0%, #9aa6b2 100%); }
/* A DECIDED auto-sub: the substitute is in the team and reads like it; the man
   he replaced stays on the bench, dimmed and struck through, so the swap is
   legible rather than a player silently disappearing. */
.ml-pd-sub {
  position: absolute; bottom: -3px; left: -5px; z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #1e5c28; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900; line-height: 1;
}
.ml-pd-sub.in { background: #3fb950; color: #08220f; }
.ml-pd-sub.out { background: #30363d; color: #cfd8e3; }
.ml-pd.subbed-in .ml-face.pitch { box-shadow: 0 0 0 2px #3fb950, 0 2px 5px rgba(0, 0, 0, 0.4); }
.ml-pd.subbed-out { opacity: 0.6; }
.ml-pd.subbed-out .ml-pd-name { text-decoration: line-through; }
.ml-pd-name {
  font-size: 0.68rem; font-weight: 700; color: #f7f7f7;
  text-align: center; line-height: 1.15; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
/* The club sits in the slot the Template XI dot gives to position + price. The
   POSITION would only repeat what the row a dot sits in already says; the club
   would not. Games with badge art render a crest on the rim instead and never
   reach this line. */
.ml-pd-club {
  font-size: 0.58rem; font-weight: 600; color: rgba(255, 255, 255, 0.8);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext; line-height: 1.2;
}
.ml-pd-val {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3px;
  color: #102030; background: #fcc61d;
  border-radius: 10px; padding: 0 9px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* A MULTIPLIED score — the captain's, and the vice's under Sport5's dual-captain
   bonus. The halo says the number on the pill is not the number the player
   scored, which is the one thing a doubled figure has to admit to; the armband
   right above it says by how much. */
.ml-pd-val.mult { box-shadow: 0 0 0 2px rgba(252, 198, 29, 0.32); }
/* Not knowable, never a fabricated 0 — a 0 would read as "he blanked". */
.ml-pd-val.none { background: rgba(255, 255, 255, 0.22); color: #e6edf3; }

.ml-sq-actions { margin-top: 10px; text-align: center; }
.ml-sq-full { display: inline-block; text-decoration: none; font-weight: 700; font-size: 0.88rem;
  color: var(--vc-accent, #ffd166); border: 1px solid var(--vc-accent, #ffd166); border-radius: 999px; padding: 6px 20px; }
.ml-sq-full:hover { background: rgba(255,209,102,0.12); }

/* The paid wall. */
.ml-up-title { font-weight: 800; font-size: 1.15rem; padding-inline-end: 28px; }
.ml-up-sub { font-size: 0.88rem; color: var(--vc-text-dim, #9aa6b2); margin: 6px 0 14px; line-height: 1.5; }
.ml-up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ml-up-list li { position: relative; padding-inline-start: 26px; font-size: 0.9rem; line-height: 1.5; color: var(--vc-text, #e6edf3); }
.ml-up-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--vc-accent, #ffd166); font-weight: 800; }
.ml-up-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ml-up-cta { text-decoration: none; background: var(--vc-accent, #ffd166); color: #1a1205; font-weight: 800;
  font-size: 0.92rem; border-radius: 10px; padding: 11px 26px; }
.ml-up-cta:hover { filter: brightness(1.07); }
.ml-up-later { background: none; border: 0; color: var(--vc-text-dim, #8b97a7); font-size: 0.86rem;
  cursor: pointer; font-family: inherit; padding: 11px 8px; }
.ml-up-later:hover { color: var(--vc-text, #e6edf3); }

/* ── The squad modal on a phone ──────────────────────────────────────────────
   Measured on an iPhone 12 (390x844). The pitch has to fit WITHOUT A SCROLL —
   the list it replaced did not, and that is why it was replaced — so on the
   narrowest column the eleven gets there by shrinking, exactly once:

     390 − 2×10 (backdrop) − 2×13 (card) = 344px of pitch
     − 2×4 (pitch padding) = 336px across the widest line
     ÷ 5 columns (a 3-5-2) = 67px per dot, less a 4px gap ≈ 63px

   so the dot caps at 62 and every part of it steps down with it. Nothing is
   dropped but the club line: at 62px a full Hebrew club name is an ellipsis
   stub, the crest games carry their badge on the rim regardless, and the club
   stays on each dot's `title`. Same rows, same order, same copy — one size
   down, which is the move the Template XI pitch makes at 560px too. */
@media (max-width: 600px) {
  .ml-modal { padding: 10px; align-items: flex-start; }
  .ml-modal-card { padding: 12px 13px 14px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .ml-modal-squad .ml-sq-title { font-size: 1rem; }
  /* The badge is one line but still ~60px wide with a three-digit score, so the
   head's padding has to clear it or a long centred team name runs underneath. */
  .ml-modal-squad .ml-sq-head { margin-bottom: 6px; padding-inline: 62px; }
  .ml-modal-squad .ml-sq-gw b { font-size: 1rem; }
  .ml-pitch { min-height: 300px; padding: 12px 4px; gap: 6px; }
  .ml-pitch::before { width: 62px; height: 62px; }
  .ml-pitch-rows { gap: 6px; }
  .ml-pitch-bench { margin: 2px -4px -12px; padding: 6px 5px 8px; }
  .ml-pd { max-width: 62px; gap: 1px; }
  .ml-face.pitch { width: 38px; height: 38px; font-size: 0.66rem; }
  .ml-pd-crest { width: 14px; height: 14px; bottom: -1px; right: -3px; }
  .ml-pd-cap { min-width: 15px; height: 15px; padding: 0 3px; font-size: 0.5rem; top: -3px; left: -4px; }
  .ml-pd-sub { width: 14px; height: 14px; font-size: 0.52rem; bottom: -2px; left: -4px; }
  .ml-pd-name { font-size: 0.6rem; }
  /* The club is the first thing to go: at this width the name and the score are
     what a reader is actually reading off the pitch. */
  .ml-pd-club { display: none; }
  .ml-pd-val { font-size: 0.58rem; padding: 0 7px; }
  .ml-pitch-bench .ml-pd { max-width: 60px; }
  .ml-pitch-bench .ml-face.pitch { width: 32px; height: 32px; font-size: 0.58rem; }
  .ml-pitch-bench .ml-pd-name { font-size: 0.56rem; }
  .ml-pitch-bench .ml-pd-val { font-size: 0.54rem; padding: 0 6px; }
  .ml-modal-squad .ml-sq-actions { margin-top: 8px; }
  .ml-modal-squad .ml-sq-full { padding: 5px 18px; font-size: 0.82rem; }
}

/* ── Impact tiles: the shared board's face inside WC's tile ──────────────────
   `wc-impact-tiles.css` sizes `.shirt-wrap img` for a 42px SHIRT graphic. The
   shared board draws a round face disc (.ml-face) there instead, so the two need
   one bridging rule — without it the disc inherits the shirt's `object-fit` box
   and renders squashed. Everything else in the tile is WC's CSS, unchanged. */
.ta-impact-tile .shirt-wrap .ml-face { width: 44px; height: 44px; font-size: 0.9rem; }
.ta-impact-tile .shirt-wrap .ml-face .ml-face-img { width: 100%; height: 100%; filter: none; }
.ta-impact-tile .ta-impact-shirt-box { display: flex; align-items: center; justify-content: center; }
.ta-impact-tile .team-sub { overflow-wrap: anywhere; }

/* ── Combinations: "who owns all of them?" ───────────────────────────────────
   Deliberately built from the search panel's own parts (.ml-srch-input, the card
   border/radius pair) so the two tools read as one surface rather than as a
   feature bolted under a feature.

   ⚠ LOGICAL PROPERTIES ONLY — this board ships Hebrew (RTL) and English (LTR)
   from one stylesheet, so a physical `margin-left` here is a mirror bug on one
   of them. */
.mlc-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mlc-slot { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding-block: 6px; padding-inline: 10px 6px; border-radius: 999px;
  border: 1px solid var(--vc-border, #2c3340); background: var(--vc-card, #161b22);
  color: var(--vc-text, #e6edf3); font-size: 0.85rem; font-weight: 600; font-family: inherit; }
.mlc-slot-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-x { border: 0; background: none; cursor: pointer; line-height: 1; padding: 2px 6px;
  border-radius: 999px; font-size: 1.05rem; color: var(--vc-text-dim, #8b97a7); }
.mlc-x:hover { color: var(--vc-text, #e6edf3); }
.mlc-add { cursor: pointer; border-style: dashed; color: var(--vc-text-dim, #8b97a7);
  padding-inline: 10px; background: none; }
.mlc-add:hover { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166); }
.mlc-plus { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--vc-bg-alt, #0d1117); font-size: 0.95rem; font-weight: 700; }
.mlc-clear { border: 0; background: none; cursor: pointer; padding: 6px 4px;
  font-size: 0.78rem; color: var(--vc-text-dim, #8b97a7); text-decoration: underline; font-family: inherit; }
.mlc-clear:hover { color: var(--vc-text, #e6edf3); }

/* ── The Combinations panel ───────────────────────────────────────────────
   Reported 2026-08-31: the tool "feels hidden". It was styled exactly like the
   eight BOARDS around it while being the only thing on the tab you can ask a
   question with, so it read as one more list to scroll past. It now carries an
   accent outline and a tinted ground — the one section on this tab that does.
   ⚠ NO leading-edge rule: a 3px accent bar was tried on 2026-08-31 and the owner
   had it removed the same day. The even outline is the whole treatment. */
.mlc-panel { border: 1px solid rgba(255,209,102,0.34); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,209,102,0.07), rgba(255,209,102,0.02) 120px, transparent);
  padding: 16px 16px 18px; }
.mlc-panel-h { display: flex; align-items: center; gap: 9px; }
.mlc-panel-h .ml-own-h { font-size: 1.2rem; margin: 0; }
.mlc-panel-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; font-size: 0.95rem;
  background: rgba(255,209,102,0.16); }
.mlc-panel .ml-own-sub { margin-top: 4px; }
/* The worked example — the shortest possible answer to "what is this for?". */
.mlc-eg { font-size: 0.8rem; color: var(--vc-accent, #ffd166); opacity: 0.92;
  background: rgba(255,209,102,0.08); border-radius: 8px; padding: 7px 11px;
  margin: 0 0 12px; line-height: 1.5; }

/* The group chip is a query BUILDER, not a label: club, position, minimum. */
.mlc-group { gap: 6px; padding-inline: 8px 6px; flex-wrap: wrap; }
.mlc-sel { font: inherit; font-size: 0.82rem; font-weight: 600; font-family: inherit;
  color: var(--vc-text, #e6edf3); background: var(--vc-bg-alt, #0d1117);
  border: 1px solid var(--vc-border, #2c3340); border-radius: 8px; padding: 4px 6px;
  max-width: 10.5rem; cursor: pointer; }
.mlc-sel:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: 1px; }
.mlc-min { display: inline-flex; align-items: center; gap: 4px; }
.mlc-min-l { font-size: 0.74rem; font-weight: 600; color: var(--vc-text-dim, #8b97a7); }
.mlc-min-v { min-width: 1.1rem; text-align: center; font-weight: 800;
  color: var(--vc-accent, #ffd166); font-size: 0.95rem; }
.mlc-step { width: 22px; height: 22px; padding: 0; line-height: 1; cursor: pointer;
  border: 1px solid var(--vc-border, #2c3340); border-radius: 6px; background: var(--vc-bg-alt, #0d1117);
  color: var(--vc-text, #e6edf3); font: inherit; font-size: 0.9rem; font-weight: 700; }
.mlc-step:hover:not(:disabled) { border-color: var(--vc-accent, #ffd166); color: var(--vc-accent, #ffd166); }
.mlc-step:disabled { opacity: 0.35; cursor: default; }
.mlc-step:focus-visible { outline: 2px solid var(--vc-accent, #ffd166); outline-offset: 1px; }

.mlc-picker { margin-bottom: 10px; }
.mlc-results { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.mlc-res { display: flex; align-items: center; gap: 10px; padding: 7px 11px; cursor: pointer;
  border: 1px solid var(--vc-border, #2c3340); border-radius: 10px; background: var(--vc-card, #161b22); }
.mlc-res:hover, .mlc-res:focus-visible { border-color: var(--vc-accent, #ffd166); outline: none; }
.mlc-res-nm { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.mlc-res-nm .t { font-size: 0.74rem; color: var(--vc-text-dim, #8b97a7); margin-inline-start: 6px; }
.mlc-res-ct { font-size: 0.78rem; font-weight: 700; color: var(--vc-accent, #ffd166);
  white-space: nowrap; direction: ltr; }

/* The empty state IS the add control: it fills the readout, which is where the
   answer will appear and therefore where a reader aims first. */
.mlc-empty { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box; padding: 20px 12px; cursor: pointer;
  border: 1px dashed var(--vc-border, #2c3340); border-radius: 10px; background: none;
  color: var(--vc-text-dim, #8b97a7); font-size: 0.9rem; font-weight: 600; font-family: inherit; }
.mlc-empty:hover { color: var(--vc-accent, #ffd166); border-color: var(--vc-accent, #ffd166); }

.mlc-readout { border: 1px solid var(--vc-border, #2c3340); border-radius: 10px;
  background: var(--vc-card, #161b22); padding: 14px; }
.mlc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* ⚠ NO `direction: ltr` HERE. The team-stats twin's headline is a bare number so
   forcing LTR is safe there; this one is a SENTENCE ("3 מתוך 8"), and forcing LTR
   reorders it to "מתוך 8 3". Digits inside RTL text are already laid out
   correctly by the bidi algorithm — the override was the bug. */
.mlc-big { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--vc-accent, #ffd166); }
.mlc-cap { font-size: 0.86rem; font-weight: 600; color: var(--vc-text-dim, #8b97a7); }
.mlc-none { font-size: 0.9rem; font-weight: 600; color: var(--vc-text, #e6edf3); text-align: center; padding: 4px 0; }
.mlc-holders { display: flex; flex-wrap: wrap; gap: 8px; }
.mlc-holder { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--vc-bg-alt, #0d1117); border: 1px solid var(--vc-border, #2c3340);
  font-size: 0.82rem; font-weight: 600; color: var(--vc-text, #e6edf3); }
/* Your own row is MARKED, never removed — "you and two others" is the sentence,
   and dropping yourself would make the count disagree with the standings above. */
.mlc-holder.is-you { border-color: var(--vc-accent, #ffd166); color: var(--vc-accent, #ffd166); }
.mlc-you { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; }
.mlc-holder.is-more { background: none; border-style: dashed; color: var(--vc-text-dim, #8b97a7); font-weight: 500; }

@media (max-width: 560px) {
  .mlc-slot, .mlc-holder { font-size: 0.78rem; }
  .mlc-res-nm { font-size: 0.82rem; }
  .mlc-big { font-size: 1.4rem; }
}

/* UEFA's cold-start steps. The board's other games put a form here; UEFA puts
   ordered instructions, because its first step is a LEAGUE code and its second
   is the team — see uefaConnectStepsHtml. */
.ml-uefa-steps { display: block; }
.ml-uefa-steps .ml-steps { margin: 0 0 12px; padding-inline-start: 20px; line-height: 1.7; font-size: 0.86rem; }
.ml-uefa-steps .ml-steps li { margin-bottom: 6px; }
.ml-uefa-analyzer { color: var(--vc-accent, #2f81f7); text-decoration: none; white-space: nowrap; }
.ml-uefa-analyzer:hover { text-decoration: underline; }
/* A one-item list is not a sequence — drop the number so it reads as an
   instruction rather than "step 1 of 1". */
.ml-steps-single { list-style: none; padding-inline-start: 0; }