/* Public live pages + shared live components (pool sheets, bracket, strip cards). Tokens come from app.css. */
.fsl { font-size: 17px; }
.fsl h2 { margin-top: 1.6em; }
.search-row { display: flex; gap: 12px; align-items: center; margin: 12px 0 28px; max-width: 560px; }
.search-row input { margin: 0; }
.search-row .btn { flex: none; }
.t-tile { text-align: left; padding: 24px; display: block; color: var(--text); }
.t-tile h3 { margin: 0 0 6px; text-align: left; font-size: 1.3rem; }
.t-tile:hover { text-decoration: none; background: var(--raised); }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head > div:last-child { display: flex; gap: 12px; align-items: center; }
.page-head h1 { margin: 4px 0 6px; }
.crumbs { margin-bottom: 6px; }
.link-row { margin: 0 0 20px; }
.chips-row { margin-bottom: 16px; gap: 8px; }
.conn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tertiary); flex: none; }
.conn-dot[data-state="on"] { background: var(--green); }
.follow-banner { position: sticky; top: 48px; z-index: 30; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 22px; background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.follow-banner[hidden] { display: none; }
.follow-banner .btn { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }

.ev-list { display: grid; gap: 12px; }
.ev-tile { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 20px 24px; color: var(--text); }
.ev-tile:hover { text-decoration: none; background: var(--raised); }
.ev-tile h3 { text-align: left; margin: 0 0 2px; font-size: 1.2rem; }
.f-results { margin-top: 10px; display: grid; gap: 4px; }
.f-row { display: flex; gap: 12px; padding: 10px 14px; border-radius: var(--field-radius); background: var(--surface); color: var(--text); }
.muted-row td { color: var(--tertiary); }

/* strip cards */
.strip-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.strip-card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; border: 1px solid var(--border); }
.strip-card.is-live { box-shadow: inset 0 0 0 2px var(--red); }
.strip-card header { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.strip-no { font-family: var(--display); font-weight: 700; font-size: 1.15em; white-space: nowrap; }
.strip-ev { flex: 1; min-width: 0; color: var(--muted); font-size: .9em; white-space: nowrap; overflow: hidden; display: block; }
.strip-state { font-size: .75em; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.strip-state.st-live { background: var(--red); color: #fff; }
.strip-state.st-called, .strip-state.st-on_strip { background: var(--yellow); color: #000; }
.sb { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.sb.idle { display: block; padding: 8px 0; }
.sb-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.sb-side.left { border-left: 4px solid var(--red); }
.sb-side.right { border-left: 4px solid var(--green); text-align: left; }
.sb-side.win { background: color-mix(in srgb, var(--green) 20%, var(--surface-2)); }
.sb-side .nm { font-weight: 700; white-space: nowrap; overflow: hidden; display: block; }
.sb-side .cl { font-size: .8em; color: var(--muted); white-space: nowrap; overflow: hidden; display: block; min-height: 1.2em; }
.sb-side .sc { font-family: var(--display); font-size: 2.2em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sb-mid .lamps { display: flex; gap: 6px; }
.sb-mid .clock { font-family: var(--mono); font-weight: 700; font-size: 1.15em; white-space: nowrap; }
.sb-mid .per { font-size: .72em; color: var(--muted); white-space: nowrap; }
.deck { font-size: .85em; color: var(--muted); display: flex; gap: 8px; min-width: 0; }
.deck .lbl { font-weight: 600; white-space: nowrap; }
.deck .deck-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; display: block; }
.lamp { width: 1em; height: 1em; }
.chips { display: flex; gap: 3px; }
.card-chip { display: inline-block; min-width: .8em; height: 1.1em; border-radius: 2px; font-size: .7em; font-style: normal; font-weight: 700; text-align: center; line-height: 1.1em; color: #000; }
.card-chip.yellow { background: var(--yellow); } .card-chip.red { background: var(--red); color: #fff; } .card-chip.black { background: #000; color: #fff; border: 1px solid var(--tertiary); }

/* pool sheets */
.pool-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
.pool-sheet { background: var(--surface); border-radius: var(--radius); padding: 16px; min-width: 0; }
.pool-sheet header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.pool-sheet header h3 { margin: 0; }
.pool-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.pool-table th, .pool-table td { padding: .45em .55em; border: 1px solid var(--separator); text-align: center; white-space: nowrap; font-size: .92em; }
.pool-table th { background: var(--surface-2); color: var(--muted); font-weight: 600; }
.pool-table td.pn { text-align: left; }
.pool-table .pn .nm { display: block; font-weight: 700; }
.pool-table .pn .cl { display: block; color: var(--muted); font-size: .8em; }
.pool-table td.self { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); }
.pool-table td.win { font-weight: 700; color: var(--green); }
.pool-table td.loss { color: var(--muted); }
.pool-table td.live { color: var(--red); font-weight: 700; }
.pool-table td.pl { font-weight: 700; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* bracket */
.bracket-wrap { overflow: auto; max-width: 100%; border-radius: var(--radius); background: var(--surface); padding: 16px; }
.bracket { --mh: 5.2em; display: flex; gap: 2.2em; width: max-content; font-size: 15px; }
.b-round { display: flex; flex-direction: column; width: 16em; flex: none; }
.b-title { font-family: var(--display); font-weight: 700; color: var(--muted); text-align: center; padding-bottom: .6em; white-space: nowrap; }
.b-col { display: flex; flex-direction: column; justify-content: space-around; height: calc(var(--n) * var(--mh)); }
.b-match { position: relative; height: calc(var(--mh) - .8em); background: var(--surface-2); border-radius: 10px; display: flex; flex-direction: column; justify-content: center; overflow: visible; }
.b-match::after { content: ""; position: absolute; right: -1.1em; top: 50%; width: 1.1em; border-top: 1px solid var(--tertiary); }
.b-round:last-child .b-match::after { display: none; }
.b-match.live { box-shadow: inset 0 0 0 2px var(--red); }
.b-side { display: grid; grid-template-columns: 1.6em 1fr 2em; align-items: center; gap: .3em; padding: .25em .6em; min-width: 0; }
.b-side.win { font-weight: 700; }
.b-side.win .b-score { color: var(--green); }
.b-side:not(.win) { color: var(--muted); }
.b-match:not(.done) .b-side { color: var(--text); }
.b-side.empty { color: var(--tertiary) !important; }
.b-seed { font-size: .75em; color: var(--tertiary); text-align: right; }
.b-name { white-space: nowrap; overflow: hidden; display: block; min-width: 0; }
.b-score { font-family: var(--mono); font-weight: 700; text-align: right; }
.b-meta { position: absolute; left: .7em; bottom: -1.25em; font-size: .7em; color: var(--red); font-weight: 700; white-space: nowrap; }

.next-call { text-align: left; margin: 16px 0; }
.next-call h2 { margin-top: 0; }
@media (max-width: 640px) {
  .fsl { font-size: 16px; }
  .strip-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 2rem; }
}

/* portal broadcast tab */
.pb-tile { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.pb-tile h2, .pb-tile h3 { margin: 0; }
.pb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rot { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.rot-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--field-radius); background: var(--surface-2); }
.rot-btns { display: flex; gap: 6px; }
.pv-box { width: 100%; overflow: hidden; border-radius: 12px; background: #000; }
.pv-box iframe { border: 0; transform-origin: 0 0; display: block; }
.url-field { margin: 0; font-family: var(--mono); font-size: 13px; min-width: 320px; }
@media (max-width: 640px) { .pb-fields { grid-template-columns: 1fr; } }
.pb-page h2 { margin-top: 1.6em; }
.b-side.empty .b-seed { display: none; }
.b-side.empty .b-name { grid-column: 2 / 4; overflow: visible; }