/* ============================================================================
   MEDALLION XLN — Community Brackets
   /public_html/community/assets/css/brackets.css

   Requires tokens.css. Every colour, space, radius and easing comes from a
   token — nothing hardcoded.

   THE TREE LAYOUT
   ---------------------------------------------------------------------------
   The stage is one flex row: left half, final, right half. Each half is
   another flex row of rounds; each round is a flex column of match cards,
   space-evenly distributed. That single rule is what makes the connectors line
   up at every size: a round with half as many cards spreads them across the
   same height, so each card sits exactly at the midpoint of the two it feeds
   from — no per-round offsets, no JavaScript measuring.

   Connectors are borders on ::before / ::after, not SVG, so they reflow with
   the cards and survive zoom without a redraw.
   ============================================================================ */

/* ── Page header ───────────────────────────────────────────────────────── */
.bk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-6) var(--space-4);
}

.bk-h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.15;
    margin: 0 0 var(--space-1);
}

.bk-sub {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-tertiary);
    max-width: 62ch;
}
.bk-sub a { color: var(--accent-text); text-decoration: none; }
.bk-sub a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.bk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.bk-btn:hover { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-hover); }

.bk-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
    font-weight: 600;
}
.bk-btn--primary:hover {
    background: var(--xln-gold-bright);
    border-color: var(--xln-gold-bright);
    color: var(--text-inverse);
}
.bk-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.bk-chip {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--role-participant-soft);
    color: var(--text-tertiary);
}
.bk-chip--live     { background: var(--success-soft); color: var(--success); }
.bk-chip--draft    { background: var(--warning-soft); color: var(--warning); }
.bk-chip--complete { background: var(--accent-soft);  color: var(--accent-text); }

.bk-tag { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── List ──────────────────────────────────────────────────────────────── */
.bk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    padding: 0 var(--space-6) var(--space-8);
}

.bk-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.bk-card:hover {
    border-color: var(--border-hover);
    background: var(--surface-2);
    transform: translateY(-1px);
}

.bk-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.bk-card__title { font-size: var(--text-lg); line-height: 1.25; margin: 0 0 6px; }
.bk-card__desc  { font-size: 13px; color: var(--text-tertiary); line-height: 1.45; margin: 0 0 var(--space-4); }

.bk-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
.bk-card__meta .mono { color: var(--text-secondary); }

.bk-card__champ,
.bk-card__link {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-hairline);
    font-size: var(--text-sm);
}
.bk-card__champ { color: var(--accent-text); font-weight: 600; }
.bk-card__link  { color: var(--accent-text); }
.bk-card__champ .iconify,
.bk-card__link .iconify { font-size: 14px; }

.bk-bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
}
.bk-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    transition: width var(--t-slow);
}

/* ── Detail header ─────────────────────────────────────────────────────── */
.bk-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-5) var(--space-6) 0;
    font-size: var(--text-base);
    color: var(--text-tertiary);
    text-decoration: none;
}
.bk-back:hover { color: var(--text-secondary); }

.bk-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6) 0;
}
.bk-detail-actions { display: flex; gap: var(--space-2); flex-shrink: 0; padding-top: var(--space-2); }
.bk-detail-title .bk-chip { margin-bottom: var(--space-3); }
.bk-detail-desc {
    padding: 0 var(--space-6);
    margin: var(--space-3) 0 0;
    max-width: 72ch;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

.bk-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-4) var(--space-6) 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
.bk-hint .iconify { font-size: 15px; }
.bk-hint--inline { margin: var(--space-2) 0 0; }

/* ── The stage ─────────────────────────────────────────────────────────── */
/* A 32-slot bracket is wider than any viewport, so the tree scrolls inside its
   own box. The page body must never scroll sideways. */
.bk-stage-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-6);
    scrollbar-width: thin;
}

.bk-stage {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    /* Height is driven by the WIDEST round — round 1, which holds --bk-rows
       cards per half — not by the depth of the tree. Depth sets the width.
       Getting this wrong is what makes a bracket look crooked: the rounds are
       distributed with space-around inside a shared height, so if that height
       is too small for round 1 the cards overflow their share and every later
       round stops landing on the midpoint of the pair it feeds from. */
    min-height: calc(var(--bk-rows, 2) * 82px);
    min-width: max-content;
    margin: 0 auto;

    /* The round label sits ABOVE each round's match column, so the matches
       region starts this far down. The final column has to be inset by the
       same amount or its centre line lands half a label height above the two
       semi-finals it connects to — a small offset that reads, correctly, as
       the whole bracket being slightly crooked. Both values below are derived
       from this one, so they cannot drift apart. */
    --bk-label-line: 17px;
    --bk-label-block: calc(var(--bk-label-line) + var(--space-3));
}

.bk-half {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
}

.bk-round {
    display: flex;
    flex-direction: column;
    min-width: 11.5rem;
}

.bk-round__label {
    height: var(--bk-label-line);
    line-height: var(--bk-label-line);
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-quaternary);
    text-align: center;
    white-space: nowrap;
}

/* space-around is what aligns each card with the midpoint of the pair it
   feeds from, at every round, without measuring anything. */
.bk-round__matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: var(--space-3);
}

/* ── Match card ────────────────────────────────────────────────────────── */
.bk-match {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-subtle);   /* shows through as the 1px divider */
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.bk-match.is-ready { border-color: var(--border-default); }

.bk-match.is-actionable { cursor: pointer; }
.bk-match.is-actionable:hover,
.bk-match.is-actionable:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--glow-sm);
    outline: none;
}

/* Connector stubs. The horizontal stub leaves the card on the side facing the
   final; the vertical stub joins a pair. Pointer-events off so they never
   intercept a click meant for the card. */
.bk-match--left::after,
.bk-match--right::after {
    content: '';
    position: absolute;
    top: 50%;
    width: var(--space-5);
    border-top: 1px solid var(--border-default);
    pointer-events: none;
}
.bk-match--left::after  { left: 100%; }
.bk-match--right::after { right: 100%; }

.bk-slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 10px;
    background: var(--surface-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    min-height: 32px;
}

.bk-slot__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-seed {
    flex-shrink: 0;
    min-width: 17px;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    background: var(--surface-3);
    color: var(--text-quaternary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: center;
}

.bk-score {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.bk-slot--empty { color: var(--text-quaternary); }
.bk-slot--empty .bk-slot__name { color: var(--text-quaternary); }

/* A decided match reads at a glance: the winner keeps full contrast and gains
   a gold rail; the loser recedes. Never colour alone — the rail and the
   opacity change carry it for anyone who cannot separate the two hues. */
.bk-slot.is-winner {
    background: var(--surface-2);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
}
.bk-slot.is-winner .bk-seed { background: var(--accent-soft); color: var(--accent-text); }
.bk-slot.is-winner .bk-score { color: var(--accent-text); }
.bk-slot.is-out { opacity: 0.45; }

/* ── Final + champion ──────────────────────────────────────────────────── */
/* Three rows, the outer two equal, so the final MATCH lands on the stage's
   exact vertical centre — which is where the connectors from the two
   semi-finals arrive. Centring the whole column instead (label + match +
   champion as one group) pushes the match above that line by half the
   champion's height, and the bracket visibly wanders off true. The label and
   the champion hug the match from their own rows. */
.bk-final {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    min-width: 12.5rem;
    padding-top: var(--bk-label-block);   /* see --bk-label-line on .bk-stage */
}
.bk-final .bk-round__label {
    align-self: end;
    margin-bottom: var(--space-3);
    color: var(--accent-text);
}
.bk-final .bk-match { align-self: center; border-color: var(--border-default); }

.bk-champ {
    align-self: start;
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px var(--space-3);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-quaternary);
    font-size: var(--text-sm);
    text-align: center;
}
.bk-champ .iconify { font-size: 17px; }

.bk-champ.is-crowned {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}

.bk-champ__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty states ──────────────────────────────────────────────────────── */
.bk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-16) var(--space-6);
    margin: 0 var(--space-6) var(--space-8);
    background: var(--surface-1);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
}
.bk-empty .iconify { font-size: 32px; color: var(--text-quaternary); }
.bk-empty h2 { font-size: var(--text-xl); margin: 0; }
.bk-empty p  { margin: 0; max-width: 52ch; color: var(--text-tertiary); font-size: var(--text-base); line-height: 1.55; }

.bk-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

/* ── Modals ────────────────────────────────────────────────────────────── */
.bk-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
    background: rgba(var(--mx-shade-rgb), calc(0.62 * var(--mx-shade-k)));
    backdrop-filter: blur(3px);
    z-index: var(--z-modal);
}
.bk-modal.open { display: flex; }

.bk-modal__panel {
    position: relative;
    width: min(100%, 34rem);
    margin: auto;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
}
.bk-modal__panel--sm { width: min(100%, 28rem); }
.bk-modal__panel h2 { font-size: var(--text-xl); margin: 0 0 4px; }

.bk-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
}
.bk-modal__close:hover { background: var(--surface-3); color: var(--text-primary); }

.bk-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.bk-label {
    display: block;
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.bk-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    resize: vertical;
}
.bk-input--mono { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7; }
.bk-input::placeholder { color: var(--text-quaternary); }
.bk-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-sm); }

.bk-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.bk-error {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--danger);
}
.bk-error[hidden] { display: none; }

.bk-locked {
    margin: var(--space-5) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--warning-soft);
    border: 1px solid rgba(255, 169, 64, 0.3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.bk-locked[hidden] { display: none; }

/* ── Result picker ─────────────────────────────────────────────────────── */
.bk-result {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.bk-result__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.bk-result__side:hover { border-color: var(--border-hover); background: var(--surface-3); }

.bk-result__side.is-chosen {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-primary);
    box-shadow: var(--glow-sm);
}

.bk-result__name { font-weight: 600; line-height: 1.3; word-break: break-word; }
.bk-result__score { text-align: center; padding: 6px 8px; font-size: var(--text-sm); }
.bk-result__vs { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-quaternary); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bk-head,
    .bk-detail-head { padding: var(--space-4) var(--space-4) var(--space-3); }
    .bk-grid        { padding: 0 var(--space-4) var(--space-6); }
    .bk-back        { margin: var(--space-4) var(--space-4) 0; }
    .bk-detail-desc { padding: 0 var(--space-4); font-size: var(--text-base); }
    .bk-hint        { margin: var(--space-3) var(--space-4) 0; }
    .bk-empty       { margin: 0 var(--space-4) var(--space-6); }
    .bk-stage-wrap  { padding: var(--space-4); }
    .bk-modal__row  { grid-template-columns: 1fr; gap: 0; }

    /* On a phone the mirrored tree is unreadable at any zoom. Stack the two
       halves and run every round in one direction — still the whole bracket,
       still scrollable, but legible. */
    .bk-stage { flex-direction: column; gap: var(--space-6); min-height: 0; }
    .bk-half--right { flex-direction: row-reverse; }
    .bk-final { min-width: 0; }
}