/* common/brackets-viewer-theme.css
   Created by Claude Code (claude.ai/code), June 2026, under PaPaJam's direction.
   Site theming + layout tweaks for the self-hosted brackets-viewer.js Knockout bracket
   (competition/event/standings-ko-bracket.asp). Loaded AFTER brackets-viewer.min.css so it overrides
   the defaults. brackets-viewer is driven by CSS custom properties, so most theming is variable overrides. */

/* Left-align the bracket and drop the wide side padding (removes the empty space on the left). */
.brackets-viewer { margin: 0; padding: var(--ko-match-margin) 0; position: relative; }   /* top padding = the .match margin (--ko-match-margin); with h3 margin-top:.5em this keeps the gap ABOVE the round titles equal to the title-to-first-match gap at ANY margin */
/* Vertical rhythm: halve the gap between stacked matches. Round of 32 is the tightest (margin-driven) column,
   so 10px -> 5px margin turns its 20px inter-match gap into 10px; the sparser columns redistribute via flex
   to stay aligned. The View bar above drops its bottom margin so the top gap matches the title-to-match gap. */
.brackets-viewer .match { margin: var(--ko-match-margin) 0; }
.ko-viewbar { margin-bottom: 0; }

/* Remove brackets-viewer's own stage/bracket titles (the "Knockout" heading) -- the page has its own
   View line. Round-name headers are <h3> and are kept. */
.brackets-viewer h1 { display: none; }
.brackets-viewer .bracket[data-group-id] h2 { display: none; }   /* hide the main bracket title; keep the consolation (3rd-place) h2, which has no data-group-id */

/* Competition (orange) theming of the bracket chrome. Winner/loser stay green/red (intuitive). */
.brackets-viewer {
    --secondary-background: hsl(24, 85%, 92%);   /* round-name header background */
    --border-color: hsl(24, 55%, 72%);           /* match box borders */
    --border-hover-color: hsl(24, 70%, 52%);
    --connector-color: hsl(24, 55%, 60%);        /* bracket connector lines */
    --label-color: hsl(24, 30%, 40%);            /* match-number labels */
    /* Vertical match margin + how far to retract connector near-ends so they do not touch. */
    --ko-match-margin: 5px;                       /* gap between stacked matches = 2x this (tightest in Round of 32) */
    --ko-conn-pull: calc(10px - var(--ko-match-margin));   /* connectors were tuned at the stock 10px margin; the shortfall to the junction scales with the margin, so when we tighten below 10px we must pull the verticals back by the same amount or they touch. 0 at 10px = the original look. */
}
.brackets-viewer h3 { color: hsl(24, 85%, 33%); font-weight: bold; margin-top: .5em; background: hsl(24, 85%, 85%); }   /* round names: bold dark-orange text on a pale orange bg -- SAME orange hue+saturation as the per-match headers, just ~10% darker (lightness 85 vs ~95), so the column titles read as distinct without going brown/muddy or harsh. margin-top:.5em mirrors the lib margin-bottom:.5em. */
/* Per-match header (#Order + kickoff date/time) injected by standings-ko-bracket.asp at the top of each
   match box, so placeholder pairings like "W73 vs W75" are traceable. */
/* The #Order/date header is rendered as a <header> element (NOT a <div>) on purpose. brackets-viewer
   rounds the match box corners with .participant:nth-of-type(1) (top) and :nth-of-type(2) (bottom), and
   :nth-of-type counts by TAG. A <div> header would be div #1, pushing the two participant rows to #2/#3:
   the bottom row then loses its bottom-corner radius and its square background covers the .opponents
   rounded bottom (visible gap at the bottom corners). A non-div header keeps the two .participant divs as
   type #1 and #2, so the corner rounding stays correct. */
.brackets-viewer .opponents .ko-match-head {
    margin: 0;            /* <header> takes no UA margin, but kill any site-global header margin defensively */
    text-align: center;
    font-size: .8em;
    white-space: nowrap;
    color: hsl(24, 30%, 35%);
    background: hsl(24, 85%, 95%);
    padding: 2px 4px;
    border-bottom: var(--match-border-width) solid var(--border-color);
    border-top-left-radius: var(--match-border-radius);
    border-top-right-radius: var(--match-border-radius);
}
/* Hide brackets-viewer's own corner labels -- the header above now carries the match number. */
.brackets-viewer .opponents > span { display: none; }

/* 3rd-place: only the consolation block (tagged .ko-consolation by the page, via the Round-5 match) is
   pulled out of the stack and pinned in the lower-right, below the Final. The Final's own title-less
   .bracket is NOT matched, so the main bracket stays intact. June 2026. */
.brackets-viewer .ko-consolation { position: absolute; right: 0; top: 0; margin: 0; }   /* vertical position computed precisely in JS (alignConsolation) to the lower-semifinal (#102) center; top:0 is only the pre-JS fallback */
.brackets-viewer .bracket.ko-consolation h2 { margin-bottom: 0; font-size: 1.1em; font-weight: bold; }   /* beat the library .bracket h2 (1.5em); match the round headers (h3) size, but bold */
/* ============================================================================================
   KO bracket connector lines -- aligning them to the MATCHUP center (not the header)
   --------------------------------------------------------------------------------------------
   brackets-viewer draws the bracket lines as CSS pseudo-elements anchored at 50%:
     - OUTGOING (a match to the next round): .match.connect-next::after, 50% of the .match CELL.
       .match is flex:1 + align-items:center, so 50% of the cell = the center of the centered
       .opponents box.
     - INCOMING (arriving from the previous round): .opponents.connect-previous::before,
       50% of the .opponents box.
   We inject a per-match #Order/date header as the FIRST child of .opponents. That makes the
   .opponents box = [header][teamA][teamB], so its 50% sits half-a-header ABOVE the real matchup
   (the two team rows). Both the outgoing AND the incoming line therefore left/arrived too high.

   FIX (what we do): keep the header in normal flow (so it RESERVES space and never overlaps a
   neighbour) and shift BOTH connector anchors DOWN by half the header height. The header height
   is measured at runtime in standings-ko-bracket.asp and published as --ko-head; default 0px
   reproduces the stock library behaviour, so nothing breaks if the var is absent. Outgoing is 50%
   of the tall .match cell; incoming is 50% of the .opponents box -- different reference boxes, but
   the required shift is the same +half-header (in px) either way.

   Connector LENGTHS: the even (bottom) UP-line is the stock shape with its exit grown down to the
   matchup center -- top:0, height:50%+H/2 -- so its near-end stays at the cell top, which is the
   junction, and it meets the incoming horizontal cleanly. The odd (top) DOWN-line mirrors it: exit
   at the matchup center (top:50%+H/2) extending down. The pure mirror length (height:50%+H/2) lands
   a hair past the junction, because the flex layout puts the junction slightly closer to the top
   match, so the odd height is trimmed by half a connector thickness (var(--connector-border-width)
   / 2) so the down-line ends at the horizontal edge exactly like the up-line.

   OPTIONS CONSIDERED AND REJECTED:
   1. Header OUT OF FLOW (position:absolute above .opponents). Then .opponents = just the two rows,
      the cell centers on the matchup, and the library 50% is already correct with NO compensation
      -- the cleanest model. REJECTED because an absolute header reserves NO space: it overlays the
      gap above each match, which gets tight in the densest column (Round of 32) and can collide
      with the round-name <h3> above the first match in a column. We want the header to take up
      space. Note: reserving space and using the stock 50% are mutually exclusive -- anything in the
      cell flow shifts what is centered -- so a space-reserving header REQUIRES this offset.
   2. Equal SPACER below the two rows (so the rows become the box center). Also recenters with no
      offset math, but it adds visible empty space inside every match box. REJECTED (design).
   ============================================================================================ */
.brackets-viewer .match.connect-next:nth-of-type(odd)::after  { top: calc(50% + (var(--ko-head, 0px) / 2)); height: calc(50% + (var(--ko-head, 0px) / 2) - (var(--connector-border-width) / 2) - var(--ko-conn-pull)); }   /* odd (top/down line): exit at the matchup center (top), extend down toward the junction. Trim half a connector thickness (the junction sits a hair closer to the top match), AND retract by --ko-conn-pull so the down-line keeps its small gap when the match margin is tightened below 10px. */
.brackets-viewer .match.connect-next:nth-of-type(even)::after { top: var(--ko-conn-pull); height: calc(50% + (var(--ko-head, 0px) / 2) - var(--ko-conn-pull)); }   /* even (bottom/up line): exit (border-bottom) stays at the matchup center; the top (near-end) is pulled down by --ko-conn-pull (0 at the stock 10px margin) so the up-line retreats when the margin is tightened, keeping it from touching the down-line. */
.brackets-viewer .match.connect-next.straight::after          { height: calc(50% + (var(--ko-head, 0px) / 2)); }
/* Incoming line (left side of each match): same +half-header shift, but here 50% is of .opponents. */
.brackets-viewer .opponents.connect-previous::before          { height: calc(50% + (var(--ko-head, 0px) / 2)); }

/* Item 1 (hover affordance): the box border darkening is hard to see on a 1px line, so on hover flip the
   injected #Order/date header to a dark-orange bg + white font -- an obvious, legible hover cue. */
.brackets-viewer .opponents:hover .ko-match-head { background: hsl(24, 85%, 45%); color: #fff; border-bottom-color: var(--border-hover-color); }   /* same hue/sat as the header's light bg (hsl 24,85%,95%) but darker -- a vivid orange, not brown */

/* Item 2 (instant tooltip): the native title= attribute has a browser-controlled ~0.5s delay (and the pale
   OS look). The masterright widgets avoid it with a custom element revealed on hover; we do the same with a
   pseudo-element on the box. .opponents::after is free (the incoming connector uses ::before), shown on
   :hover with NO transition so it appears instantly. Tip text comes from data-tip, set in JS. */
.brackets-viewer .opponents[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: hsl(24, 30%, 18%);
    color: #fff;
    font-size: .72em;
    font-weight: bold;
    padding: .25em .55em;
    border-radius: 4px;
    z-index: 500;
    pointer-events: none;
}

/* Shootout scores: the score cell now holds "goals (pens)" (e.g. 1 (3)) for penalty matches. Let it size to
   its content on one line; the team name flexes and ellipsises in the remaining space. Overrides the lib
   .participant .name{width:80%} / .result{width:15%}, which were too narrow for a shootout score. */
.brackets-viewer .participant .name   { flex: 1 1 auto; min-width: 0; width: auto; }
.brackets-viewer .participant .result { flex: 0 0 auto; width: auto; white-space: nowrap; padding-left: 6px; }