/*
 * Playoff bracket tree layout - each round-2+ box's own top/right/
 * bottom border spans exactly from its home source's vertical center
 * to its away source's vertical center (computed by bracket-tree.js),
 * which is what visually carries the connection between rounds -
 * there is deliberately no separate connector line drawn anywhere
 * (see that file's header comment for why). The real bracket shape is
 * irregular (byes, non-power-of-two entrant counts, a separate
 * consolation side), so this positioning is computed from the real
 * advancement data, not CSS auto-spacing.
 */

.gs-bracket-tree {
    position: relative;
    margin-bottom: 1.5rem;
    /* Length of the connector stub drawn past the final game of each
       side (.gs-bracket-box-wrap--final::after) and the offset the
       champion label sits at past it - one variable so the two always
       stay in sync, and so a narrow-screen breakpoint can shrink both
       together instead of drifting apart. See the media query at the
       bottom of this file for the narrow-screen value. */
    --gs-stub-width: 200px;
}

.gs-bracket-rounds {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    /* No horizontal scrollbar - every round column below is flexible
       (flex: 1 1 0), so the row always divides whatever width its own
       container gives it among however many rounds this particular
       bracket has, rather than each column claiming a fixed pixel
       width and forcing the row to overflow. The extra right padding
       reserves room for the champion label anchored past the final
       game's connector stub (.gs-bracket-box-wrap--final::after below,
       200px wide, plus a small gap) - without it, that label (or the
       bare stub line itself, even before a winner is decided) would
       render outside this row's box and get clipped by the page edge
       now that there's no scroll to reveal it. Sized to the stub's
       200px + gap (209px) plus .gs-bracket-champion-label's own
       max-width (240px, below) - a fixed, guaranteed-sufficient
       reservation regardless of how long the winning team's name is,
       since that label wraps rather than growing past its max-width.
       240px (not a tighter value) is deliberate: it's wide enough that
       every realistic team name + score renders on ONE line, same as
       every other .gs-bracket-slot label in the tree - a narrower
       reservation forces normal-length names to wrap one word per
       line, which reads as a badge, not as "a team name sitting on a
       line" the way Tom asked for. */
    padding: 4px 460px 12px 4px;
}

.gs-bracket-round-col {
    display: flex;
    flex-direction: column;
    /* flex-basis 0 + flex-grow 1 (the "flex: 1 1 0" below) lets a
       2-round bracket and a 5-round bracket both fit their container's
       actual width with no horizontal scroll: every column shrinks
       together when the container is narrow. min-width: 0 is required
       for a flex item to actually shrink below its content's natural
       width instead of forcing overflow.
       max-width caps the OTHER direction: flex-grow alone will keep
       stretching every column to fill 100% of a wide container even
       when a 2-3 round bracket doesn't need that much room, which is
       exactly what made a small bracket look artificially "stretched"
       with huge gaps between boxes once the container widened to fit
       larger brackets (per Tom's report) - capping growth at a natural
       240px (this file's own pre-fluid column width, historically)
       keeps a small bracket compact and centered (via .gs-bracket-
       rounds' justify-content: center) while a bracket with enough
       rounds to actually need more than 240px per column still shrinks
       below the cap exactly as before, with zero overflow either way. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 240px;
}

.gs-bracket-round-col__header {
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.gs-bracket-round-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

/*
 * Round 2+ bodies: NOT flex-distributed. Each .gs-bracket-node inside
 * is absolutely positioned by bracket-tree.js at the exact midpoint of
 * its source box(es) - see that file's positionRounds(). Round 1 (the
 * leftmost column, no sources to align with) keeps the plain flex
 * layout above.
 */
.gs-bracket-round-body--positioned {
    display: block;
}

.gs-bracket-round-body--positioned > .gs-bracket-node {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
}

.gs-bracket-node {
    position: relative;
    z-index: 1;
    margin: 14px 0;
}

/* Team name/score label shown above (home) or below (away) each box -
   the box itself only holds Date/Time/Field, per Tom's reference
   screenshots (edit-tournament-view.png / -view1.png). */
.gs-bracket-slot {
    font-size: 0.85rem;
    color: #236192; /* YAFL navy */
    padding: 1px 2px;
    line-height: 1.3;
}

.gs-bracket-slot--winner {
    font-weight: 700;
}

.gs-bracket-slot--tbd {
    color: #6c757d;
    font-style: italic;
}

.gs-bracket-box--view {
    padding: 8px 10px;
    width: 100%;
    background: transparent;
    box-sizing: border-box;
}

.gs-bracket-box--view.gs-bracket-box--highlight {
    background: #FFFF66;
}

/*
 * The bracket rectangle (top/right/bottom, open on the left) lives on
 * THIS wrapper - the exact same element bracket-tree.js measures and
 * positions (id="gs-bmatch-N"). One bordered element per box,
 * uniformly on every round including round 1 - the inner content
 * (date/time/field) is plain, unbordered text, so there's nothing
 * else drawing a competing line anywhere near it.
 */
.gs-bracket-box-wrap {
    border-top: 1px solid #adb5bd;
    border-right: 1px solid #adb5bd;
    border-bottom: 1px solid #adb5bd;
    border-left: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
    box-sizing: border-box;
    background: transparent;
    position: relative;
}

/*
 * The very last game of a side (the championship, or the consolation
 * final) has no next round to visually connect to on its right - this
 * stub gives it the same "supported by a line" look every other box
 * gets from the round after it, anchoring the eventual winner's label
 * shown below/beside it instead of leaving the box's right side bare.
 */
.gs-bracket-box-wrap--final::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1px - var(--gs-stub-width));
    width: var(--gs-stub-width);
    border-top: 1px solid #adb5bd;
}

/*
 * The winner's name, sitting directly on the connector stub drawn by
 * .gs-bracket-box-wrap--final::after above (200px wide, at the box's
 * mid-height via top: 50%) - this is the "final bracket line position"
 * the stub was always meant to lead to. Only rendered once the final
 * game of a side has a decided winner. Deliberately styled as plain
 * text identical to .gs-bracket-slot/.gs-bracket-slot--winner (same
 * font-size/color/padding/line-height, always bold since a champion is
 * by definition a winner) rather than a boxed badge - per Tom, it
 * should read exactly like any other winning team's name on the tree,
 * just positioned at the end of a line instead of above/below a box.
 * Positioned relative to .gs-bracket-box-wrap (position: relative, same
 * anchor the ::after stub uses), anchored at that same top: 50% line
 * and pulled fully upward with translateY(-100%) so the text's own
 * bottom edge rests right on the line - the same relationship every
 * other .gs-bracket-slot label already has with the box border/line
 * it's paired with (sitting just above it, not straddling it). An
 * earlier version used translateY(-50%) (vertically centered ON the
 * line, half the text above and half below) - Tom flagged that this
 * still didn't read as "on top of" the line the way a normal team name
 * does, hence -100% here instead.
 *
 * width (not max-width!) below is deliberate, and fixes a real bug:
 * for an absolutely positioned box with `left: 100%` and no `right`,
 * the browser's shrink-to-fit width calculation treats "available
 * width" as (containing block width) - (left offset) = 0, since
 * left:100% IS the containing block's full width already - margin-left
 * doesn't factor into that calculation, it's applied afterward, as a
 * further offset. With only max-width set (an earlier version of this
 * rule), that zero-available-width forced the element down to its
 * narrowest possible content width - a single word - which is exactly
 * why a name like "Volcano Vista Varsity" rendered as three stacked
 * single-word lines instead of sitting on the line horizontally like
 * every other team name in the tree, per Tom's report. An explicit
 * width sidesteps the shrink-to-fit calculation entirely, so the label
 * renders on one line whenever the name fits (every realistic team
 * name at 240px) and only wraps - onto as few lines as needed, the
 * same as a normal .gs-bracket-slot label in a narrow column would -
 * for a genuinely long outlier. .gs-bracket-rounds' right padding
 * above is sized to always fit this at its widest.
 *
 * margin-left is a flat 9px, NOT tied to --gs-stub-width. An earlier
 * version used margin-left: calc(var(--gs-stub-width) + 9px), on the
 * (wrong) assumption that the label should sit PAST the far end of the
 * connector stub - that placed the label ~209px from the box, well
 * clear of the 200px stub, which is exactly the "after the line, not
 * on top of it" gap Tom kept flagging. With left:100% already pinning
 * the label's un-offset position at the box's own right edge, a flat
 * 9px margin puts the label immediately next to the box, so it visually
 * overlaps/rides along the stub line for most of the line's length -
 * matching how every other team name in the tree sits ON its own
 * connecting border rather than past the far end of it. Confirmed via
 * Playwright (measuring the label's left edge against the box's right
 * edge, both before and after this change) and independently verified
 * by Tom via his own browser devtools (overriding this one property to
 * a flat 9px and confirming the result looked correct) before this fix
 * was written.
 */
.gs-bracket-champion-label {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 9px;
    width: 240px;
    transform: translateY(-100%);
    white-space: normal;
    z-index: 2;
    font-size: 0.85rem;
    color: #236192; /* YAFL navy - matches .gs-bracket-slot */
    font-weight: 700;
    padding: 1px 2px;
    line-height: 1.3;
}

/*
 * Narrow screens (a phone checking scores/brackets): the desktop stub
 * length (200px) plus the champion label's own width would alone be
 * wider than the whole viewport, forcing exactly the horizontal
 * scrollbar this was built to avoid. Shrinking both the stub and the
 * label's width here keeps everything - round columns included -
 * within the screen with no scroll, at the cost of a shorter connector
 * line and a narrower (more-wrapped) champion name on small phones.
 */
@media (max-width: 480px) {
    .gs-bracket-tree {
        --gs-stub-width: 36px;
    }

    .gs-bracket-champion-label {
        width: 140px;
    }

    .gs-bracket-rounds {
        padding-right: 195px;
    }
}

.gs-bracket-box__title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #212529;
}

.gs-bracket-box__row {
    font-size: 0.85rem;
    color: #212529;
}

.gs-bracket-box__muted {
    color: #6c757d;
}

.gs-bracket-summary {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.gs-bracket-summary td {
    padding: 4px 16px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.gs-bracket-summary__row--champion .gs-bracket-summary__label {
    background: #1A496E; /* YAFL navy */
    color: #fff;
    font-weight: 700;
}

.gs-bracket-summary__row--champion .gs-bracket-summary__team {
    background: #fff;
    color: #1A496E;
    font-weight: 700;
}

.gs-bracket-summary__row--runnerup .gs-bracket-summary__label {
    background: #D6001C; /* YAFL red */
    color: #fff;
    font-weight: 700;
}

.gs-bracket-summary__row--runnerup .gs-bracket-summary__team {
    background: #fff;
    color: #D6001C;
    font-weight: 700;
}

.gs-bracket-summary__row--third .gs-bracket-summary__label {
    background: #FFFF66; /* YAFL highlight yellow */
    color: #212529;
    font-weight: 700;
}

.gs-bracket-summary__row--third .gs-bracket-summary__team {
    background: #fff;
    color: #212529;
}

/* No print-specific overflow override needed any more - .gs-bracket-
   rounds no longer scrolls on screen either (see its own comment
   above), so there's nothing left for print to un-set. */