/* A bracket, drawn by src/js/bracket-view.js: in Stage, and on an org's pages. */

.bkWrap { font-family: var(--font-mono); }
.bkSection + .bkSection { margin-top: 1.8rem; }
.bkSectionName {
    margin: 0 0 0.7rem;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold);
}
.bkScroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.bkRounds { position: relative; display: flex; gap: 36px; align-items: stretch; min-width: min-content; }
/* The lines from a match to the cell its winner or loser lands in. Gold
   once the cell is fed. */
.bkWires { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 0; }
.bkWire { fill: none; stroke: var(--border); stroke-width: 1.5; }
.bkWire.isLive { stroke: var(--gold-dim); }
.bkRound { position: relative; z-index: 1; }
.bkRound { display: flex; flex-direction: column; min-width: 200px; }
/* In a tree each round spaces its matches down the column, so a match sits
   between the two that feed it. */
.bkRoundMatches { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.bkRounds.isTree .bkRoundMatches { justify-content: space-around; }

.bkRoundHead {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 0.6rem; min-height: 1.2rem;
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.bkRoundName { color: var(--gold); }
.bkRoundBo, .bkRoundAt { color: var(--text-muted); letter-spacing: 0.04em; }
.bkRoundHead[role="button"] { cursor: pointer; border-radius: 4px; }
.bkRoundHead[role="button"]:hover .bkRoundName { text-decoration: underline; text-underline-offset: 3px; }

.bkMatch {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.bkMatch.isEdit { cursor: pointer; transition: border-color 0.15s; }
.bkMatch.isEdit:hover { border-color: var(--gold-dim); }
.bkMatch.isBye { opacity: 0.6; }
.bkMatch.isSkip { opacity: 0.35; }
.bkSide {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.42rem 0.6rem;
    font-size: 0.72rem;
    min-height: 1.9rem;
}
.bkSide + .bkSide { border-top: 1px solid var(--border); }
.bkSeed { width: 1.4rem; flex: none; color: var(--gold-dim); font-size: 0.64rem; text-align: right; }
.bkName { flex: 1; min-width: 0; color: var(--gold); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkName:hover { text-decoration: underline; text-underline-offset: 3px; }
.bkIcon { display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.15em; }
.bkWait { flex: 1; min-width: 0; color: var(--text-muted); font-style: italic; font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkScore { flex: none; min-width: 1rem; text-align: right; color: var(--text-muted); }
.bkSide.isWin .bkName, .bkSide.isWin .bkScore { color: var(--gold); font-weight: 700; }
.bkSide.isLose .bkName { color: var(--gold-dim); }
.bkMeta {
    padding: 0.3rem 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.6rem; color: var(--text-muted);
}
/* Swiss: a round is its pools, each headed by the record it is for (wins
   and losses), spread down the column so every round fills the height and
   the lines between pools have room. */
.bkSection.is-swiss .bkRoundMatches { justify-content: space-around; gap: 18px; }
.bkPool { display: flex; flex-direction: column; justify-content: center; padding: 6px 0; }
.bkPoolHead { margin-bottom: 5px; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--gold); }
.bkPoolBo { margin-left: 6px; color: var(--text-muted); letter-spacing: 0.04em; }
.bkPool .bkMatch + .bkMatch { margin-top: 6px; }
.bkPending { padding: 0.8rem 0.6rem; border: 1px dashed var(--border); border-radius: 7px; font-size: 0.66rem; color: var(--text-muted); font-style: italic; }

.bkChamp {
    display: inline-flex; align-items: baseline; gap: 0.6rem;
    margin-bottom: 1rem; padding: 0.5rem 0.9rem;
    border: 1px solid var(--gold-dim); border-radius: 8px;
    font-size: 0.72rem;
}
.bkChamp span { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; }
.bkChamp strong { color: var(--gold); }
.bkChamp a.bkChampName { color: inherit; text-decoration: none; }
.bkChamp a.bkChampName:hover { color: var(--gold-light); }
.bkNote { margin: 0.8rem 0 0; font-size: 0.66rem; color: var(--text-muted); font-style: italic; }

/* Swiss and round robin: the table first. */
.bkTable { border-collapse: collapse; margin-bottom: 1rem; font-size: 0.7rem; min-width: 320px; }
.bkTable th { text-align: left; padding: 0.3rem 0.7rem; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; border-bottom: 1px solid var(--border); }
.bkTable td { padding: 0.35rem 0.7rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--text); }
.bkTable td:first-child { color: var(--gold-dim); }
.bkTable tr.isThrough td:nth-child(2) { color: var(--gold); }
.bkTable tr.isOut td { color: var(--text-muted); }
.bkTableName { color: var(--gold); text-decoration: none; }
.bkTableName:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Five rows on the page; the rest open in a dialog. */
.bkTable tr.isMore { display: none; }
.bkTable.isAll tr.isMore { display: table-row; }
.bkTable.isAll { min-width: 100%; margin-bottom: 0; }
.bkTableWrap { margin-bottom: 1rem; }
.bkTableWrap .bkTable { margin-bottom: 4px; }
.bkMore { padding: 3px 10px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.64rem; cursor: pointer; }
.bkMore:hover { border-color: var(--gold-dim); color: var(--gold); }

/* The result, game by game: a timeline, one square a game on a line, left
   to right. Click a square for the first team, again for the second, again
   to clear. Once the series is decided the rest are struck. */
.bkGames { display: flex; flex-direction: column; gap: 10px; }
.bkGamesKey { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.74rem; }
.bkGamesKey .isA { color: var(--gold); }
.bkGamesKey .isB { color: var(--silver, #b8b8c0); text-align: right; }
.bkGamesScore { color: var(--text-muted); font-size: 0.7rem; }
.bkGamesRow { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 4px 0; }
.bkGamesRow::before { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: var(--border); }
.bkGame {
    position: relative; width: 30px; height: 30px; padding: 0;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.bkGame:hover:not(:disabled) { border-color: var(--gold-dim); }
.bkGame.isA { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 55%, var(--bg-card)); }
.bkGame.isB { border-color: var(--silver, #b8b8c0); background: color-mix(in srgb, var(--silver, #b8b8c0) 45%, var(--bg-card)); }
.bkGame.isDead { opacity: 0.35; cursor: default; background: linear-gradient(135deg, transparent 46%, var(--text-muted) 46%, var(--text-muted) 54%, transparent 54%); }

/* Building: where a team can go. */
.bkSide[data-drop] { transition: background 0.12s; }
.isDragging .bkSide[data-drop], .isPicking .bkSide[data-drop] { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.bkSide[data-drop].isOver { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.bkSide[draggable="true"] { cursor: grab; }
.bkAdd {
    margin-top: 2px; padding: 0.4rem 0.6rem;
    background: none; border: 1px dashed var(--border); border-radius: 7px;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.66rem; cursor: pointer;
}
.bkAdd:hover { border-color: var(--gold-dim); color: var(--gold); }
.bkAddRound { margin-top: 1.8rem; }

/* ---- An automated season: the tables wired into the championship (season-view.js) ---- */
.svScroll { overflow-x: auto; scrollbar-width: thin; }
.svFlow { position: relative; display: flex; gap: 72px; align-items: flex-start; min-width: min-content; padding: 4px 4px 12px; }
.svTables { display: flex; flex-direction: column; gap: 22px; flex: none; position: relative; z-index: 1; }
.svTables .bkTable { margin: 0; min-width: 320px; }
.svTables .bkTable caption { text-align: left; padding: 0 0 6px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.svTables .bkTable caption span { margin-left: 8px; color: var(--text-muted); letter-spacing: 0.04em; }
.svTables .bkTable td:nth-child(n+3), .svTables .bkTable th:nth-child(n+3) { text-align: right; }
.svTables tr.isThrough td:first-child { box-shadow: inset 2px 0 0 var(--gold-dim); }
.svTables tr.isLine td { border-bottom: 1px dashed var(--gold-dim); }
.svTables .svEmpty { color: var(--text-muted); font-style: italic; }
.svChamp { display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.svChamp > .bkSectionName { margin: 0; }
.svChampInner { position: relative; }
.svChampInner > div + div { margin-top: 30px; }
.svHalf { display: flex; gap: 40px; align-items: stretch; }
.svHalfName { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.svRound { display: flex; flex-direction: column; min-width: 190px; }
.svRound .bkRoundMatches { justify-content: space-around; }
.svRound .bkSide { min-height: 28px; }
.bkSide.isWon .bkName, .bkSide.isWon .bkScore { color: var(--gold-light); font-weight: 700; }
.bkSide.isLost .bkName { color: var(--text-muted); }
.svChampion { margin-top: 4px; }
.svWires { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 0; }
.svWire { fill: none; stroke: var(--border); stroke-width: 1.5; }
.svWire.isFeed { stroke: color-mix(in srgb, var(--gold-dim) 70%, var(--border)); }
.svWire.isLive { stroke: var(--gold); stroke-width: 2; }
@media (max-width: 760px) {
    .svFlow { flex-direction: column; gap: 40px; min-width: 0; padding-left: 16px; }
    .svTables { width: 100%; }
    .svTables .bkTable { min-width: 0; width: 100%; }
    .svChamp { width: 100%; }
    .svChampScroll { overflow-x: auto; width: 100%; scrollbar-width: thin; }
    .svChampInner { min-width: min-content; }
}