/* ==========================================================================
   CAC Fantasy: design tokens, base, shared components, then page-specific rules.
   Spacing is an 8px system: --s1 4, --s2 8, --s3 12, --s4 16, --s5 24, --s6 32, --s7 48.
   Red is reserved for destructive actions, urgent errors, negative scoring and critical warnings. Gold marks champions and rankings only.
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/manrope-800.woff2") format("woff2"); }

:root {
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* type families: Manrope for the wordmark and display headings, Inter for everything else */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- semantic colour tokens: the only place a colour is chosen. White, greens and restrained grays; red and amber only for danger and warning. ---- */
  --color-brand: #34a56b;             /* primary action fill and accents */
  --color-brand-dark: #0e5a39;        /* logo green; selected borders, strong accents */
  --color-brand-hover: #4bbb82;
  --color-brand-subtle: #e3f2e9;      /* pale green: selected cards, information banners, quiet fills */
  --color-brand-ink: #062915;         /* text on a brand fill: 6:1 or better */
  --color-link: #0a5535;              /* links and quiet buttons: dark enough for text, always underlined in body copy */
  --color-underline: #0e5a39;         /* active tab and navigation underline */
  --color-focus: #7fd6a6;             /* the pale-green halo of the focus ring */
  --color-focus-line: #0e5a39;        /* the line of the focus ring (3:1 against white; the halo alone would not be) */
  --color-header: #0b4a2f;
  --color-header-ink: #ffffff;
  --color-header-accent: #9fe0bb;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #d9e2dc;
  --color-border-strong: #718a7a;
  --color-text: #13231b;
  --color-text-muted: #586a5f;
  --color-danger: #bd2f25;
  --color-warning: #94560a;
  --color-pending: #6b7a70;           /* pending and unavailable: neutral gray */

  /* names the components use, all derived from the tokens above */
  --bg: #f3f6f4;
  --surface: var(--color-surface);
  --surface-2: #ecf1ee;               /* quiet fills: chips, inputs on tinted areas, icon wells */
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --text: var(--color-text);
  --text-2: #33463b;
  --muted: var(--color-text-muted);
  --primary: var(--color-brand);
  --primary-hover: var(--color-brand-hover);
  --primary-ink: var(--color-brand-ink);
  --primary-soft: var(--color-brand-subtle);
  --primary-text: var(--color-link);
  --focus: var(--color-focus);
  --gold: var(--color-brand);
  --gold-text: var(--color-link);
  --gold-bg: var(--color-brand-subtle);
  --success: #137634;
  --success-bg: #e5f4ea;
  --warning: var(--color-warning);
  --warning-bg: #fdf0da;
  --danger: var(--color-danger);
  --danger-bg: #fcebe9;
  --header-bg: var(--color-header);
  --header-ink: var(--color-header-ink);
  --header-accent: var(--color-header-accent);
  --scrim: rgba(6, 18, 12, 0.5);

  /* shape and depth */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-pop: 0 10px 30px rgba(6, 30, 18, 0.16), 0 2px 6px rgba(6, 30, 18, 0.08);

  /* type scale */
  --fs-hero: clamp(2.125rem, 5vw + 1rem, 3.25rem);
  --fs-page: 1.875rem;           /* page title */
  --fs-title: 1.5rem;
  --fs-section: 1.375rem;        /* section title */
  --fs-card: 1.0625rem;          /* card title */
  --fs-body: 1rem;
  --fs-support: 0.875rem;        /* supporting text, table text */
  --fs-caption: 0.8125rem;       /* labels, metadata */

  /* names the older rules below still use */
  --card: var(--surface);
  --ink: var(--text);
  --line: var(--border);
  --brand: var(--primary);
  --brand-ink: var(--primary-ink);
  --accent: var(--primary);
  --win: var(--success);
  --loss: var(--danger);
  --warn: var(--warning);
  --warn-bg: var(--warning-bg);
  --ok-bg: var(--success-bg);
  --err-bg: var(--danger-bg);
  --me-bg: var(--primary-soft);
  --shadow: none;
  color-scheme: light;
}

/* Dark theme: chosen in the account menu; "device" follows the operating system. Dark green-black surfaces, green interactive states, pale-green focus. */
:root[data-theme="dark"] {
  --color-brand: #34a56b;
  --color-brand-dark: #0e5a39;
  --color-brand-hover: #4bbb82;
  --color-brand-subtle: #15392a;
  --color-brand-ink: #04140b;
  --color-link: #7fd6a6;
  --color-underline: #34a56b;
  --color-focus: #7fd6a6;
  --color-focus-line: #7fd6a6;
  --color-header: #0b4a2f;
  --color-header-accent: #9fe0bb;
  --color-surface: #11241a;
  --color-surface-raised: #15392a;
  --color-border: #2a4a3a;
  --color-border-strong: #5a9276;
  --color-text: #f3f8f5;
  --color-text-muted: #a8bbb0;
  --color-danger: #ff8a7d;
  --color-warning: #e5a860;
  --color-pending: #94a69b;
  --bg: #0b140f;
  --surface-2: #15392a;
  --text-2: #d0ddd5;
  --gold: var(--color-brand);
  --gold-text: var(--color-link);
  --gold-bg: var(--color-brand-subtle);
  --success: #5fc98c;
  --success-bg: #12301f;
  --warning-bg: #352a10;
  --danger-bg: #3b1c19;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="device"] {
    --color-brand: #34a56b;
    --color-brand-dark: #0e5a39;
    --color-brand-hover: #4bbb82;
    --color-brand-subtle: #15392a;
    --color-brand-ink: #04140b;
    --color-link: #7fd6a6;
    --color-underline: #34a56b;
    --color-focus: #7fd6a6;
    --color-focus-line: #7fd6a6;
    --color-header: #0b4a2f;
    --color-header-accent: #9fe0bb;
    --color-surface: #11241a;
    --color-surface-raised: #15392a;
    --color-border: #2a4a3a;
    --color-border-strong: #5a9276;
    --color-text: #f3f8f5;
    --color-text-muted: #a8bbb0;
    --color-danger: #ff8a7d;
    --color-warning: #e5a860;
    --color-pending: #94a69b;
    --bg: #0b140f;
    --surface-2: #15392a;
    --text-2: #d0ddd5;
    --success: #5fc98c;
    --success-bg: #12301f;
    --warning-bg: #352a10;
    --danger-bg: #3b1c19;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.55 var(--font-body); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--text); }
a { color: var(--primary-text); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--color-focus-line); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 6px var(--color-focus); }
::selection { background: var(--primary-soft); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- global header: one row at every width ---------- */
.site-header { background: var(--header-bg); color: var(--header-ink); position: sticky; top: 0; z-index: 40; }
.bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--s3); height: 56px; padding-top: 0; padding-bottom: 0; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; font-size: 1.125rem; color: var(--header-ink) !important; white-space: nowrap; flex: none; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-word span { font-weight: 700; color: var(--header-accent); }
.nav { display: flex; gap: var(--s1); align-items: center; flex-wrap: nowrap; min-width: 0; }
.nav-link { color: var(--header-ink) !important; text-decoration: none; padding: 0 var(--s3); min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--radius-sm); opacity: 0.86; background: none; border: 0; font: inherit; cursor: pointer; white-space: nowrap; }
.nav-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.nav-link.quiet { opacity: 0.72; }
.nav-link[aria-current="page"] { opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.9); border-radius: 0; }
.nav-link.cta { opacity: 1; background: rgba(255, 255, 255, 0.16); font-weight: 600; }
.bell, .userbtn { color: var(--header-ink); background: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; min-width: 44px; justify-content: center; border-radius: var(--radius-sm); text-decoration: none; position: relative; }
.bell:hover, .userbtn:hover, .userbtn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.bell .count { position: absolute; top: 4px; right: 2px; background: var(--color-header-accent); color: var(--color-brand-ink); min-width: 1.25rem; height: 1.25rem; line-height: 1.25rem; padding: 0 5px; font-size: var(--fs-caption); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: var(--header-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; flex: none; }
.userbtn { padding: 0 var(--s2); }
.userbtn .uname { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- disclosure menus (user menu, More, league details) ---------- */
.menu { position: relative; display: inline-block; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; max-width: min(92vw, 320px); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--s2); }
.menu-panel[hidden] { display: none; }
.menu-panel.left { right: auto; left: 0; }
.menu-item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 0; background: none; border-radius: var(--radius-sm); color: var(--text) !important; text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item[aria-current="page"] { background: var(--primary-soft); font-weight: 600; }
.menu-item .ic { color: var(--muted); }
.menu-sep { height: 1px; background: var(--border); margin: var(--s2) 0; border: 0; }
.menu-head { padding: var(--s2) var(--s3); font-size: var(--fs-support); color: var(--muted); }
.menu-backdrop { display: none; }

/* ---------- page frame ---------- */
main { padding-top: var(--s5); padding-bottom: var(--s6); min-height: 70vh; }
.foot { color: var(--muted); font-size: var(--fs-support); padding-top: var(--s4); padding-bottom: var(--s6); }
.foot a { color: inherit; }

/* ---------- league header and navigation ---------- */
.league-head { margin: 0 0 var(--s4); }
.crumbs { margin: 0 0 var(--s1); font-size: var(--fs-support); color: var(--muted); display: none; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-current] { color: var(--text-2); }
.league-id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.league-id h1 { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; }
.league-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--muted); font-size: var(--fs-support); margin-top: var(--s1); }
.league-meta .menu-trigger { color: var(--muted); }
.tag-sport { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-support); color: var(--text-2); font-weight: 600; }
.meta-btn { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; padding: 0 var(--s2); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-support); cursor: pointer; border-radius: var(--radius-sm); }
.meta-btn:hover { background: var(--surface-2); color: var(--text); }
.lnav { display: flex; align-items: stretch; gap: var(--s1); margin: var(--s3) 0 0; border-bottom: 1px solid var(--border); }
.lnav > a, .lnav .menu > button { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); color: var(--text-2); text-decoration: none; font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.lnav > a:hover, .lnav .menu > button:hover { color: var(--text); background: var(--surface-2); }
.lnav > a[aria-current="page"], .lnav .menu > button.active { color: var(--color-link); font-weight: 600; border-bottom-color: var(--color-underline); }
.lnav .lbl-short { display: none; }
.lnav .count { margin-left: var(--s1); }
.lnav .menu { margin-left: 0; }
.lnav .menu-panel { right: auto; left: 0; min-width: 240px; }
.lnav .menu-item .count { margin-left: auto; }

.tabs { display: flex; gap: var(--s1); flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--border); margin: var(--s3) 0 var(--s4); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); text-decoration: none; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a.active, .tabs a[aria-current="page"] { color: var(--color-link); border-bottom-color: var(--color-underline); font-weight: 600; }

/* ---------- page headings ---------- */
.page-head, .hero { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); padding: 0; background: none; border: 0; box-shadow: none; }
.page-head h1, .page-head h2, .hero h1, .hero h2 { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; }
.page-head h2 { font-size: var(--fs-section); }
.page-head p, .hero p { margin: var(--s1) 0 0; color: var(--muted); max-width: 62ch; line-height: 1.6; }
.page-head .actions { margin-left: auto; }

/* ---------- surfaces: few borders, no nested cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); }
.card h1, .card h2 { margin: 0 0 var(--s3); font-size: var(--fs-section); font-weight: 600; }
.card h3 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-card); font-weight: 600; }
.card .card, .card .acc { border: 0; background: none; padding: 0; margin-bottom: var(--s3); border-radius: 0; }
.card.flat { border: 0; background: none; padding: 0; }
.section { margin: 0 0 var(--s6); }
.section > h2 { margin: 0 0 var(--s3); font-size: var(--fs-section); font-weight: 600; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.grid > .card { margin-bottom: 0; }
@media (min-width: 860px) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.stack > * + * { margin-top: var(--s4); }
.stack, .card { min-width: 0; }
@media (min-width: 720px) { .card { padding: var(--s5); } }

.landing { text-align: center; padding: var(--s7) 0 var(--s5); }
.landing h1 { font-size: 2.25rem; margin: 0 0 var(--s3); line-height: 1.15; letter-spacing: -0.02em; }
.landing p.lead { color: var(--muted); max-width: 620px; margin: 0 auto var(--s5); font-size: 1.125rem; line-height: 1.6; }
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s6); text-align: left; }
@media (min-width: 900px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.features .card { margin: 0; }

.head-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s3); }
.head-row h2 { margin: 0; }
.eyebrow { display: block; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-support); }
.right { text-align: right; }
.win { color: var(--success); font-weight: 600; }
.loss { color: var(--danger); font-weight: 600; }
.mono, .num { font-variant-numeric: tabular-nums; }

/* ---------- banners and notices: tinted, no border ---------- */
.notice, .banner { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); margin: 0 0 var(--s4); background: var(--surface-2); color: var(--text); line-height: 1.5; }
.notice.warn, .banner.warn { background: var(--warning-bg); color: var(--text); }
.notice.ok, .banner.ok { background: var(--success-bg); color: var(--text); }
.notice.err, .banner.err { background: var(--danger-bg); color: var(--text); }
.notice.info, .banner.info { background: var(--primary-soft); color: var(--text); }
.notice > .ic, .banner > .ic { margin-top: 2px; }
.notice.warn > .ic, .banner.warn > .ic { color: var(--warning); }
.notice.ok > .ic, .banner.ok > .ic { color: var(--success); }
.notice.err > .ic, .banner.err > .ic { color: var(--danger); }
.notice.info > .ic, .banner.info > .ic { color: var(--color-link); }
.banner .banner-text { flex: 1 1 220px; min-width: 0; }
.banner .banner-text strong { display: block; }
.banner .banner-action { margin-left: auto; }
.notice ul { margin: var(--s2) 0 0; padding-left: 20px; }

.badge { display: inline-flex; align-items: center; font-size: var(--fs-caption); line-height: 1.5; padding: 1px var(--s2); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.badge.live { background: var(--primary); color: var(--primary-ink); }
.badge.ok { background: var(--success-bg); color: var(--success); }
.badge.warn { background: var(--warning-bg); color: var(--warning); }
.badge.commish { background: var(--primary-soft); color: var(--color-link); border: 1px solid var(--border-strong); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-weight: 600; padding: 0 var(--s4); min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text) !important; text-decoration: none; cursor: pointer; line-height: 1.3; }
.btn:hover { background: var(--surface-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink) !important; }
.btn.primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--color-link) !important; }
.btn.ghost:hover { background: var(--primary-soft); }
.btn.danger { background: transparent; color: var(--danger) !important; border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { min-height: 32px; padding: 0 var(--s3); font-size: var(--fs-support); }
.btn.block { display: flex; width: 100%; padding-top: 0; padding-bottom: 0; }
.btn.icon { padding: 0; width: 40px; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: var(--fs-support); margin-bottom: var(--s1); color: var(--text-2); }
.field { margin-bottom: var(--s4); }
.field .hint { color: var(--muted); font-size: var(--fs-support); margin-top: var(--s1); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 var(--s3); min-height: 44px; min-width: 0; width: 100%;
}
textarea { padding: var(--s2) var(--s3); line-height: 1.5; }
.toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: end; margin-bottom: var(--s3); }
.toolbar input[type="search"] { flex: 1 1 200px; width: auto; }
.toolbar select { width: auto; }
.form-narrow { max-width: 420px; margin: var(--s5) auto; }
.inline-form { display: flex; gap: var(--s2); flex-wrap: wrap; }
.inline-form input { flex: 1 1 160px; width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th, .table td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table th { font-size: var(--fs-support); color: var(--muted); font-weight: 600; }
.table thead th { border-bottom-color: var(--border-strong); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.me td, .table tr.me th { background: var(--primary-soft); }
.table tr.starter td { font-weight: 600; }
.table tr.dim td { color: var(--muted); }
.table input[type="checkbox"] { width: 18px; height: 18px; }

.pos-inline, .show-sm { display: none; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(127, 127, 127, 0.4); }
.pos { display: inline-block; min-width: 34px; text-align: center; font-size: 0.6875rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.03em; line-height: 1.5; }
.pos { background: var(--color-brand-subtle); color: var(--color-link); border: 1px solid var(--border-strong); }

/* ---------- lists: row pattern, timeline, chips, empty states ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row-item { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.row-item:last-child { border-bottom: 0; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-title { font-weight: 600; overflow-wrap: anywhere; }
.row-meta { color: var(--muted); font-size: var(--fs-support); }
.row-num { font-variant-numeric: tabular-nums; text-align: right; flex: none; min-width: 3.5ch; }
.row-actions { flex: none; display: flex; gap: var(--s2); align-items: center; }
.row-slot { flex: none; width: 3.25rem; color: var(--muted); font-size: var(--fs-support); font-weight: 600; }

.tl { list-style: none; margin: 0; padding: 0; }
.tl-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.tl-row:last-child { border-bottom: 0; }
.tl-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.tl-ic .ic { width: 16px; height: 16px; }
.tl-commish .tl-ic, .tl-correction .tl-ic { background: var(--warning-bg); color: var(--warning); }
.tl-reversal .tl-ic { background: var(--danger-bg); color: var(--danger); }
.tl-title { font-weight: 600; overflow-wrap: anywhere; }
.tl-meta { color: var(--muted); font-size: var(--fs-support); }
.tl-time { color: var(--muted); font-size: var(--fs-support); white-space: nowrap; padding-top: 2px; }
.tl-detail { margin-top: var(--s1); font-size: var(--fs-support); }
.tl-detail summary { cursor: pointer; color: var(--muted); }
.tl-extra { color: var(--muted); font-size: var(--fs-support); margin-top: var(--s1); }
.tl-actions { margin-top: var(--s2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; padding: 0 var(--s3); border-radius: 999px; background: var(--primary-soft); color: var(--text); font-size: var(--fs-support); border: 0; font-family: inherit; }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--surface-2); }
.chip .ic { width: 14px; height: 14px; }

.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); }
.empty .ic { width: 32px; height: 32px; color: var(--border-strong); margin-bottom: var(--s2); stroke-width: 1.5; }
.empty p { margin: 0 auto; max-width: 46ch; line-height: 1.6; }
.empty .empty-title { color: var(--text-2); font-weight: 600; margin-bottom: var(--s1); }

.summary-line { margin: 0 0 var(--s3); color: var(--text-2); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- switches ---------- */
.switch { position: relative; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; margin: 0; transition: background 0.15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- settings layout and save bar ---------- */
.settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.settings-nav { display: none; }
.settings-select { display: block; }
.settings-body { min-width: 0; max-width: 760px; }
@media (min-width: 860px) {
  .settings { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .settings-nav { display: block; position: sticky; top: 72px; }
  .settings-select { display: none; }
}
.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; }
.side-nav a:hover { background: var(--surface-2); color: var(--text); }
.side-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--text); font-weight: 600; }
.side-nav a.danger-link { color: var(--danger); }
.side-nav .count { margin-left: auto; }
.savebar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin: var(--s4) calc(-1 * var(--s4)) 0; background: var(--surface); border-top: 1px solid var(--border); }
.savebar .grow { flex: 1 1 auto; color: var(--text-2); }
.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }

.spinner { color: var(--muted); padding: var(--s6) 0; text-align: center; }
.count { display: inline-block; min-width: 1.3em; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: var(--fs-caption); line-height: 1.4; text-align: center; font-weight: 700; }

/* ---------- toasts and dialogs ---------- */
#toasts { position: fixed; bottom: var(--s4); left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: var(--s2); width: min(92vw, 420px); }
.toast { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); background: var(--text); color: var(--bg); box-shadow: var(--shadow-pop); }
.toast.error { background: var(--danger); color: #fff; }
.toast.ok { background: var(--success); color: #fff; }
.overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: var(--s4); z-index: 60; }
.modal { background: var(--surface); border-radius: var(--radius); padding: var(--s5); width: min(94vw, 520px); max-height: 88vh; overflow: auto; box-shadow: var(--shadow-pop); }
.modal h2 { margin-top: 0; font-size: var(--fs-section); }
.modal .actions { justify-content: flex-end; margin-top: var(--s4); }
.overlay.sheet { align-items: flex-end; padding: 0; }
.overlay.sheet .modal { width: 100%; max-width: 560px; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .overlay.sheet { align-items: center; padding: var(--s4); } .overlay.sheet .modal { border-radius: var(--radius); } }
.choice-list { display: grid; gap: var(--s2); max-height: 300px; overflow: auto; }
.choice { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; margin: 0; color: var(--text); font-size: var(--fs-body); min-height: 44px; }
.choice:hover { background: var(--surface-2); }
.choice input { width: auto; min-height: 0; }

/* Draft room */
.draft-top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.clock { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center; }
.clock.low { color: var(--loss); }
.onclock { padding: 14px 18px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--card); margin-bottom: 16px; }
.onclock.mine { border-color: var(--accent); background: var(--warn-bg); }
.board { overflow-x: auto; }
.board table { border-collapse: separate; border-spacing: 4px; min-width: 100%; }
.board th { font-size: 0.72rem; padding: 4px; text-align: center; color: var(--muted); font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board th.me { color: var(--color-link); }
.board td { height: 52px; min-width: 96px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; vertical-align: top; font-size: 0.74rem; line-height: 1.25; background: var(--card); }
.board td.now { border: 2px solid var(--accent); }
.board td .pn { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board td .pm { color: var(--muted); }
.board td[class*="pos-cell-"] { background: var(--color-brand-subtle); }
.scroll-y { max-height: 520px; overflow: auto; }
.rail { display: grid; gap: 4px; }
.rail .row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.rail .row .empty { color: var(--muted); font-style: italic; }
.slot { display: inline-block; min-width: 44px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }

/* League cards */
.league-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.league-card h3 { margin: 0 0 2px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.25rem; letter-spacing: 0.15em; font-weight: 700; background: var(--me-bg); padding: 4px 10px; border-radius: 6px; }

.matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.matchup .side { display: flex; flex-direction: column; }
.matchup .side.r { text-align: right; }
.matchup .score { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.matchup .vs { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; }
.matchup .winner .score { color: var(--win); }

.list { margin: 0; padding-left: 20px; }
.list li { margin-bottom: 6px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.feed li:last-child { border-bottom: 0; }



@media (max-width: 720px) {
  .hide-sm { display: none; }
  .pos-inline, .show-sm { display: inline; }
  .table.wrap-sm td { white-space: normal; }
  .table th, .table td { padding: var(--s2) var(--s2); }
  .landing h1 { font-size: 1.75rem; }
  .matchup .score { font-size: 1.25rem; }
  .clock { font-size: 1.5rem; }
}

/* Compliance page */
.compliance-note { margin: 12px 0 0; }
.comp-hero { border-top-color: var(--win); }
.comp-badge { margin-bottom: 8px; }
.comp-h2 { margin: 0 0 12px; font-size: 1.12rem; }
.comp-status { border-left: 4px solid var(--win); background: var(--ok-bg); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--win); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.checklist strong { display: block; }
.checklist span:not(.tick) { color: var(--muted); font-size: 0.92rem; }
.acc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.acc > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); }
.acc[open] > summary::after { content: "\2212"; }
.acc-body { padding: 0 18px 14px; }
.acc-body p { margin: 0 0 10px; }
.callout { padding: 12px 14px; border-radius: 8px; background: var(--me-bg); margin: 0 0 12px; }
.callout.strong { background: var(--warn-bg); color: var(--ink); border-left: 4px solid var(--warn); }

/* ---- accessibility & states (audit pass) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main:focus { outline: none; box-shadow: none; }
.form-narrow h1, .state-card h1 { margin: 0 0 var(--s3); font-size: var(--fs-title); }
.state-card { max-width: 560px; margin: 24px auto; }
.dev-details { margin-top: 14px; }
.dev-details pre { white-space: pre-wrap; background: var(--me-bg); padding: 10px; border-radius: 6px; font-size: 0.8rem; }

/* loading: branded skeleton. The slow-load message appears after a delay with CSS alone. */
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }
.skel-title { height: 28px; width: 50%; margin: 0 0 var(--s2); }
.skel-line { height: 14px; width: 90%; margin-bottom: var(--s2); }
.skel-line.short { width: 40%; }
.skel-tabs { display: flex; gap: var(--s3); margin: var(--s4) 0; }
.skel-tabs .skeleton { height: 32px; width: 84px; }
.skel-card { height: 120px; margin-top: var(--s4); }
.skel-card.tall { height: 200px; }
.boot, .page-loading { padding: var(--s2) 0; }
.boot-msg { color: var(--muted); margin: var(--s4) 0 0; }
@keyframes reveal { to { opacity: 1; visibility: visible; } }
.boot-slow { color: var(--muted); opacity: 0; visibility: hidden; animation: reveal 0s 8s forwards; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* forms */
.req { color: var(--loss); }
.field-error { color: var(--loss); font-size: 0.86rem; margin-top: 4px; }
.field-error::before { content: "Error: "; font-weight: 700; }
.field.has-error input, .field.has-error select { border-color: var(--loss); box-shadow: 0 0 0 1px var(--loss); }
.error-summary { border: 2px solid var(--loss); background: var(--err-bg); color: var(--ink); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.error-summary a { color: inherit; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--primary-text); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.reqs { color: var(--muted); font-size: 0.86rem; margin: 0 0 14px; }
.link-row { margin: 10px 0 0; font-size: 0.92rem; }

/* tables that scroll sideways */
.scroll-hint { margin: 0 0 4px; font-size: 0.8rem; color: var(--muted); }
.is-scrollable { background: linear-gradient(to right, var(--card) 30%, transparent), linear-gradient(to left, var(--card) 30%, transparent), linear-gradient(to right, rgba(127,127,127,.35), transparent), linear-gradient(to left, rgba(127,127,127,.35), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.table-wrap:focus-visible, .board:focus-visible { outline: 3px solid var(--color-focus-line); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-focus); }
.table caption { text-align: left; font-weight: 600; padding: 0 0 6px; color: var(--muted); font-size: 0.85rem; }
.board th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); color: var(--muted); min-width: 28px; }
.table.sticky-first td:first-child, .table.sticky-first th:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }

/* pagination */
.pager { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.pager .status { color: var(--muted); font-size: 0.9rem; }
.results-count { margin: 0 0 8px; color: var(--muted); font-size: 0.92rem; }
.roster-summary { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; background: var(--me-bg); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.roster-summary strong { font-variant-numeric: tabular-nums; }
.mode { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--line); }
.mode.auto { background: var(--ok-bg); color: var(--win); }
.mode.manual { background: var(--warn-bg); color: var(--warn); }
.name-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.name-edit input { max-width: 300px; font-weight: 700; font-size: 1.1rem; }
.save-status { font-size: 0.85rem; color: var(--win); min-height: 1.2em; }
.slot-tag { display: inline-block; min-width: 40px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.board td.void { opacity: 0.7; font-style: italic; }

fieldset.choice-list { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.swap-preview { margin-top: 8px; }
.state-inline { padding: 12px 0; }
.state-inline h1 { font-size: 1.1rem; margin: 0 0 6px; }
.state-empty { padding: 8px 0; }
.slot-cell { width: 56px; }
.table th[scope="row"] { font-weight: 400; text-align: left; }
.toolbar .field label { font-size: 0.8rem; margin-bottom: 2px; }
.toolbar .field input[type="search"], .toolbar .field select { width: 100%; }
.comp-disclaimer { margin-top: 16px; }

/* ---------- sports ---------- */
.sport-h { margin: 34px 0 12px; font-size: 1.2rem; }
.sport-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
@media (min-width: 700px) { .sport-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sport-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; height: 100%; }
.sport-card:hover { border-color: var(--color-brand-dark); }
.sport-icon { font-size: 1.5rem; line-height: 1.2; }
.sport-name { font-weight: 700; }
.sport-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.sport-tabs a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; text-decoration: none; font-size: 0.9rem; }
.sport-tabs a.on { background: var(--color-brand-subtle); color: var(--color-link); border-color: var(--color-brand-dark); font-weight: 600; }
.no-pos .pos-col { display: none !important; }

/* ---------- waivers and notifications ---------- */
.claims { list-style: none; margin: 0 0 8px; padding: 0; }
.claim { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.claim:last-child { border-bottom: 0; }
.claim-main { min-width: 0; flex: 1 1 200px; }
.claim-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.notes li.unread { border-left: 3px solid var(--accent); padding-left: 10px; }

/* ---------- trades ---------- */
.trade-list { list-style: none; margin: 0; padding: 0; }
.trade-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.trade-list li:last-child { border-bottom: 0; }
.trade-link { color: inherit; text-decoration: none; }
.trade-link:hover { text-decoration: underline; }
.trade-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 12px 0; }
@media (min-width: 700px) { .trade-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 10px 0; }
@media (min-width: 700px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba h3 { margin: 0 0 6px; font-size: 1rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.timeline li { padding: 4px 0 8px 10px; }
.msg { background: var(--me-bg); padding: 8px 12px; border-radius: 8px; overflow-wrap: anywhere; }

/* ---------- commissioner ---------- */
.inline-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.clock.paused { color: var(--warn); }
.ann-body { white-space: pre-wrap; overflow-wrap: anywhere; }
textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.team-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-main { min-width: 0; flex: 1 1 180px; }

/* ---------- playoffs ---------- */
.bracket { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk-game { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); }
.bk-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; }
.bk-team { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.bk-team.winner { font-weight: 700; color: var(--win); }
.seed { display: inline-block; min-width: 1.4em; text-align: center; border-radius: 4px; background: var(--line); font-size: 0.75rem; font-weight: 700; }
.tb-list { list-style: none; margin: 0; padding: 0; }
.tb-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; flex-wrap: wrap; }
.tb-list .check { flex: 1 1 200px; }

/* ---------- league rules ---------- */
[data-rs] .table th[scope=row] { text-transform: none; letter-spacing: normal; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
[data-rs] .table input[type=number] { width: 6.5rem; }
[data-rs] [data-bands] { display: flex; flex-wrap: wrap; gap: 6px; }
[data-rs] [data-bands] input[type=number] { width: 4.2rem; }
[data-rr] input[type=number] { max-width: 9rem; }
[data-rs] .table td { min-width: 0; }
[data-rs] .table th[scope=row] { width: 55%; }
[data-rs] .table th, [data-rs] .table td { white-space: normal; }

/* ---------- player page ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--me-bg); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.stat-n { font-size: 1.5rem; font-weight: 700; }
.act-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.act { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.spark { width: 100%; max-width: 260px; height: 54px; color: var(--primary-text); display: block; margin-bottom: 8px; }

/* notifications */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--color-link); text-decoration: underline; cursor: pointer; }
.linklike:focus-visible { outline: 3px solid var(--color-focus-line); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-focus); }
.linklike[disabled] { opacity: 0.6; cursor: default; }
.check-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.check-cell input { width: 20px; height: 20px; }
td.center, th.center { text-align: center; }
table.data th[scope=row] { text-align: left; font-weight: normal; }
/* history */
.res { display: inline-block; min-width: 1.5em; padding: 0 4px; border-radius: 4px; text-align: center; font-weight: 700; font-size: 0.8rem; border: 1px solid var(--line); }
.res-W { color: var(--win); }
.res-L { color: var(--loss); }
.stack-sm { list-style: none; margin: 0 0 12px; padding: 0; }
.stack-sm li { padding: 3px 0; }
td.win { color: var(--win); font-weight: 700; }
ul.stack { list-style: none; padding: 0; margin: 0; }

/* ---------- responsive: header, league navigation, bottom bar ---------- */
.only-sm { display: none; }
@media (max-width: 479px) { .hide-xs { display: none; } }
@media (max-width: 339px) { .brand-word span { display: none; } }
@media (min-width: 720px) { .crumbs { display: block; } }
@media (max-width: 720px) {
  .only-sm { display: flex; }
  .bar { height: 52px; }
  .userbtn { padding: 0; }
  body.has-lnav main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.has-lnav .foot { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.has-lnav #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .league-id h1 { font-size: 1.375rem; }
  .lnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding-bottom: env(safe-area-inset-bottom); }
  .lnav > a, .lnav .menu > button { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--s1) 0; font-size: var(--fs-caption); border-bottom: 0; margin: 0; position: relative; width: 100%; }
  .lnav > a[aria-current="page"], .lnav .menu > button.active { color: var(--color-link); border-bottom: 0; }
  .lnav > a[aria-current="page"]::before, .lnav .menu > button.active::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; background: var(--primary); border-radius: 0 0 3px 3px; }
  .lnav .nav-ic { display: inline-flex; }
  .lnav .lbl-long { display: none; }
  .lnav .lbl-short { display: inline; }
  .lnav .menu { display: block; position: static; }
  .lnav .chev { display: none; }
  .lnav .menu > button .count { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }
  .lnav .menu-panel { position: fixed; left: var(--s2); right: var(--s2); bottom: calc(64px + env(safe-area-inset-bottom)); top: auto; max-width: none; max-height: 70vh; overflow: auto; z-index: 47; }
  .menu[data-open] .menu-backdrop { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 46; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 40px; }
  .league-meta { margin-top: 2px; }
}
@media (min-width: 721px) { .lnav .nav-ic { display: none; } }
.menu-details { padding: var(--s2) var(--s3); min-width: 220px; }
.league-meta .menu-panel { min-width: 260px; }

/* ---------- overview ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.dash > .card { margin: 0; }
@media (min-width: 900px) {
  .dash { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "standings matchup" "activity activity"; align-items: start; }
  .dash-standings { grid-area: standings; }
  .matchup-card { grid-area: matchup; }
  .dash-activity { grid-area: activity; }
}
@media (min-width: 900px) { .dash.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "standings" "activity"; } }
.vs-side { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; }
.vs-name { font-weight: 600; }
.vs-score { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs-sep { color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--border); padding-top: var(--s2); margin-top: var(--s1); }
.vs-link, .more-link { margin: var(--s3) 0 0; font-size: var(--fs-support); }
.standings td.rank { width: 2.5rem; color: var(--muted); }
.standings .team-cell { white-space: normal; font-weight: 400; }
.standings .team-cell a { font-weight: 600; }
@media (max-width: 720px) { .standings .team-cell { min-width: 9rem; } }

/* ---------- my team ---------- */
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.title-row h2 { margin: 0; }
.team-head .name-edit input { max-width: 300px; font-weight: 700; font-size: 1.125rem; }
.section-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.row-h { margin: 0; font-size: var(--fs-card); font-weight: 600; }
.bench-h { margin-top: var(--s5); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.lineup-status { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.menu-note { margin: 0; padding: var(--s2) var(--s3); max-width: 32ch; font-size: var(--fs-support); line-height: 1.6; color: var(--text-2); }
.player-row { min-height: 60px; }
.player-row .row-title a { color: var(--text); text-decoration: none; }
.player-row .row-title a:hover { text-decoration: underline; }
.player-row.dim { color: var(--muted); }
.row-unit { color: var(--muted); font-size: var(--fs-support); }
.rows .row-slot .pos { min-width: 0; }
.row-main .row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- players ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.search-field { position: relative; flex: 1 1 100%; min-width: 0; }
.search-field .ic { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field input { padding-left: 40px; }
.sort-field { position: relative; flex: 1 1 auto; }
.sort-field .ic { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; width: 18px; height: 18px; }
.sort-field select { padding-left: 36px; }
.filters-panel { min-width: 280px; padding: var(--s4); }
.filters-panel .field { margin-bottom: var(--s3); }
@media (min-width: 721px) {
  .search-field { flex: 1 1 320px; }
  .sort-field { flex: 0 0 220px; }
  .filter-bar > .menu { flex: none; }
}
@media (max-width: 720px) {
  .filter-bar > .menu { flex: none; }
  .filters-panel { position: fixed; left: var(--s2); right: var(--s2); bottom: var(--s2); top: auto; max-width: none; z-index: 47; padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
}
#pl-chips { margin: 0 0 var(--s3); }
#pl-chips:empty { display: none; }
.center { text-align: center; }
.player-cell .pname { font-weight: 600; }
.player-cell .pname a { color: var(--text); text-decoration: none; }
.player-cell .pname a:hover { text-decoration: underline; }
#pl-results tbody tr[data-href] { cursor: pointer; }
#pl-results tbody tr[data-href]:hover td { background: var(--surface-2); }
.roster-summary { margin-bottom: var(--s3); }

/* ---------- settings sections ---------- */
.settings-body .card { border: 0; background: none; padding: 0; margin-bottom: var(--s5); }
.settings-body .card.danger-zone { border: 1px solid var(--danger); padding: var(--s4); background: var(--surface); border-radius: var(--radius); }
.set-title { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.set-desc { margin: var(--s1) 0 var(--s4); max-width: 60ch; }
.card-h { margin: 0 0 var(--s2); font-size: var(--fs-card); font-weight: 600; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.summary-row .summary-line { margin: 0; flex: 1 1 260px; }
.settings-select { margin: 0; }
.settings-body .savebar { margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); }
.table .team-cell { font-weight: 400; white-space: normal; }
@media (max-width: 720px) { .savebar { bottom: calc(56px + env(safe-area-inset-bottom)); } }
@media (min-width: 860px) { .settings-body .field input[type="text"], .settings-body .field input[type="number"], .settings-body .field input[type="time"], .settings-body .field select { max-width: 420px; } }

/* ---------- commissioner ---------- */
.team-row .menu { flex: none; }
.danger-item, .danger-item .ic { color: var(--danger) !important; }
.stat-grid { margin-top: 0; }
.stat { background: var(--surface-2); }

/* ---------- notification preferences ---------- */
.pref-form { max-width: 760px; }
.pref-intro { margin: 0 0 var(--s4); max-width: 62ch; }
.pause-card { padding: var(--s4); }
.pause-card .field { margin: 0; }
.cat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 var(--s3); }
.cat > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; list-style: none; min-height: 52px; }
.cat > summary::-webkit-details-marker { display: none; }
.cat > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-left: var(--s2); flex: none; }
.cat[open] > summary::after { transform: rotate(-135deg); }
.cat > summary .cat-count { margin-left: auto; }
.cat-name { font-weight: 600; }
.cat-tools { display: flex; gap: var(--s2); padding: 0 var(--s4) var(--s2); }
.pref-list { padding: 0 var(--s4) var(--s2); }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.pref-row:last-child { border-bottom: 0; }
.pref-text { min-width: 0; }
.pref-switches { display: flex; align-items: center; gap: var(--s2); flex: none; }
@media (max-width: 480px) { .pref-cap { display: none; } }
.pref-form .actions { margin: var(--s4) 0; }
.savebar[hidden], .menu-panel[hidden], .edit-wrap[hidden], .summary-row[hidden] { display: none; }

/* ---------- league creation preview ---------- */
.sport-preview { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.sport-preview p { margin: 0; }
.sport-preview p + p { margin-top: var(--s1); }
.sp-head { font-weight: 600; }
.sp-warn { color: var(--warning); }

/* ---------- grouped lists inside one container ---------- */
.groups .group + .group { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); }
.group-h { margin: 0 0 var(--s2); font-size: var(--fs-card); font-weight: 600; }
.acc.how { background: none; border: 0; }
.acc.how > summary { padding: var(--s2) 0; font-weight: 600; }
.acc.how .acc-body { padding: 0 0 var(--s3); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 720px) { .page-head.compact p { display: none; } .page-head.compact { margin-bottom: var(--s3); } }
.field.flush { margin: 0; }
.field.grow { flex: 1 1 200px; }
.field.end { align-self: end; }
.tl-title strong { font-weight: 600; }

/* ---------- scoring settings ---------- */
.settings-body [data-scoring-root] .card { padding-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.settings-body [data-scoring-root] .card:last-child { border-bottom: 0; }
.sv-line { margin: 0 0 var(--s1); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.sv-id, [data-scoring-root] code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-support); background: var(--surface-2); padding: 1px var(--s2); border-radius: 6px; overflow-wrap: anywhere; }
.preset-list { border: 0; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); min-width: 0; }
.preset { position: relative; }
.preset input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.preset label { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.preset input:checked + label { border-color: var(--color-brand-dark); box-shadow: 0 0 0 1px var(--color-brand-dark); background: var(--primary-soft); }
.preset input:focus-visible + label { outline: 3px solid var(--color-focus-line); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-focus); }
.preset-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.preset-sum { color: var(--text-2); font-size: var(--fs-support); line-height: 1.5; font-weight: 400; }
[data-compare-out] { margin-top: var(--s4); }
[data-compare-out] h4, .rule-group-h { margin: var(--s4) 0 var(--s2); font-size: var(--fs-body); font-weight: 600; }
.rule-group { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.rule-group legend { padding: 0; }
.rule-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rule-row[hidden], .rule-group[hidden] { display: none; }
.rule-row.changed { background: var(--primary-soft); margin: 0 calc(-1 * var(--s2)); padding-left: var(--s2); padding-right: var(--s2); border-radius: var(--radius-sm); }
.rule-name { flex: 1 1 200px; min-width: 0; }
.rule-name label { font-weight: 600; }
.rule-input { flex: 0 1 260px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s1) var(--s2); }
.rule-input .btn[hidden] { display: none; }
.rule-input input[type="number"] { width: 110px; }
.rule-input [data-bands] { display: flex; gap: var(--s1); flex-wrap: wrap; }
.rule-input [data-bands] input { width: 72px; }
.rule-diff { color: var(--text-2); flex: 1 0 100%; text-align: right; }
.rule-diff:empty { display: none; }
.group-row th { background: var(--surface-2); color: var(--text-2); font-size: var(--fs-support); }
.sh-list { padding-left: 0; list-style: none; }
.sh-list li { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.table tfoot th, .table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; }
[data-scoring-root] .table.wrap-sm td, [data-scoring-root] .table.wrap-sm th { white-space: normal; }


/* ---------- CAC Fantasy: landing, conference pages, hubs ---------- */
h1, .hero2 h1, .conf-name, .final-cta h2 { font-family: var(--font-display); }
.page-head h1 { font-size: var(--fs-page); font-weight: 800; letter-spacing: -0.015em; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; }
.btn.big { min-height: 48px; padding: 0 var(--s5); font-size: 1.0625rem; }
.crumbs { margin: var(--s4) 0 var(--s2); font-size: var(--fs-support); color: var(--muted); }
.sport-ic { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.sport-card .sport-icon .sport-ic { width: 28px; height: 28px; color: var(--color-brand-dark); }
.tag-sport { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; color: var(--text); }
.tag-sport .sport-ic { color: var(--primary-text); }
.tag-conf { color: var(--muted); font-weight: 600; }

.landing2 { padding-bottom: var(--s6); }
.hero2 { display: grid; gap: var(--s6); padding: var(--s6) 0 var(--s5); align-items: center; }
@media (min-width: 900px) { .hero2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: var(--s7) 0 var(--s6); } }
.hero2 h1 { font-size: var(--fs-hero); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 var(--s4); }
.hero2-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--text-2); max-width: 34em; margin: 0 0 var(--s5); }
.hero2 .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s3); }
.block:not(.btn) { padding: var(--s6) 0 0; }
.block > h2 { font-size: var(--fs-section); margin: 0 0 var(--s4); font-weight: 700; letter-spacing: -0.01em; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); }
.step .card-h { margin: var(--s3) 0 var(--s1); }
.step p { margin: 0; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); font-weight: 700; font-family: var(--font-display); }
.conf-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); }
.conf-mark { width: 56px; height: 56px; border-radius: 14px; background: var(--color-brand-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; flex: none; }
.conf-body { flex: 1 1 260px; min-width: 0; }
.conf-name { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.conf-body p { margin: var(--s1) 0 0; }
.conf-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; font-weight: 600; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .feats { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.feat { display: flex; gap: var(--s3); align-items: flex-start; }
.feat-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-text); display: inline-flex; align-items: center; justify-content: center; }
.feat .card-h { margin: 0 0 var(--s1); }
.feat p { margin: 0; font-size: var(--fs-support); }
.indep { background: var(--surface-2); border-radius: var(--radius); padding: var(--s5); margin-top: var(--s6); }
.indep h2 { margin-top: 0 !important; }
.indep p { margin: 0; }
.final-cta { text-align: center; margin-top: var(--s6); padding: var(--s6) var(--s4); background: var(--color-brand-dark); color: #fff; border-radius: var(--radius); }
.final-cta h2 { color: #fff; margin: 0 0 var(--s2); font-size: 1.75rem; font-weight: 800; }
.final-cta p { margin: 0 0 var(--s4); color: #d4eadc; }

.pv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5) var(--s4); box-shadow: var(--shadow-pop); }
.pv-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.pv-title { margin: 0; font-size: var(--fs-card); font-weight: 700; }
.pv-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--border); }
.pv-side { display: flex; flex-direction: column; gap: 2px; }
.pv-side:last-child { text-align: right; }
.pv-team { font-weight: 700; }
.pv-total { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-vs { color: var(--muted); font-weight: 600; }
.pv-cols { display: grid; gap: var(--s3); padding-top: var(--s3); }
@media (min-width: 520px) { .pv-cols { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.pv-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-support); }
.pv-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s2); padding: 6px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.pv-list li:last-child { border-bottom: 0; }
.pv-pos { font-weight: 700; color: var(--muted); font-size: var(--fs-caption); }
.pv-pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-note { margin: var(--s3) 0 0; }

.subnav { display: flex; gap: var(--s1); flex-wrap: wrap; margin: var(--s4) 0 var(--s4); padding: var(--s1); background: var(--surface-2); border-radius: var(--radius-sm); width: fit-content; max-width: 100%; }
.subnav a { padding: 6px var(--s3); border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: var(--fs-support); font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; gap: var(--s1); }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(11, 40, 27, 0.12); }
.hub-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); }
.hub-card { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.hub-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hub-body { flex: 1 1 240px; min-width: 0; }
.hub-body .card-h { margin: 0 0 2px; }
.hub-body p { margin: 0; font-size: var(--fs-support); }
.lnav .tx-tab { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.lnav .tx-tab:hover { color: var(--text); background: var(--surface-2); }
.lnav .tx-tab[aria-current="page"] { color: var(--color-link); font-weight: 600; border-bottom-color: var(--color-underline); }
.menu-group { padding: var(--s2) var(--s4) var(--s1); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.menu-group.only-sm, .menu-item.only-sm { display: none; }
@media (max-width: 720px) { .menu-group.only-sm { display: block; } .menu-item.only-sm { display: flex; } }

/* ---------- My leagues and the creation flow ---------- */
.badge.gold { background: var(--gold-bg); color: var(--gold-text); border: 1px solid var(--border-strong); }
.card.narrow { max-width: 560px; }
.lg-tabs { margin-top: 0; }
.lg-list { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 860px) { .lg-list { grid-template-columns: 1fr 1fr; } }
.lg-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5); text-decoration: none; color: inherit; height: 100%; }
.lg-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(11, 40, 27, 0.08); }
.lg-top { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; }
.lg-name { margin: 0; font-size: var(--fs-card); font-weight: 700; color: var(--text); }
.lg-ctx { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-support); display: flex; align-items: center; gap: var(--s1); }
.lg-badges { display: flex; gap: var(--s1); flex-wrap: wrap; }
.lg-team { margin: var(--s3) 0 0; font-weight: 600; color: var(--text); }
.lg-facts { margin: var(--s1) 0 0; display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-support); color: var(--text-2); }
.lg-lock { margin: var(--s1) 0 0; }
.lg-attn { margin: var(--s2) 0 0; }
.wizard { max-width: 720px; }
.stepper { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }
.stepper li { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-support); }
.stepper li:not(:last-child)::after { content: ""; width: 16px; height: 1px; background: var(--border-strong); margin-left: var(--s1); }
.stepper-n { width: 24px; height: 24px; border-radius: 999px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 700; }
.stepper-n .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.stepper li.on { color: var(--text); font-weight: 600; }
.stepper li.on .stepper-n { background: var(--primary); color: var(--primary-ink); }
.stepper li.done .stepper-n { background: var(--success-bg); color: var(--success); }
@media (max-width: 720px) { .stepper li:not(.on) .stepper-l { display: none; } .stepper li:not(:last-child)::after { width: 8px; } }
.wiz-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); }
.wiz-h { margin: 0 0 var(--s3); font-size: var(--fs-section); }
.wiz-actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.wiz-actions .grow { flex: 1; }
.sport-pick { border: 0; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sp-opt { position: relative; }
.sp-opt input, .choice input[type="radio"].vh { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-opt label { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); height: 100%; }
.sp-opt label .sport-ic { width: 24px; height: 24px; color: var(--primary-text); margin-bottom: var(--s1); }
.sp-opt-name { font-weight: 600; }
.sp-opt input:checked + label { border-color: var(--color-brand-dark); box-shadow: 0 0 0 1px var(--color-brand-dark); background: var(--primary-soft); }
.sp-opt input:focus-visible + label { outline: 3px solid var(--color-focus-line); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-focus); }
.choice-list { border: 0; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s2); }
.choice-list legend { font-weight: 600; padding: 0; margin-bottom: var(--s2); }
.choice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.choice.sub { margin-left: var(--s5); }
.choice input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.block-line { display: block; }
.conf-card.compact { padding: var(--s4); margin: var(--s4) 0; }
.review dt { font-weight: 600; }
.review { row-gap: var(--s2); }
.btn[hidden], button[hidden] { display: none !important; }
@media (max-width: 720px) {
  .lnav .tx-tab { display: none; }
  .lnav .menu > button.active-tx { color: var(--primary-text); }
  .lnav .menu > button.active-tx::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; background: var(--primary); border-radius: 0 0 3px 3px; }
}

/* ---------- schedules ---------- */
.sched { font-weight: 600; color: var(--text); }
.sched.none { font-weight: 400; color: var(--muted); }
.game-list { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.game { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.game:last-child { border-bottom: 0; }
.game.nocount strong { color: var(--text-2); font-weight: 600; }
.game-count { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.sub-h { margin: var(--s4) 0 var(--s1); font-size: var(--fs-support); font-weight: 700; color: var(--text-2); }

/* ---------- compact footer ---------- */
.foot { padding-top: var(--s5); padding-bottom: var(--s6); font-size: var(--fs-caption); color: var(--muted); }
.foot-line { margin: 0 0 var(--s2); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: center; }
.foot-links a { color: var(--text-2); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-theme .link-btn { color: var(--muted); text-decoration: none; font-size: var(--fs-caption); }
.foot-theme .link-btn:hover { text-decoration: underline; }

/* ---------- league cards: the whole card is the link, with one visible action ---------- */
.lg-item { position: relative; }
.lg-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5); height: 100%; }
.lg-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(11, 40, 27, 0.08); }
.lg-link { color: var(--text); text-decoration: none; }
.lg-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.lg-link:focus-visible::after { outline: 3px solid var(--color-focus-line); outline-offset: 2px; box-shadow: 0 0 0 6px var(--color-focus); }
.lg-week { margin: var(--s1) 0 0; color: var(--text-2); font-size: var(--fs-support); }
.lg-foot { margin-top: auto; padding-top: var(--s3); }
.lg-action { position: relative; z-index: 1; }
.plain { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.plain li { padding: var(--s1) 0; }
.lg-week-panel { max-width: 720px; }

/* ---------- player trend bars ---------- */
.spark-fig { margin: 0 0 var(--s3); }
.spark { width: 100%; max-width: 360px; height: auto; display: block; }
.spark .zero { stroke: var(--border-strong); stroke-width: 1; }
.spark .bar { fill: var(--color-brand-dark); }
.spark .bar.neg { fill: var(--danger); }
.spark .bar-g:focus-visible { outline: none; }
.spark .bar-g:focus-visible .bar, .spark .bar-g:hover .bar { fill: var(--primary-hover); stroke: var(--text); stroke-width: 1; }
.spark .bar-v, .spark .bar-l { fill: var(--text-2); font-size: 9px; font-variant-numeric: tabular-nums; }
.spark .bar-v { font-weight: 600; fill: var(--text); }

/* ---------- matchup cards ---------- */
.matchup2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s3); align-items: stretch; }
.mside { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: var(--s3); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.mside.r { align-items: flex-end; text-align: right; }
.mside.winner { background: var(--gold-bg); box-shadow: inset 0 0 0 1px var(--color-brand-dark); }
.mav { width: 40px; height: 40px; border-radius: 999px; background: var(--color-brand-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-support); margin-bottom: var(--s1); }
.mav.me { background: var(--primary); }
.mname { overflow-wrap: anywhere; }
.mrec { color: var(--text-2); }
.mside .score { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin-top: var(--s2); }
.mvs { display: flex; align-items: center; }
.mvs span { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: var(--fs-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.warn-text { color: var(--warning); font-weight: 600; }
.mtop { margin: var(--s3) 0 0; }
.card.mine { border-color: var(--color-brand-dark); box-shadow: 0 0 0 1px var(--primary-soft); }
@media (max-width: 560px) { .matchup2 { grid-template-columns: 1fr; } .mside.r { align-items: flex-start; text-align: left; } .mvs { justify-content: center; } }
@media (max-width: 1099px) { .hide-md { display: none; } }
.show-md { display: none; }
@media (min-width: 721px) and (max-width: 1099px) { .show-md { display: block; } }

/* Schedule context inside dialogs: who is being added or claimed and who their school plays this week. */
.claim-sched { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--surface)); }
.claim-sched.none { border-color: var(--warning); }
.claim-sched .small { margin-top: 2px; }

/* ---------- lock deadline: two short blocks, a collapsible explanation ---------- */
.lock-block { display: flex; flex-direction: column; gap: 2px; }
.lock-when { display: block; }
.lock-when time { white-space: nowrap; }
.lock-sub { display: block; color: var(--text-2); font-size: var(--fs-support); }
.stack-notice { display: flex; flex-direction: column; gap: var(--s2); }
.stack-notice > .small { display: block; }
.why summary { cursor: pointer; font-size: var(--fs-support); color: var(--primary-text); text-decoration: underline; width: fit-content; display: inline-flex; align-items: center; }
.why p { margin: var(--s2) 0 0; font-size: var(--fs-support); }

/* ---------- player rows on phones: a stable grid, names that wrap by word and never by letter ---------- */
:root { --mobile-nav-height: 56px; }
.row-title { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 720px) {
  body.has-lnav main, body.has-lnav .foot { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
  body.has-lnav #toasts { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); }
  .player-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "slot main num" "slot act act"; align-items: start; column-gap: var(--s3); row-gap: var(--s2); padding: var(--s3) 0; }
  .player-row > .row-slot { grid-area: slot; width: auto; min-width: 0; padding-top: 2px; }
  .player-row > .row-main { grid-area: main; min-width: 0; }
  .player-row > .row-num { grid-area: num; min-width: 54px; padding-top: 2px; }
  .player-row > .row-actions { grid-area: act; justify-content: flex-start; }
  .player-row > .row-actions:empty { display: none; }
  .player-row .sched { white-space: nowrap; }
  .player-row .row-main .row-meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
  .btn.small { min-height: 44px; }
}
@media (min-width: 421px) and (max-width: 720px) {
  .player-row { grid-template-columns: 40px minmax(0, 1fr) 56px auto; grid-template-areas: "slot main num act"; align-items: center; }
}

/* ---------- league wizard: a compact step indicator on phones, and actions that stay in view ---------- */
.stepper-compact { display: none; margin: 0 0 var(--s4); }
.stepper-text { margin: 0 0 var(--s2); font-size: var(--fs-support); color: var(--text-2); }
.stepper-bar { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.stepper-bar span { display: block; height: 100%; background: var(--color-brand-dark); border-radius: 999px; }
@media (max-width: 720px) { .stepper-full { display: none; } .stepper-compact { display: block; } }
.wiz-actions { position: sticky; bottom: 0; z-index: 5; margin-left: calc(-1 * var(--s2)); margin-right: calc(-1 * var(--s2)); padding: var(--s3) var(--s2) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.lg-mobile-actions { display: none; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.lg-mobile-actions .btn { flex: 1 1 0; text-decoration: none; }
@media (max-width: 720px) { .lg-tabs { display: none; } .lg-mobile-actions { display: flex; } }
.foot-line > #foot > span { display: block; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.foot-links a { min-height: 24px; }
hr.soft { border: 0; border-top: 1px solid var(--border); margin: var(--s4) 0; }
.sessions .row-item { align-items: flex-start; }
.lineup-tip { justify-content: space-between; align-items: center; }
.lineup-tip .actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0; }
.auth-logo { display: block; height: 40px; width: auto; margin: 0 0 var(--s4); }
.owner-line { margin: var(--s2) 0 0; }
.spark .bar-g { cursor: pointer; }
.wk-detail { min-height: 2.5em; margin: var(--s2) 0; }
tr.flash > * { background: var(--color-brand-subtle); }
.game-time { white-space: nowrap; }
.card-state { margin: 0 0 var(--s2); }

/* ---------- touch targets: every control is at least 44px tall on phones and tablets ---------- */
@media (max-width: 768px) {
  main button, main .btn, header button:not(.linklike), main summary, .meta-btn, .btn.small, .btn.icon { min-height: 44px; }
  .btn.icon { min-width: 44px; }
  main .linklike, main .link-btn { display: inline-flex; align-items: center; }
  main select, main input[type="text"], main input[type="email"], main input[type="password"], main input[type="search"], main input[type="number"] { min-height: 44px; }
}
.grid > *, .grid.sidebar > * { min-width: 0; }
.scroll-y { max-width: 100%; }
/* A table that scrolls inside its own frame must never widen the page itself: its visually-hidden header text is absolutely positioned, so the frame has to be its containing block. */
.table-wrap, .scroll-y, .board { position: relative; }

.sessions .row-meta { white-space: normal; }

/* ---------- the subscription notice under the header ---------- */
.billing-banner { background: var(--color-brand-subtle); color: var(--text); text-align: center; padding: var(--s2) var(--s4); font-size: var(--fs-support); border-bottom: 1px solid var(--border); }
.billing-banner[hidden] { display: none; }
.billing-banner a { font-weight: 600; }