/* Reusable components. Class names already used by the views are kept so every page picks up the new look. */

.icon { width: 22px; height: 22px; flex-shrink: 0; }
.icon-sm { width: 18px; height: 18px; }

/* Screen-reader only */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.muted { color: var(--muted); }

/* ---- Buttons ---- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  border: 2px solid var(--brand); border-radius: var(--r);
  background: var(--brand); color: var(--on-brand);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
button:hover, .btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); }
.btn.alt, .btn-secondary { background: var(--surface); color: var(--brand-strong); border-color: var(--brand); }
.btn.alt:hover, .btn-secondary:hover { background: var(--surface-2); color: var(--brand-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); }

/* Text-style button (inline actions, e.g. Delete) */
.linkish { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--brand-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.linkish:hover { background: none; color: var(--brand-strong); text-decoration-thickness: 2px; }
.linkish.dark { color: var(--danger); }
.linkish.dark:hover { color: var(--danger); }
form.inline { display: inline; }

/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); margin-bottom: var(--s-5); max-width: 32rem; }
.card.wide { max-width: 44rem; }
@media (min-width: 48rem) { .card { padding: var(--s-5); } }

/* ---- Forms ---- */
label { display: block; margin-bottom: var(--s-4); font-weight: 600; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  display: block; width: 100%; min-height: var(--tap); margin-top: var(--s-1); padding: 0 var(--s-3);
  border: 1px solid var(--control-border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: 1rem; /* 16px stops iOS zooming in */
  font-weight: 400;
}
textarea { padding: var(--s-2) var(--s-3); min-height: 6rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex-shrink: 0; }
label.check { display: flex; gap: var(--s-3); align-items: center; min-height: var(--tap); font-weight: 500; }

/* ---- Flash messages ---- */
.flash { padding: var(--s-3) var(--s-4); border-radius: var(--r); margin-bottom: var(--s-4); border: 1px solid; }
.flash.ok { background: var(--ok-tint); border-color: var(--ok-line); }
.flash.err { background: var(--danger-tint); border-color: var(--danger-line); }

/* ---- Tags / badges ---- */
.tag { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-strong); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; }
.tag.off { background: var(--surface-2); color: var(--muted); }

/* ---- Tables ---- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s-5); }
.scroll > table { background: none; }
table { background: var(--surface); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
tr:last-child > td { border-bottom: 0; }
th.num, td.num { text-align: right; }
td.won { font-weight: 700; }
table caption.sr { display: block; }


/* ---- Season picker / filters ---- */
.picker { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; margin: 0 0 var(--s-5); }
.picker label, .picker-field { margin: 0; flex: 1 1 10rem; max-width: 16rem; font-size: var(--fs-sm); color: var(--muted); }
.picker-field > span { display: block; margin-bottom: var(--s-1); font-weight: 600; }
.picker select { margin-top: 0; }
.js .picker[data-autosubmit] .picker-go { display: none; }

/* ---- Page header ---- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.page-header h1 { margin: 0; }
.page-sub { margin: var(--s-1) 0 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Section heading with an optional link on the right */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---- Match cards ---- */
.match-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.match-list > li + li { border-top: 1px solid var(--line-soft); }
.match { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--ink); text-decoration: none; }
a.match:hover { background: var(--surface-2); color: var(--ink); }
.match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.match-meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 2px; }
.match-side { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--muted); font-weight: 500; }
.match-team { min-width: 0; overflow-wrap: anywhere; }
.match-score { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.5ch; text-align: right; }
.match-side.is-win { color: var(--ink); font-weight: 700; }
.match-side.is-win .match-score { color: var(--brand-strong); }
.match.is-upcoming .match-side { color: var(--ink); font-weight: 600; }
.match-chevron { color: var(--muted); }
/* Wider screens: one card per match in a grid, so scores stay close to the team names */
@media (min-width: 48rem) {
  .match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-3); background: none; border: 0; border-radius: 0; overflow: visible; }
  .match-list > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
  .match-list > li + li { border-top: 1px solid var(--line); }
}

/* ---- League table ---- */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-4); }
table.league th, table.league td { padding: var(--s-3) var(--s-2); }
table.league th:first-child, table.league td:first-child { padding-left: var(--s-4); }
table.league th:last-child, table.league td:last-child { padding-right: var(--s-4); }
table.league .pos { width: 2.75rem; font-weight: 700; }
table.league .team a { color: var(--ink); font-weight: 600; text-decoration: none; }
table.league .team a:hover { color: var(--brand-strong); text-decoration: underline; }
table.league .strong { font-weight: 700; font-size: 1.0625rem; }
.pos-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); }
.hide-sm { display: none; }
@media (min-width: 30rem) { .hide-sm { display: table-cell; } }

/* ---- Empty state ---- */
.empty { padding: var(--s-6) var(--s-4); margin-bottom: var(--s-5); text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty p { margin: 0 0 var(--s-3); }
.empty p:last-child { margin: 0; }

/* ---- Form fields ---- */
.field { margin-bottom: var(--s-4); }
.field > label { margin: 0 0 var(--s-1); }
.field input, .field select, .field textarea { margin-top: 0; }
.hint { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
label.check + .hint { margin: calc(-1 * var(--s-3)) 0 var(--s-4) calc(20px + var(--s-3)); }

/* ---- Admin lists ---- */
.actions { white-space: nowrap; }
.actions a, .actions form { margin-right: var(--s-3); }
.pair { display: flex; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); }
.pair select { margin: 0; flex: 1; }

/* ---- Result entry: rules disclosure ---- */
details.rules { margin: 0 0 var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 var(--s-4); }
details.rules summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }

/* ---- System check ---- */
.chk-ok { color: var(--brand-strong); font-weight: 600; }
.chk-warn { color: var(--warn); font-weight: 700; }
.chk-fail { color: var(--danger); font-weight: 700; }

/* ---- Form actions: primary button with Cancel beside it ---- */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.form-actions a { font-weight: 600; }
.meta-line { margin: 0 0 var(--s-4); color: var(--muted); }
.meta-line strong { color: var(--ink); }
.errors { margin-bottom: var(--s-4); }
.errors .flash { margin-bottom: var(--s-2); }

/* Narrow single-column pages (log in, password, setup) */
.narrow-page { max-width: 28rem; margin: 0 auto; }
.narrow-page .card { max-width: none; }

/* Danger zone (delete, clear) */
.danger-zone { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.danger-zone h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-2); }

/* ---- Segmented control and filter chips ---- */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 22rem; padding: 4px; margin: 0 0 var(--s-3); background: var(--line-soft); border-radius: var(--r); }
.segmented a { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; color: var(--muted); font-weight: 600; text-decoration: none; }
.segmented a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding: 2px; margin: 0 0 var(--s-4); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--control-border); color: var(--ink); }
.chip[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }

/* Date heading above a group of matches */
.date-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

/* ---- Home: two columns on large screens ---- */
.home-grid { display: grid; gap: 0 var(--s-6); }
.home-grid > * > .section-head:first-child { margin-top: var(--s-2); }
@media (min-width: 64rem) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 26rem; align-items: start; }
}

/* ---- Responsive tables: rows become cards on phones ---- */
@media (max-width: 47.99rem) {
  .scroll:has(> table.responsive) { overflow: visible; background: none; border: 0; border-radius: 0; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive { background: none; }
  table.responsive thead, table.responsive tr.head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.responsive tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
  table.responsive td { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-1) 0; border: 0; text-align: right; }
  table.responsive td::before { content: attr(data-label); color: var(--muted); font-weight: 500; text-align: left; flex-shrink: 0; }
  table.responsive td.primary { display: block; text-align: left; font-size: var(--fs-lg); font-weight: 700; padding-bottom: var(--s-2); }
  table.responsive td.primary::before, table.responsive td.actions::before, table.responsive td:not([data-label])::before { content: none; }
  table.responsive td.actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-top: var(--s-3); margin-top: var(--s-2); border-top: 1px solid var(--line-soft); white-space: normal; }
  table.responsive td:empty { display: none; }
}

/* ---- Show/hide by screen size ---- */
@media (max-width: 47.99rem) { .lg-only { display: none !important; } }
@media (min-width: 48rem) { .sm-only { display: none !important; } }

/* ---- Player stats (phone list) ---- */
.rank-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rank-list > li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.rank-list > li + li { border-top: 1px solid var(--line-soft); }
.rank-no { width: 1.75rem; flex-shrink: 0; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank-who strong { overflow-wrap: anywhere; }
.rank-who span { font-size: var(--fs-sm); color: var(--muted); }
.rank-figs { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.rank-figs strong { font-size: 1.25rem; line-height: 1.2; }
.rank-figs span { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
/* A rank row with a strip of extra figures underneath, lined up with the name */
.rank-list > li.rank-wrap { flex-wrap: wrap; row-gap: var(--s-2); }
.rank-split { flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin: 0; padding-left: calc(1.75rem + var(--s-3)); }
.rank-split div { display: flex; flex-direction: column; }
.rank-split dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rank-split dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Match page ---- */
.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-4); margin-bottom: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; }
.scoreboard .sb-team { font-weight: 700; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.scoreboard .sb-score { font-size: clamp(2rem, 1.5rem + 3vw, 3rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.scoreboard .sb-score .won { color: var(--brand-strong); }
.scoreboard .sb-note { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); }
.frame-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.frame-list > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); }
.frame-list > li + li { border-top: 1px solid var(--line-soft); }
.frame-list .fl-no { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.frame-list .fl-player { color: var(--muted); overflow-wrap: anywhere; }
.frame-list .fl-player.away { text-align: right; }
.frame-list .fl-player.won { color: var(--ink); font-weight: 700; }
.frame-list .fl-player.won::after { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 0 1px var(--s-2); border-radius: 50%; background: var(--brand); }
.frame-list .fl-player.away.won::after { display: none; }
.frame-list .fl-player.away.won::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 var(--s-2) 1px 0; border-radius: 50%; background: var(--brand); }
.frame-list .fl-tags { display: block; font-size: var(--fs-xs); font-weight: 600; }
.bd-tag { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; }
.first-tag { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; vertical-align: 1px; }
.frame-head { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); padding: 0 var(--s-4) var(--s-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.frame-head span:last-child { text-align: right; }

/* ---- Captain dashboard ---- */
.task-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 48rem) { .task-list { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } }
.task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.task-teams { display: flex; flex-direction: column; gap: 2px; }
.task-teams .mine { font-weight: 700; }
.task .btn { align-self: stretch; }
.stat-strip { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); }
.stat-strip strong { color: var(--ink); }

/* ---- Result entry ---- */
.result-form { max-width: 44rem; }
.frame-card { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.frame-card legend { float: left; width: auto; padding: 0; margin: 0; font-weight: 700; font-size: var(--fs-lg); line-height: 40px; }
.frame-card legend + * { clear: none; }
.frame-top { display: flex; justify-content: flex-end; margin-bottom: var(--s-3); min-height: 40px; }
.frame-players { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.frame-players label { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.frame-players select { margin-top: var(--s-1); }
.pick-label { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.winner-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); border: 0; padding: 0; }
/* Native radios/checkboxes, visually replaced by their styled <span> */
.pick-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick { margin: 0; }
.pick span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--s-1) var(--s-3); border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font-weight: 600; text-align: center; cursor: pointer; overflow-wrap: anywhere; line-height: 1.25; }
.pick:hover span { border-color: var(--control-border); }
.pick-input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
.pick-input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.toggle { margin: 0; }
.toggle span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.pick-input:checked + .toggle-face { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.pick-input:checked + .toggle-face::after { content: " \2713"; white-space: pre; }
.score-bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-4); margin: var(--s-4) calc(-1 * var(--gutter)) 0; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16, 24, 32, 0.08); }
.score-bar .sb-figs { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.score-bar .sb-now { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.score-bar .sb-sub { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 48rem) { .score-bar { margin-left: 0; margin-right: 0; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); } }

/* Pages that hide the tab bar (focused tasks like entering a result) */
body.focus .tabbar { display: none; }
body.focus .main { padding-bottom: var(--s-4); }

/* ---- Admin home tiles ---- */
.task.admin-tile { flex-direction: row; align-items: center; gap: var(--s-4); color: var(--ink); text-decoration: none; height: 100%; }
.task.admin-tile:hover { border-color: var(--control-border); color: var(--ink); }
.tile-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r); background: var(--brand-tint); color: var(--brand-strong); }
.tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tile-text .muted { font-size: var(--fs-sm); }

/* Two fields side by side when there is room */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--s-3); }
.round-rows { list-style: none; margin: 0; padding: 0; }
.round-rows .pair { margin-bottom: var(--s-3); }

/* Line-up warnings shown by app.js above the score bar */
.lineup-hints:empty { display: none; }
.lineup-hints { margin-top: var(--s-4); }
.lineup-hints .flash { margin-bottom: var(--s-2); }

/* ---- Cup bracket ---- */
.bracket { display: flex; flex-direction: column; gap: var(--s-5); margin-bottom: var(--s-5); }
.bracket-round { scroll-margin-top: 76px; }
.bracket-head { margin-bottom: var(--s-2); }
.bracket-head h3 { margin: 0; font-size: var(--fs-lg); }
.bracket-head p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.bracket-ties { display: flex; flex-direction: column; gap: var(--s-3); }
.tie { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.tie-side { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 28px; font-weight: 600; }
.tie-name { min-width: 0; overflow-wrap: anywhere; }
.tie-score { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tie-side.is-win { font-weight: 700; }
.tie-side.is-win .tie-score { color: var(--brand-strong); }
.tie-side.is-loss { color: var(--muted); font-weight: 500; }
.tie-bye, .tie-tbd { color: var(--muted); font-weight: 400; font-style: italic; }
.tie-meta { margin: var(--s-2) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--muted); }
.tie-action { margin-top: var(--s-2); align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.champion { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-4); background: var(--brand); color: var(--on-brand); border-radius: var(--r-lg); text-align: center; }
.champion-icon { width: 36px; height: 36px; color: var(--accent); }

/* Wide screens: one column per round, each tie level with the two that feed it (space-around does the maths) */
@media (min-width: 64rem) {
  .bracket { flex-direction: row; gap: var(--s-4); overflow-x: auto; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .bracket-round { flex: 0 0 13rem; display: flex; flex-direction: column; }
  .bracket-winner { flex-basis: 10rem; }
  .bracket-head { min-height: 3.25rem; }
  .bracket-ties { flex: 1; justify-content: space-around; }
  .tie { background: var(--surface-2); }
}

/* Cup list cards */
.cup-card { display: flex; align-items: center; gap: var(--s-4); color: var(--ink); text-decoration: none; }
.cup-card:hover { border-color: var(--control-border); color: var(--ink); }
.cup-card .tile-text strong { overflow-wrap: anywhere; }

/* Previous / next pager under a long list */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: calc(-1 * var(--s-3)) 0 var(--s-5); }
.pager .btn { padding: 0 var(--s-4); }
.pager .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.pager-pos { color: var(--muted); font-size: var(--fs-sm); }

/* Entry pickers */
.check-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 var(--s-4); }
.check-list label.check { margin: 0; }
.check-group { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.entry-list > li { justify-content: space-between; }
.round-settings td input { margin: 0; min-width: 6rem; }