/* Public knockout play-off chart (bracket.php).
   Grid geometry: row 1 holds the round headers; every later row is one
   "unit" (--ko-unit). KnockoutBracketService::chartLayout() computes each
   match cell's column, row start and span in PHP and the page expresses
   them through the generated ko-col-* / ko-rs-* / ko-sp-* utilities at the
   bottom of this file — no inline styles. A first-main-round match owns a
   4-unit band, later rounds double, play-ins take half a parent band, so a
   feeder cell's band edge is its parent's centre line and the connector
   pseudo-elements meet in the column gap by construction. */

.ko-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
}

/* Per-match times sit BELOW the chart, outside the grid's fixed row geometry:
   a play-in cell spans 2 units (5.4rem) and its box already needs ~5.03rem, so
   an extra line inside .ko-match would overflow the band and pull the connector
   stubs off the box seam they are built to meet. */
.ko-times { list-style: none; margin: .5rem 0 1.5rem; padding: 0; }
.ko-times li { display: flex; flex-wrap: wrap; gap: .3rem .75rem; padding: .5rem .1rem; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ko-times-stage { flex: 0 0 7.5rem; font-weight: 600; }
.ko-times-when { margin-left: auto; white-space: nowrap; }

@media (max-width: 520px) {
    .ko-times-stage { flex-basis: 100%; }
    .ko-times-when { margin-left: 0; }
}

.ko-grid {
    --ko-unit: 2.7rem;  /* one grid row: a play-in box must fit 2 units */
    --ko-conn: 1.1rem;  /* connector stub length = half the column gap */
    --ko-line-color: var(--bottle-300);
    display: grid;
    grid-template-rows: auto;       /* row 1: round headers */
    grid-auto-rows: var(--ko-unit);
    grid-auto-columns: 240px;
    column-gap: calc(2 * var(--ko-conn));
    row-gap: 0;                     /* connector verticals must touch across cells */
    width: max-content;
    padding: .25rem 0 .5rem;
}

/* Round headers */
.ko-round-head {
    grid-row: 1;
    align-self: end;
    text-align: center;
    padding: .4rem .5rem .9rem;
}
.ko-round-stage { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.ko-round-when { font-size: .85rem; font-weight: 600; color: var(--primary); }
.ko-round-venue { font-size: .85rem; color: var(--muted); }

/* Match cells */
.ko-cell { position: relative; display: flex; align-items: center; min-width: 0; }
.ko-match {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ko-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 2.45rem;
    padding: 0 .5rem 0 .35rem;
    min-width: 0;
}
.ko-line + .ko-line { border-top: 1px solid var(--border); }
.ko-line--winner { background: var(--green-pale); }
.ko-line--winner .ko-name { color: var(--primary); font-weight: 700; }
.ko-line--winner .ko-score { border-color: var(--primary); color: var(--primary); }

.ko-num {
    flex: 0 0 1.1rem;
    font-size: .78rem;
    color: var(--muted);
    text-align: right;
}
.ko-score {
    flex: 0 0 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    font-family: var(--font-display);
    font-size: .85rem;
    color: var(--ink);
}
.ko-label { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ko-club {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ko-name {
    font-size: .95rem;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ko-name--tbd { color: var(--muted); font-style: italic; }

/* Connectors. Feeders draw an L into the column gap (vertical at the gap
   midpoint, running to the band edge = parent centre); the fed match draws
   a stub back from its left edge, so all segments join. */
.ko-cell--dn::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    bottom: 0;
    width: var(--ko-conn);
    border-top: 2px solid var(--ko-line-color);
    border-right: 2px solid var(--ko-line-color);
}
.ko-cell--up::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 50%;
    width: var(--ko-conn);
    border-bottom: 2px solid var(--ko-line-color);
    border-right: 2px solid var(--ko-line-color);
}
.ko-cell--out::after {  /* final → champion: straight out, no vertical */
    content: "";
    position: absolute;
    left: 100%;
    top: calc(50% - 1px);
    width: var(--ko-conn);
    border-top: 2px solid var(--ko-line-color);
}
.ko-cell--in::before {
    content: "";
    position: absolute;
    right: 100%;
    top: calc(50% - 1px);
    width: var(--ko-conn);
    border-top: 2px solid var(--ko-line-color);
}

/* Champion */
.ko-champion-box {
    flex: 1;
    text-align: center;
    padding: .6rem .5rem;
    background: var(--cream);
    border: 1px solid var(--brass);
    border-radius: var(--radius-sm);
}
.ko-champion-label {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
}
.ko-champion-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }

@media (max-width: 640px) {
    .ko-grid { grid-auto-columns: 200px; --ko-conn: .8rem; }
}

/* Generated placement utilities — used by bracket.php, do not hand-edit.
   ko-rs-N maps to grid-row-start N+1 (row 1 is the header row). Bounds
   match chartLayout()'s guards: 7 round columns + champion, 64 units. */
.ko-col-1 { grid-column: 1; }
.ko-col-2 { grid-column: 2; }
.ko-col-3 { grid-column: 3; }
.ko-col-4 { grid-column: 4; }
.ko-col-5 { grid-column: 5; }
.ko-col-6 { grid-column: 6; }
.ko-col-7 { grid-column: 7; }
.ko-col-8 { grid-column: 8; }
.ko-sp-2 { grid-row-end: span 2; }
.ko-sp-4 { grid-row-end: span 4; }
.ko-sp-8 { grid-row-end: span 8; }
.ko-sp-16 { grid-row-end: span 16; }
.ko-sp-32 { grid-row-end: span 32; }
.ko-sp-64 { grid-row-end: span 64; }
.ko-rs-1 { grid-row-start: 2; }
.ko-rs-2 { grid-row-start: 3; }
.ko-rs-3 { grid-row-start: 4; }
.ko-rs-4 { grid-row-start: 5; }
.ko-rs-5 { grid-row-start: 6; }
.ko-rs-6 { grid-row-start: 7; }
.ko-rs-7 { grid-row-start: 8; }
.ko-rs-8 { grid-row-start: 9; }
.ko-rs-9 { grid-row-start: 10; }
.ko-rs-10 { grid-row-start: 11; }
.ko-rs-11 { grid-row-start: 12; }
.ko-rs-12 { grid-row-start: 13; }
.ko-rs-13 { grid-row-start: 14; }
.ko-rs-14 { grid-row-start: 15; }
.ko-rs-15 { grid-row-start: 16; }
.ko-rs-16 { grid-row-start: 17; }
.ko-rs-17 { grid-row-start: 18; }
.ko-rs-18 { grid-row-start: 19; }
.ko-rs-19 { grid-row-start: 20; }
.ko-rs-20 { grid-row-start: 21; }
.ko-rs-21 { grid-row-start: 22; }
.ko-rs-22 { grid-row-start: 23; }
.ko-rs-23 { grid-row-start: 24; }
.ko-rs-24 { grid-row-start: 25; }
.ko-rs-25 { grid-row-start: 26; }
.ko-rs-26 { grid-row-start: 27; }
.ko-rs-27 { grid-row-start: 28; }
.ko-rs-28 { grid-row-start: 29; }
.ko-rs-29 { grid-row-start: 30; }
.ko-rs-30 { grid-row-start: 31; }
.ko-rs-31 { grid-row-start: 32; }
.ko-rs-32 { grid-row-start: 33; }
.ko-rs-33 { grid-row-start: 34; }
.ko-rs-34 { grid-row-start: 35; }
.ko-rs-35 { grid-row-start: 36; }
.ko-rs-36 { grid-row-start: 37; }
.ko-rs-37 { grid-row-start: 38; }
.ko-rs-38 { grid-row-start: 39; }
.ko-rs-39 { grid-row-start: 40; }
.ko-rs-40 { grid-row-start: 41; }
.ko-rs-41 { grid-row-start: 42; }
.ko-rs-42 { grid-row-start: 43; }
.ko-rs-43 { grid-row-start: 44; }
.ko-rs-44 { grid-row-start: 45; }
.ko-rs-45 { grid-row-start: 46; }
.ko-rs-46 { grid-row-start: 47; }
.ko-rs-47 { grid-row-start: 48; }
.ko-rs-48 { grid-row-start: 49; }
.ko-rs-49 { grid-row-start: 50; }
.ko-rs-50 { grid-row-start: 51; }
.ko-rs-51 { grid-row-start: 52; }
.ko-rs-52 { grid-row-start: 53; }
.ko-rs-53 { grid-row-start: 54; }
.ko-rs-54 { grid-row-start: 55; }
.ko-rs-55 { grid-row-start: 56; }
.ko-rs-56 { grid-row-start: 57; }
.ko-rs-57 { grid-row-start: 58; }
.ko-rs-58 { grid-row-start: 59; }
.ko-rs-59 { grid-row-start: 60; }
.ko-rs-60 { grid-row-start: 61; }
.ko-rs-61 { grid-row-start: 62; }
.ko-rs-62 { grid-row-start: 63; }
.ko-rs-63 { grid-row-start: 64; }
.ko-rs-64 { grid-row-start: 65; }

/* Print: shrink the chart onto A4 landscape (screen columns are 240px —
   a 4-round field would overflow the ~1050px printable width). */
@media print {
    @page { size: landscape; }
    .ko-chart-wrap { overflow: visible; padding-bottom: 0; }
    .ko-grid {
        --ko-unit: 2rem;
        --ko-conn: .7rem;
        --ko-line-color: #000;
        grid-auto-columns: 150px;
    }
    .ko-match { break-inside: avoid; border-color: #000; }
    .ko-champion-box { border-color: #000; }
}

/* Find-your-name: input above the chart, brass highlight on matches. Works
   on both the grid lines and the flat-list fallback spans. */
.ko-find input {
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    font-size: 1rem;
    width: min(280px, 100%);
}
.ko-line--found {
    background: rgba(var(--brass-rgb), .22);
    box-shadow: inset 0 0 0 2px var(--brass);
    border-radius: 2px;
}

/* Champion strip: promoted above the chart once the final is decided —
   also covers the flat-list fallback, which has no in-grid champion box. */
.ko-champion-strip {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    background: var(--cream);
    border: 1px solid var(--brass);
    border-left: 4px solid var(--brass);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin: 0 0 1rem;
}
.ko-champion-strip-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink);
}