/* ═══════════════════════════════════════════════════════════════════════════
   A cup drawn from its matches rows (js/tournaments/rows-renderer.js)

   Set like the rest of the cup page (tournament-detail-v2.css): hairlines,
   not boxes; figures for every number; floodlight blue for what is lit (the
   leader, the teams going through, a match in play) and silver for what
   acts. Headings sit under .cup-rows so the page's .tdv2-bracket-host rules
   for h3 and h4 do not reach them. Nothing here widens the page: the bracket
   and the tables scroll sideways inside their own boxes.
   ═══════════════════════════════════════════════════════════════════════════ */

.cup-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  max-width: 100%;
}

.cup-rows .cup-rows__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cup-rows .cup-rows__heading {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-align: left;
}

/* A round's title and a bracket column's title: tracked small capitals
   over a hairline, like the labels over the table. */
.cup-rows .cup-rows__round-title,
.cup-rows .cup-rows__column-title {
  margin: 0 0 var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  line-height: var(--leading-normal);
  text-align: left;
  text-transform: uppercase;
}

/* ── The league table ───────────────────────────────────────────────────── */
.cup-rows__table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.cup-rows__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 0.35rem a side keeps the figures tight enough that a group's table fits
   a 360px panel with no scroll. */
.cup-rows__table th {
  padding: var(--space-2) 0.35rem;
  border-bottom: 1px solid var(--border-strong);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.cup-rows__table abbr {
  text-decoration: none;
}

.cup-rows__table td {
  padding: var(--space-3) 0.35rem;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-figures);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.cup-rows__table .cup-rows__col--rank {
  width: 2.5rem;
  padding-left: 0;
  text-align: left;
}

.cup-rows__table td.cup-rows__col--rank {
  font-size: var(--text-xl);
}

.cup-rows__table .cup-rows__col--team {
  width: 100%;
  text-align: left;
  white-space: normal;
}

/* The points stand centred under PTS, clear of the table's right edge. */
.cup-rows__table .cup-rows__col--points {
  padding-right: 0;
  text-align: center;
}

.cup-rows__table td.cup-rows__col--points {
  color: var(--text-primary);
  font-size: var(--text-xl);
}

/* The teams going through: their figures come up and their place is lit,
   1st place in white on the LED blue. A dashed silver line runs under the
   last place that goes through. The cup's rules say how to read it. */
.cup-rows__table tr.is-through td {
  color: var(--text-primary);
}

.cup-rows__table tr.is-through td.cup-rows__col--rank {
  color: var(--led-bright);
}

/* Every place is one width, so the figures line up over each other. */
.cup-rows__rank {
  display: inline-block;
  min-width: 1.4em;
  line-height: 1.4;
  text-align: center;
}

.cup-rows__table tr.is-leader .cup-rows__rank {
  border-radius: 4px;
  background: var(--led);
  color: #fff;
}

.cup-rows__table tr.is-cut td {
  border-bottom: 1px dashed rgba(200, 207, 216, 0.5);
}

/* The viewer's club stands in the floodlight, as its match does. */
.cup-rows__table tr.is-yours td {
  background: color-mix(in srgb, var(--led-bright) 10%, transparent);
}

.cup-rows__table tr.is-yours .cup-rows__team-name {
  color: var(--led-pale);
}

.cup-rows__team:hover .cup-rows__team-name,
.cup-rows__team:focus-visible .cup-rows__team-name {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cup-rows__team {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cup-rows__team-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.25;
}

/* Points that only Buchholz put above the next team's: a dotted rule as
   wide as the figure, its dots spaced to start and end with it (a fixed
   step left two dots under one digit, and widening the rule set it off
   centre), and the note that says why. */
.cup-rows__tiebreak {
  position: relative;
  cursor: help;
  outline: none;
}

.cup-rows__tiebreak::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: radial-gradient(circle, currentColor 0.9px, transparent 1.1px) 0 0 / 3px 2px space no-repeat;
}

/* The note opens to the left, over the number columns, not the names. */
.cup-rows__tiebreak-tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  z-index: 20;
  width: 280px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0c1850;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-variant-numeric: normal;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(4px, -50%);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}

.cup-rows__tiebreak-tip strong {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.cup-rows__tiebreak:hover .cup-rows__tiebreak-tip,
.cup-rows__tiebreak:focus .cup-rows__tiebreak-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.cup-rows__badge {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 4px;
}

.cup-rows__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Groups: each a table under its own rule, then its rounds ───────────── */
.cup-rows__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-12) var(--space-10);
}

.cup-rows__group {
  min-width: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}

.cup-rows .cup-rows__group > .cup-rows__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
}

/* ── Rounds, each a list of cards ───────────────────────────────────────── */
.cup-rows__rounds {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.cup-rows__group .cup-rows__rounds {
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.cup-rows__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  column-gap: var(--space-16);
}

/* ── The bracket: rounds side by side, scrolling in their own box ───────── */
.cup-rows__bracket {
  max-width: 100%;
  padding-bottom: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.cup-rows__bracket-grid {
  display: grid;
  grid-auto-columns: 14rem;
  gap: var(--space-10) var(--space-8);
  width: max-content;
}

.cup-rows__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Each round's matches spread down its column, so a later round sits
   between the matches that feed it. */
.cup-rows__column-cards {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--space-3);
}

.cup-rows .cup-rows__column.is-upcoming .cup-rows__column-title {
  border-bottom-style: dashed;
  color: var(--text-muted);
}

/* The round being played is lit, its title and the rule under it. */
.cup-rows .cup-rows__column.is-current .cup-rows__column-title {
  border-bottom-color: var(--led-bright);
  color: var(--led-bright);
}

/* ── A match ────────────────────────────────────────────────────────────── */
/* Every match is the score row of Live now over the table (tournament-
   detail-v2.css): the names in Marcellus, the score in figures, and its state
   in one plain line under them. In a round it reads across, home, score,
   away; in a bracket column the two sides sit one above the other. */
.cup-card {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

button.cup-card {
  cursor: pointer;
}

/* The hairline under a match draws over in silver on hover and focus. */
button.cup-card::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

button.cup-card:hover::after,
button.cup-card:focus-visible::after {
  transform: scaleX(1);
}

button.cup-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cup-card__team,
.cup-card__team-name,
.cup-card__name {
  font-family: var(--font-display);
  line-height: 1.25;
  transition: color var(--duration) var(--ease-out);
}

button.cup-card:hover .cup-card__team,
button.cup-card:hover .cup-card__team-name,
button.cup-card:hover .cup-card__name {
  color: var(--accent-hover);
}

.cup-card .is-winner,
.cup-card .is-winner .cup-card__name {
  color: #fff;
}

/* Across: home, score, away, and the state under them. */
.cup-card--row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "home score away" "state state state";
  align-items: baseline;
  column-gap: var(--space-4);
}

/* A side across: its badge on the outer edge, then its name. The name gives
   the side its baseline, so it sits on the score's; the badge is centred on
   the name's first line. */
.cup-card__team {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-lg);
}

.cup-card__team .cup-rows__badge {
  margin-top: calc((1.25em - 20px) / 2);
}

.cup-card__team-name {
  display: -webkit-box;
  align-self: baseline;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

.cup-card--row .cup-card__state {
  grid-area: state;
}

.cup-card__team--away {
  grid-area: away;
  flex-direction: row-reverse;
  text-align: right;
}

.cup-card__score {
  grid-area: score;
  font-family: var(--font-figures);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}

.cup-card__v {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

/* One above the other, each name with its score at the end. */
.cup-card--stack {
  gap: var(--space-1);
}

/* A side in a bracket: its badge, its name, its score. The name sits on the
   score's baseline, and the badge ends with the name's line, so it is centred
   on it. */
.cup-card__side {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
}

.cup-card__side > .cup-rows__badge {
  align-self: end;
}

.cup-card__name {
  overflow: hidden;
  font-size: var(--text-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cup-card__points {
  min-width: 1.5ch;
  font-family: var(--font-figures);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  text-align: right;
}

/* In a bracket the side that went out steps back, so the path through it
   reads down the winners. A draw has no winner and dims neither. */
.cup-card--stack[class*="cup-card--winner-"] .cup-card__side:not(.is-winner) .cup-card__name,
.cup-card--stack[class*="cup-card--winner-"] .cup-card__side:not(.is-winner) .cup-card__points {
  color: var(--text-secondary);
}

.cup-card--wl .cup-card__points {
  font-size: var(--text-base);
  letter-spacing: 0.05em;
}

/* The state under the teams, as the score rows say it. In a bracket the
   match's ref comes first, "QF3", in figures, so "Winner of QF3" finds it. */
.cup-card__state {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cup-card__ref {
  margin-right: var(--space-2);
  color: var(--accent);
  font-family: var(--font-figures);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
}

.cup-card__state--live {
  color: var(--text-primary);
}

/* The viewer's team's match stands in the floodlight: a wash of blue from
   the left and its hairline lit. */
.cup-card--yours {
  padding-inline: var(--space-3);
  border-bottom-color: color-mix(in srgb, var(--led-bright) 60%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--led-bright) 14%, transparent), transparent 85%);
}

.cup-card--disputed .is-winner,
.cup-card--disputed .is-winner .cup-card__name {
  color: var(--text-primary);
}

/* A bye: the team across the whole row, and what the round means for it on
   the state line under it. */
.cup-card--row.cup-card--bye .cup-card__side {
  grid-column: 1 / -1;
}

.cup-card--bye .cup-card__name {
  color: var(--text-primary);
  font-size: var(--text-lg);
}

.cup-card--stack.cup-card--bye .cup-card__name {
  font-size: var(--text-base);
}

/* A match still to come: the teams already through to it by name, and each
   place still open by the match that fills it, at the same size and a step
   quieter, with a v between the two so neither reads as a caption. */
.cup-card--tbd .cup-card__side.is-open .cup-card__name {
  color: var(--text-secondary);
}

.cup-card__vs {
  padding-left: calc(20px + var(--space-3));
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1;
}

/* The rounds' names over a phone's bracket, cut like the stake chips: the
   round on screen in silver over a silver wash, the round being played lit
   in floodlight blue. Wider screens show the whole bracket and no row. */
.cup-rows__round-nav {
  display: none;
}

.cup-rows__round-chip {
  flex: none;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.cup-rows__round-chip.is-current {
  color: var(--led-bright);
}

.cup-rows__round-chip[aria-current="true"] {
  border-color: var(--accent-hover);
  background: var(--accent-10);
  color: var(--text-primary);
}

.cup-rows__round-chip.is-current[aria-current="true"] {
  color: var(--led-pale);
}

.cup-rows__round-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .cup-rows {
    gap: var(--space-10);
  }
  /* One round to a screen: every round in a single row, the losers' rounds
     too, each the bracket's full width, its matches listed from the top, and
     a swipe stops on a round. The row of the rounds' names over it says
     which is on screen and moves between them, so each round's own title
     is left to screen readers. */
  .cup-rows__bracket {
    container-type: inline-size;
    height: var(--round-height, auto);
    padding-bottom: 0;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cup-rows__bracket::-webkit-scrollbar {
    display: none;
  }
  .cup-rows__bracket-grid {
    grid-auto-columns: 100cqi;
    gap: 0 var(--space-6);
  }
  .cup-rows__column {
    grid-row: 1 !important;
    grid-column: auto !important;
    align-self: start;
    scroll-snap-align: start;
  }
  .cup-rows__column-cards {
    justify-content: flex-start;
  }
  .cup-rows .cup-rows__column-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cup-rows__round-nav {
    position: relative;
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cup-rows__round-nav::-webkit-scrollbar {
    display: none;
  }
  /* 0.3rem a side left the table 3px wider than a 375px phone. */
  .cup-rows__table th,
  .cup-rows__table td {
    padding-inline: 0.2rem;
  }
  .cup-rows__table td {
    font-size: var(--text-base);
  }
  .cup-rows__table td.cup-rows__col--rank,
  .cup-rows__table td.cup-rows__col--points {
    font-size: var(--text-lg);
  }
  .cup-rows__table .cup-rows__col--rank {
    width: 1.75rem;
    padding-left: 0;
  }
  .cup-rows__table .cup-rows__badge {
    display: none;
  }
  .cup-rows__team-name {
    font-size: var(--text-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  button.cup-card::after,
  .cup-card__team,
  .cup-card__team-name,
  .cup-card__name,
  .cup-rows__tiebreak-tip {
    transition: none;
  }
}