/* The palette comes from the organizer's own spreadsheet: blue "PAID" band, yellow
   section rows, green/red pick cells. Same code language, cleaner surface. */
:root {
  --bg: #edf1ee;
  --surface: #ffffff;
  --surface-2: #e8edf3;
  --surface-raised: #ffffff;
  --surface-sunken: #e7ede9;
  --ink: #14201a;
  --muted: #5a6a60;
  --line: #d3dcd6;
  --turf: #1a56b0;
  --turf-ink: #ffffff;
  --paid: #1c7fd0;
  --paid-ink: #ffffff;
  --day: #f2e14b;
  --day-ink: #2b2600;
  --win: #a9d68b;
  --win-ink: #10300f;
  --loss: #f2a49d;
  --loss-ink: #4a0d08;
  --tie: #f3d38a;
  --tie-ink: #3d2b00;
  --warn: #b25b00;
  --danger: #b3261e;
  --correct-mark: #18794e;
  --incorrect-mark: #b3261e;
  --mark-ink: #ffffff;
  --focus: #1c7fd0;
  --shadow-card: 0 2px 3px rgba(20, 32, 26, .08), 0 8px 22px -14px rgba(20, 32, 26, .35);
  --shadow-raised: 0 3px 5px rgba(20, 32, 26, .12), 0 12px 26px -14px rgba(20, 32, 26, .42);
  --shadow: var(--shadow-card);
  --highlight: rgba(255, 255, 255, .72);
  --bg-wash: rgba(237, 241, 238, .5); /* was .84: the field photo barely showed (owner, 2026-09-23) */
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1612;
    --surface: #16211b;
    --surface-2: #202d3d;
    --surface-raised: #1a2820;
    --surface-sunken: #101a14;
    --ink: #e6eee9;
    --muted: #94a69b;
    --line: #2a3a30;
    --turf: #5b9df5;
    --turf-ink: #08172b;
    --paid: #2a86d6;
    --day: #6f6516;
    --day-ink: #fff3a6;
    --win: #2f6b34;
    --win-ink: #d9f5cf;
    --loss: #7a2f2a;
    --loss-ink: #ffd9d5;
    --tie: #6b5514;
    --tie-ink: #ffe9b0;
    --warn: #f0a04b;
    --danger: #ff8a80;
    --correct-mark: #279465;
    --incorrect-mark: #c9453d;
    --mark-ink: #ffffff;
    --shadow-card: 0 2px 4px rgba(0, 0, 0, .38), 0 12px 24px -14px rgba(0, 0, 0, .9);
    --shadow-raised: 0 4px 8px rgba(0, 0, 0, .45), 0 18px 34px -16px rgba(0, 0, 0, 1);
    --shadow: var(--shadow-card);
    --highlight: rgba(255, 255, 255, .06);
    --bg-wash: rgba(8, 15, 11, .45); /* was .72 */
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--turf) 10%, transparent), transparent 34rem),
    linear-gradient(var(--bg-wash), var(--bg-wash)),
    url('/football-field-bg-v3.jpg') center top / cover no-repeat,
    var(--bg);
  background-attachment: fixed;
  font: 400 15px/1.45 var(--body);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin: 0; text-wrap: balance; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 .6em; }
a { color: var(--paid); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: 16px; }
main.wrap { padding-block: 16px 72px; display: grid; gap: 16px; }
/* A CSS Grid's implicit column sizes itself to fit the widest min-content of ANY item sharing it - so one
   unshrinkable child (a table, a nowrap label) was enough to widen the whole page, not just itself. Every
   direct child gets min-width: 0 so its own overflow (an inner overflow-x: auto, an ellipsis) is what
   decides, never the page. Doesn't affect layout: grid's default justify-items: stretch already makes each
   child fill the column regardless of this property. */
main.wrap > * { min-width: 0; }

/* header + nav */
.top {
  background: linear-gradient(135deg, color-mix(in srgb, var(--turf) 82%, #08150f), var(--turf));
  color: var(--turf-ink); padding-top: env(safe-area-inset-top, 0px); position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid color-mix(in srgb, var(--turf-ink) 18%, transparent);
  box-shadow: 0 7px 22px -14px rgba(5, 20, 12, .8);
}
/* Mobile-first: hamburger (left) + absolutely-centered title + account button (right), nav lives in the
   drawer. At >=760px this reverts to the original layout (title in normal flow, nav inline, no hamburger/
   drawer) - see the breakpoint at the bottom of this section. */
.top-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 8px; min-height: 44px; }
.brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; max-width: calc(100% - 104px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 clamp(16px, 5.2vw, 24px)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: inherit; text-decoration: none;
}
.brand-icon { width: 27px; height: 27px; vertical-align: middle; margin-right: 5px; }
.brand-short { display: none; }
@media (max-width: 340px) { .brand-full { display: none; } .brand-short { display: inline; } }
.hamburger {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px;
  padding: 0; background: transparent; border: 1px solid transparent; box-shadow: none; color: inherit;
}
.hamburger[hidden] { display: none; } /* the display:inline-flex above would otherwise override [hidden] */
.hamburger:hover { background: rgba(255, 255, 255, .14); border-color: transparent; transform: none; box-shadow: none; }
.hamburger-box { position: relative; width: 21px; height: 15px; }
.hamburger-box span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.hamburger-box span:nth-child(1) { top: 0; }
.hamburger-box span:nth-child(2) { top: 6.5px; }
.hamburger-box span:nth-child(3) { top: 13px; }
.hamburger.open .hamburger-box span:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
.hamburger.open .hamburger-box span:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-box span:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .hamburger-box span { transition: none; } }
.header-account { flex: 0 0 auto; margin-left: auto; }
.header-account .account-trigger { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: var(--turf-ink); }
.header-account .account-trigger:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .28); }
.nav { display: none; } /* mobile: replaced by the drawer; restored at the desktop breakpoint below */

@media (min-width: 760px) {
  .hamburger, #drawer-root { display: none !important; }
  .brand { position: static; transform: none; max-width: none; }
  .nav { display: flex; gap: 2px; flex-wrap: wrap; }
  .nav a {
    font: 600 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    color: inherit; opacity: .78; padding: 8px 10px; border-radius: 6px;
  }
  .nav a[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, .18); }
  @media (prefers-color-scheme: dark) { .nav a[aria-current="page"] { background: rgba(0, 0, 0, .18); } }
  .nav a:hover { opacity: 1; }
  .header-account { margin-left: 0; }
}

/* ---- the mobile navigation drawer ---- */
#drawer-root[hidden] { display: none; }
/* top: var(--header-h) (set in JS from the header's real rendered height) - not inset: 0. The header stays
   above the drawer in z-index so the hamburger is always reachable, so the drawer has to start below it
   instead, or the header would sit on top of (and swallow clicks meant for) the drawer's own close button. */
.drawer-backdrop { position: fixed; top: var(--header-h, 56px); left: 0; right: 0; bottom: 0; z-index: 15; background: rgba(8, 15, 11, .5); display: flex; }
.drawer-panel {
  width: min(80%, 320px); max-width: 85vw; height: 100%; overflow-y: auto; display: flex; flex-direction: column;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-raised); box-shadow: var(--shadow-raised);
  animation: drawer-in .2s ease;
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 14px; }
.drawer-title { font: 700 17px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.drawer-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font: 600 15px/1 var(--display); letter-spacing: .03em; text-transform: uppercase;
}
.drawer-item:hover { background: var(--surface-2); }
.drawer-item[aria-current="page"] { background: color-mix(in srgb, var(--turf) 15%, transparent); color: var(--turf); }
.drawer-item svg { flex: 0 0 auto; }
.drawer-section { margin: 14px 12px 4px; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* How-to's (Support) */
.help-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.help-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.help-table th, .help-table td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-top: 1px solid var(--line); }
.help-table th { font: 600 12px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.help-table td:first-child { width: 38%; }
@media (max-width: 520px) { .help-table td { display: block; width: auto !important; padding: 2px 0; border: 0; } .help-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--line); } .help-table thead { display: none; } .help-table td[data-label]::before { content: attr(data-label) ': '; font-weight: 600; color: var(--muted); } }

/* ---- the active pool, below the header ---- */
.pool-selector {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--turf) 85%, #08150f), var(--turf)); color: var(--turf-ink);
  border: 1px solid color-mix(in srgb, var(--turf-ink) 18%, transparent); border-radius: 999px; padding: 10px 16px;
  font: 700 14px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--shadow-card);
}
.pool-selector-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; text-align: left; }
/* League logos: pool selector and My Pools (2026-09-23) */
.pool-logo-wrap, .mypool-logo-wrap { display: inline-flex; flex: 0 0 auto; }
.pool-logo { height: 26px; width: auto; max-width: 56px; object-fit: contain; display: block; border-radius: 4px; }
.mypool-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.mypool-logo { height: 34px; width: auto; max-width: 64px; object-fit: contain; display: block; border-radius: 5px; }
.pool-selector-chevron { flex: 0 0 auto; opacity: .85; }
.mypool-row { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }

/* generic surfaces */
.card {
  background: linear-gradient(155deg, var(--highlight), transparent 42%), var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--surface)); border-radius: 15px; padding: 16px;
  box-shadow: var(--shadow-card);
}
.card > h2, .card > h3 { margin-bottom: 10px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.empty { text-align: center; padding: 32px 16px; }

/* controls */
button, .btn {
  font: 600 14px/1 var(--body); color: var(--ink);
  background: linear-gradient(180deg, var(--highlight), transparent 55%), var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  box-shadow: 0 5px 12px -9px rgba(20, 32, 26, .7);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}
button:hover, .btn:hover { border-color: var(--muted); transform: translateY(-1px); box-shadow: var(--shadow-raised); }
button:active, .btn:active { transform: translateY(1px); box-shadow: none; }
button.primary, .btn.primary { background: linear-gradient(180deg, rgba(255,255,255,.13), transparent 55%), var(--turf); border-color: var(--turf); color: var(--turf-ink); }
button.venmo, .btn.venmo { background: #3d95ce; border-color: #3d95ce; color: #fff; }
button.cashapp, .btn.cashapp { background: #00a826; border-color: #00a826; color: #fff; }
button.paypal, .btn.paypal { background: #003087; border-color: #003087; color: #fff; }
button.zelle, .btn.zelle { background: #6d1ed4; border-color: #6d1ed4; color: #fff; }
button.quiet { background: transparent; }
button.danger { color: var(--danger); }
button.sm, .btn.sm { padding: 6px 10px; min-height: 32px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.team:disabled { opacity: .88; cursor: default; }
.team:disabled:not([aria-pressed="true"]) { opacity: .6; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=password], select, textarea {
  font: 400 15px var(--body); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; min-height: 40px; width: 100%;
  box-shadow: inset 0 1px 2px rgba(20, 32, 26, .08);
}
textarea { min-height: 140px; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--turf); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }

/* chips + pills */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: 600 13px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.account-menu { position: relative; }
.account-trigger { min-height: 30px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.account-trigger svg { width: 16px; height: 16px; flex: none; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px; width: max-content; max-width: min(280px, calc(100vw - 32px));
  display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); box-shadow: var(--shadow);
}
.account-dropdown button { justify-content: flex-start; text-align: left; border: 0; background: transparent; min-height: 36px; } /* text-align: a long name ("Switch to ...") wraps flush left like the short items */
.account-dropdown button:hover { background: var(--surface-2); }
.chip.paid { background: var(--paid); border-color: var(--paid); color: var(--paid-ink); }
.chip.pot { font: 700 20px/1 var(--display); padding: 7px 12px; background: var(--turf); border-color: var(--turf); color: var(--turf-ink); }
.pill { display: inline-block; font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; }
.pill.paid { background: var(--paid); color: var(--paid-ink); }
.pill.waived { background: var(--tie); color: var(--tie-ink); }
.pill.claimed { background: var(--day); color: var(--day-ink); }
.pill.unpaid { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
.pill.out { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill.win { background: var(--turf); color: var(--turf-ink); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 5px; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* week selector */
.weekbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.weekpick { display: grid; grid-template-columns: 44px minmax(122px, auto) 44px; align-items: center; justify-items: center; gap: 6px; }
.weekpick .label { font: 700 30px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; text-align: center; }

/* winner banner - unused now (see the celebration popup and .prev-winner-row below), kept for reference */
.banner { background: linear-gradient(135deg, color-mix(in srgb, var(--turf) 78%, #07150e), var(--turf)); color: var(--turf-ink); border-radius: 15px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-raised); border: 1px solid color-mix(in srgb, var(--turf-ink) 15%, transparent); }
.banner .big { font: 700 34px/1 var(--display); text-transform: uppercase; }
.banner .amt { font: 700 40px/1 var(--display); }

/* ---- the compact week/pot/deadline strip, and the small previous-winner row under it ---- */
.week-strip {
  display: flex; align-items: stretch; gap: 2px; min-height: 44px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--turf) 82%, #08150f), var(--turf)); color: var(--turf-ink);
  border-radius: 15px; padding: 8px 4px; box-shadow: var(--shadow-card);
}
.strip-section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 0; padding: 2px 4px; }
.strip-divider { width: 1px; flex: 0 0 auto; align-self: stretch; margin: 3px 0; background: color-mix(in srgb, var(--turf-ink) 22%, transparent); }
/* The week number sits exactly between the arrows: arrow | label | arrow, the label's column centered. */
.strip-weeknav { display: grid; grid-template-columns: 44px auto 44px; justify-content: center; align-items: center; justify-items: center; gap: 2px; flex: 1.2 1 0; }
.strip-week-label { text-align: center; }
/* Week arrows (strip and Commissioner week bar): a round, outlined button with a bold chevron, drawn in the
   surrounding text color so it reads on the blue strip and on a card alike. 44px tap target. */
button.week-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  padding: 0; margin: 4px; border-radius: 999px; color: inherit; box-shadow: none; flex: 0 0 auto;
  background: color-mix(in srgb, currentColor 14%, transparent); border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
}
button.week-arrow:hover { background: color-mix(in srgb, currentColor 26%, transparent); transform: none; box-shadow: none; }
button.week-arrow:disabled { opacity: .4; background: transparent; cursor: default; }
button.week-arrow svg { display: block; }
.strip-week-label { font: 700 15px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.strip-pot-amt { font: 700 22px/1 var(--display); }
.strip-status-label { font: 700 11px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.strip-status-time { font: 700 14px/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.strip-lockwrap { justify-content: center; }
.strip-lock {
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 0;
  background: transparent; border: 0; padding: 2px 4px; color: inherit; box-shadow: none; font: inherit;
}
.strip-lock:hover { background: rgba(255, 255, 255, .1); transform: none; box-shadow: none; border-radius: 6px; }
@media (max-width: 380px) {
  .week-strip { padding: 7px 2px; }
  .strip-section { padding: 2px 3px; }
  .strip-pot-amt { font-size: 19px; }
  .strip-week-label { font-size: 13px; }
}
/* Last resort, per spec ("reduce spacing and font size before allowing content to wrap"): on a genuinely
   tiny screen, two 44px arrow buttons plus a pot and a deadline no longer fit one row without either
   shrinking a touch target below 44px or overflowing - so here it wraps to two rows instead of either. */
@media (max-width: 340px) {
  .week-strip { flex-wrap: wrap; row-gap: 6px; }
  .strip-weeknav { flex: 1 1 100%; order: -1; }
  .strip-divider { display: none; }
}
/* Last week's winner: fixed "winner gold" colors (owner, 2026-09-23), deliberately NOT built on --turf, so the
   Monday-night team theme can never make the row blend in. Its own light and dark values. */
.prev-winner-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; min-height: 30px;
  background: #fff3cf; border: 1px solid #e3b341; border-radius: 10px; padding: 6px 12px;
}
.prev-winner-label { font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: #7a5600; }
.prev-winner-name { font: 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #3d2b00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prev-winner-row { background: #3a2c08; border-color: #b8891f; }
  :root:not([data-theme="light"]) .prev-winner-label { color: #e9c56a; }
  :root:not([data-theme="light"]) .prev-winner-name { color: #fff4d6; }
}
:root[data-theme="dark"] .prev-winner-row { background: #3a2c08; border-color: #b8891f; }
:root[data-theme="dark"] .prev-winner-label { color: #e9c56a; }
:root[data-theme="dark"] .prev-winner-name { color: #fff4d6; }

/* standings: a plain table now (Player Name / Wins / Losses / Ties / Tiebreaker), see .table below */

/* the sheet */
.gridwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-card); }
table.sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { padding: 6px 8px; text-align: center; min-width: 58px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sheet .gcol { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; min-width: 126px; border-right: 2px solid var(--line); }
.sheet thead th { font: 600 14px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; background: var(--surface-2); vertical-align: bottom; }
.sheet thead .gcol { background: var(--surface-2); font-size: 20px; }
.sheet tr.paidrow td, .sheet tr.paidrow th { background: var(--paid); color: var(--paid-ink); font: 700 15px/1 var(--display); text-align: center; }
.sheet tr.paidrow .gcol { text-align: left; }
.sheet tr.day td { background: var(--day); color: var(--day-ink); font: 700 14px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; text-align: left; padding: 6px 10px; }
.sheet tr.day td:first-child { position: sticky; left: 0; }
.sheet .g b { font: 600 15px/1.1 var(--display); letter-spacing: .03em; display: block; }
.sheet .g span { font-size: 12px; color: var(--muted); display: block; }
.sheet td.p { font: 600 15px/1 var(--display); letter-spacing: .03em; }
.sheet td.r1 { background: var(--win); color: var(--win-ink); }
.sheet td.r0 { background: var(--loss); color: var(--loss-ink); }
.sheet td.rh { background: var(--tie); color: var(--tie-ink); }
.sheet td.hid { color: var(--muted); font-weight: 400; }
.sheet tr.tot td, .sheet tr.tot th { background: var(--day); color: var(--day-ink); font: 700 16px/1.1 var(--display); }
.sheet tr.tot .gcol { text-align: left; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.sheet tr.tot small { display: block; font: 500 11px/1.2 var(--body); opacity: .8; }
.sheet .isw { box-shadow: inset 0 -3px 0 var(--turf); }
.sheet .skip { opacity: .42; }

/* my picks */
.day-h { font: 700 14px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent), var(--day); color: var(--day-ink); padding: 8px 12px; border-radius: 10px; margin-top: 6px; box-shadow: 0 4px 10px -9px rgba(20,32,26,.7); }
.pick-matchup { gap: 7px; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 86%, transparent); border-radius: 15px; background: linear-gradient(145deg, var(--highlight), transparent 45%), var(--surface-raised); box-shadow: var(--shadow-card); }
.gamecard { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.gamecard .at { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.team { position: relative; min-width: 0; display: grid; align-content: center; gap: 6px; text-align: left; padding: 11px 12px; min-height: 62px; border-radius: 12px; overflow: hidden; }
.team b {
  min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: normal; word-break: normal; text-wrap: balance;
  font: 700 clamp(18px, 5.5vw, 24px)/.98 var(--display); letter-spacing: .02em;
}
.team span { font-size: 12px; color: var(--muted); }
.team[aria-pressed="true"] { padding-right: 38px; background: linear-gradient(145deg, rgba(255,255,255,.16), transparent 48%), var(--turf); border-color: color-mix(in srgb, var(--turf) 70%, var(--ink)); color: var(--turf-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--turf) 30%, transparent), var(--shadow-raised); }
.team[aria-pressed="true"] span { color: inherit; opacity: .85; }
.team[aria-pressed="true"]:after { content: "✓"; position: absolute; top: 50%; right: 11px; width: 22px; height: 22px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); color: inherit; font: 800 14px/1 var(--body); }
.team.won:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 3px var(--win); }
.team[aria-pressed="true"].correct { background: linear-gradient(145deg, rgba(255,255,255,.24), transparent 48%), color-mix(in srgb, var(--win) 74%, var(--turf)); border-color: var(--win-ink); color: var(--win-ink); }
.team[aria-pressed="true"].missed { background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 48%), var(--loss); border-color: var(--loss-ink); color: var(--loss-ink); }
.team[aria-pressed="true"].tie-pick { background: linear-gradient(145deg, rgba(255,255,255,.2), transparent 48%), var(--tie); border-color: var(--tie-ink); color: var(--tie-ink); }
.team[aria-pressed="true"].correct:after { background: var(--correct-mark); color: var(--mark-ink); box-shadow: 0 2px 7px color-mix(in srgb, var(--correct-mark) 45%, transparent); }
.team[aria-pressed="true"].missed:after { content: "×"; background: var(--incorrect-mark); color: var(--mark-ink); box-shadow: 0 2px 7px color-mix(in srgb, var(--incorrect-mark) 45%, transparent); }
.team[aria-pressed="true"].tie-pick:after { content: "="; }
.team[aria-pressed="true"].live-pick:after { content: ""; width: 10px; height: 10px; right: 17px; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 18%, transparent); animation: pulse 1.4s infinite; }
.gmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 2px 2px 0; }
.savebar { position: sticky; bottom: 10px; z-index: 10; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; box-shadow: var(--shadow-raised); margin-bottom: env(safe-area-inset-bottom, 0px); }

/* season + organizer */
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { font: 600 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--line); }
.table td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table .r { text-align: right; }
.scroll-x { overflow-x: auto; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { border-radius: 999px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plist { display: grid; gap: 0; }
.prow { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.prow.attn { background: linear-gradient(90deg, color-mix(in srgb, var(--day) 30%, transparent), transparent 60%); }
.prow .note { grid-column: 1 / -1; }
.linkbox { display: flex; gap: 6px; }
.linkbox input { font-size: 12px; }
.form2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.err { color: var(--danger); font-weight: 500; }
.ok { color: var(--turf); font-weight: 500; }
pre.out { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; margin: 0; }
.scoreedit { display: grid; grid-template-columns: 1fr repeat(2, 64px) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scoreedit input[type=number] { padding: 6px; min-height: 34px; text-align: center; }
@media (max-width: 560px) { .scoreedit { grid-template-columns: 1fr 64px 64px; } .scoreedit .wide { grid-column: 1 / -1; } }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 50; box-shadow: var(--shadow); max-width: min(92vw, 520px); font-weight: 500; }
.toast.bad { background: var(--danger); color: #fff; }

/* ---- signed-out page: one centred card (sign in / register for a league / forgot) ---- */
.auth-card { width: min(100%, 420px); margin: 24px auto; }
.auth-logo { max-width: 100%; max-height: 120px; display: block; margin: 0 auto; }
.product-logo { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); font: 800 26px/1 var(--display); text-transform: uppercase; }
.product-logo img { width: 42px; height: 42px; flex: none; }
.auth-league { margin: 0; text-align: center; font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.auth-heading { margin: 0; text-align: center; font-size: 30px; line-height: 1.1; }
.auth-tagline, .auth-foot { margin: 0; text-align: center; }
.presentation-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; text-align: center; }
.presentation-links-label { color: var(--muted); font: 600 14px var(--display); }
.presentation-links a { color: var(--turf); font: 600 14px var(--display); text-decoration: underline; text-underline-offset: 3px; }
.presentation-links a:focus-visible { outline: 2px solid var(--turf); outline-offset: 4px; }
.auth-links { text-align: center; }
/* Profile -> Delete my account */
button.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
button.danger:hover { background: #8c1d18; border-color: #8c1d18; }
button.danger-quiet { color: #b3261e; }
.delete-zone { border: 1px solid #b3261e; border-radius: 10px; padding: 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.danger-quiet { color: #ff8a80; } :root:not([data-theme="light"]) .delete-zone { border-color: #ff8a80; } }
/* Commissioner -> Log (the change log) */
.log-filters select { width: 100%; }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.log-item { padding: 10px 0 10px 12px; border-top: 1px solid var(--line); border-left: 3px solid var(--line); }
.log-item.log-picks { border-left-color: var(--turf); }
.log-item.log-money { border-left-color: #2e9d57; }
.log-item.log-player { border-left-color: #8a6bd1; }
.log-item.log-import { border-left-color: #c98a16; }
.log-head { display: grid; gap: 2px; }
.log-lines { margin: 4px 0 0; padding-left: 18px; color: var(--muted); overflow-wrap: anywhere; }
.auth-subhead { margin: 0; font: 700 19px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.field { display: grid; gap: 4px; }
.field > label { font-size: 13px; color: var(--muted); font-weight: 500; }
.pwrow { display: flex; gap: 6px; align-items: stretch; }
.pwrow input { flex: 1; min-width: 0; }
.pw-toggle { min-width: 58px; }
button.block { width: 100%; justify-content: center; }
.linklike { background: none; border: 0; padding: 6px 4px; min-height: 0; color: var(--turf); text-decoration: underline; cursor: pointer; font: inherit; }
.notice { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.card.warn { border-color: var(--warn); background: var(--surface-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.account-dropdown[hidden] { display: none; }

/* ---- the league switcher: a plain <select> next to the account menu, not inside it ---- */
.league-switcher { cursor: pointer; color: var(--ink); font: 600 13px/1 var(--display); max-width: 44vw; }

/* ---- modal popups: Profile, Status, Join/Create a league, the week-winner celebration ---- */
#modal-root[hidden] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 16, 12, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
}
.modal-panel { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-panel > .card { box-shadow: var(--shadow-raised); }

@media (prefers-reduced-motion: reduce) { button, .btn { transition: none; } .team.live-pick:after { animation: none; } }

@media (max-width: 600px) {
  .top-in { flex-wrap: nowrap; min-width: 0; }
  .brand { flex: 0 0 auto; font-size: 20px; }
  .nav { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}

/* ---- the one-time week-winner celebration ---- */
.celebration { position: relative; overflow: hidden; text-align: center; }
.celebration-names { font: 700 26px/1.15 var(--display); margin: 0; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -12px; width: 8px; height: 14px; opacity: .9;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-iteration-count: 1; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); opacity: .9; }
  to { transform: translateY(340px) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confetti-piece { animation: none; opacity: 0; } }