/* ════════════════════════════════════════════════════════════════════════
   STANDINGS of the other leagues — the redesign (22.10.2026), from the
   Claude Design "Other leagues" file: Winner League, Champions League,
   EuroCup, the League Cup and the national teams.
   A zone (what a place leads to) is a shape before it is a colour: the first
   zone a solid square, the second a hatched one, the third a dashed outline,
   so it reads without colour. Zones are lines with words in the legend, and a
   dashed rule between two zones in the table. Groups get chips that stay at the
   top while the page scrolls, and on a phone the columns beyond played / won /
   lost fold under each row ("more columns"). Scoped to #st-groups.
   ════════════════════════════════════════════════════════════════════════ */

#st-groups { display: flex; flex-direction: column; gap: 0; }
#st-groups[hidden], #st-groups.hidden { display: none; }

/* ── The league's line, the early-season note, the legend ── */
.ol-head { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
.ol-head > * { margin: 0; }
.ol-lg { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--ds-line); font: 800 var(--ds-fs-17) var(--ds-font); }
.ol-lgsq { flex: none; width: 12px; height: 12px; background: var(--ds-lg, var(--ds-ink)); }
.ol-early { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--ds-line); font: 600 var(--ds-fs-14) var(--ds-font); color: var(--ds-ink2); }
.ol-early i { flex: none; width: 10px; height: 10px; border: 2px solid var(--ds-warn); border-radius: 50%; }
.ol-legend { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.ol-lgi { display: flex; align-items: center; gap: 10px; font: 500 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); }
.ol-lgi b { font-weight: 800; color: var(--ds-ink); }
.ol-more { display: none; align-self: flex-start; margin: 12px 0 0; min-height: var(--ds-h-btn); padding: 0 16px; border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink); font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; }
.ol-more[aria-pressed="true"] { background: var(--ds-ink); color: var(--ds-card); }
.ol-more:focus-visible, .ol-chip:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

/* ── Zone shapes ── */
.ol-zs { display: inline-block; flex: none; width: 12px; height: 12px; box-sizing: border-box; vertical-align: middle; }
.ol-z0 { background: var(--ds-ok); }
.ol-z1 { border: 1.5px solid var(--ds-warn); background: repeating-linear-gradient(135deg, var(--ds-warn) 0 2px, transparent 2px 4px); }
.ol-z2 { border: 2px dashed var(--ds-live); background: transparent; }
.ol-z3 { border: 2px dotted var(--ds-ink2); background: transparent; }
.ol-zn { border: 1.5px solid var(--ds-ink2); background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ds-ink2) 50%, transparent calc(50% + 1px)); }

/* ── Groups: chips that stay at the top, a title per table ── */
.ol-block { display: flex; flex-direction: column; }
.ol-comp { margin: 18px 0 0; font: 800 var(--ds-fs-17) var(--ds-font); }
.ol-chips { scrollbar-width: none; position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 12px 0; margin: 4px 0 0; background: var(--ds-bg); }
.ol-chips-k { flex: none; margin-inline-end: 6px; font: 700 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.ol-chip {
  flex: none; min-width: var(--ds-h-btn); min-height: var(--ds-h-btn); padding: 0 12px; border: 1.5px solid var(--ds-line); border-radius: 0;
  background: transparent; color: var(--ds-ink); font: 800 var(--ds-fs-15) var(--ds-font-num); cursor: pointer;
}
.ol-chip.on { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.ol-gb { margin-top: 16px; scroll-margin-top: 72px; }
.ol-gt { margin: 0; padding: 14px 16px 12px; background: var(--ds-card); border-top: 2px solid var(--ds-ink); font: 900 var(--ds-fs-20) var(--ds-font); }
.ol-gt + .ol-card { border-top: 0; }
.ol-block > .ol-gb:first-of-type { margin-top: 8px; }

/* ── The table ── */
.ol-card { margin-top: 0; }
#screen-standings .ol-t tbody tr.ol-zb td { border-top: 1.5px dashed var(--ds-ink2); }
#screen-standings .ol-t td.st-num { min-width: 44px; }
.ol-rk { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; }
.ol-rk b { min-width: 14px; text-align: center; font: 700 16px/1 var(--ds-font-num); color: var(--ds-ink2); }
#screen-standings .ol-t tr.ol-zh td {
  height: auto; padding: 10px 12px; text-align: start; background: color-mix(in srgb, var(--ds-ink) 6%, var(--ds-card));
  border-bottom: 1px solid var(--ds-line); font: 500 var(--ds-fs-14) var(--ds-font); color: var(--ds-ink2);
}
#screen-standings .ol-t tr.ol-zh td:first-child { position: static; }
#screen-standings .ol-t tr.ol-zh b { margin-inline: 10px 0; font-weight: 800; color: var(--ds-ink); }
#screen-standings .ol-t tr.ol-zh .ol-zs { vertical-align: -1px; }
#screen-standings .ol-t tr.ol-xr { display: none; }

/* ── A phone: played / won / lost, the rest under the row on request ── */
@container (max-width: 639px) {
  /* Owner, 1.11: no "More columns" button — the table scrolls sideways with a finger, as the NBA's does. */
  .ol-more { display: none; }
  #screen-standings .ol-t .ol-xc { display: table-cell; }
  #screen-standings .ol-t tr.ol-xr { display: none; }
  #screen-standings .ol-t tr.ol-xr td { position: static; height: auto; padding: 0 12px 10px; padding-inline-start: 48px; border: 0; box-shadow: inset 0 -1px 0 var(--ds-line); background: var(--st-bg); display: table-cell; font: 600 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); text-align: start; }
  #screen-standings .ol-t tr.ol-xr td span { display: inline-block; margin-inline-end: 16px; }
  #screen-standings .ol-t tr.ol-xr b { font: 700 16px var(--ds-font-num); color: var(--ds-ink); margin-inline-start: 4px; }
  #st-groups.ol-showmore .ol-t tr.ol-r td { border-bottom-color: transparent; }
  #screen-standings .ol-t td.st-num { min-width: 40px; }
}

/* The two pinned columns lose a collapsed border while they stick, so the row line was cut
   under them; a shadow draws it instead and cannot be lost. */
#screen-standings .st-table tbody td:nth-child(-n+2) { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--ds-line); }
#screen-standings .ol-t tbody tr.ol-zb td:nth-child(-n+2) {
  border-top: 0; box-shadow: inset 0 -1px 0 var(--ds-line);
  background-image: linear-gradient(90deg, var(--ds-ink2) 50%, transparent 0); background-size: 6px 1.5px; background-repeat: repeat-x; background-position: top;
}

/* ── FIBA windows: a card per window ── */
.wt2-w { margin-top: 16px; background: var(--ds-card); border-top: 2px solid var(--ds-ink); }
.wt2-h { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "range rec" "sqs rec"; align-items: center; gap: 6px 16px; padding: 14px 16px 10px; }
.wt2-range { grid-area: range; font: 800 var(--ds-fs-17) var(--ds-font-num); }
.wt2-rec { grid-area: rec; display: flex; gap: 18px; }
.wt2-rec span { display: flex; flex-direction: column; align-items: center; }
.wt2-rec b { font: 800 40px/1 var(--ds-font-num); }
.wt2-rec small { font: 700 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.wt2-sqs { grid-area: sqs; display: flex; gap: 4px; }
.wt2-sq { display: inline-block; flex: none; width: 10px; height: 10px; box-sizing: border-box; margin-inline-end: 6px; }
.wt2-sqs .wt2-sq { margin: 0; }
.wt2-sq.won, .wt2-g.won .wt2-sq { background: var(--ds-ok); }
.wt2-sq.lost, .wt2-g.lost .wt2-sq { border: 2px solid var(--ds-live); background: transparent; }
.wt2-gl { list-style: none; margin: 0; padding: 0; }
.wt2-g { display: grid; grid-template-columns: minmax(0, 1.2fr) 52px 48px minmax(0, 1.4fr) 64px 84px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px; border-top: 1px solid var(--ds-line); font: 600 var(--ds-fs-14) var(--ds-font); }
.wt2-opp { font: 800 var(--ds-fs-15) var(--ds-font); overflow-wrap: anywhere; }
.wt2-ha { justify-self: start; padding: 2px 8px; border: 1.5px solid var(--ds-ink); font: 700 var(--ds-fs-12) var(--ds-font); text-align: center; }
.wt2-ha.away { border-style: dashed; }
.wt2-d, .wt2-c { color: var(--ds-ink2); font-size: var(--ds-fs-13); }
.wt2-sc { font: 600 20px var(--ds-font-num); color: var(--ds-ink2); direction: ltr; text-align: start; }
.wt2-sc b { font-weight: 800; color: var(--ds-ink); }
.wt2-res { display: inline-flex; align-items: center; font: 800 var(--ds-fs-13) var(--ds-font); }
.wt2-g.won .wt2-res { color: var(--ds-ok); }
.wt2-g.lost .wt2-res { color: var(--ds-live); }
@container (max-width: 639px) {
  .wt2-g { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "opp ha d" "c sc res"; gap: 2px 10px; padding: 8px 12px; }
  .wt2-opp { grid-area: opp; } .wt2-ha { grid-area: ha; } .wt2-d { grid-area: d; } .wt2-c { grid-area: c; } .wt2-sc { grid-area: sc; } .wt2-res { grid-area: res; }
}

/* The narrowest phones: played moves under the row with the rest, so the team keeps its room. */
.ol-pcs { display: none !important; }
@container (max-width: 379px) {
  #screen-standings .ol-t .ol-pc { display: none; }
  #screen-standings .ol-t tr.ol-xr td .ol-pcs { display: inline-block !important; }
  #screen-standings .st-team-name { font-size: var(--ds-fs-15); }
}