/* High contrast for phones in sunlight (R4): black on white, light theme only, every text colour >= 7:1,
   18px root so rem sizes scale up, 44px+ touch targets, no sideways page scroll at 360px. */
:root {
  color-scheme: light;
  --ink: #000;
  --paper: #fff;
  --rule: #000;
  --muted: #333;      /* 12.6:1 on white */
  --link: #0033cc;    /* 9.0:1 */
  --live: #b00000;    /* 7.4:1, white on it 7.4:1 */
  --next: #fff3b0;
  --ok: #e6f4e6;
  --done: #eeeeee;
}
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--link); outline-offset: 2px;
}
[id] { scroll-margin-top: 72px; }   /* anchors land below the sticky nav */
/* F13: every link used as a tap target is at least 44px tall (WCAG 2.5.5). */
.brand, .status .refresh, .side .team a, .standings td.team a, .bx-side a, footer a, .jump a {
  display: inline-flex; align-items: center; min-height: 44px;
}

.top { background: var(--ink); padding: 12px 16px; }
.brand { color: var(--paper); font-weight: 800; font-size: 1.2rem; text-decoration: none; }
.tabs { display: flex; border-bottom: 3px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.tabs a {
  flex: 1; text-align: center; padding: 12px 2px; font-weight: 700; color: var(--ink); text-decoration: none;
  min-height: 48px; font-size: 0.95rem;
}
.tabs a[aria-current] { background: var(--ink); color: var(--paper); }
.status {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 6px 16px;
  border-bottom: 2px solid var(--rule); font-size: 0.9rem; font-weight: 700;
}
.status .refresh { margin-left: auto; padding: 10px 4px; }
#live-state.stale { color: var(--live); font-weight: 800; }

main { padding: 4px 16px 24px; max-width: 1100px; margin: 0 auto; }
h2 { font-size: 1.3rem; margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h3 { font-size: 1.1rem; margin: 16px 0 8px; }
.sub { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.note { border-left: 6px solid var(--ink); background: var(--done); padding: 8px 12px; font-weight: 700; margin: 12px 0; }
.note.strong { background: var(--next); }

.cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.game { border: 2px solid var(--rule); border-radius: 8px; padding: 8px 12px; background: var(--paper); }
.game.live { border: 4px solid var(--live); }
.game .meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.9rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; align-items: center; }
.game .meta .time { color: var(--ink); font-weight: 800; }
.side { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 600; }
.side .team { min-width: 0; }
.side .team a { color: var(--ink); text-decoration: none; display: inline-block; padding: 8px 0; }
.side .score { font-size: 1.4rem; font-weight: 800; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.side.win .team, .side.win .score { font-weight: 900; }
.side.win .team a::after { content: " \2714"; }
.vs { font-size: 0.9rem; font-weight: 700; color: var(--muted); line-height: 1; }
.seed { display: inline-block; border: 2px solid var(--ink); border-radius: 4px; padding: 0 5px; font-size: 0.9rem; font-weight: 800; vertical-align: middle; }
.tbd { font-style: italic; color: var(--muted); display: inline-block; padding: 8px 0; }

.badge { margin-left: auto; padding: 2px 8px; border-radius: 4px; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; }
.badge.final { background: var(--ink); color: var(--paper); }
.badge.live { background: var(--live); color: var(--paper); }
.next-tag { background: var(--ink); color: var(--next); padding: 2px 8px; border-radius: 4px; font-size: 0.9rem; letter-spacing: 0.04em; }
section.timeslot.next > h2 { background: var(--next); padding: 6px 8px; border-left: 6px solid var(--ink); }

.tablewrap { overflow-x: auto; }
table.standings { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.standings th, .standings td { border-bottom: 2px solid var(--rule); padding: 6px 6px; text-align: right; white-space: nowrap; }
.standings th { background: var(--ink); color: var(--paper); font-size: 0.9rem; }
.standings th.num, .standings td.num { text-align: center; }
.standings th.team, .standings td.team { text-align: left; white-space: normal; width: 100%; }
.standings td.team a { color: var(--ink); font-weight: 700; display: inline-block; padding: 8px 0; }
@media (max-width: 420px) { .standings .wide { display: none; } }
.tb { display: inline-block; margin-left: 6px; padding: 0 6px; border: 2px solid var(--ink); border-radius: 4px; font-size: 0.9rem; font-weight: 800; vertical-align: middle; }
.tb.flip { background: var(--next); }
.legend { font-size: 0.9rem; color: var(--muted); }
.teamline { font-weight: 700; font-size: 1.05rem; }

.picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.picker label { font-weight: 700; }
.picker select { flex: 1 1 10rem; min-width: 0; }
select, input, button { font: inherit; }
select, input { border: 2px solid var(--ink); border-radius: 6px; padding: 8px; background: var(--paper); color: var(--ink); min-height: 48px; }
button {
  border: 2px solid var(--ink); border-radius: 6px; padding: 8px 16px; min-height: 48px;
  background: var(--ink); color: var(--paper); font-weight: 800; cursor: pointer;
}
button.secondary { background: var(--paper); color: var(--ink); }
button.danger { background: var(--paper); color: var(--live); border-color: var(--live); }
input:disabled { background: var(--done); }

footer { display: flex; justify-content: flex-end; padding: 8px 16px 24px; border-top: 3px solid var(--rule); font-weight: 700; }
footer a { display: inline-block; padding: 12px 4px; }

/* bracket tree: scrolls sideways inside its own box on phones; the page itself never does */
.bracket-scroll { overflow-x: auto; border: 2px solid var(--rule); border-radius: 8px; padding: 8px; }
.bracket { display: flex; gap: 14px; min-width: max-content; }
.bcol { display: flex; flex-direction: column; width: 13.5rem; }
.bcol h3 { margin: 0 0 6px; font-size: 1rem; text-align: center; background: var(--ink); color: var(--paper); padding: 4px; border-radius: 4px; }
.bcol-boxes { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.bx { border: 2px solid var(--rule); border-radius: 6px; padding: 4px 8px; background: var(--paper); }
.bx.live { border: 4px solid var(--live); }
.bx.bye { border-style: dashed; }
.bx-meta { display: flex; gap: 6px; align-items: center; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.bx-side { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; }
.bx-side a { color: var(--ink); text-decoration: none; display: inline-block; padding: 6px 0; }
.bx-side .tbd { padding: 6px 0; }
.bx-side.win { font-weight: 900; }
.bx-side.win a::after { content: " \2714"; }
.bx-score { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* admin */
.login form, .score-form, .coin-form { display: grid; gap: 8px; }
.login input { width: 100%; }
.score-form, .coin-form { border: 2px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.score-form.final, .score-form.forfeit { background: var(--done); }
.score-form.live { border: 4px solid var(--live); }
.score-form .meta { display: flex; gap: 6px 10px; flex-wrap: wrap; font-weight: 700; align-items: center; }
.score-form .gid { color: var(--muted); }
.score-form label, .coin-form label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; }
.score-form input, .coin-form input { width: 5ch; text-align: center; font-size: 1.3rem; font-weight: 800; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.buttons button { flex: 1 1 auto; }
.error { border: 3px solid var(--live); color: var(--live); padding: 8px 12px; font-weight: 800; border-radius: 6px; margin: 4px 0; }
.ok { border: 3px solid var(--ink); background: var(--ok); padding: 8px 12px; font-weight: 800; border-radius: 6px; margin: 4px 0; }
.logout { display: flex; justify-content: flex-end; margin-top: 8px; }
.jump a { display: inline-block; padding: 10px 6px; font-weight: 700; }
.audit { font-size: 0.9rem; padding-left: 20px; }
details.picks { margin: 16px 0; }
details.picks summary { font-weight: 800; padding: 12px 0; cursor: pointer; }