/* ============ design tokens (from mockups/propickem_mockup.html) ============ */
:root{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#E7EBF2;
  --ink:#111827; --ink-muted:#5B6472; --ink-faint:#94A0AF;
  --accent:#0B2265; --accent-ink:#FFFFFF; --accent-soft:#DCE3F2;
  --line:#DBE1EA; --line-strong:#C2CADA;
  --win:#1B7A3D; --win-soft:#DFF3E4;
  --loss:#C81E2C; --loss-soft:#FBE1E3;
  --pending:#8A6D1D; --pending-soft:#F3E9C9;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(17,24,39,.06), 0 8px 24px rgba(17,24,39,.07);
  --shadow-primary:0 2px 5px rgba(17,24,39,.09), 0 18px 40px rgba(17,24,39,.13);
  --shadow-secondary:0 1px 2px rgba(17,24,39,.04);
  --nav-h:64px;
  --banner-navy:#0C3869; /* verified flat sample from wwwroot/images/ProPickem2020.jpg at y=104, x=300-700 -- not theme-dependent */
  --nav-bg:var(--banner-navy); /* task #93 -- ProPickem's real nav color by default; FBPool overrides this alone below so buttons/links (--accent) stay untouched -- differentiation is header-only by design */
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Oswald',var(--font-body);
}
:root[data-portal="fbpool"]{
  --nav-bg:#0F5C4C; /* placeholder -- deep teal, distinct from ProPickem's navy; confirm/adjust */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A0E17; --surface:#131826; --surface-2:#171D2E;
    --ink:#EDEFF3; --ink-muted:#8891A0; --ink-faint:#5B6475;
    --accent:#4C6EF5; --accent-ink:#FFFFFF; --accent-soft:#1D2A4D;
    --line:#232A3B; --line-strong:#2E3750;
    --win:#3FBE72; --win-soft:#163826;
    --loss:#F0555F; --loss-soft:#3A171B;
    --pending:#D7B84F; --pending-soft:#3A320F;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
    --shadow-primary:0 2px 6px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.5);
    --shadow-secondary:0 1px 2px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0E17; --surface:#131826; --surface-2:#171D2E;
  --ink:#EDEFF3; --ink-muted:#8891A0; --ink-faint:#5B6475;
  --accent:#4C6EF5; --accent-ink:#FFFFFF; --accent-soft:#1D2A4D;
  --line:#232A3B; --line-strong:#2E3750;
  --win:#3FBE72; --win-soft:#163826;
  --loss:#F0555F; --loss-soft:#3A171B;
  --pending:#D7B84F; --pending-soft:#3A320F;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
  --shadow-primary:0 2px 6px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.5);
  --shadow-secondary:0 1px 2px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#E7EBF2;
  --ink:#111827; --ink-muted:#5B6472; --ink-faint:#94A0AF;
  --accent:#0B2265; --accent-ink:#FFFFFF; --accent-soft:#DCE3F2;
  --line:#DBE1EA; --line-strong:#C2CADA;
  --win:#1B7A3D; --win-soft:#DFF3E4;
  --loss:#C81E2C; --loss-soft:#FBE1E3;
  --pending:#8A6D1D; --pending-soft:#F3E9C9;
  --shadow:0 1px 2px rgba(17,24,39,.06), 0 8px 24px rgba(17,24,39,.07);
  --shadow-primary:0 2px 5px rgba(17,24,39,.09), 0 18px 40px rgba(17,24,39,.13);
  --shadow-secondary:0 1px 2px rgba(17,24,39,.04);
}

*{box-sizing:border-box;}
html, body { font-family:var(--font-body); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:.01em;}
h2{font-size:26px;}
h3{font-size:18px;}
.num{font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-muted);
}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ============ shell ============ */
.app{max-width:1220px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;}
header.top{
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--line);
}

/* nav bar -- earlier attempts tried to crop the logo mark out of the flat
   banner JPEG (wwwroot/images/ProPickem2020.jpg), which bakes the shield
   across a seam between a light-gray band and a navy band, making any crop
   either misaligned or awkwardly partial. Fixed by using a real transparent
   PNG of the shield (wwwroot/images/nfl-shield.png) sized to the bar's
   height, plus real HTML text for "NFL Pro Pick'em" -- no cropping, no
   seams, scales cleanly at any size. */
.nav-bar{
  display:flex; align-items:center; gap:12px;
  padding:0 16px; height:52px;
  background:var(--nav-bg);
}
@media (min-width:700px){ .nav-bar{height:56px; padding:0 20px;} }

.brand-logo{
  display:flex; align-items:center; gap:8px; flex:none;
}
.brand-logo img{height:34px; width:auto; display:block;}
@media (min-width:700px){ .brand-logo img{height:38px;} }

.brand-text{
  font-family:var(--font-display); color:#fff; font-weight:600; font-size:18px; letter-spacing:.02em; white-space:nowrap;
}
@media (min-width:700px){ .brand-text{font-size:20px;} }
/* below 600px there isn't reliably room for the wordmark alongside the
   account links (see .account-links below) -- shield mark only, a common
   and intentional responsive pattern rather than a partial/clipped crop. */
@media (max-width:599px){ .brand-text{display:none;} }

/* Task #93 -- portal name badge, next to the wordmark. Hidden at the same breakpoint as
   .brand-text (same crowding reason) -- the --nav-bg color accent alone still tells the
   two portals apart on narrow screens. */
.portal-badge{
  font-family:var(--font-display); color:rgba(255,255,255,.85); font-weight:600; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:3px 9px; margin-left:-2px;
}
@media (max-width:599px){ .portal-badge{display:none;} }

nav.tabs-top{display:none; gap:4px; flex:1 1 auto; min-width:0;}
nav.tabs-top a{
  background:none; border:none; border-bottom:2px solid transparent; padding:9px 14px;
  font-size:14px; font-weight:600; color:rgba(255,255,255,.75); cursor:pointer;
  white-space:nowrap;
}
nav.tabs-top a.active{color:#fff; border-bottom-color:#fff;}
.account-links{
  display:flex; align-items:center; gap:14px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.75); margin-left:auto; flex:none; white-space:nowrap;
}
.account-links a{color:rgba(255,255,255,.75);}
.account-links a:hover{color:#fff;}
/* .app-prefixed + the dedicated .nav-account-btn class are needed to outrank
   the global ".app button:not(.teambtn)" and ".app button[type=submit]"
   resets further down this file, which otherwise clobber this pill styling
   with the default gray/accent button look and larger padding. */
.app .account-links form button.nav-account-btn{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:999px;
  padding:6px 14px; color:#fff; font:inherit; font-weight:700; font-size:12.5px;
  cursor:pointer; white-space:nowrap;
}
.app .account-links form button.nav-account-btn:hover{background:rgba(255,255,255,.2);}
.app .account-links button.theme-toggle{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:999px;
  width:30px; height:30px; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
}
.app .account-links button.theme-toggle:hover{background:rgba(255,255,255,.2);}
.theme-toggle svg{width:16px; height:16px;}
.account-links a.icon-link{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:999px;
  width:30px; height:30px; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.account-links a.icon-link:hover{background:rgba(255,255,255,.2); color:#fff;}
.icon-link svg{width:16px; height:16px;}

table.results-table thead th button.size-toggle{
  position:absolute; left:4px; bottom:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  width:20px; height:20px; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink-muted);
  font-size:9px; font-weight:800; letter-spacing:0; text-transform:none; cursor:pointer; line-height:1;
}
table.results-table thead th button.size-toggle:hover{background:var(--line);}

/* Task #71 -- second small icon button in the same corner, for ScoreAdmin+ only. Sits to the
   right of size-toggle rather than sharing its position (both are position:absolute within
   the same 150px-wide, 26px-bottom-padded th -- plenty of room for both side by side). */
table.results-table thead th button.update-scores-toggle{
  position:absolute; left:28px; bottom:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  width:20px; height:20px; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink-muted);
  font-size:12px; font-weight:800; cursor:pointer; line-height:1;
}
table.results-table thead th button.update-scores-toggle:hover{background:var(--line);}
table.results-table thead th button.update-scores-toggle:disabled{opacity:.5; cursor:default;}

/* Task #91 -- third small icon button in the same corner, same size/position pattern as
   size-toggle/update-scores-toggle, one slot further right. Shown to everyone (not gated to
   ScoreAdmin+ like update-scores-toggle), so on a non-admin's page the left:28px slot sits
   empty rather than being reused -- simpler than repositioning based on role. */
table.results-table thead th button.whatif-header-toggle{
  position:absolute; right:4px; bottom:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  height:20px; padding:0 8px; flex:none; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; color:var(--ink-muted);
  font-size:9px; font-weight:800; letter-spacing:0; text-transform:none; cursor:pointer; line-height:1;
}
table.results-table thead th button.whatif-header-toggle:hover{background:var(--line);}

main{flex:1; padding:20px 20px calc(var(--nav-h) + 28px); display:flex; flex-direction:column; gap:16px;}
@media (min-width:960px){ main{padding:24px 24px 40px;} }

.narrow{max-width:760px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:16px;}
.narrow.picks-wide{max-width:900px;}
.narrow.home-wide{max-width:880px;}
.narrow.admin-wide{max-width:920px;}

nav.tabs-bottom{
  position:fixed; left:0; right:0; bottom:0; height:var(--nav-h);
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; max-width:1220px; margin:0 auto; width:100%;
  box-shadow:0 -6px 20px rgba(0,0,0,.06); z-index:10;
}
nav.tabs-bottom a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:none; color:var(--ink-faint); font-size:11px; font-weight:600; cursor:pointer;
  padding:6px 0 8px;
}
nav.tabs-bottom a svg{width:20px; height:20px;}
nav.tabs-bottom a.active{color:var(--accent);}
@media (min-width:960px){
  nav.tabs-bottom{display:none;}
  nav.tabs-top{display:flex;}
  main{padding-bottom:40px;}
}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-secondary);
}
.card h2{font-size:19px; font-weight:600;}

/* Collapsible settings/history sections (e.g. Admin Scores' "Automatic score entry",
   collapsed by default) -- <details><summary> gives this for free with no extra state/JS. */
details.card > summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
details.card > summary::-webkit-details-marker{display:none;}
details.card > summary::marker{display:none;}
details.card > summary .chevron{transition:transform .15s ease; flex:none; color:var(--ink-muted);}
details.card[open] > summary .chevron{transform:rotate(180deg);}
details.card > summary + *{margin-top:14px;}
.muted{color:var(--ink-muted);}
.small{font-size:12.5px;}

/* Page title with its navigation control on the same line. Keeps cross-page links
   out of body copy, where they get mistaken for prose and missed. */
.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.page-head .btn{flex:none;}
.page-head-nav{font-size:12.5px; font-weight:700; color:var(--ink-muted); margin-bottom:-4px;}

/* ============ admin hub ============ */
.admin-group-label{
  font-family:var(--font-display); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); margin:2px 0 8px;
}
/* auto-fit (not auto-fill) lets a short row -- e.g. a 2-tile group -- stretch to fill the
   width instead of leaving an empty trailing column the way a fixed repeat(3,1fr) would.
   240px caps it at 3 columns within .admin-wide's 920px container. */
.admin-group{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px;}
.admin-group-label{grid-column:1/-1;}
.admin-tile{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; box-shadow:var(--shadow);
}
.admin-tile-icon{
  flex:none; width:34px; height:34px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.admin-tile-icon svg{width:19px; height:19px;}
.admin-tile-title{display:block; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink);}
.admin-tile-sub{display:block; font-size:12px; color:var(--ink-muted); margin-top:1px;}

/* Shared "row of fields + a submit button" layout used by every admin "Add"/"Record"
   form (Schedule, Weeks, Payments, PickOverrides, ResetPool). At full width the fields
   sit inline; below 640px it stacks one-per-line instead of relying on flex-wrap, which
   with align-items:flex-end and fields of uneven height (a two-line label wrapping vs a
   one-line label) produced a staggered, jumbled look and shrank fields like team-name
   selects down to unusably narrow. The !important on width overrides each field's own
   inline pixel width (e.g. style="width:100px"), which only makes sense at desktop width. */
.admin-inline-form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}
@media (max-width:640px){
  .admin-inline-form{flex-direction:column; align-items:stretch;}
  .admin-inline-form label.field, .admin-inline-form > button{width:100%;}
  .admin-inline-form label.field input, .admin-inline-form label.field select{width:100% !important;}
}
.admin-tile.danger{border-color:var(--loss);}
.admin-tile.danger .admin-tile-icon{background:var(--loss-soft); color:var(--loss);}
.admin-tile.danger .admin-tile-title{color:var(--loss);}

/* Task #96 -- admin Release Notes page. */
.btn.small{padding:6px 12px; font-size:12.5px;}
.release-note-version{margin:22px 0 8px; font-family:var(--font-display); font-size:15px; letter-spacing:.02em; color:var(--ink-muted);}
.release-note-card{margin-bottom:10px;}
.release-note-card-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.release-note-badge{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px;}
.release-note-badge.feature{background:var(--accent-soft); color:var(--accent);}
.release-note-badge.bugfix{background:var(--loss-soft); color:var(--loss);}
.release-note-card-actions{display:flex; gap:8px; margin-top:10px;}
.release-note-attachments{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.release-note-attachment, .release-note-attachment-edit{max-width:220px;}
.release-note-attachment img, .release-note-attachment-edit img{max-width:100%; border-radius:8px; border:1px solid var(--line); display:block;}
.release-note-attachment-edit{display:flex; flex-direction:column; gap:4px; align-items:flex-start;}
.release-note-attachment-image-wrap{position:relative; max-width:100%;}
.app .release-note-attachment-image-wrap button.attachment-remove-btn{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:999px;
  background:rgba(20,20,20,.65); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; line-height:0;
}
.attachment-remove-btn svg{display:block;}
.app .release-note-attachment-image-wrap button.attachment-remove-btn:hover{background:var(--loss);}
.paste-zone{
  border:1px dashed var(--line-strong); border-radius:10px; padding:14px; margin:6px 0 10px;
  background:var(--surface-2);
}
.paste-zone:focus{outline:2px solid var(--accent); outline-offset:2px;}

/* Add/Edit form as a modal (same overlay shape as .picks-complete-overlay) rather than an
   inline card at the top of the page -- avoids the scroll-up-to-edit/scroll-down-to-verify
   round trip a long, 50+ entry list made jarring. max-height + its own overflow-y keeps a
   tall form (long description, several attachments) scrolling inside the modal instead of
   the page growing underneath it. */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,14,22,.55); backdrop-filter:blur(1px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;
}
.modal-card{max-width:560px; width:100%; max-height:90vh; overflow-y:auto;}

/* ============ buttons / inputs ============ */
.btn, button.btn, .app button:not(.teambtn){
  appearance:none; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); font-weight:700; font-size:14px; padding:11px 18px; border-radius:10px;
  cursor:pointer; font-family:inherit; transition:transform .05s ease;
  /* <button> defaults to inline-block in every browser, so .btn never needed its own
     display -- but a real <button> is the wrong element wherever the action is really a
     navigation (an <a href>, e.g. Forgot Password's account picker), and inline's width:100%
     no-op there let items wrap and overlap instead of stacking full-width. Explicit
     inline-block matches <button>'s existing behavior, so no other .btn usage changes. */
  display:inline-block; text-decoration:none;
}
.btn:active, .app button:active{transform:scale(.98);}
.btn.primary, .app button[type=submit]:not(.btn-link), .btn-primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.btn.primary:disabled, .app button:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn.ghost{background:none; border-color:transparent; color:var(--ink-muted);}
.btn.block, .w-100{width:100%;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=date],input[type=datetime-local],
input:not([type]),select,textarea,.form-control{
  width:100%; font:inherit; font-size:15px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
}
input.error{border-color:var(--loss); background:var(--loss-soft); color:var(--loss);}
.field-error, .text-danger, .validation-message{color:var(--loss); font-size:12.5px; font-weight:600;}
label.field{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-muted); margin-bottom:10px;}
.switch{
  display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px;
}
div.filter-bar div.switch button{
  border:none; background:none; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--ink-muted); cursor:pointer; white-space:nowrap;
}
div.filter-bar div.switch button.active{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08);}

/* ============ home ============ */
.hero-band{
  display:flex; align-items:stretch; min-height:132px;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.hero-endzone{
  flex:0 0 60px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 55%, white) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 82%, black) 100%);
  border-right:4px solid rgba(255,250,235,.8);
}
.hero-week-vert{
  display:inline-block; transform:rotate(-90deg); transform-origin:center;
  font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); white-space:nowrap;
}
.hero-field{
  flex:1; min-width:0; position:relative; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:18px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 3px, transparent 3px 64px),
    radial-gradient(700px 140px at 15% -55%, rgba(255,255,255,.22), transparent),
    linear-gradient(180deg, #2F8F55 0%, #1D6B40 100%);
}
.hero-countdown{font-family:var(--font-display); font-size:26px; font-weight:600; margin:0 0 4px; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.35);}
.hero-stats{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.hero-stat{
  background:rgba(8,20,14,.34); border:1px solid rgba(255,255,255,.32); border-radius:10px;
  padding:8px 16px; min-width:84px; text-align:center;
}
.hero-stat-value{font-family:var(--font-display); font-size:22px; font-weight:600; color:#fff; line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.3);}
.hero-stat-label{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.88);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;
}
.hero-stat-solo{min-width:260px; max-width:100%; padding:10px 22px;}
.hero-stat-solo .hero-stat-value{font-size:24px;}
.hero-stat-solo .hero-stat-label{
  text-transform:none; letter-spacing:normal; font-weight:600; font-size:12.5px;
  white-space:normal; max-width:none; overflow:visible; text-overflow:clip; color:rgba(255,255,255,.9);
}
.hero-sub{font-size:12.5px; opacity:.9; text-shadow:0 1px 2px rgba(0,0,0,.3);}
.hero-cta{margin-top:14px; border-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.25);}

.home-grid{display:grid; grid-template-columns:1fr; gap:16px; align-items:start;}
@media (min-width:760px){ .home-grid{grid-template-columns:1fr 1fr;} }

/* Admin Scores page (task #71) -- settings/actions column beside the recent-runs column,
   collapsing to one stacked column below 760px same as .home-grid. */
.score-update-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:start;}
@media (min-width:760px){ .score-update-grid{grid-template-columns:1fr 1fr;} }
.score-update-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--line);}
.score-update-row:last-child{border-bottom:none; padding-bottom:0;}
.score-update-row > span{font-size:14px; font-weight:600; color:var(--ink-muted);}
.offset-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  padding:5px 6px 5px 10px; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--surface-2); margin:0 6px 6px 0;
}
.offset-chip button{
  appearance:none; border:none; background:none; color:var(--ink-muted); font-size:14px;
  line-height:1; cursor:pointer; padding:2px 5px; border-radius:999px;
}
.offset-chip button:hover{background:var(--loss-soft); color:var(--loss);}
.standings-snap .row{display:flex; align-items:center; gap:10px; padding:6px 0;}
.standings-snap .row .name{flex:1; font-weight:700; font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.standings-snap .row .pts{font-weight:800; font-size:13px; color:var(--ink-muted);}
.standings-snap .row.you{background:var(--accent-soft); border-radius:8px; padding:8px 10px; margin:4px -10px 6px;}
.standings-snap .row.you .name, .standings-snap .row.you .pts{color:var(--accent);}
.standings-snap .row.winner{background:var(--pending-soft); border-radius:8px; padding:8px 10px; margin:0 -10px 8px;}
.standings-snap .row.winner .name, .standings-snap .row.winner .pts{color:var(--pending);}
.standings-snap > a{font-size:12.5px; font-weight:700; color:var(--accent); margin-top:4px; display:inline-block;}

.rules-quickfacts{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.rules-fact{background:var(--accent); border-radius:10px; padding:10px 16px; text-align:center; min-width:88px; flex:1;}
.rules-fact-value{font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--accent-ink); line-height:1.15;}
.rules-fact-label{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); opacity:.85; margin-top:2px;}

.rules-toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.rules-toc a{
  font-size:12.5px; font-weight:700; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; color:var(--ink); white-space:nowrap; text-decoration:none;
}
.rules-toc a:hover{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

.note-body{font-size:14.5px; line-height:1.65;}
.note-body p{margin:0 0 10px;}
.note-body ul, .note-body ol{margin:6px 0 10px; padding-left:20px;}
.note-body strong{color:var(--ink);}
.note-body code{background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:13px;}
.note-body a{color:var(--accent); text-decoration:underline;}
.note-body h3, .note-body h4{scroll-margin-top:16px;}

.rte-toolbar{display:flex; gap:4px; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.rte-toolbar button{padding:6px 10px; font-size:13px; font-weight:800; min-width:34px;}
.rte-editor{border:1px solid var(--line-strong); border-radius:9px; padding:12px; min-height:200px; background:var(--surface-2); outline:none;}
.rte-editor:focus{border-color:var(--accent);}

/* Task #100 -- font color swatches. Specificity has to explicitly outrank
   ".app button:not(.teambtn)" (see the same fix on .attachment-remove-btn) so these stay
   small circles instead of inheriting the default button's padding/border/radius. */
.rte-toolbar .rte-swatches{display:inline-flex; gap:4px; align-items:center; padding:0 4px;}
.app .rte-toolbar button.rte-swatch{
  width:18px; height:18px; min-width:0; padding:0; border-radius:999px;
  border:1px solid var(--line-strong); cursor:pointer;
}
.app .rte-toolbar button.rte-swatch:hover{transform:scale(1.15);}
.rte-link-checkbox{display:flex; align-items:center; gap:8px; margin:12px 0; font-weight:600; font-size:13.5px;}
.rte-link-checkbox input{width:auto;}

/* Task #91 -- floating "exit what-if" banner, fixed to the viewport so it stays reachable
   while scrolling the (often wide/tall) results table, same bottom offset the mobile tab
   bar already reserves (--nav-h). */
.whatif-floating{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 14px); transform:translateX(-50%);
  z-index:20; display:flex; gap:8px; padding:8px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow-primary, var(--shadow));
}
.app .whatif-floating button.whatif-floating-btn{
  border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer;
  background:none; border:1px solid var(--line-strong); color:var(--ink-muted);
}
.app .whatif-floating button.whatif-floating-btn.primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.app .whatif-floating button.whatif-floating-btn:hover{opacity:.85;}
@media (min-width:960px){ .whatif-floating{bottom:20px;} }

/* ============ pick entry ============ */
.week-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.week-bar select{width:auto; font-weight:800; font-size:15px; padding:7px 10px; margin-top:2px;}
.week-bar .lock{font-size:12.5px; font-weight:700; text-align:right;}

.locked-banner{
  padding:13px 16px; background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--radius);
  font-size:13px; font-weight:700; color:var(--ink-muted); text-align:center;
}

.picks-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:960px){ .picks-grid{grid-template-columns:repeat(2, 1fr); gap:16px 20px;} }

.game{padding:14px 16px;}
.game .when{font-size:12px; font-weight:700; color:var(--ink-muted); letter-spacing:.03em; margin-bottom:10px;}
.game-body{display:flex; gap:12px; align-items:stretch;}
.matchup-stack{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.conf-side{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; flex:none;}
.conf-side .lbl{font-size:11px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
.conf-side select{width:76px; font-weight:800; text-align:center;}
.teambtn{
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:1.5px solid var(--line-strong); background:var(--surface-2); border-radius:11px;
  padding:9px 12px; cursor:pointer; font-family:inherit;
}
.logo-badge{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--team-accent, var(--accent)) 20%, var(--surface-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .15s ease, box-shadow .15s ease;
}
.teambtn .logo{width:26px; height:26px; object-fit:contain;}
.teambtn .nickname{font-weight:800; font-size:13.5px; display:block; color:var(--ink);}
.teambtn .city{font-size:11px; color:var(--ink-muted); display:block;}
.teambtn.picked{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.teambtn.picked .logo-badge{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--team-accent, var(--accent)) 55%, white) 0%,
    var(--team-accent, var(--accent)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px color-mix(in srgb, var(--team-accent, var(--accent)) 45%, transparent);
}
.teambtn:disabled{cursor:default;}
.teambtn:disabled:not(.picked){opacity:.6;}
.conf-row{display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:10px;}
.conf-row .lbl{font-size:12px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
.conf-row select, .conf-row input{width:84px; font-weight:800; text-align:center;}
.conf-static{
  font-weight:800; font-size:15px; min-width:84px; text-align:center;
  padding:9px 12px; background:var(--surface-2); border-radius:9px; border:1px solid var(--line);
}

.tiebreak-card .conf-row{margin-top:0;}
.tiebreak-card input{width:130px; font-weight:800; text-align:center;}
.field-error{font-size:11.5px; font-weight:700; color:var(--loss); margin-top:6px;}

/* Auto-save (task #76) replaced the old Submit-button flow, so the progress card is now
   the only signal a player gets that something's still missing -- has to read as a clear
   warning while incomplete, not just neutral counts. Sticky so it stays on screen while
   scrolling through the game list -- otherwise it's easy to scroll past a missed game or
   the tiebreaker, think you're done, and navigate away (the exact scenario the new
   NavigationLock warning also guards against). The outer card itself stays neutral (not
   solid red) -- an earlier version tinted the whole card red/green, which made it hard to
   tell which of the three things (picks/confidence/tiebreaker) was actually still missing
   since everything read as equally alarming. Each stat is now its own tile carrying its
   own ok/missing color, same visual language as Results' .chip.ok/.chip.no. */
.picks-progress{padding:14px 16px; border-width:1.5px; position:sticky; top:12px; z-index:5; box-shadow:var(--shadow); background:var(--surface); border-color:var(--line-strong);}
.picks-progress-headline{font-weight:800; font-size:13.5px; margin-bottom:10px; display:flex; align-items:center; gap:7px;}
.picks-progress.is-incomplete .picks-progress-headline{color:var(--loss);}
.picks-progress.is-complete .picks-progress-headline{color:var(--win);}

/* Same pull-tab concept as Results.razor's .header-collapse-row/.header-collapse-toggle
   (small centered chevron button, muted until hovered), just sitting inside this one card's
   own bottom edge instead of hanging in the gap between two separate cards -- always visible
   (even while collapsed) so there's a way back to expand it. */
.progress-collapse-row{display:flex; justify-content:center; margin-top:8px;}
.app button.progress-collapse-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:18px; padding:0; flex:none;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; color:var(--ink-muted); cursor:pointer;
}
.app button.progress-collapse-toggle:hover{background:var(--line); color:var(--ink);}

.picks-progress-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px;}
.progress-tile{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px;
  font-size:12px; font-weight:700; line-height:1.25; border:1px solid transparent;
}
.progress-tile .tile-icon{
  flex:none; width:20px; height:20px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff;
}
/* Stay three-across on a phone (matches .progress-actions below) instead of stacking to
   one column -- shrink padding/icon/type instead of giving up the row. */
@media (max-width:480px){
  .picks-progress-stats{gap:5px;}
  .progress-tile{flex-direction:column; align-items:flex-start; gap:4px; padding:6px 7px; font-size:9.5px;}
  .progress-tile .tile-icon{width:15px; height:15px; font-size:9px;}
}
.progress-tile.tile-ok{background:var(--win-soft); color:var(--win); border-color:color-mix(in srgb, var(--win) 35%, transparent);}
.progress-tile.tile-ok .tile-icon{background:var(--win);}
.progress-tile.tile-no{background:var(--loss-soft); color:var(--loss); border-color:color-mix(in srgb, var(--loss) 35%, transparent);}
.progress-tile.tile-no .tile-icon{background:var(--loss);}

/* Feeling Lucky / Clear Picks / Clear Confidence -- one compact row, sized to still fit
   three across on a phone (see .progress-tile above for the same 3-in-a-row constraint). */
.progress-actions{display:flex; gap:6px;}
.progress-actions .btn{flex:1; font-size:11.5px; padding:9px 4px; white-space:normal; line-height:1.25; text-align:center;}

.picks-complete-overlay{
  position:fixed; inset:0; background:rgba(10,14,22,.55); backdrop-filter:blur(1px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;
}
.picks-complete-card{
  max-width:360px; width:100%; text-align:center; padding:30px 26px; border-color:var(--win);
  box-shadow:var(--shadow-primary, var(--shadow));
}
.picks-complete-icon{
  width:50px; height:50px; border-radius:999px; background:var(--win-soft); color:var(--win);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin:0 auto 14px;
}
.picks-complete-card h3{margin:0 0 8px; font-size:19px;}
.picks-complete-card p{margin:0 0 20px; color:var(--ink-muted); font-size:13.5px; line-height:1.4;}

.sticky-foot{
  position:sticky; bottom:calc(var(--nav-h) + 12px); z-index:5;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px;
}
@media (min-width:700px){ .sticky-foot{bottom:16px;} }
.sticky-foot .status{flex:1; min-width:0;}
.sticky-foot .status .line1{font-size:13px; font-weight:700;}
.sticky-foot .status .line2{font-size:11.5px; color:var(--ink-muted);}
.sticky-foot .status .errors{
  margin:4px 0 0; padding:0 0 0 16px; max-height:72px; overflow-y:auto;
  font-size:11.5px; color:var(--loss);
}
.sticky-foot .status .errors li{margin:1px 0;}

/* ============ results ============ */
.youtag{font-size:calc(10px * var(--rt-scale, 1)); font-weight:800; letter-spacing:.05em; background:var(--accent); color:var(--accent-ink); padding:calc(2px * var(--rt-scale, 1)) calc(7px * var(--rt-scale, 1)); border-radius:999px; margin-left:6px;}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:calc(9.5px * var(--rt-scale, 1)); font-weight:800; padding:calc(2px * var(--rt-scale, 1)) calc(4px * var(--rt-scale, 1)); border-radius:5px;
  border:1px solid var(--line); white-space:nowrap; min-width:calc(20px * var(--rt-scale, 1));
}
/* Fills its <td> exactly (100% of the cell's own content box, padding already
   excluded by the browser) instead of a hardcoded px width -- a fixed width here
   previously had to match table.results-table th.gamecol's width minus the td's
   own padding by hand, and those two numbers drifted, clipping the chip's right
   edge against the td's overflow:hidden. Scoped to .pickcell (the results-grid
   pick chips) so it doesn't stretch unrelated .chip usages like the PickOverrides
   Active/Expired badge. */
.chip.pickcell{width:100%;}
.chip.ok{background:var(--win-soft); color:var(--win); border-color:transparent;}
.chip.no{background:var(--loss-soft); color:var(--loss); border-color:transparent;}
.chip.pending{background:var(--pending-soft); color:var(--pending); border-color:transparent;}
.chip.hidden{background:var(--surface-2); color:var(--ink-faint);}
.chip.tie{background:var(--surface-2); color:var(--ink-muted); border-color:var(--line);}
.chip.must-hit{border-color:var(--win); box-shadow:inset 0 0 0 1px var(--win);}
.chip.must-miss{border-color:var(--loss); box-shadow:inset 0 0 0 1px var(--loss);}
.pickcell{position:relative; display:inline-flex; flex-direction:column; align-items:center; line-height:1.3;}
.pickcell .pc-l1{display:flex; align-items:center; gap:2px; font-weight:800;}
.pickcell .pc-l2{font-size:calc(9px * var(--rt-scale, 1)); opacity:.8; font-weight:700;}
.pickcell .ico{font-size:calc(8px * var(--rt-scale, 1)); font-weight:900;}

/* Task #79 -- marks a pick/tiebreaker the lock-time auto-completion service filled in
   rather than the player. Visible but not loud: a small corner glyph on the pick chip,
   opacity-muted so it doesn't compete with the ok/no/pending color coding. .tb sits inline
   next to the tiebreaker number instead, since that cell isn't a chip. */
.auto-badge{position:absolute; top:-5px; right:-5px; font-size:calc(9px * var(--rt-scale, 1)); line-height:1; opacity:.7;}
.auto-badge.tb{position:static; margin-left:4px; font-size:11px; opacity:.7;}

/* Edge shadows only appear once content actually overflows: the two "cover" gradients
   scroll with the content (background-attachment:local) and paint over the shadows near
   the edges they start from, so a shadow only shows once its edge has scrolled out of view. */
.table-scroll{
  overflow-x:auto; border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-primary);
  background-color:var(--surface);
  background-image:
    linear-gradient(to right, var(--surface) 50%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,0), var(--surface) 50%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.22), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}
/* --rt-scale drives table.results-table's font-size/padding/column-width calc()s below
   (task #41) -- unset (falls back to 1) everywhere except when one of these is applied. */
.table-scroll.rt-sm{--rt-scale:0.85;}
.table-scroll.rt-lg{--rt-scale:1.2;}
table.std-table{width:100%; min-width:560px; border-collapse:collapse; font-size:13px; table-layout:fixed;}
table.std-table th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); padding:8px 8px; border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap; overflow:hidden;}
table.std-table td{padding:9px 8px; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
table.std-table th.num, table.std-table td.num{text-align:right;}
table.std-table th.group-head{text-align:center; border-bottom:1px solid var(--line-strong);}
table.std-table th.sub{padding-top:4px; font-size:9.5px;}
table.std-table th.rankcol, table.std-table td.rankcol{width:42px; text-align:center;}
table.std-table th.weekcol, table.std-table td.weekcol{width:90px; text-align:left;}
table.std-table th.playercol, table.std-table td.playercol{width:130px;}
table.std-table th.rankcol, table.std-table td.rankcol,
table.std-table th.weekcol, table.std-table td.weekcol,
table.std-table th.playercol, table.std-table td.playercol{
  position:sticky; background:var(--surface); z-index:1;
}
table.std-table thead th.rankcol, table.std-table thead th.weekcol, table.std-table thead th.playercol{background:var(--surface-2); z-index:2;}
table.std-table th.rankcol, table.std-table td.rankcol,
table.std-table th.weekcol, table.std-table td.weekcol{left:0;}
table.winners-table th.playercol, table.winners-table td.playercol{left:90px;}
table.std-table:not(.winners-table) th.playercol, table.std-table:not(.winners-table) td.playercol{left:42px;}
table.std-table tbody tr.you td.playercol{background:var(--accent-soft);}

table.results-table{border-collapse:collapse; width:100%; min-width:calc(920px * var(--rt-scale, 1)); font-size:calc(10px * var(--rt-scale, 1)); table-layout:fixed;}
table.results-table thead th{
  background:var(--surface); text-align:center; font-size:calc(9.5px * var(--rt-scale, 1));
  letter-spacing:.01em; color:var(--ink); padding:calc(6px * var(--rt-scale, 1)) calc(3px * var(--rt-scale, 1)); border-bottom:2px solid var(--line-strong);
  white-space:normal; font-weight:800; overflow:hidden; vertical-align:top;
}
table.results-table thead th:first-child{position:sticky; left:0; z-index:2; background:var(--surface); width:calc(150px * var(--rt-scale, 1)); white-space:nowrap; padding-bottom:26px;}
table.results-table thead th .hint{font-size:calc(8px * var(--rt-scale, 1)); font-weight:600; color:var(--ink-muted);}
table.results-table thead th .live-score{margin-top:3px; font-size:calc(8px * var(--rt-scale, 1)); font-weight:700; color:var(--ink-muted); line-height:1.3;}
table.results-table thead th .live-score .live-clock{display:block; font-weight:500; text-transform:none; letter-spacing:normal;}
table.results-table thead th .live-score.live-final{color:var(--accent);}
table.results-table thead th .live-score.live-in-progress{color:var(--win);}
table.results-table th.gamecol{width:calc(36px * var(--rt-scale, 1)); padding:calc(5px * var(--rt-scale, 1)) calc(1px * var(--rt-scale, 1));}
table.results-table th.gamecol .stack{display:flex; flex-direction:column; align-items:center; line-height:1.3; font-weight:800;}
table.results-table th.gamecol .stack .at{color:var(--ink-faint); font-weight:500;}
/* Task #91 -- the two per-game team buttons shown in .gamecol while What If mode is on.
   .app-prefixed + a dedicated class, same reason as .attachment-remove-btn: outranks the
   global ".app button:not(.teambtn)" reset so these stay compact instead of full-size buttons. */
.app table.results-table th.gamecol button.whatif-team{
  display:block; width:100%; padding:1px 2px; margin:0; border:1px solid transparent; border-radius:5px;
  background:none; color:inherit; font:inherit; font-weight:800; cursor:pointer;
}
.app table.results-table th.gamecol button.whatif-team:hover{background:var(--accent-soft);}
.app table.results-table th.gamecol button.whatif-team.selected{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.whatif-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0;}
.whatif-label{font-size:12.5px; color:var(--ink-muted); font-weight:600;}
table.results-table th.tbcol{width:calc(28px * var(--rt-scale, 1));}
table.results-table th.reccol{width:calc(54px * var(--rt-scale, 1));}
table.results-table th.ptscol{width:calc(42px * var(--rt-scale, 1));}
table.results-table th.combocol{width:calc(58px * var(--rt-scale, 1));}
table.results-table tbody td{padding:calc(5px * var(--rt-scale, 1)) calc(2px * var(--rt-scale, 1)); text-align:center; border-bottom:1px solid var(--line); overflow:hidden; font-variant-numeric:tabular-nums;}
table.results-table tbody td:first-child{text-align:left; position:sticky; left:0; z-index:1; background:var(--surface); font-weight:700; padding-left:calc(8px * var(--rt-scale, 1)); white-space:nowrap; text-overflow:ellipsis;}
table.results-table tbody tr.you td:first-child{background:var(--accent-soft);}
table.results-table .rec-cell{line-height:1.3;}
table.results-table .rec-cell .l1{font-weight:700;}
table.results-table .rec-cell .l2{font-size:calc(9px * var(--rt-scale, 1)); color:var(--ink-muted);}
table.results-table tfoot td{padding:calc(5px * var(--rt-scale, 1)) calc(4px * var(--rt-scale, 1)); font-size:calc(9.5px * var(--rt-scale, 1)); text-align:center; border-top:2px solid var(--line-strong); background:var(--surface-2); line-height:1.3; font-variant-numeric:tabular-nums;}
table.results-table tfoot td:first-child{text-align:left; font-weight:700; position:sticky; left:0; background:var(--surface-2); padding-left:calc(10px * var(--rt-scale, 1));}
table.results-table tfoot .team{font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.02em;}
table.results-table tfoot .cnt{font-weight:800; color:var(--ink);}
table.results-table tfoot .avg{color:var(--ink-muted);}
table.results-table tbody td:first-child .rank{color:var(--ink-muted); font-weight:400; margin-right:2px;}
table.results-table tfoot td.win{background:var(--win-soft);}
table.results-table tfoot td.win .cnt{color:var(--win);}
table.results-table tfoot td.loss{background:var(--loss-soft);}
table.results-table tfoot td.loss .cnt{color:var(--loss);}
table.results-table tfoot td.pending{background:var(--pending-soft);}
table.results-table tfoot td.pending .cnt{color:var(--pending);}
table.results-table tfoot td.tie .cnt{color:var(--ink-muted);}
.cell-ok{color:var(--win); font-weight:700;}
.cell-no{color:var(--loss); font-weight:700;}
.cell-pending{color:var(--pending); font-weight:700;}

.legend{display:flex; gap:14px; flex-wrap:wrap;}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-muted);}
.legend i{width:9px; height:9px; border-radius:3px; display:inline-block;}
.legend span.legend-short{display:none;}
.results-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.results-controls select{width:auto; font-weight:800; font-size:15px; padding:7px 10px; margin-top:2px;}

/* Legend reads as part of the SAME card as the Week selector everywhere, not just mobile --
   pulled flush against results-controls (no border/shadow seam) rather than sitting as its
   own separate card with a gap in between. */
.results-controls{padding-bottom:10px; border-bottom-left-radius:0; border-bottom-right-radius:0;}
.legend{
  margin-top:-16px; padding-top:10px;
  border-top:none; border-top-left-radius:0; border-top-right-radius:0; box-shadow:none;
}

/* Task #44 -- small pull-tab hanging off the bottom-center of the merged header card
   (results-controls + legend) to collapse/expand the Week selector and legend together.
   Negative margin pulls it flush against whichever of the two is currently the last
   visible one -- a display:none sibling contributes no gap, so this works whether the
   legend is showing or not. */
.header-collapse-row{display:flex; justify-content:center; margin-top:-16px;}
.app button.header-collapse-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:14px; padding:0; flex:none;
  background:var(--surface-2); border:1px solid var(--line); border-top:none;
  border-radius:0 0 10px 10px; color:var(--ink-muted); cursor:pointer;
}
.app button.header-collapse-toggle:hover{background:var(--line); color:var(--ink);}

/* Below the desktop/mobile nav breakpoint (960px, see nav.tabs-bottom/nav.tabs-top): the
   lock-status text ("Final -- full grid..." / "closes 8/13 4:00pm") isn't shown anywhere
   else on this page -- on a phone it, plus the legend's full-length labels, ate space that
   matters more there than on desktop. Desktop keeps both. */
@media (max-width:959px){
  .results-controls .lock-note{display:none;}
  .legend span.legend-full{display:none;}
  .legend span.legend-short{display:inline;}
}

/* ============ standings ============ */
.rankbadge{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px;
  font-size:11px; font-weight:800; background:var(--surface-2); color:var(--ink-muted);
}
.rankbadge.r1{background:#F0DFB8; color:#5C3D00;}
.rankbadge.r2{background:#E7E4DA; color:#3E4033;}
.rankbadge.r3{background:#EAD3C0; color:#5C3A1E;}
@media (prefers-color-scheme:dark){ .rankbadge.r1{background:#4A3A10; color:#F0DFB8;} .rankbadge.r2{background:#33362A; color:#E7E4DA;} .rankbadge.r3{background:#42311F; color:#EAD3C0;} }
:root[data-theme="dark"] .rankbadge.r1{background:#4A3A10; color:#F0DFB8;}
:root[data-theme="dark"] .rankbadge.r2{background:#33362A; color:#E7E4DA;}
:root[data-theme="dark"] .rankbadge.r3{background:#42311F; color:#EAD3C0;}
.net-pos{color:var(--win); font-weight:700;}
.net-neg{color:var(--loss); font-weight:700;}

/* ============ admin ============ */
.filter-bar{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.filter-bar input{max-width:320px;}
table.admin-table{width:100%; border-collapse:collapse; font-size:13px;}
table.admin-table th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); padding:8px; border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap;}
table.admin-table td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.admin-table td input[type=text], table.admin-table td input[type=email]{min-width:110px;}
table.admin-table td select{min-width:130px;}
table.admin-table td.checkcol{text-align:center; white-space:nowrap;}

/* Opt-in for tables with only a couple of short-content columns (Weeks, PickOverrides)
   -- table.admin-table's default width:100% + input{width:100%} stretches every input to
   fill whatever's left over, which looks fine on wide tables (Players, Schedule) but
   balloons a 2-3 column table's inputs to 300-400px for content that needs ~120px. This
   caps them instead of forcing the table itself to fill the container. */
table.admin-table.compact{width:auto; max-width:100%;}
table.admin-table.compact td input[type=text], table.admin-table.compact td input[type=email]{width:auto; max-width:200px;}
table.admin-table.compact td input[type=datetime-local]{width:auto; max-width:200px;}
table.admin-table.compact td select{width:auto; max-width:180px;}

/* Payments page: Payments/By Player tab switch atop the Ledger card. */
.ledger-tabs{display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--line);}
.ledger-tab{background:none; border:none; border-bottom:2px solid transparent; padding:8px 4px; margin-bottom:-1px; font-size:14px; font-weight:600; color:var(--ink-muted); cursor:pointer;}
.ledger-tab + .ledger-tab{margin-left:14px;}
.ledger-tab:hover{color:var(--ink);}
.ledger-tab.active{color:var(--accent); border-bottom-color:var(--accent);}

/* Task #74 -- Players' 9-column table needed ~1000px to show every row's inputs, so
   editing on a phone meant scrolling sideways to reach tiny fields; a card per player
   fixed that below 640px. Task #82 dropped the desktop table entirely in favor of this
   same card layout everywhere -- narrow table-cell inputs could never show a long value
   in full (a long username was the case that surfaced it) no matter how the table was
   tuned, since the fix was never "make the input wider," it was "stop putting full-width
   values in fixed-width cells." auto-fit/minmax flows 1 column on a phone up to several
   across on a wide desktop with no manual breakpoint needed, same pattern as the admin
   hub's own .admin-group tile grid. */
.players-responsive .table-scroll{display:none;}
.player-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:10px;}
.player-card{padding:14px;}
.player-card-head{display:flex; flex-direction:column; margin-bottom:10px;}
.player-card-name{font-family:var(--font-display); font-weight:600; font-size:15px;}
.player-card-toggle{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:8px;}
.player-card-actions{display:flex; gap:10px; margin-top:12px;}
.player-card-actions .btn{flex:1;}

/* Task #74 continued -- same card-per-row swap for Weeks/Schedule/Scores. Generalized
   behind one shared wrapper class rather than Players' bespoke .player-card, since these
   three pages' rows are simpler (2-3 fields, no rare-vs-frequent split to hide behind an
   "Edit details" toggle like Players needed). */
.admin-responsive .admin-row-cards{display:none;}
@media (max-width:640px){
  .admin-responsive .table-scroll{display:none;}
  .admin-responsive .admin-row-cards{display:flex; flex-direction:column; gap:10px;}
}
.admin-row-card{padding:14px;}
.admin-row-card-actions{display:flex; gap:10px; margin-top:4px;}
.admin-row-card-actions .btn{flex:1;}
/* Scores' cards have no per-row Save (one bulk Submit Scores button for the whole week),
   just the visitor/home score inputs side by side echoing the table's own layout. */
.score-card-teams{display:flex; align-items:flex-end; gap:10px;}
.score-card-teams .field{flex:1; margin-bottom:0;}

.manage-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.manage-nav a.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.recovery-codes{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin:14px 0;}
.recovery-codes code{background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:8px 10px; text-align:center; font-size:13px;}

/* ============ blazor framework requirements ============ */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--win); }
.invalid { outline: 1px solid var(--loss); }
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: var(--line-strong); }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--ink-faint);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}