/* DO NOT EDIT — copied from packages/shared/src/design/css/bracket.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* Bracket + groups renderer styles (Phase 4b, P4b-2). Pairs with tournament/ui/bracket-render.js.
   Theme ONLY through the custom properties on the root classes below: each host (phone, console,
   View Screen, /live themes) restyles the same markup by setting them. No colour literal appears
   outside that defaults block, and no alpha mixes (mobile rule): dims use opacity on the element.
   Old smart-TV baseline (Chromium 69 / Safari 12): no flex gap, no inset, no CSS min/max/clamp functions,
   connectors are borders on pseudo-elements, no SVG. ASCII only. */

.tdtt-br,
.tdtt-gr {
  --br-accent: #38bdf8;
  --br-text: #e8eefc;
  --br-dim: #8a94ad;
  --br-surface: #141a2b;
  --br-surface-hi: #1f2940;
  --br-line: #3a4560;
  --br-gold: #f5c542;
  --br-live: #ff5a5f;
  --br-colw: 170px;
  --br-conn: 16px;
  --br-lbl: 11px;
  color: var(--br-text);
  box-sizing: border-box;
}
.tdtt-br *,
.tdtt-gr * {
  box-sizing: border-box;
}

.tdtt-br-empty,
.tdtt-gr-empty {
  color: var(--br-dim);
  font-style: italic;
  padding: 12px 0;
}

/* ---- bracket layout ---- */
.tdtt-br-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tdtt-br--phone .tdtt-br-scroll,
.tdtt-br--console .tdtt-br-scroll {
  padding: 4px 22px 22px 0;
}
.tdtt-br-band {
  display: flex;
  align-items: flex-start;
  height: 28px;
  border-bottom: 1px solid var(--br-line);
  margin-bottom: 8px;
}
.tdtt-br-title {
  flex: 1 1 0;
  min-width: var(--br-colw);
  padding: 0 var(--br-conn);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--br-dim);
  line-height: 28px;
}
.tdtt-br-title.is-champ {
  color: var(--br-gold);
}
.tdtt-br-body {
  display: flex;
  align-items: stretch;
}
.tdtt-br-col {
  flex: 1 1 0;
  min-width: var(--br-colw);
  display: flex;
  flex-direction: column;
}
.tdtt-br-slot {
  position: relative;
  flex: 1 1 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: 8px var(--br-conn);
}

/* phone: horizontal scroll inside the box, never a page overflow */
.tdtt-br--phone .tdtt-br-inner {
  min-width: 100%;
}
.tdtt-br--phone {
  --br-colw: 180px;
  --br-conn: 10px;
  font-size: 14px;
  max-width: 100%;
}
.tdtt-br--console {
  /* five columns (4 rounds + champion) share a ~640px panel; narrower hosts scroll inside the box */
  --br-colw: 118px;
  --br-conn: 8px;
  font-size: 13px;
}
.tdtt-br--console .tdtt-br-title {
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tdtt-br--console .tdtt-br-side {
  padding: 0 5px;
}
.tdtt-br--phone.tdtt-br-c2 .tdtt-br-inner { min-width: calc(var(--br-colw) * 2); }
.tdtt-br--phone.tdtt-br-c3 .tdtt-br-inner { min-width: calc(var(--br-colw) * 3); }
.tdtt-br--phone.tdtt-br-c4 .tdtt-br-inner { min-width: calc(var(--br-colw) * 4); }
.tdtt-br--phone.tdtt-br-c5 .tdtt-br-inner { min-width: calc(var(--br-colw) * 5); }
.tdtt-br--phone.tdtt-br-c6 .tdtt-br-inner { min-width: calc(var(--br-colw) * 6); }
.tdtt-br--phone.tdtt-br-c7 .tdtt-br-inner { min-width: calc(var(--br-colw) * 7); }
.tdtt-br--phone.tdtt-br-c8 .tdtt-br-inner { min-width: calc(var(--br-colw) * 8); }
.tdtt-br--console.tdtt-br-c2 .tdtt-br-inner { min-width: calc(var(--br-colw) * 2); }
.tdtt-br--console.tdtt-br-c3 .tdtt-br-inner { min-width: calc(var(--br-colw) * 3); }
.tdtt-br--console.tdtt-br-c4 .tdtt-br-inner { min-width: calc(var(--br-colw) * 4); }
.tdtt-br--console.tdtt-br-c5 .tdtt-br-inner { min-width: calc(var(--br-colw) * 5); }
.tdtt-br--console.tdtt-br-c6 .tdtt-br-inner { min-width: calc(var(--br-colw) * 6); }
.tdtt-br--console.tdtt-br-c7 .tdtt-br-inner { min-width: calc(var(--br-colw) * 7); }
.tdtt-br--console.tdtt-br-c8 .tdtt-br-inner { min-width: calc(var(--br-colw) * 8); }

/* ---- match + sides ---- */
.tdtt-br-match {
  position: relative;
  width: 100%;
  border: 2px solid var(--br-line);
  border-radius: 6px;
  background: var(--br-surface);
}
.tdtt-br-side {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 6px;
  border-left: 4px solid var(--br-surface);
  color: var(--br-text);
}
.tdtt-br-side + .tdtt-br-side {
  border-top: 1px solid var(--br-line);
}
.tdtt-br-seed {
  flex: 0 0 auto;
  min-width: 1.1em;
  margin-right: 4px;
  color: var(--br-dim);
  font-size: 0.85em;
}
.tdtt-br-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tdtt-br-check {
  flex: 0 0 auto;
  margin-left: 4px;
  color: var(--br-accent);
  font-weight: 700;
}
.tdtt-br-score {
  flex: 0 0 auto;
  margin-left: 6px;
  min-width: 1em;
  text-align: right;
  font-weight: 700;
}
.tdtt-br-side.is-winner {
  border-left-color: var(--br-accent);
  background: var(--br-surface-hi);
}
.tdtt-br-side.is-winner .tdtt-br-name {
  font-weight: 800;
}
.tdtt-br-side.is-loser {
  opacity: 0.45;
  color: var(--br-dim);
}
.tdtt-br-side.is-tbd .tdtt-br-name,
.tdtt-br-side.is-bye .tdtt-br-name {
  color: var(--br-dim);
  font-style: italic;
}

/* the label straddles the seam between the two sides, so it adds no height and never reaches a
   neighbouring match; it stays within the free band above/below each row's text */
.tdtt-br-label {
  position: absolute;
  top: 50%;
  right: 8px;
  margin-top: -9px;
  padding: 0 6px;
  border: 1px solid var(--br-line);
  border-radius: 4px;
  background: var(--br-surface);
  color: var(--br-dim);
  font-size: var(--br-lbl);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 16px;
  white-space: nowrap;
}
.tdtt-br-label.is-live {
  color: var(--br-live);
}
.tdtt-br-match.is-live {
  border-color: var(--br-live);
  -webkit-animation: tdtt-br-pulse 1.4s ease-in-out infinite;
  animation: tdtt-br-pulse 1.4s ease-in-out infinite;
}
@-webkit-keyframes tdtt-br-pulse {
  0% { border-color: var(--br-live); }
  50% { border-color: var(--br-line); }
  100% { border-color: var(--br-live); }
}
@keyframes tdtt-br-pulse {
  0% { border-color: var(--br-live); }
  50% { border-color: var(--br-line); }
  100% { border-color: var(--br-live); }
}
@media (prefers-reduced-motion: reduce) {
  .tdtt-br-match.is-live {
    -webkit-animation: none;
    animation: none;
  }
}

/* ---- connectors: borders on pseudo-elements, no SVG ---- */
.tdtt-br-match::after,
.tdtt-br-slot.has-prev .tdtt-br-match::before,
.tdtt-br-slot.has-prev .tdtt-br-champ::before {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--br-conn);
  height: 0;
  border-top: 1px solid var(--br-line);
}
.tdtt-br-match::after {
  right: calc(var(--br-conn) * -1 - 2px);
}
.tdtt-br-slot.has-prev .tdtt-br-match::before {
  left: calc(var(--br-conn) * -1 - 2px);
}
.tdtt-br-slot.has-prev .tdtt-br-champ::before {
  left: calc(var(--br-conn) * -1);
}
.tdtt-br-slot.is-lit .tdtt-br-match::after,
.tdtt-br-slot.is-fed .tdtt-br-match::before,
.tdtt-br-slot.is-fed .tdtt-br-champ::before {
  border-top: 2px solid var(--br-accent);
}
.tdtt-br-slot.is-pair::after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  border-right: 1px solid var(--br-line);
}
.tdtt-br-slot.is-pair.is-top::after {
  top: 50%;
  height: 50%;
}
.tdtt-br-slot.is-pair.is-bottom::after {
  top: 0;
  height: 50%;
}
.tdtt-br-slot.is-pair.is-lit::after {
  border-right: 2px solid var(--br-accent);
}

/* ---- champion ---- */
.tdtt-br-champ {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  border: 2px solid var(--br-line);
  border-radius: 6px;
  background: var(--br-surface);
}
.tdtt-br-crown {
  flex: 0 0 auto;
  margin-right: 8px;
  color: var(--br-dim);
  font-size: 1.3em;
}
.tdtt-br-champ-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tdtt-br-champ.is-empty .tdtt-br-champ-name {
  color: var(--br-dim);
  font-style: italic;
}
.tdtt-br-champ.is-crowned {
  border-color: var(--br-gold);
  box-shadow: 0 0 18px var(--br-gold);
}
.tdtt-br-champ.is-crowned .tdtt-br-crown {
  color: var(--br-gold);
}
.tdtt-br-champ.is-crowned .tdtt-br-champ-name {
  font-weight: 800;
}

/* ---- TV landscape: fills the area, columns share the full width ---- */
.tdtt-br--tv-landscape {
  --br-colw: 0px;
  --br-conn: 0.8vw;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 28px;
}
.tdtt-br--tv-landscape .tdtt-br-scroll,
.tdtt-br--tv-landscape .tdtt-br-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}
.tdtt-br--tv-landscape .tdtt-br-band {
  height: 40px;
  flex: 0 0 auto;
  margin-bottom: 0;
}
.tdtt-br--tv-landscape .tdtt-br-title {
  font-size: 22px;
  line-height: 40px;
}
.tdtt-br--tv-landscape .tdtt-br-body {
  flex: 1 1 auto;
  min-height: 0;
}
.tdtt-br--tv-landscape .tdtt-br-slot {
  min-height: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}
.tdtt-br--tv-landscape .tdtt-br-side {
  min-height: 48px;
}
.tdtt-br--tv-landscape .tdtt-br-label {
  margin-top: -9px;
  line-height: 16px;
}
.tdtt-br--tv-landscape .tdtt-br-champ {
  min-height: 72px;
}
/* the Champion column is a fixed width sized to its card (em, so it follows the 28px TV type, the
   /live stage scale and the 2400px+ vw type): left gutter (--br-conn) + 4px border + 20px padding +
   crown 44px + a ~212px name area (10em = 280px at 28px, about 15 characters) + seed. The four match
   columns share everything left. Title and column use the same width so the band stays aligned. The
   champion card has no outgoing connector, so it drops the right gutter. */
.tdtt-br--tv-landscape .tdtt-br-col--champ,
.tdtt-br--tv-landscape .tdtt-br-title.is-champ {
  flex: 0 0 calc(10em + var(--br-conn));
  width: calc(10em + var(--br-conn));
}
.tdtt-br--tv-landscape .tdtt-br-col--champ .tdtt-br-slot {
  padding-right: 0;
}

/* ---- TV portrait: rounds stacked top-down, Final + Champion at the bottom ---- */
.tdtt-br--tv-portrait {
  --br-colw: 0px;
  --br-conn: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 28px;
}
.tdtt-br--tv-portrait .tdtt-br-scroll,
.tdtt-br--tv-portrait .tdtt-br-inner,
.tdtt-br--tv-portrait .tdtt-br-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}
.tdtt-br--tv-portrait .tdtt-br-col {
  min-width: 0;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-start, not stretch: stretch shares the column's spare height across every flex line,
     including the title's, which left a tall empty band under each round title */
  align-content: flex-start;
  /* natural height, packed top-down: no flex-grow, so no spare space between rounds (any spare
     height collects at the very bottom of the board) */
  flex: 0 1 auto;
  padding: 6px 0;
}
.tdtt-br--tv-portrait .tdtt-br-title {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 12px;
  font-size: 22px;
  line-height: 40px;
  border-bottom: 1px solid var(--br-line);
}
.tdtt-br--tv-portrait .tdtt-br-slot {
  flex: 0 0 auto;
  width: 50%;
  min-height: 0;
  padding: 12px;
}
.tdtt-br--tv-portrait .tdtt-br-n1 .tdtt-br-slot,
.tdtt-br--tv-portrait .tdtt-br-col--champ .tdtt-br-slot {
  width: 100%;
}
.tdtt-br--tv-portrait .tdtt-br-side {
  min-height: 48px;
}
.tdtt-br--tv-portrait .tdtt-br-label {
  margin-top: -9px;
  line-height: 16px;
}
/* a name ellipsizes before the label area: the TV rows are tall enough that a long name would run
   into the seam label, so labelled matches reserve the label's width */
.tdtt-br--tv-landscape,
.tdtt-br--tv-portrait {
  --br-lbl: 15px;
}
.tdtt-br--tv-portrait .tdtt-br-match.has-label .tdtt-br-name {
  margin-right: calc(var(--br-lbl) * 4.4);
}
.tdtt-br--tv-portrait .tdtt-br-match.lbl-bare .tdtt-br-name {
  margin-right: calc(var(--br-lbl) * 3.6);
}
.tdtt-br--tv-portrait .tdtt-br-match.lbl-table .tdtt-br-name {
  margin-right: calc(var(--br-lbl) * 9.8);
}
/* landscape: the seam label straddles the two rows and sits over the score column, so only the
   top row's name reserves the part of the label that extends past the score column; the bottom
   row keeps its full width */
.tdtt-br--tv-landscape .tdtt-br-match.has-label .tdtt-br-label + .tdtt-br-side .tdtt-br-name {
  margin-right: calc(var(--br-lbl) * 3);
}
.tdtt-br--tv-landscape .tdtt-br-match.lbl-bare .tdtt-br-label + .tdtt-br-side .tdtt-br-name {
  margin-right: calc(var(--br-lbl) * 2.6);
}
.tdtt-br--tv-landscape .tdtt-br-match.lbl-table .tdtt-br-label + .tdtt-br-side .tdtt-br-name {
  margin-right: calc(var(--br-lbl) * 9.6);
}
.tdtt-br--tv-portrait .tdtt-br-champ {
  min-height: 72px;
}
/* stacked rounds have no side-by-side connectors */
.tdtt-br--tv-portrait .tdtt-br-match::before,
.tdtt-br--tv-portrait .tdtt-br-match::after,
.tdtt-br--tv-portrait .tdtt-br-champ::before,
.tdtt-br--tv-portrait .tdtt-br-slot::after {
  display: none;
}

/* stacked rounds have no connectors, so progress shows on the box edge instead: a decided match is
   accent-edged, a slot whose feeders are both decided carries an accent bar, pending stays grey */
.tdtt-br--tv-portrait .tdtt-br-slot.is-lit .tdtt-br-match {
  border-color: var(--br-accent);
}
.tdtt-br--tv-portrait .tdtt-br-slot.is-fed .tdtt-br-match,
.tdtt-br--tv-portrait .tdtt-br-slot.is-fed .tdtt-br-champ {
  border-left: 8px solid var(--br-accent);
}

@media (min-width: 2400px) {
  .tdtt-br--tv-landscape,
  .tdtt-br--tv-portrait {
    font-size: 1.2vw;
  }
  .tdtt-br--tv-landscape .tdtt-br-side,
  .tdtt-br--tv-portrait .tdtt-br-side {
    min-height: 2vw;
  }
}

/* ---- groups ---- */
.tdtt-gr {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  font-size: 14px;
}
.tdtt-gr--console {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  font-size: 15px;
}
.tdtt-gr--tv-landscape,
.tdtt-gr--tv-portrait {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 20px;
  align-content: stretch;
  width: 100%;
  height: 100%;
  font-size: 28px;
}
/* landscape: the column count follows the group count so 1-8 groups fill 1920x1080 */
.tdtt-gr--tv-landscape.tdtt-gr-n2,
.tdtt-gr--tv-landscape.tdtt-gr-n3,
.tdtt-gr--tv-landscape.tdtt-gr-n4 {
  grid-template-columns: repeat(2, 1fr);
}
.tdtt-gr--tv-landscape.tdtt-gr-n5,
.tdtt-gr--tv-landscape.tdtt-gr-n6 {
  grid-template-columns: repeat(3, 1fr);
}
.tdtt-gr--tv-landscape.tdtt-gr-n7,
.tdtt-gr--tv-landscape.tdtt-gr-n8,
.tdtt-gr--tv-landscape.tdtt-gr-nmany {
  grid-template-columns: repeat(4, 1fr);
}
/* portrait: one column, two when there are many groups */
.tdtt-gr--tv-portrait.tdtt-gr-n5,
.tdtt-gr--tv-portrait.tdtt-gr-n6,
.tdtt-gr--tv-portrait.tdtt-gr-n7,
.tdtt-gr--tv-portrait.tdtt-gr-n8,
.tdtt-gr--tv-portrait.tdtt-gr-nmany {
  grid-template-columns: repeat(2, 1fr);
}
.tdtt-gr-card {
  border: 2px solid var(--br-line);
  border-radius: 6px;
  background: var(--br-surface);
  padding: 8px 10px;
  min-width: 0;
}
.tdtt-gr-title {
  font-weight: 800;
  color: var(--br-accent);
  padding: 4px 0 8px;
}
.tdtt-gr-table {
  width: 100%;
  border-collapse: collapse;
}
.tdtt-gr-table th {
  color: var(--br-dim);
  font-size: 0.8em;
  font-weight: 700;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--br-line);
}
.tdtt-gr-table td {
  padding: 6px;
}
.tdtt-gr-table .tdtt-gr-row td {
  height: 36px;
}
.tdtt-gr--tv-landscape .tdtt-gr-table .tdtt-gr-row td,
.tdtt-gr--tv-portrait .tdtt-gr-table .tdtt-gr-row td {
  height: 48px;
}
.tdtt-gr-table td.tdtt-gr-name {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.tdtt-gr-table .tdtt-gr-rec,
.tdtt-gr-table .tdtt-gr-pts,
.tdtt-gr-table .tdtt-gr-rank {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.tdtt-gr-table th.tdtt-gr-name {
  text-align: left;
}
.tdtt-gr-nm {
  display: inline-block;
  max-width: calc(100% - 2.6em);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-weight: 700;
}
.tdtt-gr-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 800;
  line-height: 1.6;
  vertical-align: middle;
}
.tdtt-gr-badge.is-q {
  background: var(--br-accent);
  color: var(--br-surface);
}
.tdtt-gr-badge.is-e {
  background: var(--br-line);
  color: var(--br-dim);
}
.tdtt-gr-table .tdtt-gr-cut td {
  height: 0;
  padding: 0;
  border-top: 3px solid var(--br-accent);
}