/* Brackets and round-robin pools (head table, public page, coach view) */

.bracket-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.bracket { --gap: 26px; }
.br-section { margin-bottom: 22px; }
.br-section-title { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.br-grid { display: flex; gap: var(--gap); align-items: stretch; }
.br-col { display: flex; flex-direction: column; min-width: 200px; width: 200px; }
.br-col-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; white-space: nowrap; }
.br-col-body { display: flex; flex-direction: column; height: calc(var(--rows) * var(--cell-h)); }
.br-pair { flex: 2; display: flex; flex-direction: column; position: relative; }
.br-single { flex: 1; display: flex; flex-direction: column; position: relative; }
.br-cell { flex: 1; display: flex; align-items: center; position: relative; }
.br-pair::after { content: ''; position: absolute; right: calc(var(--gap) / -2); top: 25%; bottom: 25%; border: 2px solid #b8c2cf; border-left: 0; width: calc(var(--gap) / 2); }
.br-pair::before { content: ''; position: absolute; right: calc(var(--gap) * -1); top: 50%; width: calc(var(--gap) / 2); border-top: 2px solid #b8c2cf; }
.br-single.has-next::after { content: ''; position: absolute; right: calc(var(--gap) * -1); top: 50%; width: var(--gap); border-top: 2px solid #b8c2cf; }
/* ink set here: on the dark public page a bout box would otherwise inherit light text on its white background */
.bb { width: 100%; border: 1px solid #cdd5df; border-radius: 6px; background: #fff; color: var(--ink); font-size: 12px; overflow: hidden; }
.bb.clickable { cursor: pointer; }
.bb.clickable:hover, .bb.clickable:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 2px #dbe6ff; outline: none; }
.pool-grid .pg-r.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.bb-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding: 1px 5px; background: #f7f8fa; border-bottom: 1px solid #eef0f3; min-height: 14px; }
.bb-res { font-weight: 700; color: #334155; }
.bb-line { display: flex; align-items: center; gap: 4px; padding: 2px 5px; min-height: 19px; }
.bb-line + .bb-line { border-top: 1px dashed #eef0f3; }
.bb-line.win { font-weight: 700; }
.bb-line.lose .bb-name { color: #5b6477; }
.bb-line.ph .bb-name { color: #5b6477; font-style: italic; }
.bb-line.bye .bb-name { color: #a0a9b6; }
.bb-line.hl { background: #fff4c2; }
.bb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-team { color: #4b5563; font-size: 10px; }
.bb-seed { font-size: 9px; background: #1f2937; color: #fff; border-radius: 3px; padding: 0 3px; }
.bb-dot, .bd-color, .sh-c { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot-red { background: var(--red); }
.dot-green { background: var(--green); }
.bb.is-bye { opacity: .55; }
/* bout status (bb-st-*: its own names, so the head table's .st-ready etc. never color a bout box) */
.bb.bb-st-onmat { border-color: var(--live); box-shadow: 0 0 0 2px #ffd5dd; }
.bb.bb-st-queued { border-color: #93b4ff; }
.bb.bb-st-verify { border-color: var(--warn); }
.bb.champion { border: 2px solid #eab308; background: #fffbea; }
.br-place { display: flex; gap: 20px; flex-wrap: wrap; }
.br-place > div { width: 210px; }
.placers { margin: 6px 0 0; padding-left: 26px; columns: 2; }
.placers-card .placers { columns: 4; }
.pool-grid { border-collapse: collapse; margin-bottom: 16px; }
.pool-grid th, .pool-grid td { border: 1px solid var(--line); padding: 5px 8px; font-size: 12px; text-align: center; }
.pool-grid .pg-name { text-align: left; min-width: 160px; }
.pool-grid .pg-name > span { display: block; color: #4b5563; font-size: 11px; }
.pool-grid .pg-x { background: #e9edf2; }
.pool-grid .pg-r.w { background: #eaf8ef; }
.pool-grid .pg-r.l { background: #fdf0f0; color: #5b6477; }
.pool-grid .pg-r.pend { color: #4b5563; }
.pool-grid .pg-r small { display: block; color: var(--live); }
.pool-grid .clickable { cursor: pointer; }
.pool-grid tr.hl td { background: #fff4c2; }
.pool-rounds { display: flex; gap: 14px; flex-wrap: wrap; }
.pool-round { width: 210px; display: flex; flex-direction: column; gap: 6px; }
.ex-tag { display: inline-block; font-size: 9px; font-weight: 800; background: #6b7280; color: #fff; border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: middle; letter-spacing: .03em; }
.placer-pool { font-weight: 700; font-size: 12px; margin-top: 6px; }
.placer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.placer-grid .card { margin: 0; }
.pools.multi { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pool-block { margin-bottom: 14px; }