/* Tournament bracket builder.
 *
 * Loaded only on /tools/tournament-bracket-generator, on top of toolkit.css,
 * whose .tk-layout, .tk-side, .tk-panel and .tk-field do the sidebar. What is
 * here is the bracket itself and the two table views, which the thirteen
 * document tools have no use for.
 *
 * THE BRACKET SHAPE IS NOT COMPUTED
 *
 * Rounds are flex columns, and each column spaces its games evenly with
 * space-around. Because a round holds half the games of the one before it,
 * even spacing puts every game level with the gap between its two feeders,
 * which is the classic bracket shape, for free. No pixel arithmetic, no
 * absolute positioning, and it keeps working when a losers round is short a
 * game because it was pruned.
 *
 * Bump ASSET_VERSION in includes/config.php after touching this file.
 */

.trn-layout {
    align-items: start;
}

/* ------------------------------------------------------------- notice */

.trn-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 16px;
}

.trn-notice__title {
    font-weight: 700;
    color: #92400e;
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.trn-notice p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--gray-700);
}

.trn-notice a {
    color: var(--primary-navy);
    font-weight: 600;
}

.trn-notice__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.trn-notice__hint {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* ------------------------------------------------------------ toolbar */

.trn-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.trn-views {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: var(--radius-pill);
    padding: 3px;
}

.trn-view {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.trn-view.is-active {
    background: var(--white);
    color: var(--primary-navy);
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- stage */

.trn-stage {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    min-height: 340px;
}

.trn-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--gray-600);
}

.trn-empty__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-400);
    margin: 0 0 6px;
}

.trn-head {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.trn-head__name {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1.1;
    margin: 0;
    color: var(--primary-navy);
}

.trn-head__meta {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.trn-head__next {
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-green-dark);
}

.trn-champion {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 12px 0 0;
}

.trn-champion__label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-green-dark);
}

.trn-champion__name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-navy);
}

/* ------------------------------------------------------------ bracket */

/* The one place the page scrolls sideways. Same approach as the toolkit's
   wide tables: pan, never shrink. A bracket small enough to fit a phone is a
   bracket nobody can read. */
.trn-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}

.trn-section + .trn-section {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px dashed var(--gray-200);
}

.trn-section__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin: 0 0 14px;
}

.trn-flow {
    display: flex;
    gap: 26px;
    align-items: stretch;
    min-width: min-content;
    position: relative;
}

/* Connector lines, measured and drawn by ui.js after layout. Behind the
   cards, and never in the way of a click. */
.trn-lines {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.trn-lines path {
    fill: none;
    stroke: var(--gray-300);
    stroke-width: 1.5;
}

.trn-game {
    position: relative;
    z-index: 1;
}

/* 210px, not 168px. At 168 a team name of any real length ellipsized
   ("Grand Strand Warrio...") and the score box underneath it had no room
   left. The bracket pans sideways rather than shrinking, so a wider column
   costs nothing but scroll on the biggest brackets. The phone override
   further down is deliberately left at 148: there the point is getting two
   rounds on screen at once, not fitting a long name. */
.trn-round {
    display: flex;
    flex-direction: column;
    flex: 0 0 210px;
    min-width: 210px;
}

.trn-round__label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0 0 8px;
    white-space: nowrap;
}

/* space-around is what draws the bracket. See the note at the top. */
.trn-round__games {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1 1 auto;
    gap: 10px;
}

/* ------------------------------------------------------------- a game */

.trn-game {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
    flex: 0 0 auto;
}

.trn-game--final {
    border-color: var(--primary-navy);
}

.trn-game--bye {
    border-style: dashed;
    opacity: 0.72;
}

.trn-game--void {
    opacity: 0.4;
}

.trn-game__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.trn-game__no {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gray-600);
}

.trn-game__tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.trn-game__tag--final {
    color: var(--primary-green-dark);
}

.trn-side {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    font-size: 0.82rem;
    line-height: 1.2;
}

.trn-side + .trn-side {
    border-top: 1px solid var(--gray-100);
}

.trn-side__seed {
    flex: 0 0 15px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--gray-400);
    text-align: right;
}

.trn-side__team {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trn-side__score {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--gray-600);
}

.trn-side--won {
    background: var(--primary-green-light);
}

.trn-side--won .trn-side__team,
.trn-side--won .trn-side__score {
    font-weight: 700;
    color: var(--primary-navy);
}

.trn-side--waiting .trn-side__team,
.trn-side--void .trn-side__team {
    color: var(--gray-400);
    font-style: italic;
    font-size: 0.75rem;
}

.trn-game__action {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-navy);
    padding: 5px;
    cursor: pointer;
}

.trn-game__action:hover {
    background: var(--primary-green-light);
}

.trn-game__when {
    margin: 0;
    padding: 4px 8px;
    font-size: 0.66rem;
    color: var(--gray-600);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

/* -------------------------------------------------------- score entry */

.trn-score {
    padding: 8px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.trn-score__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.trn-score__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A two-digit score used to come out as one visible digit. 48px minus the
   padding and border left 34px of content, and Chrome puts the number
   spinner INSIDE that, so "10" rendered as "1". Nothing was truncating the
   value; it was being covered.

   Both halves of that matter. The spinners are turned off because nobody
   steps a score up one goal at a time, and the box is wide enough for three
   digits without them. Take either half away and a basketball score breaks
   it again. */
.trn-score__input {
    flex: 0 0 64px;
    width: 64px;
    padding: 4px 6px;
    font: inherit;
    font-size: 0.82rem;
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.trn-score__input::-webkit-outer-spin-button,
.trn-score__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.trn-score__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.trn-score__error:empty {
    display: none;
}

.trn-score__error {
    margin: 2px 0 0;
    font-size: 0.68rem;
    color: #b91c1c;
}

.btn--sm {
    padding: 5px 12px;
    font-size: 0.75rem;
}

/* ------------------------------------------------------ table views */

.trn-table-wrap {
    overflow-x: auto;
}

.trn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.trn-table th {
    text-align: left;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-600);
    border-bottom: 2px solid var(--gray-200);
    padding: 7px 8px;
    white-space: nowrap;
}

.trn-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.trn-table__no {
    font-weight: 700;
    color: var(--gray-600);
    white-space: nowrap;
}

.trn-table__vs {
    color: var(--gray-400);
}

.trn-table__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-navy);
}

.trn-table__input {
    width: 100%;
    min-width: 76px;
    padding: 4px 6px;
    font: inherit;
    font-size: 0.8rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: var(--white);
}

.trn-table__input:focus {
    border-color: var(--primary-green);
    outline: none;
}

.trn-row--eliminated td {
    color: var(--gray-400);
}

/* Third place is a result, not a consolation prize, so it reads as one. */
.trn-row--third td {
    color: var(--primary-navy);
    font-weight: 600;
}

.trn-row--champion td {
    background: var(--primary-green-light);
    font-weight: 700;
    color: var(--primary-navy);
}

/* ----------------------------------------------------------- sidebar */

.trn-formats {
    display: grid;
    gap: 8px;
}

.trn-format {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    cursor: pointer;
}

.trn-format:has(input:checked) {
    border-color: var(--primary-green);
    background: var(--primary-green-light);
}

.trn-format input {
    margin-top: 3px;
}

.trn-format__body {
    display: block;
}

.trn-format__name {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--primary-navy);
}

.trn-format__note {
    display: block;
    font-size: 0.76rem;
    color: var(--gray-600);
    line-height: 1.4;
}

/* One per row, not two. This held the Starts and Ends dates side by side
   until it was measured: the sidebar is a 320px rail at every screen size, so
   the group is 278px wide, and a native date input will not render below about
   148px in Chrome. Two of them plus the gap wanted 306px, and the right one
   hung 28px outside the panel. 1fr does not save you here either, because
   min-width: auto floors the track at the input's own minimum. */
.tk-field-group--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.trn-rule {
    border: 0;
    border-top: 1px solid var(--gray-200);
    margin: 14px 0;
}

.tk-linkbtn--warn {
    color: #b91c1c;
}

/* ------------------------------------------------- team entry and seeds */

/* The border and focus ring moved off the textarea and onto this wrapper, so
   the seed column sits INSIDE the same box rather than looking like a second
   field parked next to the first. */
.trn-teambox {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
}

.trn-teambox:focus-within {
    border-color: var(--primary-green);
}

/* EVERY metric below has to match #trn-teams exactly, because alignment here
   is not "close enough": font, size, line-height and padding-top. Change one
   in either rule and the numbers walk away from their teams a line at a time,
   which looks fine at four teams and is unreadable at sixty-four.
   overflow:hidden rather than auto: ui.js drives scrollTop from the
   textarea, and a second scrollbar here would be both wrong and ugly. */
.trn-teambox__seeds {
    flex: 0 0 34px;
    overflow: hidden;
    padding: 9px 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: right;
    color: var(--gray-400);
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
    user-select: none;
}

.trn-teambox__seeds span {
    display: block;
    padding-right: 8px;
    font-variant-numeric: tabular-nums;
    white-space: pre;
}

/* A bye is the one thing about a seed that changes what happens on the day,
   so it is the one thing the column says beyond the number. */
.trn-teambox__seeds span.is-bye {
    color: var(--primary-green-dark);
    font-weight: 700;
    background: var(--primary-green-light);
}

#trn-teams {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 9px 11px;
    border: 0;
    border-radius: 0;
    resize: vertical;
}

#trn-teams:focus {
    outline: none;
}

/* Same red as .tk-linkbtn--warn. The count line doubles as the place a
   duplicate name is reported, so it needs a way to look like a problem. */
.tk-panel__hint--warn {
    color: #b91c1c;
}

.trn-teamhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.trn-teamhead label {
    margin-bottom: 4px;
}

.trn-teamhead .tk-linkbtn {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
    /* The sidebar stacks above the bracket, which is right while you are
       setting up and wrong the moment there is a bracket to look at. Once
       there is one, it goes first: somebody coming back to enter a score at
       the field should not scroll past the whole form to reach it. */
    .trn-layout.has-bracket {
        display: flex;
        flex-direction: column;
    }

    .trn-layout.has-bracket .tk-sheet-wrap {
        order: -1;
        margin-bottom: 22px;
    }

    .trn-stage {
        padding: 16px 12px;
    }

    /* Narrower columns so two rounds are visible at once on a phone rather
       than one and a sliver, which reads as a broken layout. */
    .trn-round {
        flex: 0 0 148px;
        min-width: 148px;
    }

    .trn-flow {
        gap: 18px;
    }

    .trn-toolbar {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .trn-head__name {
        font-size: 1.35rem;
    }

    .trn-view {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

}

/* -------------------------------------------------------------- print */

/* Browser printing is the fallback. The real printed bracket is the PDF,
   which is laid out for paper rather than being this page with the furniture
   hidden. See the note in js/tournament/export.js. */
@media print {
    .site-header, .site-footer, .tk-side, .page-hero, .tk-stats,
    .tk-content, .cta-band, .breadcrumb, .trn-toolbar, .trn-notice,
    .trn-game__action, .section--green-tint {
        display: none !important;
    }

    .tk-layout {
        display: block;
    }

    .trn-stage {
        box-shadow: none;
        border: 0;
        padding: 0;
    }

    .trn-scroll {
        overflow: visible;
    }

    .trn-game {
        break-inside: avoid;
    }
}

.trn-check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--gray-600);
    cursor: pointer;
}

.trn-check[hidden] {
    display: none;
}

.trn-check input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.trn-check strong {
    display: block;
    color: var(--primary-navy);
    font-size: 0.88rem;
}

/* ------------------------------------------------- guidance prose */

/* toolkit.css sets the reading measure on a named list of elements
   (.tk-content > .container > h2, > p, > .bullet-list and so on). This page
   uses plain ul, ol and a table, which are not on that list and would
   otherwise run the full 1200px container. Added here rather than in
   toolkit.css so the thirteen document tools are not touched. */
.tk-content > .container > ul,
.tk-content > .container > ol,
.tk-content > .container > .tk-table-scroll,
.tk-content > .container > .tk-flow {
    max-width: 78ch;
}

.tk-content > .container > ul,
.tk-content > .container > ol {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--gray-700);
    line-height: 1.6;
}

.tk-content > .container > ul li,
.tk-content > .container > ol li {
    margin-bottom: 7px;
}

.tk-content > .container > ul li::marker,
.tk-content > .container > ol li::marker {
    color: var(--primary-green-dark);
    font-weight: 700;
}

/* Create -> Schedule -> Score -> Share. The one line on the page that is
   making an argument rather than explaining something, so it is allowed to
   look like a diagram. */
.tk-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--primary-green-light);
    border-radius: var(--radius-sm);
    color: var(--primary-navy);
}

/* The display face and size sit on the children, not the container. `ch` is
   relative to the element's OWN font, so setting a condensed face here made
   78ch resolve to 646px against 787px for every paragraph around it, and the
   block visibly failed to line up with the prose. */
.tk-flow strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tk-flow span {
    color: var(--primary-green-dark);
    font-size: 1.1rem;
}

/* Games-by-team-count. A real table because it is a lookup: somebody arrives
   from "how many games in a 16 team tournament" and wants one number. */
.tk-prose-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tk-prose-table caption {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-400);
    padding-bottom: 8px;
}

.tk-prose-table th,
.tk-prose-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.tk-prose-table thead th {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-600);
    border-bottom: 2px solid var(--gray-300);
    white-space: nowrap;
}

.tk-prose-table tbody th {
    font-weight: 700;
    color: var(--primary-navy);
    font-variant-numeric: tabular-nums;
}

.tk-prose-table td {
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}

/* ---- Set scoring, browser side -------------------------------------------
   Deliberately the same shapes and class names as assets/css/tournament.css,
   so a volleyball bracket looks the same before it is saved and after. */

.trn-game__sets {
    margin: 0;
    padding: 4px 8px 5px;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-600);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

.trn-sets__vs {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0 0 6px;
    font-size: 0.68rem;
    color: var(--gray-600);
}

.trn-sets__vs span:first-child,
.trn-sets__vs span:last-child {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trn-sets__vs .trn-sets__v {
    flex: 0 0 auto;
    color: var(--gray-400);
}

.trn-sets__vs span:last-child { text-align: right; }

.trn-sets__row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.trn-sets__no {
    flex: 0 0 14px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--gray-400);
    text-align: right;
}

.trn-sets__row .trn-score__input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.trn-sets__dash {
    flex: 0 0 auto;
    color: var(--gray-400);
    font-size: 0.75rem;
}

.trn-sets__hint {
    margin: 2px 0 0;
    font-size: 0.62rem;
    color: var(--gray-400);
}