/* League Report — v2 "warm paper" design system.
   Ported from the Claude Design prototype (app/styles.css). The dev-only Tweaks
   panel is gone; --accent is set per-league in templates/v2/layout.php, --fs and
   --pad are fixed (roomy, senior-friendly) here. Light theme only for now; the
   dark tokens are retained for a future user toggle. */

:root {
  /* warm paper light theme */
  --bg:        oklch(0.985 0.005 95);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.006 95);
  --ink:       oklch(0.26 0.012 60);
  --ink-soft:  oklch(0.40 0.012 60);
  --muted:     oklch(0.56 0.010 60);
  --line:      oklch(0.905 0.006 80);
  --line-soft: oklch(0.945 0.005 85);

  /* accent (per-league branding — overridden in the layout). Everything else
     derives from it so any league color stays harmonious. */
  --accent:      #2370bd;
  --accent-ink:  color-mix(in oklab, var(--accent), black 20%);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --on-accent:   oklch(0.99 0.01 250);

  --win:  var(--accent);
  --loss: oklch(0.56 0.11 28);

  /* postponed / rescheduled accent (warm amber, hue-locked calm) */
  --warn:      oklch(0.66 0.12 70);
  --warn-ink:  color-mix(in oklab, var(--warn), black 28%);
  --warn-soft: color-mix(in oklab, var(--warn) 16%, var(--surface));

  /* typography */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs: 20px;            /* base — scales the whole UI */

  /* density */
  --pad: 18px;           /* card / row padding */
  --row-gap: 14px;
  --radius: 14px;
  --radius-sm: 10px;
}

[data-theme="dark"] {
  --warn-soft: color-mix(in oklab, var(--warn) 22%, transparent);
  --warn-ink:  color-mix(in oklab, var(--warn), white 22%);
  --bg:        oklch(0.205 0.008 260);
  --surface:   oklch(0.255 0.009 260);
  --surface-2: oklch(0.235 0.009 260);
  --ink:       oklch(0.95 0.006 250);
  --ink-soft:  oklch(0.82 0.008 250);
  --muted:     oklch(0.66 0.010 250);
  --line:      oklch(0.34 0.012 260);
  --line-soft: oklch(0.30 0.010 260);
  --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent);
  --accent-ink:  color-mix(in oklab, var(--accent), white 28%);
  --on-accent:   oklch(0.16 0.01 150);
}

/* responsive helpers */
@media (max-width: 560px) { .hide-sm { display: none; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { font-size: var(--fs); }   /* root scales so every rem-based size grows */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Preview banner (shareable LeagueLineup snapshots) ---------- */
.pvbanner { background: var(--warn-soft); border-bottom: 1px solid color-mix(in oklab, var(--warn) 35%, transparent); }
.pvbanner-in { max-width: 1120px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pvbanner-txt { color: var(--warn-ink); font-size: 0.9rem; flex: 1; min-width: 240px; }
.pvbanner-cta { margin-left: auto; background: var(--warn); color: oklch(0.99 0 0); font-weight: 700; font-size: 0.86rem; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }

/* ---------- Archived-season banner ---------- */
.szn-banner {
  background: var(--warn); color: oklch(0.24 0.04 70);
  border-bottom: 1px solid color-mix(in oklab, var(--warn) 60%, black 12%);
}
.szn-banner-in {
  max-width: 1120px; margin: 0 auto; padding: 6px 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.szn-banner-ic { width: 16px; height: 16px; flex: none; opacity: 0.9; }
.szn-banner-txt { font-size: 0.86rem; font-weight: 500; line-height: 1.35; min-width: 0; }
.szn-banner-txt strong { font-weight: 800; }
.szn-banner-badge {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  background: color-mix(in oklab, black 16%, transparent); padding: 2px 7px; border-radius: 999px; margin-right: 7px; vertical-align: 1px;
}
.szn-banner-warn { font-weight: 700; }
.szn-banner-cta {
  margin-left: auto; flex: none; font-weight: 700; font-size: 0.8rem; white-space: nowrap;
  background: oklch(0.24 0.04 70); color: oklch(0.99 0.02 90);
  padding: 5px 13px; border-radius: 999px; transition: transform .12s, background .12s;
}
.szn-banner-cta:hover { transform: translateY(-1px); background: oklch(0.30 0.05 70); }
@media (max-width: 560px) { .szn-banner-cta { margin-left: 0; width: 100%; text-align: center; } }

/* ---------- Header ---------- */
/* Header + nav stick together so navigation stays reachable while scrolling. */
.hdr-stack { position: sticky; top: 0; z-index: 30; }
.hdr {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr-bar {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent);
}
.brand-txt { min-width: 0; }
.brand-name {
  font-weight: 700; font-size: 1.05rem; line-height: 1.15; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.brand-sub { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.hdr-meta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hdr-season {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-ink);
}

/* ---------- Season selector ---------- */
.season-cog {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--muted); cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.season-cog:hover { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent-ink); }
.season-cog svg { display: block; }
.season-select { position: relative; }
.season-trigger {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--accent-soft); border: 1px solid transparent;
  padding: 6px 10px 6px 13px; border-radius: 999px; color: var(--accent-ink);
  transition: border-color 0.12s, background 0.12s; font: inherit;
}
.season-trigger-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.season-hint {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.02em; text-transform: none;
  color: color-mix(in oklab, var(--accent-ink), transparent 32%);
}
.season-trigger:hover { border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.season-select.open .season-trigger { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.season-chev { transition: transform 0.18s ease; opacity: 0.85; }
.season-select.open .season-chev { transform: rotate(180deg); }

.season-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px color-mix(in oklab, var(--ink) 24%, transparent);
}
.season-menu-head {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 12px 16px 8px;
}
.season-menu-list { max-height: 312px; overflow-y: auto; padding: 0 6px; }
.season-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: transparent; border: 0; border-radius: 9px; padding: 9px 10px; text-align: left;
  color: var(--ink-soft); transition: background 0.1s; font: inherit;
}
.season-opt:hover { background: var(--line-soft); }
.season-opt .yr { font-weight: 700; font-size: 0.98rem; color: var(--ink); min-width: 42px; }
.season-opt .lb { color: var(--muted); font-size: 0.86rem; flex: 1; }
.season-opt .stag {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.season-opt .stag-current { background: var(--accent-soft); color: var(--accent-ink); }
.season-opt .stag-upcoming { background: color-mix(in oklab, var(--win) 15%, transparent); color: var(--accent-ink); }
.season-opt .stag-arch { background: var(--line-soft); color: var(--muted); }
.season-opt.current { background: color-mix(in oklab, var(--accent) 9%, transparent); }
.season-opt.current .yr { color: var(--accent-ink); }
.season-menu-note {
  font-size: 0.76rem; color: var(--muted); padding: 9px 16px 12px;
  border-top: 1px solid var(--line-soft); margin-top: 4px;
}

/* Mobile header: show the full league name (wrap instead of ellipsis) and slim
   the season pill down to one line so it stops ballooning into a blob. */
@media (max-width: 520px) {
  .hdr-bar { padding: 12px 16px; gap: 10px; }
  .logo { width: 40px; height: 40px; }
  .brand { gap: 11px; }
  .brand-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: 0.98rem; }
  .hdr-meta { gap: 10px; }
  .season-hint { display: none; }
  .season-trigger { padding: 8px 12px; }
}

/* ---------- Nav ---------- */
.nav-wrap { position: relative; border-bottom: 1px solid var(--line); background: var(--bg); }
/* Scroll affordance: a fading chevron on each side, shown by JS (.can-left /
   .can-right on .nav-wrap) only when the tab strip actually overflows. */
.nav-scroll {
  position: absolute; top: 0; bottom: 1px; width: 52px; z-index: 6;
  display: none; align-items: center; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-soft);
}
.nav-scroll svg { width: 22px; height: 22px; }
.nav-scroll:hover { color: var(--accent-ink); }
.nav-scroll-left { left: 0; justify-content: flex-start; padding-left: 6px;
  background: linear-gradient(to right, var(--bg) 60%, transparent); }
.nav-scroll-right { right: 0; justify-content: flex-end; padding-right: 6px;
  background: linear-gradient(to left, var(--bg) 60%, transparent); }
.nav-wrap.can-left .nav-scroll-left { display: flex; }
.nav-wrap.can-right .nav-scroll-right { display: flex; }
/* Content column: caps the tab strip at the same width as the page body and is
   the positioning context for the scroll chevrons, so they sit at the menu's
   edge rather than the full-width bar's edge. */
.nav-inner { position: relative; max-width: 1120px; margin: 0 auto; }
.nav {
  padding: 0 14px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink-soft); font-size: 0.95rem; font-weight: 600;
  padding: 14px 16px; white-space: nowrap; position: relative;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color .15s; display: inline-flex; align-items: center; gap: 6px;
}
.nav-tab:hover { color: var(--ink); }
.nav-tab[aria-current="true"], .nav-group.active > .nav-tab { color: var(--accent-ink); border-bottom-color: var(--accent); }
.nav-tab svg { width: 18px; height: 18px; }

/* visually-hidden text kept for screen readers (e.g. the icon-only Home tab) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "Edit menu" trigger — pushed to the far right of the tab row */
.nav-menu-edit { margin-left: auto; flex-shrink: 0; color: var(--muted); }
.nav-menu-edit:hover { color: var(--accent-ink); }
.nav-menu-edit[aria-current="true"] { border-bottom-color: transparent; }

/* Menu editor modal. menu-editor.js builds it with Tailwind utility classes
   (shared with v1); v2 loads no Tailwind, so these .lr-me-* hooks give it the
   warm-paper look. Structural selectors match the modal's fixed 3-child shape:
   header / body / footer. */
.lr-me-overlay {
  position: fixed; inset: 0; z-index: 60; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
}
.lr-me-modal {
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 50px -12px color-mix(in oklab, var(--ink) 40%, transparent);
}
.lr-me-modal .hidden { display: none !important; }
.lr-me-modal > div { padding: 18px 22px; }
.lr-me-modal > div:first-child {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.lr-me-modal > div:last-child {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  border-top: 1px solid var(--line-soft);
}
.lr-me-modal h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.lr-me-modal > div:first-child p { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); }
.lr-me-modal label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.lr-me-modal label + div { display: flex; align-items: center; gap: 8px; }
/* separate the tree from the add-a-page control */
.lr-me-tree + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

.lr-me-tree { display: flex; flex-direction: column; gap: 6px; }
.lr-me-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; font-size: 0.9rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.lr-me-row[draggable="true"] { cursor: move; }
.lr-me-row.opacity-50 { opacity: 0.5; }
.lr-me-row > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-me-row svg { width: 16px; height: 16px; flex-shrink: 0; }
.lr-me-row [data-act] {
  display: inline-flex; padding: 5px; cursor: pointer;
  border: 0; background: none; border-radius: 7px; color: var(--muted);
}
.lr-me-row [data-act]:hover { background: var(--surface-2); color: var(--ink); }
.lr-me-row [data-act].text-red-500 { color: oklch(0.58 0.17 25); }
.lr-me-row [data-act].text-red-500:hover { background: color-mix(in oklab, oklch(0.58 0.17 25) 12%, transparent); }

.lr-me-addsel {
  flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.lr-me-add, .lr-me-save {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
}
.lr-me-add:hover, .lr-me-save:hover { background: var(--accent-ink); }
.lr-me-add:disabled { opacity: 0.4; cursor: default; }
.lr-me-cancel {
  font: inherit; font-size: 0.9rem; cursor: pointer;
  padding: 8px 12px; border: 0; background: none; color: var(--muted);
}
.lr-me-cancel:hover { color: var(--ink); }
.lr-me-close {
  border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--muted);
}
.lr-me-close:hover { color: var(--ink); }
.lr-me-nopages { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }

/* one level of dropdown for nav items with children (e.g. Resources) */
.nav-group { position: relative; flex-shrink: 0; }
.nav-caret { width: 13px; height: 13px; opacity: 0.7; transition: transform .15s; }
/* Fixed positioning keeps the dropdown OUT of the tab bar's horizontal-scroll
   container (which would otherwise clip it on both axes). Its top/left are set
   in JS from the trigger's position — see wireNavGroups() in league-v2.js. */
.nav-drop {
  position: fixed; top: 100%; left: 0; z-index: 45; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: visible; padding: 6px; display: none;
  box-shadow: 0 18px 44px color-mix(in oklab, var(--ink) 22%, transparent);
}
.nav-group.open .nav-drop { display: block; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-drop a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.92rem; font-weight: 600;
  color: var(--ink-soft); transition: background .1s;
}
.nav-drop a:hover { background: var(--line-soft); color: var(--ink); }
.nav-drop a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }
/* Nested level(s): a parent item whose children pop out in a side flyout. */
.nav-drop .nav-flyout-parent { position: relative; }
.nav-drop .nav-sub-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px;
  font-size: 0.92rem; font-weight: 700; color: var(--ink); transition: background .1s;
}
.nav-drop .nav-flyout-parent:hover > .nav-sub-head { background: var(--line-soft); }
.nav-drop .nav-sub-head.active { color: var(--accent-ink); }
.nav-drop .nav-sub-caret { width: 14px; height: 14px; margin-left: auto; opacity: 0.55; flex-shrink: 0; }
.nav-drop .nav-flyout {
  position: absolute; top: -7px; min-width: 220px; z-index: 46;
  max-height: min(72vh, 460px); overflow-x: hidden; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; display: none;
  box-shadow: 0 18px 44px color-mix(in oklab, var(--ink) 22%, transparent);
}
.nav-drop .nav-flyout--right { left: 100%; }   /* butts against the panel — no hover gap */
.nav-drop .nav-flyout--left  { right: 100%; }
.nav-drop .nav-flyout-parent:hover > .nav-flyout,
.nav-drop .nav-flyout-parent:focus-within > .nav-flyout { display: block; }
.nav-drop .nav-flyout a { font-size: 0.88rem; }
/* Mobile: no room for a side flyout — fall back to an inline indented sub-list. */
@media (max-width: 767px) {
  .nav-drop .nav-flyout {
    position: static; display: block; max-height: none; overflow: visible; min-width: 0;
    border: none; box-shadow: none; border-radius: 0; padding: 2px 0 6px;
    margin: 0 0 2px 12px; padding-left: 10px; border-left: 1px solid var(--line);
  }
  .nav-drop .nav-sub-caret { transform: rotate(90deg); }
}
/* Mobile: the dropdown spans the full viewport width as a sheet (top still set
   in JS from the nav bar's bottom edge). */
@media (max-width: 767px) {
  .nav-drop {
    left: 0 !important; right: 0 !important; width: 100%; min-width: 0;
    max-width: none; border-radius: 0; max-height: 70vh; overflow-y: auto;
  }
}

/* ---------- Layout ---------- */
.main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 34px 24px 80px; }
.page-head { margin-bottom: 26px; }
.page-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.page-sub { color: var(--muted); margin: 6px 0 0; font-size: 1rem; }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; gap: 22px; } }

.empty { color: var(--muted); font-size: 0.95rem; padding: var(--pad); text-align: center; }

/* ---------- Section / Card ---------- */
.section { margin-bottom: 30px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sec-title {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-family: var(--mono);
}
.sec-link { margin-left: auto; color: var(--accent-ink); font-weight: 600; font-size: 0.9rem; }
.sec-link:hover { text-decoration: underline; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.card.pad { padding: var(--pad); }

/* ---------- Game row ---------- */
.glist { display: flex; flex-direction: column; }
.g-row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: var(--pad); border-top: 1px solid var(--line-soft);
  scroll-margin-top: 90px; /* clear of any header when jumped to from the modal/links */
}
/* brief highlight when a row is jumped to */
@keyframes lrFlash { 0%, 25% { background: color-mix(in oklab, var(--accent) 16%, transparent); } 100% { background: transparent; } }
.g-row.lr-flash { animation: lrFlash 1.8s ease; }
/* whole-row link (dashboard widgets → the game on the schedule) */
.g-row-link { text-decoration: none; color: inherit; cursor: pointer; transition: background 0.12s; }
.g-row-link:hover { background: var(--surface-2); }
.g-row.compact { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; }
.g-row:first-child { border-top: 0; }
.gdate { text-align: center; }
.g-row.compact .gdate { text-align: left; }
.gdate .d { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.gdate .mo { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-top: 1px; }
.gdate .dn { font-weight: 800; font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.g-row.compact .gdate .mo, .g-row.compact .gdate .dn { white-space: nowrap; }
/* schedule left column: game time (replaces the redundant date) */
.gtimecol { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); }
.gtimecol .tm { font-weight: 700; font-size: 0.82rem; line-height: 1.1; white-space: nowrap; letter-spacing: -0.01em; }
.gtimecol .tbd { color: var(--muted); font-weight: 600; }
.gmatch { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gteam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gteam .nm { font-weight: 600; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.gat { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gmeta { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.gtime { font-weight: 700; font-size: 0.98rem; white-space: nowrap; }
.gloc { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
/* venue shown as a line under the matchup — roomier than the old right-column slot */
.gloc-line { display: flex; align-items: flex-start; gap: 5px; margin-top: 7px; color: var(--muted); font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; }
.gloc-line svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (max-width: 520px) {
  .g-row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 12px; }
  .gmeta { grid-column: 2; grid-row: auto; text-align: left; flex-flow: row wrap; gap: 6px 12px; align-items: center; }
  /* edit button sits inline with the badge on mobile (no separate column) */
  .gmeta [data-lr-action] { margin-top: 0; align-self: center; }
  /* long venue names must wrap on mobile — nowrap forces the 1fr track past the viewport */
  .gloc { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Score lines (finals — bold winner) ---------- */
.sline { display: flex; align-items: center; gap: 12px; color: var(--muted); line-height: 1.25; }
.sline .nm { font-weight: 600; flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.sline .rt { display: flex; align-items: center; gap: 10px; flex: none; }
/* scores kept close to the team-name size so final rows are as compact as pending ones */
.sline .sc { font-weight: 700; font-size: 1.05rem; min-width: 34px; text-align: right; }
.sline.win { color: var(--ink); }
.sline.win .nm { font-weight: 800; }
.sline.win .sc { font-weight: 800; font-size: 1.15rem; color: var(--accent-ink); }
.won {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
  background: var(--accent); color: var(--on-accent); padding: 3px 9px; border-radius: 6px;
  text-transform: uppercase; flex: none;
}

/* a final-game row (used in Schedule + Results) */
.g-row.final { align-items: center; }
.gmatch-final { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.status-final {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

/* compact final rows (dashboard widgets) drop the right meta column */
.g-row.final.compact { grid-template-columns: 64px 1fr; }

/* ---------- Status badges + annotations ---------- */
.badge {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.badge-postponed { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent); }
.badge-final { background: var(--line-soft); color: var(--muted); border: 1px solid var(--line); }
.badge-canceled { background: color-mix(in oklab, var(--loss) 14%, var(--surface)); color: var(--loss); border: 1px solid color-mix(in oklab, var(--loss) 40%, transparent); }
.g-row.canceled .nm { text-decoration: line-through; color: var(--muted); }
.badge-makeup { background: var(--accent-soft); color: var(--accent-ink); }
.ann { font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.ann-moved { color: var(--warn-ink); }
.ann-makeup { color: var(--accent-ink); }
/* clickable interlink between a postponed game and its makeup */
.ann-link { cursor: pointer; text-decoration: none; }
.ann-link:hover { text-decoration: underline; }
.g-row.postponed .gteam .nm { color: var(--ink-soft); }

/* banner for postponed count */
.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--warn-soft); border: 1px solid color-mix(in oklab, var(--warn) 35%, transparent);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px;
}
button.banner { width: 100%; text-align: left; cursor: pointer; font: inherit; }
/* leading inline bullet — sits on the first line of the text at any width */
.banner .bdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); margin-right: 9px; vertical-align: middle; position: relative; top: -1px; }
.banner .btxt { font-weight: 700; color: var(--warn-ink); }
.banner .blink { margin-left: auto; color: var(--warn-ink); font-weight: 600; font-size: 0.9rem; text-decoration: underline; }

/* ---------- Postponed overlay ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in oklab, var(--ink) 42%, transparent);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 20px 40px; overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); width: 100%; max-width: 560px;
  box-shadow: 0 24px 64px color-mix(in oklab, var(--ink) 30%, transparent);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
}
.modal-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.modal-close {
  margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
  color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: background 0.12s;
}
.modal-close:hover { background: var(--line-soft); color: var(--ink); }
.modal-body { max-height: 60vh; overflow-y: auto; }
.pmrow {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 16px 22px; border-top: 1px solid var(--line-soft);
}
.pmrow:first-child { border-top: 0; }
/* modal rows are buttons (click to jump to the game in the schedule) */
button.pmrow { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-top: 1px solid var(--line-soft); }
button.pmrow:hover { background: var(--surface-2); }
.pmteams { font-weight: 700; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.pmteams .at { color: var(--muted); font-weight: 600; }
.pmsub { color: var(--muted); font-size: 0.86rem; margin-top: 5px; }
.pmmakeup { text-align: right; flex: none; }
.pmmakeup .lab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); display: block; }
.pmmakeup .dt { font-weight: 800; color: var(--accent-ink); font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: modalRise 0.2s ease; }
}
@keyframes modalRise { from { transform: translateY(10px); } }
@media (max-width: 520px) {
  .pmrow { grid-template-columns: 1fr; gap: 6px; }
  .pmmakeup { text-align: left; }
}

/* postponed summary list */
.plist { display: flex; flex-direction: column; }
.prow { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: var(--pad); border-top: 1px solid var(--line-soft); }
.prow:first-child { border-top: 0; }
.prow .pmatch { font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prow .pmeta { color: var(--muted); font-size: 0.86rem; margin-top: 4px; }
.prow .pmakeup { text-align: right; }
.prow .pmakeup .lab { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; }
.prow .pmakeup .dt { font-weight: 800; color: var(--accent-ink); font-size: 1.05rem; }
@media (max-width: 520px) {
  .prow { grid-template-columns: 1fr; }
  .prow .pmakeup { text-align: left; }
}

/* ---------- Table (standings) ---------- */
/* .card clips (overflow:hidden), so wide tables scroll inside this wrapper on
   mobile instead of being cut off. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 14px var(--pad); text-align: center; }
/* numeric columns never break mid-value; the team name may still wrap */
.tbl th:not(.col-team), .tbl td:not(.col-team) { white-space: nowrap; }
@media (max-width: 520px) {
  .tbl th, .tbl td { padding: 12px 10px; }
}
.tbl th {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.tbl td { border-top: 1px solid var(--line-soft); font-weight: 600; }
.tbl tr:first-child td { border-top: 0; }
.tbl .col-team { text-align: left; }
.tbl .col-rank { color: var(--muted); font-family: var(--mono); width: 42px; }
.t-team { display: flex; align-items: center; gap: 12px; }
.t-team .nm { font-weight: 700; }
.t-link { color: var(--ink); transition: color .12s; }
.t-link:hover .nm { color: var(--accent-ink); text-decoration: underline; }
.tbl .pct { font-variant-numeric: tabular-nums; }
.tbl .num-strong { color: var(--ink); }
.tbl .num-dim { color: var(--muted); font-weight: 600; }
.tbl .diff-pos { color: var(--win); font-variant-numeric: tabular-nums; }
.tbl .diff-neg { color: var(--loss); font-variant-numeric: tabular-nums; }
.tbl .diff-zero { color: var(--muted); font-variant-numeric: tabular-nums; }
.tbl tr.leader td { background: color-mix(in oklab, var(--accent-soft) 60%, transparent); }
.rec { font-family: var(--mono); font-size: 0.95rem; }
.rec .w { color: var(--accent-ink); }
.rec .l { color: var(--muted); }

/* mini standings (dashboard) */
.mini { display: flex; flex-direction: column; }
.mrow {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
  padding: 13px var(--pad); border-top: 1px solid var(--line-soft);
}
.mrow:first-child { border-top: 0; }
.mrow .rk { font-family: var(--mono); color: var(--muted); font-size: 0.85rem; }
.mrow .nm { font-weight: 600; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mrow .nm span { line-height: 1.2; }
.mrow .rc { font-family: var(--mono); font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Teams grid ---------- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.tcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad); display: flex; align-items: center; gap: 16px;
  transition: border-color .15s, transform .15s;
}
.tcard:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.tcard .info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tcard .nm { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.tcard .meta { color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
.tdot { width: 14px; height: 14px; border-radius: 5px; flex: none; background: var(--accent); }

/* ---------- Locations ---------- */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.lcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lmap {
  height: 130px; position: relative;
  background:
    repeating-linear-gradient(45deg, var(--line-soft) 0 1px, transparent 1px 13px),
    var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
}
.lmap .pin { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); box-shadow: 0 3px 8px color-mix(in oklab, var(--accent) 40%, transparent); }
.lbody { padding: var(--pad); }
.lbody .nm { font-weight: 700; font-size: 1.1rem; }
.lbody .sub { color: var(--accent-ink); font-weight: 600; font-size: 0.86rem; margin-top: 2px; }
.lbody .area { color: var(--muted); font-size: 0.85rem; margin-top: 8px; display: flex; align-items: center; gap: 6px; }

/* ---------- Badges / misc ---------- */
.tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.divnote { color: var(--muted); font-size: 0.9rem; }
/* Division sub-heading between grouped grids/tables (Teams, Standings). */
.div-head { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 700; margin: 22px 0 12px; }
.div-head:first-child { margin-top: 4px; }
/* Game note line on full schedule rows. */
.gnote { font-size: 0.85rem; color: var(--accent-ink); font-weight: 600; overflow-wrap: anywhere; }
/* Extra team-card lines: manager + player count. */
.cover-card .tsub { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
/* Dashboard Contact card. */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 0; }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-item { display: flex; gap: 12px; align-items: flex-start; }
.contact-item > svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.contact-item dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.contact-item dd { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.contact-item a { color: var(--accent-ink); text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.contact-addr { white-space: pre-line; }
.contact-email { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--line); }
.ftr-in { max-width: 1120px; margin: 0 auto; padding: 26px 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--muted); font-size: 0.86rem; }
.ftr-in .pw { margin-left: auto; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.ftr-in .pw a { color: inherit; text-decoration: none; transition: color .12s; }
.ftr-in .pw a:hover { color: var(--accent-ink); }
.ftr-social { display: flex; align-items: center; gap: 18px; }
.ftr-social a { color: var(--muted); transition: color .12s; }
.ftr-social a:hover { color: var(--accent-ink); }
.ftr-social svg { width: 28px; height: 28px; display: block; }

/* hero */
.hero { margin-bottom: 30px; }
.hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.08; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; color: var(--muted); font-size: 0.95rem; align-items: center; }
.dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); opacity: 0.5; }

/* ---------- Management island ---------- */
.mi { position: fixed; right: 22px; bottom: 22px; z-index: 60; }
.mi-pill {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 17px 7px 7px; font: inherit;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 18%, transparent);
  transition: transform 0.12s, box-shadow 0.12s;
}
.mi-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 30px color-mix(in oklab, var(--ink) 22%, transparent); }
.mi-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 0.95rem;
  background: var(--ink); color: var(--bg);
}
.mi-name { font-weight: 600; font-size: 0.95rem; color: var(--ink); white-space: nowrap; }

.mi-menu {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px color-mix(in oklab, var(--ink) 26%, transparent);
}
.mi-menu[hidden] { display: none; }
.mi-acct { padding: 16px 18px; }
.mi-acct-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.mi-acct-email { color: var(--muted); font-size: 0.86rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.mi-sec { padding: 8px 8px; border-top: 1px solid var(--line-soft); }
.mi-label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 8px;
}
.mi-league {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: transparent; border: 0; border-radius: 9px; padding: 9px 10px;
  color: var(--ink-soft); transition: background 0.1s;
}
.mi-league:hover { background: var(--line-soft); }
.mi-league .nm { flex: 1; min-width: 0; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-league svg { flex: none; color: var(--accent-ink); }
.mi-league.current { background: var(--accent-soft); }
.mi-league.current .nm { font-weight: 700; color: var(--accent-ink); }
.mi-manage {
  display: block; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0;
  padding: 9px 10px; border-radius: 9px; color: var(--muted); font-style: italic; font-size: 0.9rem;
}
.mi-manage:hover { background: var(--line-soft); }
.mi-item {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
  background: transparent; border: 0; border-radius: 9px; padding: 10px 10px;
  color: var(--ink); font-size: 0.95rem; font-weight: 500; transition: background 0.1s; font-family: inherit;
}
.mi-item:hover { background: var(--line-soft); }
.mi-item svg { flex: none; color: var(--muted); }
@media (max-width: 520px) {
  .mi-name { display: none; }
  .mi-pill { padding: 7px; }
  .mi-menu { width: min(300px, calc(100vw - 32px)); }
}

/* ---------- Editor affordances ----------
   v2 loads NO Tailwind, so the inline-edit buttons (frontend-edit.js helpers
   carry now-inert Tailwind classes) and the edit dialogs are styled here from
   scratch, modeled on the postponed-games modal. */

/* Edit / Add / Customize buttons (data-lr-action + the standings gear button) */
[data-lr-action] {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.2;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  transition: background 0.12s, border-color 0.12s;
}
[data-lr-action]:hover { background: color-mix(in oklab, var(--accent) 18%, var(--surface)); }
[data-lr-action] svg { width: 1em; height: 1em; }
/* edit button sits below the status badge, right-aligned (not stretched full width) */
.gmeta [data-lr-action] { margin-top: 6px; align-self: flex-end; }

/* Dialog chrome (hooks added in frontend-edit.js, Tailwind-free) */
.lr-edit-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in oklab, var(--ink) 42%, transparent);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 20px 40px; overflow-y: auto;
}
.lr-edit-modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px color-mix(in oklab, var(--ink) 30%, transparent);
}
/* frontend-edit.js sizes dialogs with (now inert) Tailwind max-w-* classes;
   map them to real widths so wide dialogs (description, news) get room like v1. */
.lr-edit-modal.max-w-lg  { max-width: 560px; }
.lr-edit-modal.max-w-3xl { max-width: 820px; }
.lr-edit-modal.max-w-4xl { max-width: 1060px; }
@media (prefers-reduced-motion: no-preference) { .lr-edit-modal { animation: modalRise 0.2s ease; } }
/* Mobile: dialogs go full-screen (no margin gap) — the whole viewport is the
   form, header/footer scroll with the fields. Applies to edit + menu modals. */
@media (max-width: 640px) {
  .lr-edit-overlay, .lr-me-overlay {
    padding: 0; align-items: stretch; overflow: hidden; backdrop-filter: none;
  }
  .lr-edit-modal, .lr-edit-modal.max-w-lg, .lr-edit-modal.max-w-3xl,
  .lr-edit-modal.max-w-4xl, .lr-me-modal {
    max-width: none; width: 100%;
    height: 100vh; height: 100dvh; max-height: none;
    border: 0; border-radius: 0;
  }
}
.lr-edit-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
}
.lr-edit-head h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.lr-dialog-close {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
  color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: background 0.12s;
}
.lr-dialog-close:hover { background: var(--line-soft); color: var(--ink); }

/* Form + fields */
.lr-dialog-form { padding: 18px 22px; }
.lr-dialog-form > div { margin-bottom: 15px; }
/* paired inputs (e.g. Away | Home team + score) in equal columns */
.lr-dialog-form .lr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.lr-dialog-form .lr-field-row > div { margin-bottom: 0; }
/* scores are 1–3 digits — keep the inputs compact (teams stay full-width) */
.lr-dialog-form .lr-field-row input[type="number"] { max-width: 120px; }
.lr-dialog-form label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.lr-dialog-form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 0; }
.lr-dialog-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.lr-dialog-form select,
.lr-dialog-form textarea {
  width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink);
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
}
.lr-dialog-form input:focus, .lr-dialog-form select:focus, .lr-dialog-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lr-dialog-form img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.lr-dialog-form .lr-upload {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-soft); font-size: 0.9rem;
}
.lr-dialog-form .lr-upload:hover { background: var(--line-soft); }

/* Footer actions */
.lr-edit-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.lr-edit-actions > div { display: flex; gap: 10px; }
/* Album/gallery managers put the actions row directly on the modal (no padded
   .lr-dialog-form wrapper), so it needs its own side/bottom padding. */
.lr-edit-modal > .lr-edit-actions { padding: 16px 22px; }
.lr-dialog-form button {
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
}
.lr-dialog-cancel { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.lr-dialog-cancel:hover { background: var(--line-soft); }
.lr-dialog-form button[type="submit"] { background: var(--accent); color: var(--on-accent); }
.lr-dialog-form button[type="submit"]:hover { background: var(--accent-ink); }
.lr-dialog-delete { background: transparent; color: var(--loss); border: 0; }
.lr-dialog-delete:hover { text-decoration: underline; }

/* File inputs in any dialog */
.lr-edit-modal input[type="file"] { font: inherit; font-size: 0.88rem; color: var(--ink-soft); }
.lr-edit-modal input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.lr-edit-modal input[type="file"]::file-selector-button:hover { background: color-mix(in oklab, var(--accent) 20%, var(--surface)); }

/* Image picker field (team logo / venue image) — constrains the oversized preview */
.lr-dialog-form .lr-image-dropzone { display: flex; align-items: center; gap: 14px; padding: 8px; margin: -8px; border: 1px solid transparent; border-radius: var(--radius-sm); transition: background .12s, border-color .12s; }
.lr-dialog-form .lr-image-dropzone.border-blue-400 { border-color: var(--accent); background: var(--accent-soft); }
.lr-image-preview { width: 64px; height: 64px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.lr-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.lr-image-preview svg { width: 24px; height: 24px; color: var(--line); }
.lr-image-hint { font-size: 0.78rem; color: var(--muted); }
.lr-dialog-form .lr-image-crop, .lr-dialog-form .lr-image-clear { padding: 0; border: 0; background: none; font-size: 0.78rem; font-weight: 600; }
.lr-dialog-form .lr-image-crop { color: var(--accent-ink); }
.lr-dialog-form .lr-image-clear { color: var(--loss); }

/* Album photo manager (its own dialog — uses lr-edit-* chrome + lr-edit-body) */
.lr-edit-body { padding: 18px 22px; }
.lr-edit-body > * + * { margin-top: 16px; }
.lr-close { background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--muted); }
.lr-edit-head .lr-close { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; }
.lr-edit-head .lr-close:hover { background: var(--line-soft); color: var(--ink); }
.lr-edit-actions .lr-close { padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink-soft); font-weight: 600; }
.lr-edit-actions .lr-close:hover { background: var(--line-soft); }
:is(.lr-album-grid, .lr-gallery-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
:is(.lr-album-grid, .lr-gallery-grid) > div { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
:is(.lr-album-grid, .lr-gallery-grid) > div > div:first-child { position: relative; }
:is(.lr-album-grid, .lr-gallery-grid) img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-2); }
:is(.lr-album-grid, .lr-gallery-grid) > div > div:first-child > div:nth-child(2) {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in oklab, var(--ink) 36%, transparent); opacity: 0; transition: opacity .15s;
}
:is(.lr-album-grid, .lr-gallery-grid) > div > div:first-child:hover > div:nth-child(2) { opacity: 1; }
:is(.lr-album-grid, .lr-gallery-grid) [data-lr-move], :is(.lr-album-grid, .lr-gallery-grid) [data-lr-remove] {
  width: 30px; height: 30px; border-radius: 999px; border: 0; cursor: pointer; font-size: 1rem; line-height: 1;
  background: var(--surface); color: var(--ink); display: grid; place-items: center;
}
:is(.lr-album-grid, .lr-gallery-grid) [data-lr-remove] { background: var(--loss); color: oklch(0.99 0 0); }
:is(.lr-album-grid, .lr-gallery-grid) [data-lr-move]:disabled { opacity: 0.3; cursor: default; }
:is(.lr-album-grid, .lr-gallery-grid) > div > div:first-child > div:nth-child(3) {
  position: absolute; top: 6px; left: 6px; background: color-mix(in oklab, var(--ink) 60%, transparent);
  color: oklch(0.99 0 0); font-size: 0.68rem; padding: 1px 8px; border-radius: 999px;
}
:is(.lr-album-grid, .lr-gallery-grid) input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.82rem; padding: 6px 9px; border: 0; border-top: 1px solid var(--line-soft); background: var(--surface); color: var(--ink); }
:is(.lr-album-grid, .lr-gallery-grid) input[type="text"]:focus { outline: none; background: var(--accent-soft); }
.lr-album-empty[hidden], .lr-album-empty.hidden { display: none; }
.lr-album-add label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 8px; }
.lr-album-add p { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; }
.lr-album-add p.lr-uploading { color: var(--accent-ink); font-weight: 600; }

/* JS toggles a `.hidden` class on empty-states / rich-editor panes; Tailwind isn't
   loaded in v2, so define it (scoped to dialogs to avoid any global leakage). */
.lr-edit-modal .hidden { display: none !important; }

/* Standings "Customize" dialog — the column rows get draggable="true" + (now inert)
   Tailwind flex utilities; lay them out as clean reorderable pills. */
.lr-dialog-form > p { font-size: 0.85rem; color: var(--muted); margin: 0 0 14px; }
.lr-dialog-form div[draggable="true"] {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: move; user-select: none;
}
.lr-dialog-form div[draggable="true"]:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.lr-dialog-form div[draggable="true"].opacity-50 { opacity: 0.5; }
.lr-dialog-form div[draggable="true"] > span:first-child { color: var(--muted); font-size: 1.05rem; line-height: 1; flex: none; cursor: grab; }
.lr-dialog-form div[draggable="true"] > label { margin-bottom: 0; flex: 1; }

/* Crop modal (Cropper.js does the image UI; we style the chrome) */
.lr-crop-overlay { align-items: center; padding: 24px; z-index: 110; }
.lr-crop-modal { max-width: 860px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.lr-crop-stage { background: #14110d; display: grid; place-items: center; min-height: 320px; max-height: 65vh; overflow: hidden; }
.lr-crop-img { display: block; max-width: 100%; max-height: 65vh; }
.lr-crop-foot { justify-content: space-between; background: var(--surface-2); }
.lr-crop-hint { font-size: 0.78rem; color: var(--muted); margin: 0; }
.lr-crop-foot > div { display: flex; gap: 10px; }
.lr-crop-cancel { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 9px 16px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; }
.lr-crop-cancel:hover { background: var(--line-soft); }
.lr-crop-apply { background: var(--accent); border: 0; color: var(--on-accent); padding: 9px 16px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; }
.lr-crop-apply:hover { background: var(--accent-ink); }
.lr-crop-apply:disabled { opacity: 0.6; cursor: default; }

/* ====================================================================
   Iteration 3 — News, Photos, Champions, Files, Directory, Pages,
   team & location singles. Reuses .card/.section/.tbl/.tgrid where it can.
   ==================================================================== */

/* Back link ("← Back to …") */
.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 600; font-size: 0.9rem; }
.backlink:hover { text-decoration: underline; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }

/* Rich content (news / pages article body) — replaces Tailwind prose */
.lr-prose { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.lr-prose > :first-child { margin-top: 0; }
.lr-prose > :last-child { margin-bottom: 0; }
.lr-prose h1, .lr-prose h2, .lr-prose h3, .lr-prose h4 { color: var(--ink); font-weight: 700; line-height: 1.25; margin: 1.4em 0 0.5em; letter-spacing: -0.01em; }
.lr-prose h2 { font-size: 1.4rem; } .lr-prose h3 { font-size: 1.18rem; } .lr-prose h4 { font-size: 1.05rem; }
.lr-prose p { margin: 0 0 1em; }
.lr-prose a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
.lr-prose ul, .lr-prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.lr-prose li { margin: 0.25em 0; }
.lr-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0.5em 0; }
.lr-prose blockquote { margin: 1em 0; padding: 0.4em 1em; border-left: 3px solid var(--accent); color: var(--muted); }
.lr-prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.lr-prose table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.lr-prose th, .lr-prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }

.article { padding: 26px; }
.article .a-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.article .a-date { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

/* News index list */
.nlist { display: flex; flex-direction: column; }
.nrow { display: flex; align-items: flex-start; gap: 14px; padding: var(--pad); border-top: 1px solid var(--line-soft); }
.nrow:first-child { border-top: 0; }
.nrow .nbody { flex: 1; min-width: 0; }
.nrow .ntitle { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.nrow a.nbody:hover .ntitle { color: var(--accent-ink); }
.nrow .ndate { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.nrow .nexc { color: var(--ink-soft); font-size: 0.92rem; margin-top: 5px; line-height: 1.5; }

/* Resources hub */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.rcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); transition: border-color .15s, transform .15s; }
.rcard:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.rcard .ricon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.rcard .ricon svg { width: 22px; height: 22px; }
.rcard .rlabel { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-top: 14px; }
.rcard .rcount { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-top: 4px; }
.rcard .rcount span { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.rcard .rmeta { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* Photos — album grid + masonry */
/* Masonry (CSS columns) so album covers keep their natural aspect ratio and the
   grid takes on varied heights, like the single-album photo grid. */
.agrid { columns: 260px; column-gap: 16px; }
.acard { display: block; margin: 0 0 16px; break-inside: avoid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s; }
.acard:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.acover { background: var(--surface-2); position: relative; }
.acover img { display: block; width: 100%; height: auto; }
/* No cover → keep a pleasant fixed ratio for the placeholder icon. */
.acover:not(:has(img)) { aspect-ratio: 16/9; display: grid; place-items: center; }
.acover .acount { position: absolute; bottom: 8px; right: 8px; background: color-mix(in oklab, var(--ink) 70%, transparent); color: oklch(0.99 0 0); font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; }
.acover .aphic { width: 40px; height: 40px; color: var(--line); }
.abody { padding: var(--pad); }
.abody .nm { font-weight: 700; color: var(--ink); }
.abody .desc { color: var(--muted); font-size: 0.86rem; margin-top: 4px; }
.pmasonry { columns: 4 200px; column-gap: 12px; }
.pmasonry a { display: block; margin-bottom: 12px; break-inside: avoid; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); }
.pmasonry img { width: 100%; height: auto; display: block; }
.pmasonry .pcap { padding: 6px 9px; font-size: 0.8rem; color: var(--ink-soft); background: var(--surface); }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; }
.pager a, .pager span { padding: 8px 13px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); }
.pager a:hover { background: var(--line-soft); }
.pager .on { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.pager-note { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 10px; }

/* Two-column detail (location / team single) */
.detail-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .detail-2 { grid-template-columns: 1fr; } }
.media-top { aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }
.media-top img { width: 100%; height: 100%; object-fit: cover; }
.detail-body { padding: var(--pad); }
.detail-body h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.detail-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.detail-body .addr { color: var(--ink-soft); margin-top: 8px; }
.detail-body .addr a { color: var(--accent-ink); font-weight: 600; }
.map-frame { width: 100%; min-height: 380px; height: 100%; border: 0; display: block; }
.card-pad { padding: var(--pad); }

/* Directory contacts */
.contact { display: flex; align-items: center; gap: 12px; padding: 12px var(--pad); border-top: 1px solid var(--line-soft); }
.contact:first-child { border-top: 0; }
.contact .cbody { flex: 1; min-width: 0; }
.contact .cname { font-weight: 600; color: var(--ink); }
.contact .crole { color: var(--muted); font-size: 0.8rem; margin-left: 8px; }
.contact .clinks { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px; font-size: 0.9rem; }
.contact .clinks a { color: var(--accent-ink); font-weight: 600; }
.contact .clinks a.tel { color: var(--ink-soft); }
.dir-teamhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--pad) 4px; font-weight: 700; color: var(--ink); }
.badge-private { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in oklab, var(--warn) 35%, transparent); font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.badge-public { --pub: oklch(0.62 0.13 150); background: color-mix(in oklab, var(--pub) 16%, var(--surface)); color: color-mix(in oklab, var(--pub), black 26%); border: 1px solid color-mix(in oklab, var(--pub) 35%, transparent); font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.gate { text-align: center; padding: 44px 24px; }
.gate svg { width: 46px; height: 46px; color: var(--line); margin: 0 auto 10px; }
.gate h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0; }
.gate p { color: var(--muted); margin: 6px 0 0; }
.btn-accent { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 9px 18px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-accent:hover { background: var(--accent-ink); }

/* Roster list (team single) */
.roster { display: flex; flex-direction: column; }
.prow-r { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad); border-top: 1px solid var(--line-soft); font-size: 0.98rem; }
.prow-r:first-child { border-top: 0; }
.prow-r .pnum { font-family: var(--mono); color: var(--muted); font-size: 0.82rem; width: 22px; text-align: right; }
.prow-r .pname { flex: 1; color: var(--ink); }
.res-w { display: inline-block; min-width: 26px; text-align: center; padding: 2px 0; border-radius: 6px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.res-l { display: inline-block; min-width: 26px; text-align: center; padding: 2px 0; border-radius: 6px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; background: color-mix(in oklab, var(--loss) 14%, var(--surface)); color: var(--loss); }
.tbl td.cell-left, .tbl th.cell-left { text-align: left; }

/* Files table tweaks (reuses .tbl) */
.tbl .lr-sort { background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; font-weight: 600; font-family: var(--mono); }
.tbl .lr-sort:hover { color: var(--ink); }
.file-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.file-link:hover { color: var(--accent-ink); }
.file-link svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); }
.icon-btn:hover { background: var(--line-soft); color: var(--accent-ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* Team cards with a cover photo (or a tasteful initials fallback) */
.tcard.cover-card { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.tcover { aspect-ratio: 16/9; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.tcover img { width: 100%; height: 100%; object-fit: cover; }
/* team placeholder (no logo): the league's sport glyph, tinted by team color */
.tph { display: grid; place-items: center; color: var(--accent-ink); opacity: 0.5; }
.tph svg { width: 58px; height: 58px; }
.cover-card .tbody { display: block; padding: var(--pad); }
.cover-card .tname { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.cover-card .tmeta { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
.cover-card .tbody [data-lr-action] { margin-top: 10px; }

/* ---------- Playoffs bracket (fixed-px diagram from BracketRenderer) ----------
   Fonts are px (not rem) so they fit the fixed-size cells regardless of --fs. */
.lrb-title { font-size: 1.18rem; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.lrb-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.lrb-tab { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); padding: 10px 16px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.lrb-tab:hover { color: var(--ink); }
.lrb-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

.lrb-wrap { margin-bottom: 8px; }
.lrb-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lrb-toolbar-left { display: flex; align-items: center; gap: 12px; }
.lrb-updated { font-size: 0.78rem; color: var(--muted); }
.lrb-toolbar-right { display: flex; align-items: center; gap: 14px; }
.lrb-legend { font-size: 11px; color: var(--muted); line-height: 1.5; max-width: 420px; }
.lrb-legend span { margin-right: 12px; white-space: nowrap; }
.lrb-legend strong { color: var(--ink-soft); }
.lrb-legend-note { display: block; margin-top: 2px; white-space: normal; }
.lrb-zoom { display: flex; align-items: center; gap: 4px; flex: none; }
.lrb-zoom-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); cursor: pointer; font: inherit; font-size: 0.78rem; }
.lrb-zoom-btn.lrb-zoom-fit { width: auto; padding: 0 10px; }
.lrb-zoom-btn:hover { background: var(--line-soft); }
.lrb-zoom-btn svg { width: 16px; height: 16px; }

.lrb-scroll { overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.lrb-canvas { position: relative; transform-origin: top left; }
.lrb-conn-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lrb-conn { fill: none; stroke: color-mix(in oklab, var(--ink) 22%, transparent); stroke-width: 2; }
.lrb-section { position: absolute; z-index: 20; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.lrb-divider { position: absolute; left: 0; z-index: 1; border-top: 1px dashed var(--line); }

.lrb-cell { position: absolute; z-index: 10; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent); }
.lrb-cell.editable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.lrb-cell.editable:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); box-shadow: 0 4px 12px color-mix(in oklab, var(--ink) 14%, transparent); }

.lrb-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; }
.lrb-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; color: var(--ink-soft); overflow: hidden; }
.lrb-slot.win .lrb-name { font-weight: 700; color: var(--ink); }
.lrb-team { color: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lrb-team:hover { color: var(--accent-ink); text-decoration: underline; }
.lrb-seed { color: var(--muted); flex: none; }
.lrb-tbd { font-style: italic; color: var(--muted); }
.lrb-score { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.lrb-score.win { font-weight: 700; color: var(--accent-ink); }

.lrb-mid { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.lrb-loc { font-size: 10px; color: var(--muted); max-width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lrb-loc-link:hover { color: var(--accent-ink); text-decoration: underline; }
.lrb-game { font-size: 10px; font-weight: 700; color: var(--loss); white-space: nowrap; }
.lrb-if { font-size: 9px; font-weight: 700; color: var(--loss); text-transform: uppercase; }
.lrb-when { font-size: 10px; color: var(--muted); white-space: nowrap; }
.lrb-editmark { margin-left: auto; color: var(--line); display: flex; }
.lrb-editmark svg { width: 12px; height: 12px; }
.lrb-note { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: 9px; color: var(--muted); white-space: nowrap; }

.lrb-champ { position: absolute; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 8px; border: 2px solid color-mix(in oklab, var(--warn) 55%, transparent); background: var(--warn-soft); border-radius: 8px; }
.lrb-champ-icon { width: 16px; height: 16px; color: var(--warn-ink); }
.lrb-champ-name { font-size: 13px; font-weight: 700; color: var(--warn-ink); text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lrb-champ-label { font-size: 10px; font-weight: 600; color: var(--warn-ink); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Home hero gallery carousel + description ---------- */
.lr-hero { position: relative; width: 100%; margin-bottom: 26px; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #14110d; box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 18%, transparent); }
.lr-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.lr-hero-slide.active { opacity: 1; }
.lr-hero-grad { position: absolute; inset-inline: 0; bottom: 0; height: 55%; z-index: 5; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); }
.lr-hero-cap { position: absolute; left: 24px; right: 24px; bottom: 26px; z-index: 6; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.7s ease; }
.lr-hero-cap.active { opacity: 1; }
.lr-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(0,0,0,0.4); color: #fff; display: grid; place-items: center; transition: background 0.12s; }
.lr-hero-nav:hover { background: rgba(0,0,0,0.62); }
.lr-hero-nav.prev { left: 12px; }
.lr-hero-nav.next { right: 12px; }
.lr-hero-nav svg { width: 20px; height: 20px; }
.lr-hero-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; }
.lr-hero-dot { height: 8px; width: 8px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,0.5); transition: width 0.2s, background 0.2s; }
.lr-hero-dot:hover { background: rgba(255,255,255,0.75); }
.lr-hero-dot.active { background: #fff; width: 24px; }
.lr-hero .lr-hero-edit { position: absolute; top: 12px; right: 12px; z-index: 20; width: 40px; height: 40px; padding: 0; border: 0 !important; border-radius: 999px; background: rgba(0,0,0,0.55) !important; color: #fff !important; display: grid; place-items: center; }
.lr-hero .lr-hero-edit:hover { background: rgba(0,0,0,0.82) !important; }
.lr-hero .lr-hero-edit svg { width: 16px; height: 16px; }

.lr-desc { position: relative; margin-bottom: 26px; padding: 24px 26px; }
.lr-desc .lr-prose { font-size: 1rem; }
.lr-desc .lr-desc-edit { position: absolute; top: 14px; right: 14px; z-index: 5; }
.lr-addbar { display: flex; justify-content: flex-end; margin-bottom: 22px; }

/* ---------- Rich-text editor (description / news dialogs) ----------
   frontend-edit.js builds this with Tailwind utilities that are inert in v2;
   the lr-rt-* hook classes style it here. */
.lr-rt-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.lr-rt-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px 6px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.lr-rt-spacer { flex: 1 1 auto; }
/* Scoped under .lr-rt-toolbar so these win over the generic
   `.lr-dialog-form button` rule (which would otherwise inflate their height). */
.lr-rt-toolbar .lr-rt-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 0.78rem; font-weight: 500; line-height: 1;
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; color: var(--ink-soft); border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.lr-rt-toolbar .lr-rt-btn:hover { background: var(--line-soft); border-color: var(--line); color: var(--ink); }
.lr-rt-toolbar .lr-rt-btn svg { width: 14px; height: 14px; flex: none; }
.lr-rt-source { min-height: 360px; resize: vertical; font-family: var(--mono); font-size: 0.86rem; line-height: 1.55; }
.lr-dialog-form .lr-rt-wrap .lr-rt-source { border: 0; border-radius: 0; }
.lr-rt-visual { min-height: 360px; max-height: 60vh; overflow-y: auto; padding: 14px 16px; color: var(--ink-soft); line-height: 1.6; }
.lr-rt-visual:focus { outline: none; }
.lr-rt-visual img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.lr-rt-visual a { color: var(--accent-ink); text-decoration: underline; }

/* ---------- "Brand this league" theme picker (frontend-edit dialog) ---------- */
.lr-theme-label { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.lr-theme-note { font-size: 0.86rem; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
.lr-theme-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
/* icon swatches */
.lr-ic {
  position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 14px; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--surface); color: var(--ink-soft);
  transition: transform .15s cubic-bezier(.3,.7,.4,1), border-color .15s, color .15s, background .15s;
}
.lr-ic svg { width: 60%; height: 60%; }
.lr-ic:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); color: var(--accent-ink); }
.lr-ic[data-on="1"] { border-color: transparent; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
@media (max-width: 520px) { .lr-ic-grid { grid-template-columns: repeat(5, 1fr); } }

/* Add-bracket dialog: seed pickers as compact two-column rows (label + select
   inline). frontend-edit.js marks these up with inert Tailwind; style the hooks. */
[data-lr-seeds] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.lr-dialog-form [data-lr-seeds] label { display: flex; align-items: center; gap: 10px; margin-bottom: 0; font-weight: 500; }
[data-lr-seeds] label > span:first-child { flex: none; width: 26px; text-align: right; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
[data-lr-seeds] select { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { [data-lr-seeds] { grid-template-columns: 1fr; } }
/* Bracket preview box inside the dialog */
[data-lr-bracket-preview] { overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; min-height: 160px; }
.lr-sw {
  position: relative; aspect-ratio: 1 / 1; border: 0; border-radius: 14px; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.08);
  transition: transform .15s cubic-bezier(.3,.7,.4,1), box-shadow .15s;
}
.lr-sw:hover { transform: translateY(-3px); box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 10px 22px rgba(0,0,0,.16); }
.lr-sw[data-on="1"] { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink), 0 10px 22px rgba(0,0,0,.18); }
.lr-sw .chk { position: absolute; right: 6px; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,.95); display: none; place-items: center; }
.lr-sw[data-on="1"] .chk { display: grid; }
@media (max-width: 520px) { .lr-theme-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Results rows (v1-style horizontal scoreboard) ---------- */
.rlist { display: flex; flex-direction: column; }
.rrow {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  padding: 14px var(--pad); border-top: 1px solid var(--line-soft);
}
.rrow:first-child { border-top: 0; }
.rrow.awaiting { background: color-mix(in oklab, var(--warn-soft) 55%, transparent); }
.rtime { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.rtime .rtime-status { display: none; }
.rrow.ppd .rtime .t { text-decoration: line-through; }
.rmatch { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.rmatch.ppd { text-decoration: line-through; color: var(--ink-soft); }
.rside { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rteam { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.rteam.win { font-weight: 800; }
.rsc { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; color: var(--muted); padding: 1px 8px; border-radius: 6px; }
.rsc.win { background: var(--accent-soft); color: var(--accent-ink); }
.rvs { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); flex: none; }
.rmeta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.86rem; max-width: 340px; min-width: 0; }
.rstatus-final { color: var(--muted); }
.rstatus-ppd { font-weight: 700; color: var(--warn-ink); }
.rstatus-can { font-weight: 700; color: var(--loss); }
.rstatus-awaiting { font-weight: 700; color: var(--warn-ink); }
.rnote { color: var(--accent-ink); font-weight: 600; overflow-wrap: anywhere; }
.rmakeup { color: var(--accent-ink); font-weight: 600; }
.rvenue { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); max-width: 260px; }
.rvenue svg { width: 14px; height: 14px; flex: none; }
.rvenue .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.redit { justify-self: end; }
.redit [data-lr-action] { white-space: nowrap; }
.rrow.awaiting .redit [data-lr-action] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.rrow.awaiting .redit [data-lr-action]:hover { background: var(--accent-ink); }
@media (max-width: 640px) {
  .rrow { grid-template-columns: 1fr; gap: 8px; }
  .rtime { justify-content: space-between; }
  .rtime .rtime-status { display: inline; }
  .rmeta { text-align: left; align-items: flex-start; max-width: none; }
  .rmeta .rmeta-status { display: none; }
  .rvenue { max-width: 100%; }
  .redit { justify-self: stretch; }
  .redit [data-lr-action] { width: 100%; justify-content: center; }
}

/* ---------- Team single: give the games table room (location was squashed) ---------- */
.grid-team { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 860px) { .grid-team { grid-template-columns: 1fr; gap: 22px; } }
.grid-team .tbl td.cell-left, .grid-team .tbl th.cell-left { white-space: normal; }
/* Force the games-table date onto two lines (month over day) for a consistent
   row rhythm regardless of single- vs two-digit day numbers. */
.gdate-cell { white-space: nowrap; line-height: 1.25; }
.gdate-cell .mo, .gdate-cell .dn { display: block; }

/* Location card: whole-card link + optional feature image */
.lcard { position: relative; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lcard:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 8%, transparent); }
.lcard-link { position: absolute; inset: 0; z-index: 1; }
/* Only interactive controls sit above the stretched link; text stays below it so
   the whole card is clickable. */
.lcard [data-lr-action] { position: relative; z-index: 2; }
.lcard:hover .lbody .nm { color: var(--accent-ink); }
.lmedia { height: 150px; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.lmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.lcard:hover .lmedia img { transform: scale(1.05); }

/* ---------- Dashboard: Latest News cards ---------- */
/* minmax(0, 1fr) forces true equal thirds — plain 1fr is minmax(auto, 1fr),
   so a card with a long unbreakable URL would blow its column wider and squeeze
   the others. */
.news-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ncard {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; transition: border-color .12s, box-shadow .12s;
  min-width: 0; overflow-wrap: anywhere;
}
.ncard:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); box-shadow: 0 6px 18px color-mix(in oklab, var(--ink) 10%, transparent); }
.ncard-title { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard:hover .ncard-title { color: var(--accent-ink); }
.ncard-exc { font-size: 0.9rem; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard-more { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: var(--accent-ink); }
@media (max-width: 760px) { .news-cards { grid-template-columns: 1fr; } }

/* ---------- Dashboard: Standings Race chart ---------- */
.race-wrap { position: relative; height: 280px; }

/* ---------- Dashboard: Sponsors ---------- */
.sponsor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sponsor-tile { position: relative; }
.sponsor-card { display: block; text-decoration: none; color: inherit; }
.sponsor-logo {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  aspect-ratio: 3 / 2; padding: 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .12s;
}
.sponsor-card:hover .sponsor-logo { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.sponsor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-ph { text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.sponsor-card:hover .sponsor-ph { color: var(--accent-ink); }
.sponsor-name { display: block; margin-top: 8px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.sponsor-sub { display: block; text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.sponsor-edit { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s; }
.sponsor-tile:hover .sponsor-edit { opacity: 1; }
@media (max-width: 760px) { .sponsor-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Dashboard: League Users ---------- */
.luser-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px var(--pad); border-top: 1px solid var(--line-soft);
}
.luser-row:first-child { border-top: 0; }
.luser-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.luser-name { font-weight: 600; color: var(--ink); }
.luser-email { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.luser-role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.luser-role.is-mgr    { background: var(--accent-soft); color: var(--accent-ink); }
.luser-role.is-roster { background: color-mix(in oklab, #3f9d6b 20%, var(--surface)); color: #2f7a52; }
.luser-role.is-score  { background: color-mix(in oklab, var(--warn) 20%, var(--surface)); color: var(--warn-ink); }
.luser-acts { display: flex; gap: 12px; flex: none; }
.luser-act { font: inherit; font-size: 0.82rem; font-weight: 600; background: none; border: 0; cursor: pointer; color: var(--accent-ink); padding: 0; }
.luser-act:hover { text-decoration: underline; }
.luser-act.danger { color: oklch(0.58 0.17 25); }

@media print {
  .hdr, .nav-wrap, .ftr, .mi, .pvbanner, .no-print { display: none !important; }
  .main { max-width: 100% !important; padding: 0 !important; }
}

/* ── Season manager (frontend-edit.js openSeasonManager) ─────────────
   Reuses the .lr-edit-* dialog chrome; these style the list rows + inline
   add/edit form inside .lr-edit-body. */
.lr-seasons-list { display: flex; flex-direction: column; gap: 8px; }
.lr-season-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.lr-season-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lr-season-name { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.lr-season-badge {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--line-soft); color: var(--muted);
}
.lr-season-badge.is-current  { background: var(--accent-soft); color: var(--accent-ink); }
.lr-season-badge.is-upcoming { background: color-mix(in oklab, var(--win) 15%, transparent); color: var(--accent-ink); }
.lr-season-row-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.lr-season-current {
  font-size: 0.78rem; font-weight: 600; color: var(--accent-ink);
  background: none; border: 0; cursor: pointer; padding: 5px 8px; border-radius: 7px;
}
.lr-season-current:hover:not(:disabled) { background: var(--accent-soft); }
.lr-season-current:disabled { opacity: 0.6; cursor: default; }
.lr-season-edit, .lr-season-del {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: none; border: 0; cursor: pointer; color: var(--muted);
}
.lr-season-edit:hover { background: var(--line-soft); color: var(--ink); }
.lr-season-del:hover  { background: color-mix(in oklab, var(--loss) 12%, transparent); color: var(--loss); }

.lr-season-form-title { font-size: 0.88rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.lr-season-form-grid { display: grid; grid-template-columns: 90px 1fr 130px; gap: 12px; }
.lr-season-fld { display: flex; flex-direction: column; gap: 5px; }
.lr-season-fld > span { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.lr-season-fld > span em { font-style: normal; font-weight: 400; color: var(--muted); }
.lr-season-fld input, .lr-season-fld select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem;
}
.lr-season-fld input:focus, .lr-season-fld select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.lr-season-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.lr-season-save {
  padding: 8px 16px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 600; background: var(--accent); color: var(--on-accent);
}
.lr-season-save:hover:not(:disabled) { background: var(--accent-ink); }
.lr-season-save:disabled { opacity: 0.6; cursor: default; }
.lr-season-cancel {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 600; background: none; color: var(--ink-soft);
}
.lr-season-cancel:hover { background: var(--line-soft); }
.lr-season-form-err { color: var(--loss); font-size: 0.8rem; margin-top: 8px; min-height: 1em; }
@media (max-width: 520px) { .lr-season-form-grid { grid-template-columns: 1fr; } }