/* ---- Theme ----------------------------------------------------------------
   Every color is a variable. The page's <head> sets data-theme="light" or
   "dark" on <html> (from the Settings page choice, or the system setting)
   before anything draws. */

:root {
  color-scheme: light;
  --bg: #fafafa;
  --surface: #fff;
  --surface-alt: #fcfcfc;
  --border: #ddd;
  --border-soft: #eee;
  --border-muted: #ccc;
  --text: #1a1a1a;
  --text-2: #444;
  --muted: #666;
  --muted-2: #555;
  --faint: #888;
  --faint-2: #999;
  --fainter: #aaa;
  /* Accents: the logo kit's navy #0B2A5B (static/brand/README.txt) and tints of it. */
  --accent: #0b2a5b;
  --accent-bg: #0b2a5b;
  --accent-bg-hover: #071d40;
  --on-accent: #fff;
  --accent-soft: #eef1f6;
  --accent-soft-2: #dde3ee;
  --accent-border: #9aa9c4;
  --secondary-bg: #e8ecf3;
  --secondary-bg-hover: #d6dde9;
  --disabled-bg: #b6c0d0;
  --hover: #f1f5fa;
  --hover-2: #f1f6fc;
  --row-focus: #fff7db;
  --code-bg: #f3f3f3;
  --win-bg: #e3f1e6;
  --win-text: #14532d;
  --win-meta: #2f6b43;
  --good: #15803d;
  --bad: #b91c1c;
  --ok-bg: #e6f4ea;
  --ok-text: #1e4620;
  --ok-border: #b7dfc0;
  --err-bg: #fdecea;
  --err-text: #611a15;
  --err-border: #f5c6c2;
  --danger-bg: #a33;
  --danger-bg-hover: #7a2222;
  --warn: #b45309;
  --warn-bg: #fdf3d7;
  --warn-bg-soft: #fffaf0;
  --warn-text: #7a5300;
  --warn-text-2: #7a4a00;
  --backdrop: rgba(20, 30, 45, 0.45);
  --shadow: rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* The logo kit's dark header navy #14233D for surfaces, its yellow
     #F7C52B for accents (navy text on yellow, as in the logo). */
  --bg: #0e192c;
  --surface: #14233d;
  --surface-alt: #172843;
  --border: #2b3d5c;
  --border-soft: #213250;
  --border-muted: #3a4e70;
  --text: #e6e8eb;
  --text-2: #c4c8ce;
  --muted: #a2a9b2;
  --muted-2: #b0b6be;
  --faint: #7d848e;
  --faint-2: #7d848e;
  --fainter: #646b75;
  --accent: #f7c52b;
  --accent-bg: #f7c52b;
  --accent-bg-hover: #ffd451;
  --on-accent: #0b2a5b;
  --accent-soft: #1b2e4f;
  --accent-soft-2: #22395f;
  --accent-border: #5b6f92;
  --secondary-bg: #1e3050;
  --secondary-bg-hover: #283d62;
  --disabled-bg: #3a4350;
  --hover: #252c36;
  --hover-2: #222a35;
  --row-focus: #3a3218;
  --code-bg: #262b33;
  --win-bg: #1d3a28;
  --win-text: #8fdca8;
  --win-meta: #74c08e;
  --good: #4ade80;
  --bad: #f87171;
  --ok-bg: #183323;
  --ok-text: #9fe0b3;
  --ok-border: #2b5a3c;
  --err-bg: #3a1d1d;
  --err-text: #f4b4ad;
  --err-border: #6b2e2b;
  --danger-bg: #b03a3a;
  --danger-bg-hover: #c44a4a;
  --warn: #f59e0b;
  --warn-bg: #3a3018;
  --warn-bg-soft: #2e2717;
  --warn-text: #f3c969;
  --warn-text-2: #f3c969;
  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow: rgba(0, 0, 0, 0.6);
}

/* Always reserve the scrollbar's space, so pages with and without one
   line up identically. */
html { scrollbar-gutter: stable; }

/* One page frame for every page: the menu and every section use the same
   full width, so nothing moves or changes size between pages. */
body {
  font-family: -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.5rem;
  color: var(--text);
  background: var(--bg);
}

nav {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

nav a {
  margin-right: 1.25rem;
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
}

nav a:hover { text-decoration: underline; }

nav .nav-form {
  display: inline;
  margin: 0;
}

nav .nav-form button {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

nav .nav-form button:hover { text-decoration: underline; }

h1 { margin-top: 0; }

a { color: var(--accent); }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0 2rem;
  background: var(--surface);
}

th, td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  text-align: left;
  font-size: 0.95rem;
}

th { background: var(--accent-soft); }

tr:nth-child(even) td { background: var(--surface-alt); }

.hint {
  color: var(--muted-2);
  font-size: 0.9rem;
  max-width: 65ch;
}

.warn {
  color: var(--warn);
  font-size: 0.8rem;
  cursor: help;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 420px;
  margin-bottom: 2rem;
  background: var(--surface);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.stack-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  gap: 0.25rem;
}

.stack-form label.checkbox {
  flex-direction: row;
  align-items: center;
}

input, select, textarea, button {
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
  font-family: inherit;
}

button {
  cursor: pointer;
  background: var(--accent-bg);
  color: var(--on-accent);
  border: none;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
}

button:hover { background: var(--accent-bg-hover); }

button.danger {
  background: var(--danger-bg);
}

button.danger:hover { background: var(--danger-bg-hover); }
/* A delete that sits on every row (Teams): quiet until pointed at. */
button.tm-delete:hover { background: var(--danger-bg); color: #fff; }

.example {
  background: var(--code-bg);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  overflow-x: auto;
}

.flashes {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.flashes li {
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.flash-ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.flash-error { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }

/* ---- What-If page ------------------------------------------------------ */


button.secondary { background: var(--secondary-bg); color: var(--text); }
button.secondary:hover { background: var(--secondary-bg-hover); }

.wi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.wi-head h1 { margin-bottom: 0; }

.wi-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.wi-count { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.wi-check { font-size: 0.9rem; display: flex; align-items: center; gap: 0.3rem; }

.wi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .wi-layout { grid-template-columns: minmax(0, 1fr); }
}

.wi-date {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.25rem 0 0.5rem;
}
.wi-day:first-child .wi-date { margin-top: 0; }

.matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color 0.15s, opacity 0.15s;
}
.matchup.is-set { border-color: var(--accent-border); }
.matchup.saving { opacity: 0.6; }

.pick {
  background: var(--surface);
  color: var(--text);
  border-radius: 0;
  padding: 0.6rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  text-align: left;
}
.pick:hover { background: var(--hover); }
.pick-team:last-child { align-items: flex-end; text-align: right; }
.pick-name { font-weight: 600; overflow-wrap: break-word; }
.pick-meta { font-size: 0.78rem; color: var(--muted); }

.pick-tie {
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted-2);
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding: 0 1rem;
}

.pick.selected { background: var(--win-bg); color: var(--win-text); }
.pick.selected .pick-meta { color: var(--win-meta); }
.pick.selected .pick-name::after { content: " \2713"; }
.pick-tie.selected { background: var(--warn-bg); color: var(--warn-text); }
.pick.loser { color: var(--faint-2); }
.pick.loser .pick-name { font-weight: 500; }
.pick.loser .pick-meta { color: var(--fainter); }

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

.wi-standings {
  position: sticky;
  top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.75rem 0.25rem;
}

.wi-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.wi-tab {
  flex: 1;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}
.wi-tab:hover { background: var(--accent-soft-2); }
.wi-tab.active { background: var(--accent-bg); color: var(--on-accent); }

/* Fixed column widths, identical for the AA and A tables, so nothing
   shifts when switching tabs. The Team column takes what's left. */
.wi-table { margin: 0; font-variant-numeric: tabular-nums; table-layout: fixed; width: 100%; min-width: 31rem; }
.wi-table col.c-rank { width: 1.9rem; }
.wi-table col.c-move { width: 2.2rem; }
.wi-table col.c-record { width: 3.9rem; }
.wi-table col.c-avg { width: 3.5rem; }
.wi-table col.c-delta { width: 3.5rem; }
.wi-table col.c-r1 { width: 8.8rem; }
.wi-table td, .wi-table th { overflow: hidden; }
.wi-table th, .wi-table td { border: none; border-bottom: 1px solid var(--border-soft); padding: 0.35rem 0.4rem; font-size: 0.88rem; }
.wi-table th { background: none; color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.wi-table tr:nth-child(even) td { background: none; }
.wi-table .num { text-align: right; }
.wi-table td.rank { color: var(--muted); }
.wi-table td.move { font-size: 0.75rem; font-weight: 700; }
.wi-table .up { color: var(--good); }
.wi-table .down { color: var(--bad); }
.wi-table td.delta { font-size: 0.8rem; }
.wi-table td.team a { color: var(--text); text-decoration: none; }
.wi-table td.team a:hover { text-decoration: underline; }
.wi-table tr.focus td { background: var(--row-focus); font-weight: 600; }
.wi-table td { white-space: nowrap; }
.wi-table td.team { white-space: normal; }

/* The `hidden` attribute must win over display rules like .matchup { display: grid }. */
[hidden] { display: none !important; }

/* ---- Games page: add-a-game form (reuses the What-If .matchup row) ------ */

.add-game {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 2rem;
}
.add-game h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }

.ag-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}
.ag-fields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; min-width: 0; }
.ag-fields select, .ag-fields input { width: 100%; box-sizing: border-box; }
.ag-vs { color: var(--faint); padding-bottom: 0.5rem; }
@media (max-width: 640px) {
  .ag-fields { grid-template-columns: minmax(0, 1fr); }
  .ag-vs { display: none; }
}

.ag-label { font-size: 0.9rem; margin-bottom: 0.35rem; }
.ag-label .hint { font-size: 0.8rem; }
.add-game .matchup { margin-bottom: 0.9rem; }

.ag-options { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.ag-warn {
  margin: 0;
  font-size: 0.82rem;
  color: var(--warn-text-2);
  background: var(--warn-bg);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  max-width: 65ch;
}

@media (max-width: 480px) {
  .pick { padding: 0.5rem 0.55rem; }
  .pick-name { font-size: 0.88rem; }
  .pick-tie { padding: 0 0.5rem; }
}

/* ---- "Other team" pop-up on the Games page ----------------------------- */

.ag-dialog {
  border: none;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  width: min(380px, calc(100vw - 2rem));
  box-sizing: border-box;
  box-shadow: 0 10px 40px var(--shadow);
}
.ag-dialog::backdrop { background: var(--backdrop); }
.ag-dialog h3 { margin: 0 0 0.25rem; }
.ag-dialog .hint { font-size: 0.82rem; margin: 0 0 0.75rem; }
.ag-dialog label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.ag-dialog input[type="text"] { width: 100%; box-sizing: border-box; }
.ag-record {
  border: none;
  padding: 0;
  margin: 0.75rem 0 0.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.ag-record legend { font-size: 0.9rem; padding: 0; margin-bottom: 0.25rem; }
.ag-record input { width: 100%; box-sizing: border-box; }
.ag-dialog-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

.src { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; }
.src-pdf { background: var(--accent-soft); color: var(--accent); }
.src-manual { background: var(--win-bg); color: var(--win-text); }

/* ---- Games page: "Remaining games" results list ------------------------- */

.rg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.rg-head .hint { margin: 0; }
.rg-head button, .rg-foot button { white-space: nowrap; }
.rg-save:disabled { background: var(--disabled-bg); cursor: default; }
#remaining .wi-date { margin-top: 1rem; }
.rg-foot { display: flex; justify-content: flex-end; margin-top: 0.75rem; }

/* ---- Upload PDFs page --------------------------------------------------- */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 2.25rem 1rem;
  margin: 1rem 0 1.25rem;
  background: var(--surface);
  border: 2px dashed var(--accent-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.drop:hover, .drop.over { background: var(--hover-2); border-color: var(--accent); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop-icon { font-size: 2rem; color: var(--accent); line-height: 1; }
.drop-main { font-weight: 600; font-size: 1.1rem; }
.drop-sub { color: var(--muted); font-size: 0.9rem; }

.up-list { list-style: none; padding: 0; margin: 0; }
.up-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-muted);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}
.up-name { font-weight: 600; overflow-wrap: anywhere; }
.up-status { font-size: 0.9rem; margin-top: 0.15rem; }
.up-details { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; overflow-wrap: anywhere; }
.up-item[data-state="working"] { border-left-color: var(--accent); }
.up-item[data-state="working"] .up-status { color: var(--accent); }
.up-item[data-state="loaded"] { border-left-color: var(--good); }
.up-item[data-state="saved"] { border-left-color: var(--warn); }
.up-item[data-state="need_class"] { border-left-color: var(--warn); background: var(--warn-bg-soft); }
.up-item[data-state="error"] { border-left-color: var(--bad); }
.up-item[data-state="error"] .up-status { color: var(--bad); }
.up-class { display: inline-flex; gap: 0.4rem; margin-left: 0.25rem; }
.up-class button { padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.up-done { margin-top: 1rem; }

.res { font-weight: 600; white-space: nowrap; }
.res-tie { color: var(--warn-text); }
.res-win { color: var(--good); }

/* ---- Settings page ------------------------------------------------------ */

.set-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.set-card h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.set-card .hint { margin: 0; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
.set-row form { margin: 0; }
.set-row h2 { margin: 0; }
.set-row button { white-space: nowrap; }
.set-row button:disabled { background: var(--disabled-bg); cursor: default; }

.set-results { margin-top: 0.9rem; font-size: 0.88rem; }
.set-results summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.set-results ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.set-results li { margin-bottom: 0.2rem; overflow-wrap: anywhere; }
.set-notes li { color: var(--warn-text-2); }
.set-loaded li { color: var(--text-2); }

.set-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.25rem; margin: 0.5rem 0 0; font-size: 0.92rem; }
.set-facts dt { color: var(--muted); }
.set-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .set-facts { grid-template-columns: minmax(0, 1fr); }
  .set-facts dd { margin-bottom: 0.4rem; }
}

/* Segmented control (Settings > Appearance) */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.seg button {
  background: var(--surface);
  color: var(--text);
  border-radius: 0;
  border-right: 1px solid var(--border);
  font-size: 0.9rem;
  white-space: nowrap;
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--hover); }
.seg button.on { background: var(--accent-bg); color: var(--on-accent); }

/* What-If standings: AA first-round projection */
.wi-table th.r1-head { white-space: nowrap; }
.wi-table td.r1 { font-size: 0.8rem; }
/* Names in the What-If standings stay on one line within a set width;
   ones that don't fit switch to a short form, then "…" (see the page JS). */
.wi-table .fit-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wi-table .fit-name { max-width: 100%; }
.wi-standings .wi-table td.team { white-space: nowrap; }
.wi-table td.r1-changed { color: var(--accent); font-weight: 600; }
.wi-table td.r1-out { color: var(--faint); }
.wi-table tr.non-playoff td { color: var(--muted); }
.wi-table tr.non-playoff td.team a { color: var(--muted); }
.wi-table tr.cut-line td { border-bottom: 2px solid var(--accent-border); }
.wi-table td.r1-bye { font-weight: 600; color: var(--good); }
.wi-table td.r1-bye.r1-changed { color: var(--accent); }
/* On phone-size screens the standings table is wider than its panel; let it
   scroll sideways inside the panel instead of widening the whole page. */
.wi-standings { overflow-x: auto; }

/* ---- Brackets page --------------------------------------------------------
   Each round is a column. Games sit in pairs (.br-pair.is-pair) that split
   their column height evenly, so a game in the next round lines up with the
   middle of the pair feeding it; the pair draws the "⊐" connector and the
   next round's slot draws the short line coming in. */

.br-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.br-head h1 { margin-bottom: 0; }
.br-tabs { margin: 0; min-width: 16rem; }
.br-source { display: flex; align-items: center; gap: 0.5rem 1.5rem; flex-wrap: wrap; font-size: 0.9rem; margin: 0.75rem 0 1rem; }
.br-source span { color: var(--muted); }
.br-source label:has(input:disabled) { color: var(--faint); cursor: default; }
.br-note { font-size: 0.85rem; color: var(--muted); }

.br-wrap { overflow-x: auto; padding-bottom: 0.5rem; }
.bracket { display: flex; min-width: 860px; }
.br-round { flex: 0 1 290px; min-width: 0; display: flex; flex-direction: column; }
.br-round-name {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 0 0.5rem;
}
.br-round + .br-round .br-round-name { padding-left: 14px; }
.br-games { flex: 1; display: flex; flex-direction: column; }
.br-pair { flex: 1; display: flex; flex-direction: column; position: relative; }
.br-slot { flex: 1; display: flex; align-items: center; position: relative; padding: 5px 0; }

/* Outgoing connector from a pair: across from each game, then joined. */
.br-pair.is-pair .br-slot { padding-right: 14px; }
.br-pair.is-pair::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 14px;
  border: 2px solid var(--border);
  border-left: none;
  border-radius: 0 4px 4px 0;
}
/* Incoming line into every game after the first round. */
.br-round + .br-round .br-slot { padding-left: 14px; }
.br-round + .br-round .br-slot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  border-top: 2px solid var(--border);
}

.br-game {
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.86rem;
  position: relative;
}
/* During the playoffs: each game's date, just above it. */
.bracket.has-dates .br-slot { padding-top: 1.15rem; }
.br-when {
  position: absolute;
  bottom: 100%;
  left: 0.15rem;
  right: 0;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.1rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.br-when.is-tbd { font-weight: 400; color: var(--faint); }
.br-game:has(.br-when) { overflow: visible; }
.br-team {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  min-width: 0;
}
.br-team + .br-team { border-top: 1px solid var(--border-soft); }
.br-seed {
  flex: 0 0 1.4rem;
  text-align: right;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.br-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.br-rec { flex: 0 0 auto; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.br-tbd { color: var(--faint); font-style: italic; }
.br-empty { color: var(--faint); }
.br-game.is-bye { border-style: dashed; }

/* .fit-name is defined for the What-If table; brackets need the same. */
.br-name.fit-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Picking winners in the bracket -- same look as What-If picks. */
.br-spacer { flex: 1; }
.br-pick-count { color: var(--accent); font-weight: 600; }
.br-source button { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.br-source button:disabled { opacity: 0.5; cursor: default; }
.br-team.is-pickable { cursor: pointer; }
.br-team.is-pickable:hover { background: var(--hover); }
.br-team.is-pickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.br-team.is-winner, .br-team.is-winner:hover { background: var(--win-bg); color: var(--win-text); }
.br-team.is-winner .br-rec { color: var(--win-meta); }
.br-team.is-winner .br-name::after { content: " \2713"; }
.br-team.is-loser { color: var(--fainter); }
.br-team.is-loser .br-seed, .br-team.is-loser .br-rec { color: var(--fainter); }
.br-team.is-loser .br-name { font-weight: 500; }

/* Champion column: no connector out of the final's pair; a line in. */
.br-champ-round { flex-basis: 220px; }
.br-game.br-champion { border-style: dashed; }
.br-game.br-champion.is-crowned { border-style: solid; border-color: var(--good); }
.br-game.br-champion.is-crowned .br-team { background: var(--win-bg); color: var(--win-text); font-size: 0.95rem; }
.br-game.br-champion.is-crowned .br-rec { color: var(--win-meta); }
.br-pair.is-final .br-slot { padding-right: 14px; }
.br-pair.is-final::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  border-top: 2px solid var(--border);
}

/* ---- Games page: game log ----------------------------------------------
   Fixed column widths, so the table is the same width whatever is filtered;
   the text shrinks a little on narrower windows so rows stay on one line,
   and anything still too long ends in "…" (full text on hover). */

.log-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.log-head h2 { margin: 0; }
.log-tools { display: flex; align-items: flex-end; gap: 0.5rem 0.9rem; flex-wrap: wrap; }
.log-field { display: flex; flex-direction: column; gap: 0.15rem; }
.log-field label { font-size: 0.8rem; color: var(--muted); }
.log-pick { display: flex; align-items: center; gap: 0.3rem; }
/* Fixed width so the dropdowns don't shift as the count changes. */
.log-count { font-size: 0.85rem; color: var(--accent); font-weight: 600; padding-bottom: 0.4rem; width: 8.5rem; text-align: right; }

/* The dropdowns and their × share one background. */
.log-tools select,
.log-clear {
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.log-tools select { font-size: 0.9rem; padding: 0.3rem 0.4rem; border-radius: 4px; width: 13rem; }
.log-clear {
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}
.log-clear:hover { background: var(--secondary-bg-hover); }


#game-log { table-layout: fixed; width: 100%; margin-bottom: 2rem; }
#game-log col.lc-team { width: 21%; }
#game-log col.lc-opp { width: 21%; }
#game-log col.lc-result { width: 27%; }
#game-log col.lc-varsity { width: 6%; }
#game-log col.lc-date { width: 9%; }
#game-log col.lc-source { width: 8%; }
#game-log col.lc-delete { width: 8%; }
#game-log th, #game-log td {
  padding: 0.3rem 0.5rem;
  font-size: min(0.85rem, 1.05vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game-log .log-date { font-variant-numeric: tabular-nums; }
#game-log .log-whatif { margin-left: 0.25rem; }
button.log-delete { padding: 0.15rem 0.6rem; font-size: inherit; }

/* Tables with fixed column widths (set per page with <colgroup>): the same
   size whatever they hold, so tables on a page -- and from one team or class
   to the next -- line up. Text stays on one line; anything too long ends in
   "…" with the full text on hover. */
table.fixed { table-layout: fixed; width: 100%; }
table.fixed th, table.fixed td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.fixed td.num, table.fixed th.num { text-align: right; }

/* ---- What-If: one game day at a time --------------------------------------
   ◀ [date dropdown] ▶ above the list; the per-day heading is replaced by it. */
.wi-daynav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.wi-daynav select,
.wi-nav-btn {
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.wi-daynav select {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}
.wi-nav-btn { width: 2.5rem; height: 2.3rem; padding: 0; font-size: 0.9rem; flex: 0 0 auto; }
.wi-nav-btn:hover:not(:disabled), .wi-daynav select:hover:not(:disabled) { background: var(--secondary-bg-hover); }
.wi-nav-btn:disabled { opacity: 0.4; cursor: default; }
.wi-games .wi-date { display: none; }

/* ---- Sport & season --------------------------------------------------------
   Home page cards, the "Boys Soccer · 2026-27 ▾" switcher at the start of the
   menu, and the past-season / unconfirmed-rules notices. */

nav a.nav-comp {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  color: var(--text);
  white-space: nowrap;
}
nav a.nav-comp:hover { background: var(--secondary-bg-hover); text-decoration: none; }
.nav-comp-caret { margin-left: 0.35rem; font-size: 0.75em; color: var(--muted); }

.notice {
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  margin: -0.5rem 0 1rem;
  font-size: 0.9rem;
}
.notice + .notice { margin-top: 0; }
.notice-past { background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent-border); }
.notice-past a { margin-left: 0.5rem; font-weight: 600; }
.notice-rules { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn); }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Every sport card the same size: equal columns, and every row as tall
     as the tallest card (CLAUDE.md: home page sport cards). */
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.25rem;
}
.home-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.home-card h2 { margin: 0; font-size: 1.25rem; }
.home-flag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--warn-text);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.home-classes { font-size: 0.85rem; color: var(--muted); }
.home-season { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.home-season select {
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
}
/* The status line (teams, results through) and the standings button sit
   at the bottom of the card, so both line up in every card of a row even
   when one card's classes run to a second line. */
.home-status { font-size: 0.85rem; color: var(--good); min-height: 1.2em; margin-top: auto; }
.home-status.is-empty { color: var(--muted); }
.home-card button { margin-top: 0.25rem; align-self: flex-start; }
.home-card .pub-button { align-self: flex-start; }

/* Upload page: PDFs in incoming waiting for their team's class */
.up-pending { margin-bottom: 1.25rem; }
.up-pending h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.up-pending form.up-item { margin-bottom: 0.5rem; }

/* ---- Standings page: one class at a time ---------------------------------- */
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.st-head h1 { margin-bottom: 0; }
.st-tabs { margin: 0; min-width: 16rem; }
.st-asof { font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 1rem; }
.st-class table { margin-top: 0; }
.st-avg { font-weight: 600; }
.st-class td a { color: var(--text); text-decoration: none; font-weight: 500; }
.st-class td a:hover { color: var(--accent); text-decoration: underline; }

/* ---- Menu: current page ------------------------------------------------- */
nav a.here { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* ---- Teams page -------------------------------------------------------------- */
.tm-tabs { margin: 0; min-width: 18rem; }
/* Class tabs in a page's title row: no gap under them, so every page's
   title row is the same height and its title sits in the same spot. */
.st-head .wi-tabs, .br-head .wi-tabs { margin: 0; }
.tm-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.75rem 0; }
.tm-count { font-size: 0.9rem; color: var(--muted); }
.tm-add {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.tm-add input[type="text"] { flex: 1 1 14rem; }
.teams-table { margin-top: 0; }
.teams-table td a:not(.tm-btn) { color: var(--text); text-decoration: none; font-weight: 500; }
.teams-table td a:not(.tm-btn):hover { color: var(--accent); text-decoration: underline; }
.tm-class {
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tm-games, .tm-pdf { color: var(--muted); font-size: 0.9rem; }
.tm-manual { font-style: italic; }
.tm-actions { text-align: right; white-space: nowrap; }
.tm-actions form { display: inline; margin: 0 0 0 0.35rem; }
.tm-btn {
  display: inline-block;
  font-size: 0.82rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  line-height: 1.4;
}
a.tm-btn { background: var(--secondary-bg); color: var(--text); text-decoration: none; border: 1px solid var(--border); }
a.tm-btn:hover { background: var(--secondary-bg-hover); }

/* ---- Team breakdown page ------------------------------------------------- */
.tdp-back { margin: 0 0 0.5rem; font-size: 0.9rem; }
.tdp-back a { text-decoration: none; }
.tdp-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.tdp-head h1 { margin: 0; }
.tdp-class { font-size: 0.85rem; padding: 0.2rem 0.7rem; }

.tdp-tiles {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 0.9rem;
  margin: 1.25rem 0 1.5rem;
}
.tdp-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  min-width: 0;
}
.tdp-main { border-color: var(--accent-border); }
.tdp-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tdp-value { font-size: 1.9rem; font-weight: 700; margin: 0.15rem 0; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdp-main .tdp-value { font-size: 2.4rem; color: var(--accent); }
.tdp-sub { font-size: 0.85rem; color: var(--muted); overflow-wrap: break-word; }
.tdp-sub a { color: var(--text); font-weight: 600; text-decoration: none; }
.tdp-sub a:hover { color: var(--accent); text-decoration: underline; }
.tdp-good { color: var(--good); }
.tdp-muted { color: var(--faint); }
.tdp-unofficial { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--warn); }

.tdp-section { margin-bottom: 1.5rem; }
.tdp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tdp-section-head h2 { margin: 0; font-size: 1.15rem; }
.tdp-section-head a { font-size: 0.9rem; text-decoration: none; }

.tdp-upcoming { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.tdp-upcoming li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}
.tdp-upcoming li:last-child { border-bottom: none; }
.tdp-date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdp-opp { font-weight: 600; overflow-wrap: break-word; }
.tdp-oppinfo { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.tdp-pick { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.tdp-pick-W { background: var(--win-bg); color: var(--win-text); }
.tdp-pick-L { background: var(--err-bg); color: var(--err-text); }
.tdp-pick-T { background: var(--warn-bg); color: var(--warn-text); }

.td-table { margin-top: 0; }
.tdp-oppclass { font-size: 0.7rem; margin-left: 0.3rem; vertical-align: 1px; }
.tdp-res { font-weight: 600; }
.tdp-res-W { color: var(--good); }
.tdp-res-L { color: var(--bad); }
.tdp-res-T { color: var(--warn-text); }
.tdp-points { font-weight: 700; }
.tdp-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.4rem;
  margin-left: 0.3rem;
  cursor: help;
  white-space: nowrap;
}
.tdp-tag-warn { color: var(--warn-text); border-color: var(--warn); }

/* ======================================================================
   Phone layout (narrower than 700px). Desktop is unaffected.
   ====================================================================== */
@media (max-width: 700px) {
  body { padding: 0.75rem; }
  h1 { font-size: 1.6rem; }

  /* Menu: switcher on its own line, page links in one row swiped sideways. */
  nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.4rem; }
  .nav-links {
    display: flex;
    gap: 0.15rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { margin: 0; padding: 0.55rem 0.7rem; white-space: nowrap; border-radius: 6px; }
  nav a.here { background: var(--accent-soft); text-decoration: none; }
  .notice { margin-top: 0; }

  /* Comfortable tap targets. */
  button, select, input[type="text"], input[type="date"] { min-height: 2.5rem; }
  .log-clear { width: 2.5rem; height: 2.5rem; min-height: 0; }
  .wi-tab, .seg button { min-height: 2.5rem; }

  /* Standings: #, Team, Record, Avg. */
  .st-class table.fixed { table-layout: auto; }
  .st-class col { width: auto !important; }
  .st-class th:nth-child(4), .st-class td:nth-child(4),
  .st-class th:nth-child(5), .st-class td:nth-child(5) { display: none; }
  .st-tabs { min-width: 0; width: 100%; }

  /* Team breakdown: tiles 2 x 2; upcoming games stack; the table keeps
     Date, Opponent, Result, Points. */
  .tdp-tiles { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .tdp-tile { padding: 0.7rem 0.75rem; }
  .tdp-value { font-size: 1.5rem; }
  .tdp-main .tdp-value { font-size: 1.8rem; }
  .tdp-upcoming li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.5rem; }
  .tdp-upcoming .tdp-date { grid-column: 1 / -1; font-size: 0.8rem; }
  .tdp-upcoming .tdp-pick { grid-column: 1 / -1; justify-self: start; }
  /* Team breakdown: Date, Opponent, Result, Final Points. */
  .td-table.fixed { table-layout: auto; }
  .td-table col { width: auto !important; }
  .td-table th:nth-child(4), .td-table td:nth-child(4),
  .td-table th:nth-child(5), .td-table td:nth-child(5),
  .td-table th:nth-child(6), .td-table td:nth-child(6),
  .td-table th:nth-child(8), .td-table td:nth-child(8) { display: none; }

  /* Teams. */
  .teams-table.fixed { table-layout: auto; }
  .teams-table col { width: auto !important; }
  .teams-table button { padding: 0.3rem 0.7rem; }
  .teams-table th:nth-child(4), .teams-table td:nth-child(4),
  .teams-table th:nth-child(5), .teams-table td:nth-child(5) { display: none; }
  /* Games and Delete stacked, so team names keep their room. */
  .teams-table td.tm-actions { width: 5.2rem; }
  .tm-actions .tm-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 0.45rem 0.4rem; }
  .tm-actions form { display: block; margin: 0.35rem 0 0; }
  .tm-tabs { min-width: 0; width: 100%; }
  .inline-form input[type="text"] { flex: 1 1 100%; }

  /* Game log: one card per game --
       Watertown  vs Huron          [Delete]
       Watertown won
       2026-08-14                              */
  .log-tools { width: 100%; }
  .log-field { flex: 1 1 10rem; }
  .log-tools select { width: 100%; }
  .log-count { width: auto; }
  #game-log { table-layout: auto; border: 1px solid var(--border); }
  #game-log colgroup, #game-log thead { display: none; }
  #game-log tbody { display: block; }
  #game-log tr[data-team] {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    column-gap: 0.4rem;
    row-gap: 0.1rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
  }
  #game-log td { border: none; padding: 0; background: none !important; font-size: 0.92rem; }
  #game-log tr[data-overdue] { background: var(--warn-bg-soft); box-shadow: inset 3px 0 0 var(--warn); }
  #game-log tr[data-overdue] td:first-child { box-shadow: none; }
  #game-log td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  #game-log td:nth-child(2) { grid-column: 2; grid-row: 1; }
  #game-log td:nth-child(2)::before { content: "vs "; color: var(--muted); }
  #game-log td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  #game-log td:nth-child(5) { grid-column: 1 / 3; grid-row: 3; color: var(--muted); font-size: 0.8rem; }
  #game-log td:nth-child(4), #game-log td:nth-child(6) { display: none; }
  #game-log td:nth-child(7) { grid-column: 3; grid-row: 1 / 4; }
  #game-log #log-none td { display: block; padding: 0.6rem; }

  /* What-If: toolbar full width; standings keep #, move, Team, Avg, 1st round. */
  .wi-toolbar { width: 100%; }
  .wi-toolbar select { flex: 1 1 10rem; min-width: 0; }
  .wi-table { table-layout: auto; min-width: 0; }
  .wi-table col { width: auto !important; }
  .wi-table th:nth-child(4), .wi-table td:nth-child(4),
  .wi-table th:nth-child(6), .wi-table td:nth-child(6) { display: none; }
  .wi-table th, .wi-table td { font-size: 0.8rem; padding: 0.4rem 0.25rem; }
  .wi-table td.team .fit-name { max-width: 8em; }
  .wi-table .r1-name { max-width: 7em; }
  .wi-table td.move { padding: 0.4rem 0; }
  .wi-standings { padding: 0.5rem; }

  /* On a phone these tables wrap long names rather than run off the screen. */
  .st-class table.fixed, .td-table.fixed, .teams-table.fixed { width: 100%; }
  .st-class table.fixed td, table.fixed.td-table td, table.fixed.teams-table td,
  .st-class table.fixed th, table.fixed.td-table th, table.fixed.teams-table th {
    padding: 0.45rem 0.5rem;
    font-size: 0.92rem;
  }
  /* Only the team-name column wraps (between words); numbers and records
     stay on one line. */
  .st-class table.fixed td:nth-child(2), table.fixed.td-table td:nth-child(2),
  table.fixed.teams-table td:nth-child(1) {
    white-space: normal;
    overflow-wrap: break-word;
  }
  .st-class table.fixed th, table.fixed.td-table th, table.fixed.teams-table th { white-space: normal; }

  /* Brackets scroll sideways inside their box; bigger tap rows. */
  .br-team { padding: 0.6rem 0.55rem; }
  .br-tabs { min-width: 0; width: 100%; }
  .br-source { gap: 0.5rem 1rem; }
}

/* Upload page: daily Scores preview */
.up-daily { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.up-group summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.up-group ul { margin: 0.25rem 0 0.35rem; padding-left: 1.2rem; font-size: 0.85rem; }
.up-group li { margin-bottom: 0.1rem; }
.up-g-record summary { color: var(--good); }
.up-g-conflict summary, .up-g-flagged summary { color: var(--warn-text); }
.up-g-muted summary { color: var(--muted); }
.up-apply { align-self: flex-start; margin-top: 0.35rem; }
.up-apply:disabled { opacity: 0.5; cursor: default; }
.up-item[data-state="daily"] { border-left-color: var(--accent); }
.up-date { font-size: 1.15rem; font-weight: 700; }
.up-warn {
  font-size: 0.88rem;
  color: var(--warn-text);
  background: var(--warn-bg);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  align-self: flex-start;
}
.up-reload { font-size: 0.88rem; font-weight: 600; margin-top: 0.25rem; }
.up-howto { margin: -0.5rem 0 1.25rem; font-size: 0.9rem; }
.up-howto summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.up-howto ol { margin: 0.5rem 0 0; padding-left: 1.3rem; color: var(--text-2); }
.up-howto li { margin-bottom: 0.35rem; }

/* ---- Admin ----------------------------------------------------------------- */
.src-daily { background: var(--warn-bg); color: var(--warn-text); }
.ag-dialog select, .ag-dialog input[type="date"] { width: 100%; box-sizing: border-box; }
.ag-dialog form > label { margin-bottom: 0.6rem; }
.ag-dialog form > label.wi-check { flex-direction: row; align-items: center; gap: 0.4rem; }

.ad-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.ad-sport {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); text-decoration: none;
}
.ad-sport:hover { border-color: var(--accent-border); background: var(--hover-2); }
.ad-sport.is-viewing { border: 2px solid var(--accent); }
.ad-sport-name { font-weight: 700; }
.ad-season { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
.ad-line { font-size: 0.88rem; }
.ad-muted { color: var(--muted); }
.ad-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.ad-badge { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.ad-badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.ad-badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.ad-badge-bad { background: var(--err-bg); color: var(--err-text); }
.ad-comp { margin: 0 0 0.75rem; }

.ad-days { margin: 0.5rem 0; padding-left: 1.2rem; }
.ad-days li { margin-bottom: 0.2rem; }

.ad-game, .ad-issue, .ad-name {
  border-top: 1px solid var(--border-soft); padding: 0.7rem 0; display: flex; flex-direction: column; gap: 0.4rem;
}
.ad-game:first-of-type, .ad-issue:first-of-type, .ad-name:first-of-type { border-top: none; }
.ad-game-what, .ad-name-what { overflow-wrap: break-word; }
.ad-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.ad-game-actions button { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.ad-game-actions select { max-width: 100%; }
.ad-move { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.ad-issue-title { font-weight: 700; }
.ad-issue-pdf_result .ad-issue-title, .ad-issue-daily_conflict .ad-issue-title { color: var(--bad); }
.ad-issue-text { font-size: 0.92rem; overflow-wrap: break-word; }

.ad-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem 1rem; align-items: end; margin-top: 0.6rem; }
.ad-add label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; min-width: 0; }
.ad-add label.wi-check { flex-direction: row; align-items: center; }
.ad-add select, .ad-add input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
.ad-add button { justify-self: start; }

.ad-log { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ad-log > li { border-top: 1px solid var(--border-soft); padding: 0.55rem 0; }
.ad-log > li:first-child { border-top: none; }
.ad-log > li.is-undone .ad-log-summary { text-decoration: line-through; color: var(--muted); }
.ad-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.ad-log-head form { margin: 0 0 0 auto; }
.ad-log-kind { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem; border-radius: 4px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.ad-kind-undo, .ad-kind-remove { background: var(--err-bg); color: var(--err-text); }
.ad-kind-daily { background: var(--warn-bg); color: var(--warn-text); }
.ad-kind-edit, .ad-kind-result, .ad-kind-add { background: var(--win-bg); color: var(--win-text); }
.ad-log-summary { flex: 1 1 16rem; min-width: 0; overflow-wrap: break-word; font-size: 0.92rem; }
.ad-log-at { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-log-undone { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-left: auto; }
.ad-undo { padding: 0.2rem 0.65rem; font-size: 0.82rem; }
.ad-log-lines { margin-top: 0.25rem; font-size: 0.85rem; }
.ad-log-lines summary { cursor: pointer; color: var(--muted); }
.ad-log-lines ul { margin: 0.25rem 0 0; padding-left: 1.2rem; color: var(--text-2); }
.ad-alias-table { width: 100%; margin: 0.5rem 0 0; }

/* ---- Public website (publish.py) -------------------------------------------- */
nav a.nav-support { color: var(--good); font-weight: 600; }
.pub-intro { max-width: 46rem; margin: -0.5rem 0 1.25rem; }
.pub-button {
  display: inline-block; align-self: flex-start; margin-top: 0.25rem; padding: 0.45rem 1rem;
  background: var(--accent-bg); color: var(--on-accent); border-radius: 4px; text-decoration: none; font-weight: 600;
}
.pub-button:hover { background: var(--accent-bg-hover); }
.pub-past { font-size: 0.85rem; color: var(--muted); }
.pub-cut { margin: 0.4rem 0 0; font-size: 0.85rem; }
/* Contact: a narrow box per topic (its heading and Email us button). */
.site-footer {
  margin-top: 2.5rem; padding: 1rem 0 1.5rem; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.4rem;
}
.site-footer p { margin: 0; }
.ft-support { color: var(--text-2); }
.ft-support a { font-weight: 600; }
.ft-theme { align-self: flex-start; margin-top: 0.25rem; }
.ft-theme button { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.st-class tr.cut-line td { border-bottom: 2px solid var(--accent); }
.wi-intro, .br-intro { margin: 0.25rem 0 0; font-size: 0.85rem; }
.br-intro { margin: -0.25rem 0 0.75rem; }
.ad-site { margin: -0.75rem 0 1.25rem; }
.ad-site-error { color: var(--bad); }

/* ---- Multi-stage brackets (brackets_page.js) and regions --------------------- */
.br-stage { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }
.br-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 0.5rem 1.5rem; }
.br-region { min-width: 0; }
.br-region h3 { font-size: 0.95rem; margin: 0.5rem 0 0.25rem; color: var(--muted); }
.bracket.br-partial { min-width: 0; }
.br-advance-round { flex: 0 0 4rem; }
.br-waiting { margin-top: 1rem; color: var(--muted); }
.tm-region { padding: 0.15rem 0.3rem; font-size: 0.85rem; }
.tm-region-unset { border-color: var(--warn); }
.ad-inline { display: inline; margin-left: 0.4rem; }
.ad-playoff-add { margin-top: 0.75rem; }
.ad-playoff-add summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.br-game.is-played { border: 2px solid var(--good); }
.br-game.is-played .br-team { cursor: default; }
.br-unplaced { color: var(--warn-text); }

/* ---- Class tabs: one size in every sport; the Region dropdown beside them ------ */
.st-tabs, .tm-tabs, .br-tabs, .gm-tabs, .wf-tabs { min-width: 0; }
.st-tabs .wi-tab, .tm-tabs .wi-tab, .br-tabs .wi-tab, .gm-tabs .wi-tab, .wf-tabs .wi-tab { flex: 0 0 8rem; white-space: nowrap; }
.class-bar { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.region-pick { display: inline-flex; align-items: center; }
.region-pick.is-off { visibility: hidden; }   /* keeps its space: the tabs never shift */
.region-pick select { width: 10.5rem; }
.region-pick select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--accent); background-color: var(--accent-soft);
  border: 1px solid var(--accent-border); border-radius: 4px;
  padding: 0.45rem 2rem 0.45rem 0.8rem; min-height: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%;
  background-size: 0.3rem 0.3rem; background-repeat: no-repeat;
}
.region-pick select:hover { background-color: var(--accent-soft-2); }
.region-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
tr.region-cut td { border-bottom: 2px solid var(--accent) !important; }
@media (max-width: 700px) {
  .st-tabs .wi-tab, .tm-tabs .wi-tab, .br-tabs .wi-tab, .gm-tabs .wi-tab, .wf-tabs .wi-tab { flex: 1 1 0; }
  .class-bar { width: 100%; }
  .class-bar .wi-tabs { flex: 1 1 100%; }
  .region-pick, .region-pick select { width: 100%; }
}
.st-class .region-on tr.cut-line td { border-bottom: 1px solid var(--border); }

/* ---- Same layout in every sport --------------------------------------------------
   The class tabs always take room for three classes (the most any sport
   has), lined up from the left, then the Region slot: so AA and A sit in
   exactly the same spot in every sport, and a sport with fewer classes just
   leaves the rest empty. */
:root { --class-slots: 3; --class-tab: 8rem; }
.st-tabs, .tm-tabs, .br-tabs, .gm-tabs, .wf-tabs {
  width: calc(var(--class-slots) * var(--class-tab) + (var(--class-slots) - 1) * 0.25rem);
  justify-content: flex-start;
}
.st-tabs .wi-tab, .tm-tabs .wi-tab, .br-tabs .wi-tab, .gm-tabs .wi-tab, .wf-tabs .wi-tab { flex: 0 0 var(--class-tab); }
@media (max-width: 700px) {
  .st-tabs, .tm-tabs, .br-tabs, .gm-tabs, .wf-tabs { width: 100%; }
  .st-tabs .wi-tab, .tm-tabs .wi-tab, .br-tabs .wi-tab, .gm-tabs .wi-tab, .wf-tabs .wi-tab {
    flex: 0 0 calc((100% - (var(--class-slots) - 1) * 0.25rem) / var(--class-slots));
  }
}
/* What-If's toolbar: fixed sizes, so it doesn't change with a sport's team names. */
.wi-toolbar .wi-count { width: 10.5rem; text-align: right; }
.wi-toolbar #wi-filter { width: 15rem; }
@media (max-width: 700px) {
  .wi-toolbar .wi-count { width: auto; text-align: left; }
  .wi-toolbar #wi-filter { width: 100%; }
}

/* ---- Phones: fixed column widths, so tables line up the same in every
   sport (not sized by the team names in them). Columns hidden on phones
   leave their cells out, and the cells that remain fill the table's
   columns in order -- so widths go by the order of the columns you see. */
@media (max-width: 700px) {
  .st-class table.fixed, .teams-table.fixed, .wi-table { table-layout: fixed; width: 100%; }
  .st-class col, .teams-table col, .wi-table col { width: 0 !important; }
  /* Standings: # | Team | Record | Seed avg */
  .st-class col:nth-child(1) { width: 2.2rem !important; }
  .st-class col:nth-child(2) { width: auto !important; }
  .st-class col:nth-child(3), .st-class col:nth-child(4) { width: 5.2rem !important; }
  .st-class td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
  /* Teams (website): Team | Class | Record */
  .teams-table col:nth-child(1) { width: auto !important; }
  .teams-table col:nth-child(2) { width: 3.6rem !important; }
  .teams-table col:nth-child(3) { width: 4.8rem !important; }
  .teams-table td:nth-child(1) { white-space: normal; overflow-wrap: anywhere; }
  /* Teams (admin app): Team | Class | Region | Record | actions */
  .tm-admin th:nth-child(4), .tm-admin td:nth-child(4) { display: table-cell; }
  .tm-admin th:nth-child(5), .tm-admin td:nth-child(5),
  .tm-admin th:nth-child(6), .tm-admin td:nth-child(6) { display: none; }
  .tm-admin col:nth-child(2) { width: 3.4rem !important; }
  .tm-admin col:nth-child(3) { width: 3.8rem !important; }
  .tm-admin col:nth-child(4) { width: 4.4rem !important; }
  .tm-admin col:nth-child(5) { width: 5.2rem !important; }
  .tm-admin .tm-region { width: 100%; }
  /* What-If: # | move | Team | Avg | 1st round */
  .wi-table col:nth-child(1) { width: 1.8rem !important; }
  .wi-table col:nth-child(2) { width: 2rem !important; }
  .wi-table col:nth-child(3) { width: auto !important; }
  .wi-table col:nth-child(4) { width: 3.4rem !important; }
  .wi-table col:nth-child(5) { width: 6.6rem !important; }
  .wi-toolbar .wi-count { width: 9rem; flex: 0 0 9rem; }
  .wi-toolbar #wi-filter { width: auto; flex: 1 1 0; }
}

/* The region after a team's name in the class-wide standings (hidden once
   one region is picked: every row is that region then). */
.rg-tag { display: inline-block; margin-left: 0.4rem; padding: 0 0.3rem; font-size: 0.72rem; font-weight: 600;
  color: var(--muted); border: 1px solid var(--border); border-radius: 3px; vertical-align: 1px; white-space: nowrap; }
.region-on .rg-tag { display: none; }

/* ---- Upload page: three steps ------------------------------------------------- */
.up-intro { margin: -0.5rem 0 1rem; }
.up-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.9rem; align-items: start; }
.up-step-num {
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-bg); color: var(--on-accent); font-weight: 700;
}
.up-step-title h2 { margin: 0.1rem 0 0.2rem; }
.up-step-title .hint { margin: 0; font-size: 0.88rem; }
.up-step-status { font-size: 0.9rem; font-weight: 600; white-space: nowrap; padding-top: 0.35rem; }
.up-step-status.is-done { color: var(--good); }
.up-step-status.is-todo { color: var(--warn-text); }
.up-step-status .hint { font-weight: 400; }
.drop.drop-small { padding: 1rem; margin: 0.8rem 0 0.4rem; min-height: 0; }
.drop.drop-small .drop-main { font-size: 1rem; }
.up-step .up-list { margin-top: 0.4rem; }
.up-step .up-pending { margin: 0.75rem 0 0; }
.up-step .up-pending h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.up-more { margin-top: 0.6rem; font-size: 0.88rem; }
.up-more summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.up-more ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.up-more li { margin-bottom: 0.3rem; }
.ad-upline { margin: 0.2rem 0 0; }
.ad-upload-link { font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) {
  .up-step-head { grid-template-columns: auto minmax(0, 1fr); }
  .up-step-status { grid-column: 2; padding-top: 0; white-space: normal; }
}
.ad-totals { margin: 0 0 1rem; }
.ad-allclear { margin: 0; color: var(--good); font-weight: 600; }
.ad-sport-missing h3 { margin: 0.9rem 0 0.3rem; font-size: 1rem; }

/* The top bar's sport/season dropdown, and the All sports link beside it. */
.nav-comp-wrap { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
nav select.nav-comp {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text);
  background-color: var(--secondary-bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 1.8rem 0.3rem 0.6rem; min-height: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23777'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 10px 6px;
}
nav select.nav-comp:hover { background-color: var(--secondary-bg-hover); }
/* The page links in groups -- daily work, looking things up, and every
   sport / settings at the right -- with a thin rule between groups. */
nav { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.5rem; }
nav .nav-comp-wrap { margin-right: 1.5rem; }
.nav-links { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.4rem; }
.nav-group { display: inline-flex; align-items: center; }
.nav-group + .nav-group { border-left: 1px solid var(--border); padding-left: 1.25rem; }
.nav-group.nav-end { margin-left: auto; }
.nav-group.nav-end a:last-child { margin-right: 0; }

/* Which code the admin app runs, at the foot of every page. */
.app-foot { margin: 2.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; }

/* Admin page: the website line, "Needs attention" and the folded Add a game. */
.ad-attention { align-items: baseline; margin: 0.25rem 0 0.6rem; }
.ad-attention h3 { margin: 0; font-size: 1rem; }
.ad-clear { margin: 0 0 1.25rem; padding: 0.7rem 0.9rem; color: var(--good); font-weight: 600;
            background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
details.ad-fold > summary { cursor: pointer; list-style: none; }
details.ad-fold > summary::-webkit-details-marker { display: none; }
details.ad-fold > summary h2 { display: inline; margin: 0; }
details.ad-fold > summary::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--muted); }
details.ad-fold[open] > summary::before { content: "\25BE"; }
details.ad-fold[open] > summary { margin-bottom: 0.6rem; }
@media (max-width: 700px) {
  /* Phone: one sideways-swiped row of links, no rules between groups. */
  nav { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
  .nav-links { flex-wrap: nowrap; width: 100%; }
  .nav-group + .nav-group { border-left: 0; padding-left: 0; }
  .nav-group.nav-end { margin-left: 0; }
  nav .nav-comp-wrap { margin-right: 0; }
}
.ad-seasons { width: 100%; margin: 0.4rem 0 0.5rem; }
.ad-seasons tr.is-closed td { color: var(--muted); }
.ad-stage { font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.ad-stage-regular { background: var(--ok-bg); color: var(--ok-text); }
.ad-stage-playoffs { background: var(--warn-bg); color: var(--warn-text); }
.ad-stage-retired { background: var(--secondary-bg); color: var(--muted); }
.ad-playoff-prompt { display: flex; gap: 0.75rem 1rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0;
  padding: 0.7rem 0.9rem; background: var(--warn-bg-soft); border: 1px solid var(--warn); border-radius: 6px; }
.ad-playoff-prompt > div { flex: 1 1 22rem; }
.ad-warn-line { color: var(--warn-text); font-size: 0.9rem; }

/* ---- Playoff games on the Games page -------------------------------------- */
.po-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--accent-bg);
  color: var(--on-accent);
  vertical-align: 0.1em;
}
#game-log tr.is-playoff td { background: var(--accent-soft); }
#game-log tr.is-playoff td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.rg-po-label { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.3rem; }
.matchup.is-playoff { border-color: var(--accent-border); box-shadow: inset 3px 0 0 var(--accent); }
.pick-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: default;
  padding: 0 1rem;
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}
.pick-vs:hover { background: var(--surface); }

/* The SD state badge at the left of the top bar (links home). */
.nav-brand { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 !important; border: 0 !important; }
.nav-brand img { display: block; height: 24px; width: auto; }

/* Admin game log: a cancelled game -- kept, marked, out of everything else. */
/* Past due: the date has gone by with no result. */
#game-log tr[data-overdue] td { background: var(--warn-bg-soft); }
#game-log tr[data-overdue] td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.log-overdue {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--warn-text); background: var(--warn-bg); border-radius: 999px; padding: 0.1rem 0.5rem;
}
#game-log tr.is-cancelled td { color: var(--muted); }
#game-log tr.is-cancelled td:not(:last-child) { text-decoration: line-through; text-decoration-color: var(--faint); }
#game-log .log-cancelled {
  display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 3px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--err-bg); color: var(--err-text); text-decoration: none;
}
#game-log tr.is-cancelled td.log-result { text-decoration: none; }

/* Admin > Season: the "Hide from the public website" switch. */
.ad-visibility { display: flex; align-items: center; gap: 0.4rem 1rem; flex-wrap: wrap; margin-top: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--border-soft); }
.ad-hidden { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 3px; font-size: 0.72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--warn-bg); color: var(--warn-text); }

/* Brackets: a team standing in for a place not decided yet (the highest seed
   still in its region's bracket). */
.br-team.is-projected .br-name { font-style: italic; }
.br-team.is-projected:not(.is-winner) .br-name { color: var(--muted); }
.ad-confirm { margin-top: 0.5rem; }
.ad-confirm-classes { display: inline-flex; align-items: center; gap: 0.25rem 0.75rem; flex-wrap: wrap; }
/* Game log: the "Unplayed only" checkbox, level with the dropdowns. */
.log-tools .log-unplayed { align-self: flex-end; min-height: 2.25rem; display: inline-flex; align-items: center; white-space: nowrap; }

/* All Sports: the totals -- a small boxed table, each number just after its
   label; anything still to do (not zero) highlighted. */
table.ad-totals { width: auto; max-width: 100%; margin: 0.5rem 0 1.25rem; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
table.ad-totals th, table.ad-totals td { border: 0; border-bottom: 1px solid var(--border-soft); background: none;
  padding: 0.45rem 0.9rem; font-size: 0.95rem; }
table.ad-totals tr:last-child th, table.ad-totals tr:last-child td { border-bottom: 0; }
table.ad-totals th { font-weight: 500; color: var(--text); text-align: left; padding-right: 0.5rem; }
table.ad-totals td.num { text-align: left; padding-left: 0; }
table.ad-totals td.num span { display: inline-block; min-width: 1.9rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
table.ad-totals tr.is-done td.num span { color: var(--muted); }
table.ad-totals tr.is-todo th { color: var(--text); font-weight: 600; }
table.ad-totals tr.is-todo td.num span { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn); }
table.ad-totals a { color: inherit; text-decoration: none; }
table.ad-totals tr.is-todo a:hover th, table.ad-totals tr.is-todo th a:hover { text-decoration: underline; }
table.ad-totals tr.is-todo td.num a span { cursor: pointer; }
table.ad-totals tr.is-todo td.num a:hover span { filter: brightness(0.95); text-decoration: underline; }
/* All Sports: the lists behind the totals. */
.ad-list { scroll-margin-top: 1rem; }
.ad-list h3 { margin-top: 0; }
.ad-list:target { box-shadow: 0 0 0 2px var(--accent); }
table.ad-list-table { margin: 0.5rem 0 0; font-size: 0.9rem; }
table.ad-list-table th, table.ad-list-table td { padding: 0.35rem 0.6rem; }
table.ad-list-table td.num, table.ad-list-table th.num { text-align: right; }
.ad-list-actions { white-space: nowrap; }
.ad-list-actions a + a { margin-left: 0.75rem; }
#game-log tr.is-wanted td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }


/* A sport with more classes than the tab bar holds (class_select.js): its tabs
   hidden, a dropdown in their place, filling the same spot. */
.wi-tabs.as-select .wi-tab { display: none !important; }
.wi-tabs.as-select .class-pick { flex: 1 1 auto; width: 100%; }
.wi-tabs.as-select .class-pick select { width: 100%; }