/**
 * Championship Results Block Styles
 *
 * Tabs, pool standings, bracket display with connector lines.
 * Loaded conditionally when [usau_results] shortcode is present.
 *
 * @package Condor
 */

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes score-flash {
    0% {
        transform: scale(1);
        background-color: transparent;
    }
    30% {
        transform: scale(1.15);
        background-color: var(--wp--preset--color--gold);
        color: var(--wp--preset--color--white);
    }
    100% {
        transform: scale(1);
        background-color: transparent;
    }
}

@keyframes live-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ==========================================================================
   Pool Badge Colors
   ========================================================================== */

:root {
    --pool-a-color: #665191;
    --pool-b-color: #d45087;
    --pool-c-color: #ff7c43;
    --pool-d-color: #ffa600;
}

/* ==========================================================================
   Freshness Badge
   ========================================================================== */

.usau-results__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--wp--preset--spacing--40);
}

.usau-results__freshness {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--wp--preset--color--off-white, #f5f5f5);
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    color: var(--wp--preset--color--slate);
    line-height: 1;
}

.usau-results__freshness.is-active {
    display: inline-flex;
}

.usau-results__freshness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wp--preset--color--green, #22c55e);
    animation: live-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.usau-results__freshness-label {
    font-variant-numeric: tabular-nums;
}

.usau-results__freshness.is-stale .usau-results__freshness-dot {
    background: var(--wp--preset--color--gold, #f6b500);
    animation: none;
}

.usau-results__freshness.is-error .usau-results__freshness-dot {
    background: var(--wp--preset--color--red, #d63638);
    animation: none;
}

/* ==========================================================================
   Container & Panel Visibility
   ========================================================================== */

.usau-results {
    /* Default: all panels visible (no-JS fallback) */
    .usau-results__panel {
        display: block;
        padding: var(--wp--preset--spacing--40) 0;
    }

    /* Tab bar hidden when no JS (tabs don't work without JS) */
    .usau-results__tabs {
        display: none;
    }

    /* When JS activates */
    &.js-active {
        .usau-results__panel:not(.is-active) {
            display: none;
        }

        .usau-results__tabs {
            display: flex;
            gap: var(--wp--preset--spacing--50);
            padding: 0;
            margin: 0;
            border-bottom: 1px solid var(--wp--preset--color--light-gray);
        }

        .usau-results__round-nav {
            display: flex;
            padding-bottom: var(--wp--preset--spacing--40);
        }

        .usau-results__round-panel:not(.is-active) {
            display: none;
        }
    }
}

/* ==========================================================================
   Tab Bar
   ========================================================================== */

.usau-results__tab {
    padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    color: var(--wp--preset--color--mid-gray);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
    white-space: nowrap;

    &:hover {
        color: var(--wp--preset--color--blue);
    }

    &.is-active {
        color: var(--wp--preset--color--blue);
        border-bottom-color: var(--wp--preset--color--blue);
        font-weight: 700;
    }
}

/* Round navigation — day-grouped text links */
.usau-results__round-nav {
    display: none;
    flex-direction: column;
    gap: 4px;
}

.usau-results__round-row {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--70);
}

.usau-results__round-day {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
}

.usau-results__day-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--wp--preset--color--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 36px;
    flex-shrink: 0;
}

.usau-results__round-link {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--charcoal);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;

    &:hover {
        color: var(--wp--preset--color--blue);
        text-decoration: underline;
    }

    &.is-active {
        color: var(--wp--preset--color--blue);
        text-decoration: underline;
    }
}

/* ==========================================================================
   Section Title
   ========================================================================== */

.usau-results__section-title {
    font-family: var(--wp--preset--font-family--heading-condensed);
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 700;
    font-style: italic;
    color: var(--wp--preset--color--blue);
    margin: 0 0 var(--wp--preset--spacing--60) 0;
    text-align: center;
}

/* ==========================================================================
   Pool Standings
   ========================================================================== */

.usau-results__pools {
    margin-bottom: var(--wp--preset--spacing--70);
}

.usau-results__pool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--50);

    @media (min-width: 568px) {
        grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 1200px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.usau-results__pool {
    background: var(--wp--preset--color--white);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #dcdcdc;
}

.usau-results__pool-table {
    width: 100%;
    border-collapse: collapse;

    thead {
        background: #f0f0f0;
    }

    th {
        font-family: var(--wp--preset--font-family--heading);
        font-size: 12px;
        letter-spacing: 0.05em;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--wp--preset--color--slate);
        padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
        text-align: left;
    }

    tbody td {
        font-size: var(--wp--preset--font-size--small);
        padding: var(--wp--preset--spacing--20) 0;
        border-bottom: 1px solid var(--wp--preset--color--light-gray);
        color: var(--wp--preset--color--slate);
    }

    tbody tr:last-child td {
        border-bottom: none;
    }
}

.usau-results__pool-name {
    background: #fafafa;
    border-bottom: 1px solid #dcdcdc;
    padding: var(--wp--preset--spacing--20);
    text-align: left;
    line-height: 1;
}

.usau-results__pool-name-badge {
    display: inline-block;
    color: var(--wp--preset--color--white);
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Column widths */
.usau-results__pool-th--badge {
    width: 40px;
    text-align: center;
}

.usau-results__pool-th--record {
    width: 50px;
    text-align: center;
}

.usau-results__pool-th--diff {
    width: 45px;
    text-align: center;
}

.usau-results__pool-td--badge {
    text-align: center;
    vertical-align: middle;
}

.usau-results__pool-td--record,
.usau-results__pool-td--diff {
    text-align: center;
}

.usau-results__pool-th--seed,
.usau-results__pool-th--badge,
.usau-results__pool-th--record,
.usau-results__pool-th--diff {
    width: 40px;
}

.usau-results__pool-td--seed,
.usau-results__pool-td--badge,
.usau-results__pool-td--record,
.usau-results__pool-td--diff {
    font-size: 11px;
}

.usau-results__pool-td--seed {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--wp--preset--color--charcoal);
    opacity: 0.7;
}

/* ==========================================================================
   Pool Badge Component
   ========================================================================== */

.usau-results__pool-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 18px;
    border-radius: 3px;
    color: var(--wp--preset--color--white);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Flat rules required — CSS nesting &--a syntax not supported on all WP hosting environments */
.usau-results__pool-badge--a {
    background: var(--pool-a-color);
}

.usau-results__pool-badge--b {
    background: var(--pool-b-color);
}

.usau-results__pool-badge--c {
    background: var(--pool-c-color);
}

.usau-results__pool-badge--d {
    background: var(--pool-d-color);
}

/* Team name truncation in pool tables */
.usau-results__team-name {
    max-width: 0;
}

.usau-results__team-name-wrapper {
    position: relative;
    display: flex;
    align-items: baseline;
    min-width: 0;

    &:hover .usau-results__team-tooltip {
        opacity: 1;
    }
}

.usau-results__team-name-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

/* CSS-only tooltip */
.usau-results__team-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--wp--preset--color--charcoal);
    color: var(--wp--preset--color--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--wp--preset--font-size--xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
    margin-bottom: 4px;

    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 12px;
        border: 4px solid transparent;
        border-top-color: var(--wp--preset--color--charcoal);
    }
}

/* ==========================================================================
   Bracket
   ========================================================================== */

.usau-results__bracket-rounds {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--round-gap, 48px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto forces overflow-y to compute as auto, which clips the
       absolutely-positioned .usau-results__matchup-video footnote (bottom: -32px,
       ~28px tall — link overhangs the card bottom by ~32px). Reserve bottom
       padding to clear the overhang so the Watch link stays visible. */
    padding-bottom: var(--wp--preset--spacing--70);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    min-height: 820px;

    --round-gap: 48px;
    --connector-color: var(--wp--preset--color--light-gray);
    --connector-width: 3px;
}

.usau-results__round {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    min-width: 200px;
}

/* Round header wrapper */
.usau-results__round-header {
    flex-shrink: 0;
}

.usau-results__round-name {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    color: var(--wp--preset--color--slate);
    margin: 0;
    text-align: center;
    letter-spacing: 0.005em;
}

.usau-results__round-date {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--mid-gray);
    text-align: center;
}

/* Container wraps card + video footnote; relative for absolute video positioning */
.usau-results__matchup-container {
    position: relative;
}

/* Center the single matchup card vertically, keep header top-aligned */
.usau-results__round.is-last > .usau-results__matchup-container {
    margin-top: auto;
    margin-bottom: auto;
}

/* ==========================================================================
   Matchup Card
   ========================================================================== */

.usau-results__matchup {
    position: relative;
    background: var(--wp--preset--color--white);
    border-radius: 4px;
    border: 1px solid var(--wp--preset--color--light-gray);
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 0; /* Allow shrinking below content size for long team names */
}

/* Matchup Meta Bar */
.usau-results__matchup-meta {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    background: #f0f0f0;
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
    font-size: 11px;
    font-weight: 600;
    color: var(--wp--preset--color--slate);
    border-bottom: 1px solid var(--wp--preset--color--light-gray);
    border-radius: 4px 4px 0 0;
}

.usau-results__matchup-time {
    flex-shrink: 0;
}

.usau-results__matchup-field {
    margin-left: auto;
    flex-shrink: 0;
}

/* Video footnote — absolutely positioned so it doesn't affect bracket layout.
   Padded link grows the tap target (~28px tall × ~70px wide) toward WCAG 2.5.5;
   small right inset prevents the link visually colliding with the card edge. */
.usau-results__matchup-video {
    position: absolute;
    bottom: -32px;
    right: 0;
    /* Lift above following positioned siblings (e.g. .usau-results__score-reporter,
       which inherits position: relative from theme styles). Without this, the
       Watch link's 32px overhang below its container paints behind the next
       sibling element and intercepts the click. */
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--blue);
    text-decoration: none;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;

    &:hover,
    &:focus-visible {
        color: var(--wp--preset--color--red);
        background-color: var(--wp--preset--color--off-white);
    }

    svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
}

/* Teams wrapper — clips long names without affecting connector pseudo-elements */
.usau-results__matchup-teams {
    overflow: hidden;
    min-width: 0;
}

/* Team Row */
.usau-results__matchup-team {
    display: flex;
    align-items: center;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    gap: var(--wp--preset--spacing--20);
    border-bottom: 1px solid var(--wp--preset--color--light-gray);
    min-width: 0; /* Allow flex children to truncate */

    &:last-of-type {
        border-bottom: none;
    }

    /* Winner */
    &:not(.is-winner) {
        background: #f9f9f9;
        color: var(--wp--preset--color--mid-gray);
    }

    /* Placeholder (advancement path labels) */
    &.is-placeholder {
        color: var(--wp--preset--color--mid-gray);
        font-style: italic;
    }

    &.is-winner .usau-results__matchup-name {
        font-weight: bold; /* Cascades to name text; seed overrides to 400 */
    }

    &:not(.is-winner) .usau-results__matchup-name {
        color: var(--wp--preset--color--charcoal);
    }
}

/* Seed */
.usau-results__matchup-seed {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--mid-slate);
    width: 24px;
    flex: 0 0 auto;
}

/* Team Name — flex container so inner text truncates but seed stays visible */
.usau-results__matchup-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--slate);
}

/* The actual team text — this is what truncates */
.usau-results__matchup-name-text {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline Seed (shown after team name in pool badge rounds) */
.usau-results__matchup-inline-seed {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--mid-gray);
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Score */
.usau-results__matchup-score {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    min-width: 28px;
    text-align: right;
    color: var(--wp--preset--color--slate);
    flex: 0 0 auto;

    /* Score Flash Animation */
    &.is-updated {
        animation: score-flash 0.6s ease;
    }
}

/* ==========================================================================
   Inline Status Badges (in meta bar)
   ========================================================================== */

.usau-results__status-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1;

    &.is-final {
        color: var(--wp--preset--color--charcoal);
        background: var(--wp--preset--color--light-gray);
    }

    &.is-live {
        color: var(--wp--preset--color--white);
        background: var(--wp--preset--color--red);
        animation: live-pulse 2s ease-in-out infinite;
    }

    &.is-scheduled {
        color: var(--wp--preset--color--mid-gray);
        background: transparent;
    }
}

/* ==========================================================================
   Matchup-Pair Wrapper (for bracket connector lines)
   ========================================================================== */

.usau-results__matchup-pair {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0; /* Allow shrinking within grid column */
    --meta-offset: 13px; /* half the 26px meta bar — shifts connectors to team area center */
}

/* Pre-QF -> QF is 1:1: hide merge connectors (vertical bar + merge stub) on pairs */
.usau-results__round[data-round="pre-quarterfinals"]
    .usau-results__matchup-pair::before,
.usau-results__round[data-round="pre-quarterfinals"]
    .usau-results__matchup-pair::after {
    display: none;
}

/* ==========================================================================
   Bracket Connector Lines
   ========================================================================== */

/*
 * Three pseudo-elements per matchup-pair create ESPN-style connectors:
 *
 *   [Game A] ------+
 *                   +---- [Next Round Game]
 *   [Game B] ------+
 *
 * 1. .matchup::after       -> Horizontal stub from each matchup into the gap
 * 2. .matchup-pair::before -> Vertical bar connecting both matchup centers
 * 3. .matchup-pair::after  -> Horizontal stub from vertical bar to next round
 */

/* 1. Horizontal stub from each matchup (right side, into the gap) */
.usau-results__matchup-pair .usau-results__matchup::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--round-gap) / 2);
    top: calc(50% + var(--meta-offset));
    transform: translateY(-50%);
    width: calc(var(--round-gap) / 2);
    height: var(--connector-width);
    background: var(--connector-color);
}

/* 2. Vertical bar connecting both matchup centers */
.usau-results__matchup-pair::before {
    content: "";
    position: absolute;
    right: calc(-1 * var(--round-gap) / 2);
    top: calc(25% + var(--meta-offset));
    height: 50%;
    width: var(--connector-width);
    background: var(--connector-color);
}

/* 3. Horizontal stub from vertical bar midpoint to next round */
.usau-results__matchup-pair::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--round-gap));
    top: calc(50% + var(--meta-offset));
    transform: translateY(-50%);
    width: calc(var(--round-gap) / 2);
    height: var(--connector-width);
    background: var(--connector-color);
}

/* Hide all connectors on the last round (no outgoing connections) */
.usau-results__round.is-last .usau-results__matchup::after,
.usau-results__round.is-last .usau-results__matchup-pair::before,
.usau-results__round.is-last .usau-results__matchup-pair::after {
    display: none;
}

/* Single matchups (not in a pair) also get a horizontal stub */
.usau-results__round
    > .usau-results__matchup-container
    > .usau-results__matchup::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--round-gap) / 2);
    top: calc(50% + var(--meta-offset, 13px));
    transform: translateY(-50%);
    width: calc(var(--round-gap) / 2);
    height: var(--connector-width);
    background: var(--connector-color);
}

/* Hide single matchup connectors on last round too */
.usau-results__round.is-last
    > .usau-results__matchup-container
    > .usau-results__matchup::after {
    display: none;
}

/* ==========================================================================
   Pre-QF -> QF: Offset + L-shaped Connectors
   ========================================================================== */

/*
 * Shift Pre-QF games down so they visually feed into the QF lower team slot.
 * L-shaped connector: right -> up -> right
 *
 *                  +---- [QF center]
 *                  |
 *   [Pre-QF] -----+
 */

/* Translate the CONTAINER (not the card) so the absolutely-positioned Watch
   link sibling (bottom: -32px of the container) tracks the visually-shifted
   card. Pseudo-element connectors stay attached to .usau-results__matchup and
   shift along visually because they're nested inside the translated container. */
.usau-results__round[data-round="pre-quarterfinals"]
    .usau-results__matchup-container {
    transform: translateY(50%);
}

.usau-results__round[data-round="pre-quarterfinals"] .usau-results__matchup {
    /* Segments A+B: horizontal at Pre-QF center, vertical up to QF center */
    &::after {
        right: calc(-1 * (var(--round-gap) / 2 + var(--connector-width)));
        top: var(--meta-offset, 13px);
        width: calc(var(--round-gap) / 2);
        height: var(--round-gap);
        transform: none;
        background: transparent;
        border-bottom: var(--connector-width) solid var(--connector-color);
        border-right: var(--connector-width) solid var(--connector-color);
    }

    /* Segment C: horizontal from vertical bar top to QF game */
    &::before {
        content: "";
        position: absolute;
        right: calc(-1 * (var(--round-gap) + 1px));
        top: calc(var(--meta-offset, 13px) - var(--connector-width));
        width: calc(var(--round-gap) / 2 + 1px);
        height: var(--connector-width);
        background: var(--connector-color);
    }
}

/* ==========================================================================
   Round-by-Round View
   ========================================================================== */

.usau-results__round-view {
    padding: var(--wp--preset--spacing--40) 0;
    margin-bottom: var(--wp--preset--spacing--70);
}

/* Default: all round panels visible (no-JS fallback) */
.usau-results__round-panel {
    display: block;
}

.usau-results__round-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--40);

    /* Below desktop: stack score cards vertically (no horizontal scroll) */
    @media (max-width: 1199px) {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        /* Row gap must exceed the ~32px overhang of the absolutely-positioned
           .usau-results__matchup-video footnote (bottom: -32px, ~28px tall) so
           a card's Watch link doesn't collide with the card below it. 48px
           clears it with ~16px of visible breathing room. */
        gap: var(--wp--preset--spacing--70);
        /* The last card's Watch link also overhangs by ~32px; reserve bottom
           padding so it doesn't collide with content below the grid. */
        padding-bottom: var(--wp--preset--spacing--70);
    }

    /* Tablet: 2-column grid so cards aren't absurdly wide */
    @media (min-width: 640px) and (max-width: 1199px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Score Reporter Link
   ========================================================================== */

.usau-results__score-reporter {
    text-align: center;
    padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--60);

    a {
        color: var(--wp--preset--color--red);
        font-weight: 600;
        font-size: var(--wp--preset--font-size--small);
        text-decoration: underline;

        &:hover {
            color: var(--wp--preset--color--bright-red);
        }
    }
}

/* ==========================================================================
   Compact Mode
   ========================================================================== */

.usau-results.is-compact {
    .usau-results__round-grid {
        /* Must still clear the ~32px Watch-link overhang once cards stack
           vertically below 1199px, so this can't drop below 32px. This is
           the compact-mode tighter equivalent with minimal breathing room. */
        gap: var(--wp--preset--spacing--60);
    }

    .usau-results__round-view {
        padding: var(--wp--preset--spacing--20) 0;
    }
}

/* ==========================================================================
   Fallback Message
   ========================================================================== */

.usau-results__fallback {
    text-align: center;
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
    color: var(--wp--preset--color--charcoal);
}

.usau-results__fallback-link {
    color: var(--wp--preset--color--red);
    font-weight: 600;
    text-decoration: underline;

    &:hover {
        color: var(--wp--preset--color--bright-red);
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Desktop: all rounds visible, no scroll */
@media (min-width: 1200px) {
    .usau-results__bracket-rounds {
        overflow-x: visible;
        justify-content: center;
    }
}

/* Bracket Carousel — swipeable rounds below desktop */
@media (max-width: 1199px) {
    .usau-results__bracket-rounds {
        /* Switch from fixed 4-col grid to auto-flow carousel */
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 75vw;
        scroll-snap-type: x mandatory;
        gap: var(--wp--preset--spacing--30);
        padding-left: var(--wp--preset--spacing--40);
        padding-right: var(--wp--preset--spacing--40);
        scroll-padding-left: var(--wp--preset--spacing--40);
        overscroll-behavior-x: contain;
        scrollbar-width: none; /* Hide scrollbar — swipe to navigate */
        min-height: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .usau-results__round {
        scroll-snap-align: start;
        min-width: unset;
        gap: var(--wp--preset--spacing--70);
    }

    /* Compact card stacking — disable desktop vertical distribution */
    .usau-results__matchup-pair {
        flex: 0 1 auto;
        grid-template-rows: auto auto;
        gap: var(--wp--preset--spacing--70);
    }

    /* Center matchup content vertically — header stays top, cards center below it */
    .usau-results__round > .usau-results__round-header + * {
        margin-top: auto;
    }

    .usau-results__round > :last-child {
        margin-bottom: auto;
    }

    /* Hide ALL connector lines — rounds are separated by full swipe distance */
    .usau-results__matchup-pair .usau-results__matchup::after,
    .usau-results__matchup-pair::before,
    .usau-results__matchup-pair::after,
    .usau-results__round
        > .usau-results__matchup-container
        > .usau-results__matchup::after,
    .usau-results__round[data-round="pre-quarterfinals"]
        .usau-results__matchup::before {
        display: none;
    }

    /* Remove Pre-QF vertical offset — not feeding into adjacent visible column */
    .usau-results__round[data-round="pre-quarterfinals"]
        .usau-results__matchup-container {
        transform: none;
    }

    /* Mobile/tablet bracket: flow the Watch link below its card instead of
       absolutely overhanging by 32px. On desktop the absolute overhang sits
       in the bracket's generous vertical spacing between matchups and reads
       as attached to its card. On mobile the inter-card gap is much tighter
       (--70), so the same overhang floats midway between cards and visually
       disconnects from the card it belongs to. Connectors are already hidden
       above on mobile, so absolute positioning is no longer load-bearing here
       — switching to in-flow attaches the link directly to its card. Scoped
       to .usau-results__bracket-rounds so the score view (round-grid) keeps
       its existing absolute overhang. */
    .usau-results__bracket-rounds .usau-results__matchup-container {
        display: flex;
        flex-direction: column;
    }
    .usau-results__bracket-rounds .usau-results__matchup-video {
        position: static;
        align-self: flex-end;
        margin-top: 4px;
    }
}

/* Tablet: show ~2 rounds at a time with peek of the third */
@media (min-width: 640px) and (max-width: 1199px) {
    .usau-results__bracket-rounds {
        grid-auto-columns: 45vw;
        padding-left: var(--wp--preset--spacing--60);
        padding-right: var(--wp--preset--spacing--60);
        scroll-padding-left: var(--wp--preset--spacing--60);
    }
}

/* Round nav: 2x2 grid on mobile, 4x1 row on tablet */
@media (max-width: 639px) {
    .usau-results__round-nav {
        gap: var(--wp--preset--spacing--60);
    }

    .usau-results__round-row {
        gap: var(--wp--preset--spacing--30);
    }

    .usau-results__round-day {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
    }

    .usau-results__round-link {
        padding: 8px 12px;
        font-size: var(--wp--preset--font-size--small);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    /* Flatten round-rows into a single 4-column grid of equal-width days */
    .usau-results__round-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--wp--preset--spacing--50);
    }

    .usau-results__round-row {
        display: contents;
    }

    .usau-results__round-day {
        flex-direction: column;
        gap: 2px;
    }

    .usau-results__round-link {
        padding: 6px 10px;
    }
}

/* Touch-friendly tab targets on small screens */
@media (max-width: 767px) {
    .usau-results__tab {
        padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20);
    }

    .usau-results.js-active .usau-results__tabs {
        gap: var(--wp--preset--spacing--40);
    }
}

/* ==========================================================================
   Team Link (clickable team names for team info modal)
   ========================================================================== */

.usau-results__team-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    line-height: inherit;

    &:hover {
        text-decoration: underline;
        color: var(--wp--preset--color--blue);
    }

    &:focus-visible {
        outline: 2px solid var(--wp--preset--color--blue);
        outline-offset: 2px;
        border-radius: 2px;
    }
}

/* Matchup name link needs flex-friendly overrides */
.usau-results__matchup-name.usau-results__team-link {
    display: flex;
    align-items: baseline;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usau-results__matchup-name-text.usau-results__team-link {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Admin-Only Warning Banner
   --------------------------------------------------------------------------
   Surfaces the "upstream EMS DisplayName null" failure mode to logged-in
   admins so they know why the pool standings render with blank team names.
   Output is gated server-side on current_user_can('manage_options') — the
   markup never reaches non-admins. Soft amber tint, no colored left border
   (per project rule), inline ⚠ glyph carries the status cue.
   ========================================================================== */

.usau-results__admin-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--30, 12px);
    margin: 0 0 var(--wp--preset--spacing--40, 20px);
    padding: 16px 20px;
    background-color: #fdf6e3;
    border: 1px solid #f0d894;
    border-radius: 6px;
    color: #5b4a17;
    font-size: 16px;
    line-height: 1.5;
}

.usau-results__admin-warning-icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.4;
    color: #b67e0b;
}

.usau-results__admin-warning-body {
    flex: 1 1 auto;
    min-width: 0;
}

.usau-results__admin-warning-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #5b4a17;
}

.usau-results__admin-warning-title strong {
    font-weight: 700;
}

.usau-results__admin-warning-message {
    margin: 0 0 12px;
    font-size: 16px;
    color: #5b4a17;
}

.usau-results__admin-warning-actions {
    margin: 0;
}

.usau-results__admin-warning-action {
    display: inline-block;
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid #b67e0b;
    border-radius: 4px;
    color: #5b4a17;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 150ms ease,
        color 150ms ease;
}

.usau-results__admin-warning-action:hover,
.usau-results__admin-warning-action:focus {
    background-color: #b67e0b;
    color: #fff;
    text-decoration: none;
}

.usau-results__admin-warning-action:focus-visible {
    outline: 2px solid #b67e0b;
    outline-offset: 2px;
}

/* ==========================================================================
   Stat Leaders
   --------------------------------------------------------------------------
   Opt-in section (rendered when shortcode has show_leaders="1"). Three
   columns (Goals/Assists/Blocks) of up to 5 rows each, sitting beneath the
   bracket. Translated 1:1 from specimens/leaders-specimen.html — the
   specimen is the design contract, do not "improve" inline.
   ========================================================================== */

.usau-results__leaders {
    margin-top: var(--wp--preset--spacing--70);
    margin-bottom: var(--wp--preset--spacing--60);
}

.usau-results .usau-results__leaders-heading {
    font-family: var(--wp--preset--font-family--heading-condensed);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--wp--preset--color--blue);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    margin: 0 0 20px;
}

.usau-results .usau-results__leaders-heading::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--wp--preset--color--red);
    margin-top: 10px;
}

.usau-results .usau-results__leaders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 568px) {
    .usau-results .usau-results__leaders-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .usau-results .usau-results__leaders-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.usau-results .usau-results__leaders-col {
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--light-gray);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}

.usau-results .usau-results__leaders-col-header {
    padding: 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

.usau-results .usau-results__leaders-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--blue);
}

.usau-results .usau-results__leaders-col-labels {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto) 28px;
    column-gap: 10px;
    padding: 6px 14px 4px;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--mid-gray);
}

.usau-results .usau-results__leaders-col-labels span:nth-child(3),
.usau-results .usau-results__leaders-col-labels span:nth-child(4) {
    text-align: right;
}

.usau-results .usau-results__leaders-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: leader;
}

.usau-results .usau-results__leaders-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto) 28px;
    align-items: center;
    column-gap: 10px;
    padding: 6px 14px;
    counter-increment: leader;
    line-height: 1.25;
}

.usau-results .usau-results__leaders-row:hover {
    background: var(--wp--preset--color--warm-white);
}

.usau-results .usau-results__leaders-rank::before {
    content: counter(leader);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--wp--preset--color--mid-gray);
    font-variant-numeric: tabular-nums;
}

.usau-results .usau-results__leaders-name {
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--slate);
    word-break: break-word;
}

.usau-results .usau-results__leaders-team {
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    font-weight: 500;
    color: var(--wp--preset--color--charcoal);
    text-align: right;
    word-break: break-word;
}

.usau-results .usau-results__leaders-name:hover,
.usau-results .usau-results__leaders-team:hover {
    color: var(--wp--preset--color--blue);
}

.usau-results .usau-results__leaders-total {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--slate);
    font-variant-numeric: tabular-nums;
    text-align: right;
}