/* 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 {
  /* 16px, not 15: below 16px, iOS Safari zooms the whole page in on focus - jarring anywhere, and there's
     no browser chrome to un-zoom from once this runs installed as a standalone app. */
  font: 400 16px 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: 16px/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 .team-rec { margin-bottom: -3px; font: 700 12px/1 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.team[aria-pressed="true"] .team-rec { color: inherit; opacity: .85; }
.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; }
.import-target { margin: 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--turf) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--turf) 40%, var(--line)); }
.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; } }


/* ---------- Printable pick sheet (2026-09-24): modeled on the league's paper sheet ---------- */
#print-root { position: fixed; inset: 0; z-index: 90; overflow: auto; background: #d9d6cf; padding: 12px; }
#print-root[hidden] { display: none; }
.print-toolbar { max-width: 8.5in; margin: 0 auto 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.print-toolbar p { flex: 1 1 100%; margin: 0; color: #444; }
.print-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pick-sheet {
  max-width: 8.5in; margin: 0 auto; background: #fff; color: #111; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  padding: .45in .5in .35in; font: 400 15px/1.25 'Roboto Slab', Georgia, serif;
}
.ps-title { font: 400 44px/1.02 'Alfa Slab One', 'Rockwell Extra Bold', Rockwell, Georgia, serif; text-transform: uppercase; letter-spacing: .01em; text-align: center; margin: 0 0 .22in; color: #1d1d1d; }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table td, .ps-table th { padding: 3px 4px; vertical-align: middle; }
.ps-day th { font: 400 19px/1.1 'Alfa Slab One', Rockwell, Georgia, serif; text-align: left; padding-top: 8px; color: #1d1d1d; }
.ps-day .ps-timehead { text-align: center; font-size: 17px; white-space: nowrap; }
.ps-boxcell { width: 28px; text-align: center; }
.ps-box { display: inline-flex; width: 17px; height: 17px; border: 1.6px solid #333; align-items: center; justify-content: center; font: 700 15px/1 Arial, sans-serif; vertical-align: middle; }
.ps-box.on { color: #000; }
.ps-team { width: 34%; white-space: nowrap; font-size: 17px; color: #333; }
.ps-at { width: 7%; text-align: center; font-size: 16px; color: #444; }
.ps-time { width: 16%; text-align: center; white-space: nowrap; font-size: 16px; color: #333; }
.ps-tb, .ps-sign { text-align: center; margin: .22in 0 0; font-size: 13px; color: #333; }
.ps-tb b { font-weight: 600; }
.ps-line { display: inline-block; border-bottom: 1px solid #333; min-width: 70px; text-align: center; font-weight: 600; color: #111; padding: 0 4px; }
.ps-line.long { min-width: 170px; }
.ps-gap { display: inline-block; width: .6in; }
.ps-brand { text-align: center; margin: .2in 0 0; font: 400 22px/1 'Alfa Slab One', Rockwell, Georgia, serif; letter-spacing: -.01em; }
.ps-brand span { color: #8a8a8a; }
.ps-brand small { font: 400 12px 'Roboto Slab', Georgia, serif; color: #666; }
@media (max-width: 600px) {
  .pick-sheet { padding: 18px 12px; font-size: 13px; }
  .ps-title { font-size: 28px; }
  .ps-day th { font-size: 15px; }
  .ps-day .ps-timehead { font-size: 12px; }
  .ps-team { font-size: 13px; }
  .ps-at, .ps-time { font-size: 12px; }
  .ps-boxcell { width: 22px; }
  .ps-box { width: 14px; height: 14px; font-size: 12px; }
  .ps-gap { width: 16px; }
  .ps-line.long { min-width: 110px; }
}
@media print {
  @page { size: letter; margin: .4in; }
  body.print-mode > *:not(#print-root) { display: none !important; }
  body.print-mode { background: #fff !important; }
  #print-root { position: static; padding: 0; background: #fff; overflow: visible; }
  .print-toolbar { display: none !important; }
  .pick-sheet { box-shadow: none; max-width: none; padding: 0; font-size: 15px; }
  .ps-title { font-size: 44px; }
  .ps-day th { font-size: 19px; }
  .ps-team { font-size: 17px; }
  .ps-at, .ps-time { font-size: 16px; }
  .ps-box { width: 17px; height: 17px; font-size: 15px; }
  .ps-line.long { min-width: 170px; }
  .ps-gap { width: .6in; }
}

/* Scan a paper pick sheet (2026-09-24): the review banner and the rows to check */
.scan-banner { border-left: 4px solid #e3b341; }
.scan-warnings { margin: 0; padding-left: 18px; color: var(--muted); }
.pick-matchup.flagged, .card.flagged { outline: 2px solid #e3b341; outline-offset: 3px; border-radius: 12px; background: color-mix(in srgb, #e3b341 14%, var(--surface)); }
.flag-note { color: #8a5d00; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flag-note { color: #e9c56a; } }
.savebar-acts { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Standings: unpaid entries get a red asterisk before the name, explained under the table (2026-09-24) */
.unpaid-mark { color: #d62828; font-weight: 800; margin-right: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .unpaid-mark { color: #ff6b6b; } }
:root[data-theme="dark"] .unpaid-mark { color: #ff6b6b; }
.unpaid-note { margin: 10px 0 0; }

/* Enter picks layout (owner's mockup, 2026-09-24) */
.weekbar-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card.entry-for { display: grid; gap: 6px; justify-items: start; }
.card.entry-for label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.card.entry-for select { width: 100%; max-width: 300px; }
.entry-note { font-weight: 400; }

/* ---- One button style for the whole app (owner's request, 2026-09-24) -------------------------------------
   Every ACTION button is the same glossy pill, the same height and the same color, all set by the tokens
   below. Menus and navigation keep their own look and are excluded: the hamburger and drawer close, account
   menu, week arrows, team pick cards, text links, the pool selector, the lock-time tap, and anything with
   aria-pressed (tabs and toggles). Payment buttons keep their brand color and delete buttons stay red, same
   shape and height. Disabled = greyed out and italic. */
:root {
  --btn-h: 42px;
  --btn-bg: var(--turf);
  --btn-ink: var(--turf-ink);
  --btn-off-bg: #d3d8df;
  --btn-off-ink: #6b7280;
  --btn-danger: #b3261e;
  --btn-venmo: #3d95ce; --btn-cashapp: #00a826; --btn-paypal: #003087; --btn-zelle: #6d1ed4;
  --btn-gloss: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 55%, rgba(0,0,0,.10));
}
@media (prefers-color-scheme: dark) { :root { --btn-off-bg: #39424f; --btn-off-ink: #9aa3ae; } }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]) {
  --b: var(--btn-bg); --bi: var(--btn-ink);
  background: var(--btn-gloss), var(--b);
  color: var(--bi);
  border: 1px solid color-mix(in srgb, var(--b) 72%, #000);
  border-radius: 999px;
  min-height: var(--btn-h);
  padding: 0 18px;
  font: 600 14px/1.15 var(--body); font-style: normal;
  justify-content: center; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 8px -3px rgba(0,0,0,.45);
  opacity: 1;
}
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]):hover { filter: brightness(1.07); border-color: color-mix(in srgb, var(--b) 60%, #000); }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]).venmo { --b: var(--btn-venmo); --bi: #fff; }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]).cashapp { --b: var(--btn-cashapp); --bi: #fff; }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]).paypal { --b: var(--btn-paypal); --bi: #fff; }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]).zelle { --b: var(--btn-zelle); --bi: #fff; }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]):is(.danger, .danger-quiet) { --b: var(--btn-danger); --bi: #fff; }
:is(button, .btn):not(.hamburger, .drawer-close, .account-trigger, .week-arrow, .team, .linklike, .pool-selector, .strip-lock, .system-logo-trigger, .header-signin, .lp-btn, [role="menuitem"], [aria-pressed]):disabled {
  background: var(--btn-gloss), var(--btn-off-bg); color: var(--btn-off-ink); border-color: color-mix(in srgb, var(--btn-off-bg) 80%, #000);
  font-style: italic; box-shadow: none; filter: none; transform: none; cursor: not-allowed;
}
/* the drawer's close X: a plain icon button, like the hamburger */
button.drawer-close { background: transparent; border: 0; box-shadow: none; min-height: 44px; min-width: 44px; justify-content: center; font-size: 18px; }
:is(button, .btn):not(.team, [role="menuitem"]) { white-space: nowrap; }
.savebar { flex-wrap: wrap; }
.savebar-acts { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 359px) { .savebar :is(button, .btn) { padding: 0 13px; } }

/* Commissioner menu: icon tiles (owner's choice, 2026-09-24). A menu, so it's excluded from the action-button
   style via aria-pressed; the current tile is brand blue. */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
button.admin-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 66px; padding: 8px 4px; border-radius: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font: 600 12px/1.15 var(--body); white-space: nowrap; box-shadow: 0 4px 10px -8px rgba(0,0,0,.6);
}
button.admin-tile svg { width: 24px; height: 24px; color: var(--turf); }
button.admin-tile:hover { border-color: var(--turf); transform: translateY(-1px); }
button.admin-tile[aria-pressed="true"] { background: var(--btn-gloss), var(--turf); color: var(--turf-ink); border-color: color-mix(in srgb, var(--turf) 72%, #000); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px -5px rgba(0,0,0,.5); }
button.admin-tile[aria-pressed="true"] svg { color: var(--turf-ink); }
@media (max-width: 420px) { .admin-tiles { grid-template-columns: repeat(4, 1fr); } }

/* A player the Commish marked out: notice above a read-only sheet (2026-09-24) */
.out-notice { border-left: 4px solid var(--btn-off-ink); }

/* Versioning (2026-09-24): the new-version banner and the What's new list */
.update-banner { position: fixed; left: 50%; top: calc(var(--header-h, 60px) + 8px); transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--turf); border-radius: 14px; box-shadow: var(--shadow-raised); font-size: 14px; }
.update-banner span { flex: 1 1 auto; }
.update-banner .drawer-close { min-height: 40px; min-width: 40px; font-size: 15px; color: var(--muted); }
.whats-new { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Site footer on every page, the legal pages, and the sign-up agree box (2026-09-24) */
.site-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--muted); text-align: center; }
.site-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--ink); }
.footer-version:empty { display: none; }
.legal article { max-width: 760px; margin: 0 auto; line-height: 1.55; }
.legal h1 { margin: 0; }
.legal h2 { margin: 12px 0 0; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--turf); }
.legal-top { justify-content: center; }
.agree-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.agree-row input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--turf); }
.agree-row a { color: var(--turf); }
.site-footer { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 8px auto calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.footer-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
/* Phones: copyright on one line, the links (and version) on the next, same panel (owner, 2026-09-24) */
@media (max-width: 759px) { .site-footer { flex-direction: column; gap: 6px; } }

/* Commissioner week bar: waived count beside the paid count (2026-09-24), same colors as the WAIVED pill */
.chip.waived { background: var(--tie); border-color: var(--tie); color: var(--tie-ink); }

/* Picks tab: the player list and "Clear <name>'s picks" on one line (owner, 2026-09-24); wraps only if too narrow */
.card.entry-for { justify-items: stretch; }
.entry-for-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.entry-for-row select { flex: 1 1 0; min-width: 110px; width: auto; max-width: 300px; }
.entry-for-row button { flex: 0 0 auto; }

/* Send Invite popup (2026-09-24) */
.invite-choices { display: grid; gap: 10px; }

/* Commish "choose their password yourself": what the password still needs (2026-09-25) */
.pw-need { display: block; margin-top: 4px; font-weight: 400; }
.pw-need.ok { color: var(--turf); font-weight: 600; }

/* Contact your Commish (2026-09-26) */
.contact-line { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }

/* Share the App (2026-09-29) */
.share-card textarea { min-height: 0; resize: vertical; font: inherit; line-height: 1.4; }
.share-url { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.share-actions a.btn { text-decoration: none; }

/* Platform → Email: usage against the provider's quota (2026-09-30) */
.usage { display: grid; gap: 4px; }
.usage-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.usage-bar > span { display: block; height: 100%; background: var(--turf); border-radius: inherit; }
.usage-bar.near > span { background: var(--warn); }
.usage-bar.over > span { background: var(--danger); }

/* Status circles on the Commissioner's Money tab (2026-10-09, owner's design: a glossy ball with a white letter).
   Red U unpaid, orange P pending, green P paid, yellow N/I/M for picks. Fixed colors in both themes, like the
   pay-method buttons: they're signals, not brand. */
.dot {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  font: 800 12px/1 var(--body); letter-spacing: 0; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%), var(--dot);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.3);
}
.dot.red { --dot: #e0202a; }
.dot.orange { --dot: #f07a10; }
.dot.green { --dot: #1e9a48; }
.dot.gray { --dot: #7b8594; }
.dot.yellow { --dot: #f2c200; color: #3b2d00; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.entry-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dot-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; color: var(--muted); }
.dot-key > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dot-key .dot { width: 18px; height: 18px; font-size: 10px; }
.dot-filter { margin-bottom: 8px; }
button.chip.nopicks { cursor: pointer; background: #f2c200; border-color: #d9ad00; color: #3b2d00; }
button.chip.nopicks[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.rule-callout { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #f2c200 18%, var(--surface)); border: 1px solid color-mix(in srgb, #f2c200 55%, var(--line)); }

/* Thumbnail logo dropdown and centered preview. */
.system-logo-picker { display: grid; gap: 16px; }
.system-logo-control { min-width: 0; }
.system-logo-control p { margin: 0; }
.custom-logo-fields[hidden], .system-logo-list[hidden] { display: none; }
.system-logo-preview { justify-self: center; width: 140px; height: 140px; object-fit: contain; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.system-logo-dropdown { position: relative; min-width: 0; }
button.system-logo-trigger[role="combobox"] { white-space: normal; font-size: 16px; font-weight: 400; border-radius: 10px; box-shadow: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left; background: var(--surface-2); color: var(--ink); }
button.system-logo-trigger:hover, button.system-logo-trigger:active { transform: none; box-shadow: none; }
.system-logo-thumb { display: block; width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.system-logo-name { flex: 1; min-width: 0; }
.system-logo-chevron { width: 20px; height: 20px; flex: none; }
.system-logo-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised); }
.system-logo-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.system-logo-option:hover, .system-logo-option[data-active="true"] { background: var(--surface-2); outline: 2px solid var(--focus); outline-offset: -2px; }
.system-logo-option[aria-selected="true"] { font-weight: 700; }

/* Find a league (2026-10-09) */
.find-list { gap: 10px; }
.find-row { gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.find-head { gap: 10px; align-items: center; flex-wrap: nowrap; }
.find-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.find-main > div { min-width: 0; overflow-wrap: anywhere; }
.find-head > :last-child { flex: none; }
.ask-form { gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ask-form textarea { width: 100%; }
/* The Players tile's join-request count */
.admin-tile { position: relative; }
.tile-badge { position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 800 12px/1 var(--body); color: #fff; background: #e0202a; box-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* ---- the public start page (2026-10-15): plain "/" for someone who has never signed in on this device ----
   A full-width marketing layout: render() sets body.landing-mode, which lets the bands run edge to edge; each
   band centres its own content in .lp-inner. The hero and the closing band are always dark (brand navy), the
   bands between them follow the light/dark theme. Buttons are .lp-btn, excluded from the global button style. */
:root { --lp-navy: #0b1c3a; --lp-navy-2: #123b79; --lp-gold: #ffd25e; --lp-hot: linear-gradient(90deg, #ff7a45, #f7b733); }
body.landing-mode main.wrap { max-width: none; padding: 0; gap: 0; }
/* No header bar on the start page (owner): the hero carries the name, so the header becomes a transparent
   overlay holding only the Sign In button. */
body.landing-mode .top { position: absolute; left: 0; right: 0; background: none; border: 0; box-shadow: none; }
body.landing-mode .top .brand { display: none; }
body.landing-mode .lp-hero { padding-top: 64px; }
.landing { background: transparent; }
/* The field photo stays put behind every band while the page scrolls (a fixed layer rather than
   background-attachment: fixed, which iOS ignores); the light bands are translucent so it shows through. */
.landing::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg-wash), var(--bg-wash)), url('/football-field-bg-v3.jpg') center / cover no-repeat, var(--bg);
}
.lp-inner { width: min(100% - 32px, 1120px); margin-inline: auto; }
.lp-center { text-align: center; }
.landing h2 { font-size: clamp(30px, 6vw, 46px); line-height: 1; }

.lp-hero {
  position: relative; overflow: hidden; color: #fff; padding: 36px 0 128px;
  background:
    radial-gradient(ellipse 60% 70% at 85% 25%, rgba(91, 157, 245, .38), transparent 70%),
    linear-gradient(rgba(11, 28, 58, .9), rgba(11, 28, 58, .95)),
    url('/landing/logo-wallpaper.webp') center / 360px 240px repeat,
    var(--lp-navy);
}
.lp-hero-grid { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-gold); }
.lp-eyebrow img { width: 40px; height: 40px; border-radius: 9px; }
.landing-title { margin: 16px 0 14px; color: #fff; font-size: clamp(42px, 12vw, 80px); line-height: .92; letter-spacing: .01em; }
.landing-title span { display: block; background: var(--lp-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lede { max-width: 34em; margin: 0; color: rgba(255, 255, 255, .86); font-size: clamp(16px, 2.3vw, 19px); line-height: 1.5; }
.lp-hero-links { margin: 16px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.lp-hero .linklike, .lp-final .linklike { color: var(--lp-gold); padding-inline: 2px; }
.lp-dot { display: inline-block; margin: 0 6px; }
.lp-part { white-space: nowrap; }
@media (max-width: 599px) { .lp-dot { display: none; } .lp-part { display: block; } }

.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 17px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; transition: transform .15s, filter .15s, background .15s;
}
.lp-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.lp-btn.gold { background: var(--lp-hot); color: #1d1204; box-shadow: 0 12px 26px -12px rgba(247, 165, 49, .9); }
.lp-btn.line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.lp-btn.line:hover { background: rgba(255, 255, 255, .1); }
.lp-btn.line-dark { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--turf) 75%, var(--ink)); }
.lp-btn.line-dark:hover { background: color-mix(in srgb, var(--turf) 10%, transparent); }

.lp-phones { position: relative; height: 400px; }
.lp-phone { width: 196px; aspect-ratio: 9 / 16; border: 7px solid #05101f; border-radius: 28px; background: #05101f; overflow: hidden; box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12); }
.lp-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 21px; }
.lp-phones .lp-phone { position: absolute; top: 14px; left: 50%; }
.lp-phone.front { z-index: 2; transform: translateX(-22%) rotate(4deg); }
.lp-phone.back { transform: translateX(-88%) rotate(-8deg); top: 44px; filter: brightness(.82); }
.lp-phone.solo { width: min(250px, 72%); margin: 0 auto; transform: rotate(-3deg); }
.lp-swoosh { position: absolute; left: 0; bottom: 34px; z-index: 0; width: 100%; height: 130px; filter: drop-shadow(0 0 12px rgba(247, 165, 49, .45)); }

.lp-tiles { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -86px; }
.lp-tile { display: grid; align-content: start; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); box-shadow: 0 20px 40px -24px rgba(5, 16, 31, .65); }
.lp-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--turf) 14%, transparent); color: var(--turf); }
.lp-tile-icon svg { width: 26px; height: 26px; }
.lp-tile b { font: 700 19px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.lp-tile > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.4; }
@media (max-width: 359px) { .lp-tiles { grid-template-columns: 1fr; } }

.lp-band { padding: 48px 0; overflow-x: clip; background: color-mix(in srgb, var(--surface) 58%, transparent); }
.lp-alt { background: var(--surface-2); } /* How it works stays solid (owner) */
.lp-kicker { display: inline-block; font: 700 14px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--turf); }
.lp-split { display: grid; gap: 24px; }
.lp-week-intro { display: grid; gap: 10px; justify-items: start; }
.lp-week-intro p { margin: 0; }
/* The games: one framed panel, laid out like the My Picks sheet. */
.landing-nfl { display: grid; gap: 10px; padding: 14px 12px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--turf) 45%, var(--line)); background: color-mix(in srgb, var(--surface-2) 72%, transparent); box-shadow: var(--shadow-card); }
.lp-games { display: grid; gap: 10px; }

.lp-steps { position: relative; display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.lp-steps li { position: relative; z-index: 1; display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); counter-increment: step; box-shadow: var(--shadow-card); }
.lp-steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lp-hot); color: #1d1204; font: 800 24px/1 var(--display); }
.lp-steps b { font: 700 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.lp-steps span { color: var(--muted); line-height: 1.45; }

.lp-commish-copy { display: grid; gap: 10px; justify-items: start; }
.lp-commish-copy p { margin: 0; }
.lp-checks { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.lp-checks li { position: relative; padding-left: 34px; line-height: 1.4; }
.lp-checks li::before { content: "✓"; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lp-hot); color: #1d1204; font: 800 14px/1 var(--body); }

.lp-final { padding: 56px 0 26px; color: #fff; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(91, 157, 245, .3), transparent 70%), linear-gradient(135deg, var(--lp-navy), var(--lp-navy-2)); }
.lp-final h2 { color: #fff; font-size: clamp(36px, 8vw, 60px); }
.lp-final p { margin: 10px 0 0; color: rgba(255, 255, 255, .85); }
.lp-final .lp-ctas { justify-content: center; }
.lp-legal a { color: inherit; }
.lp-legal { margin: 34px 16px 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .6) !important; }

@media (min-width: 900px) {
  .lp-hero { padding: 64px 0 168px; }
  .lp-hero-grid { grid-template-columns: 1.15fr .85fr; }
  .lp-phones { height: 500px; }
  .lp-phone { width: 236px; }
  .lp-swoosh { height: 180px; bottom: 40px; }
  .lp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -104px; }
  .lp-band { padding: 72px 0; }
  .lp-week { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
  .lp-week-intro { position: sticky; top: 96px; }
  .lp-games { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .lp-steps::before { content: ""; position: absolute; top: 44px; left: 10%; right: 10%; height: 3px; background: var(--lp-hot); }
  .lp-commish { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .lp-btn { transition: none; } .lp-btn:hover { transform: none; } }

.header-signin {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); color: var(--turf-ink);
  font: 700 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase;
}
.header-signin:hover { background: rgba(255, 255, 255, .26); }

/* ---- bot defences (2026-10-15) ---- */
/* The honeypot field: off-screen, never seen or tabbed to (see honeypot() in app.js). Not display:none, which
   some bots skip. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile's box: empty and invisible unless Cloudflare asks the person to click. */
#human-check { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; }
#human-check:empty { display: none; }