/* The bracket scrolls inside its own panel; the page keeps its normal width. */
.league-public-category, .league-public-playoff { min-width: 0; max-width: 100%; }
.playoff-bracket-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.playoff-bracket-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 10px 16px; border: 1px solid #c6d7cc; border-radius: 5px; background: #fff; color: #274d3d; font: 700 12px/1.4 var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.playoff-bracket-nav a:hover, .playoff-bracket-nav a[aria-current="location"] { border-color: #12624d; background: #e5f0e8; }
.playoff-bracket-nav a:focus-visible, .playoff-bracket-scroll:focus-visible { outline: 3px solid #238a69; outline-offset: 3px; }
.league-public-playoff[data-bracket-scrollable] .playoff-bracket-nav { position: sticky; top: calc(var(--league-scroll-offset, 210px) - 16px); z-index: 6; padding-block: 8px; background: #f3f6f4; }
.playoff-bracket-hint { margin: 0 0 14px; color: #596b68; font: 12px/1.5 var(--sans); }
.playoff-bracket-hint[hidden] { display: none; }
.playoff-bracket-scroll { --bracket-column-width: 270px; --bracket-gap: 36px; width: 100%; max-width: 100%; min-width: 0; padding: 16px 12px; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #dce5e0; border-radius: 8px; background: #f5f8f5; scrollbar-color: #7b9c89 #e5ece6; scrollbar-width: auto; }
.playoff-bracket-grid { position: relative; display: grid; width: 100%; min-width: calc(var(--bracket-columns) * var(--bracket-column-width) + (var(--bracket-columns) - 1) * var(--bracket-gap)); grid-template-columns: repeat(var(--bracket-columns), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--bracket-rows), minmax(0, 1fr)); column-gap: var(--bracket-gap); align-items: stretch; }
.league-public-playoff .playoff-bracket-round { min-width: 0; margin: 0 0 8px; padding: 12px 14px; border-bottom: 3px solid #b6db41; color: #183d2d; background: #e8efe7; font: 800 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.playoff-bracket-slot { position: relative; display: flex; align-items: center; min-width: 0; padding-block: 12px; }
.playoff-bracket-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.playoff-bracket-connections path { fill: none; stroke: #8ba695; stroke-width: 2; vector-effect: non-scaling-stroke; }
.playoff-bracket-slot::before, .playoff-bracket-slot::after { position: absolute; z-index: 0; width: calc(var(--bracket-gap) / 2); pointer-events: none; border-color: #8ba695; border-style: solid; border-width: 0; content: none; }
.playoff-bracket-slot--incoming::before { content: ""; top: 50%; left: calc(var(--bracket-gap) / -2); border-top-width: 2px; }
.playoff-bracket-slot--upper::after { content: ""; top: 50%; right: calc(var(--bracket-gap) / -2); height: 50%; border-top-width: 2px; border-right-width: 2px; }
.playoff-bracket-slot--lower::after { content: ""; top: 0; right: calc(var(--bracket-gap) / -2); height: 50%; border-bottom-width: 2px; border-right-width: 2px; }
.league-public-playoff .playoff-bracket-card { --score-columns: 0; position: relative; z-index: 1; display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 1px solid #cbdacf; border-radius: 6px; background: #fff; color: #18332a; box-shadow: 0 2px 4px rgb(24 51 42 / 4%); scroll-margin-top: var(--league-scroll-offset, 210px); }
.league-public-playoff .playoff-bracket-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 5px 5px 0 0; background: #edf3ed; font: 700 11px/1.5 var(--sans); }
.playoff-bracket-card > header > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.league-public-playoff .playoff-bracket-card .league-score { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; color: #12624d; }
.playoff-bracket-player { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 52px; padding: 12px; border-bottom: 1px solid #e4ece5; font: 500 13px/1.45 var(--sans); }
.playoff-bracket-card[data-has-sets] .playoff-bracket-player { grid-template-columns: minmax(0, 1fr) repeat(var(--score-columns), 2.8ch); }
.playoff-bracket-player > strong, .playoff-bracket-player a, .playoff-bracket-player .tournament-player-identity { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.playoff-bracket-player a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
.playoff-bracket-player a:hover { text-decoration: underline; }
.playoff-bracket-player a:focus-visible { outline: 2px solid #238a69; outline-offset: 2px; }
.playoff-bracket-player.is-winner { background: #e9f4df; color: #214b29; }
.playoff-bracket-card > .playoff-bracket-player:first-child { border-radius: 5px 5px 0 0; }
.playoff-bracket-card > .playoff-bracket-player:last-child { border-bottom: 0; border-radius: 0 0 5px 5px; }
.playoff-bracket-set { text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.playoff-bracket-card > footer { display: grid; gap: 9px; min-width: 0; padding: 10px 12px; color: #596b68; font: 11px/1.5 var(--sans); overflow-wrap: anywhere; }
.playoff-bracket-card > footer > * { min-width: 0; max-width: 100%; }
.playoff-bracket-card .league-public-playoff-appointment { font-size: inherit; }
.playoff-bracket-card--pending { border-style: dashed !important; box-shadow: none !important; }
.playoff-bracket-card--pending .playoff-bracket-player, .playoff-bracket-bye { color: #718174; font-style: italic; }
.playoff-bracket-actions, .playoff-bracket-actions > * { min-width: 0; max-width: 100%; }
.playoff-bracket-card .league-player-match-actions { max-width: 100%; }
.playoff-bracket-card .league-public-playoff-actions { justify-content: flex-start; }
@media (max-width: 700px) {
    .playoff-bracket-scroll { --bracket-column-width: clamp(208px, calc(100vw - 88px), 300px); --bracket-gap: 28px; padding: 12px; }
    .playoff-bracket-nav { gap: 6px; }
    .playoff-bracket-nav a { flex: 1 1 auto; padding-inline: 10px; }
    .playoff-bracket-player { gap: 6px; font-size: 12px; }
}
