/* league.css — page-specific styles for /league
   Extracted from inline <style> blocks in index.html (subpage-css-p3-league).
   DROPPED: design-token :root overrides, reset rules (base.css),
            chrome rules (.sidebar/.nav-* — chrome.js owns),
            canonical card/skeleton/page-header rules (components.css).
   KEPT: page-specific layout, league-icon, standings table, auth-gate,
         status chips, action buttons, tiebreak modal, dynasty import.
*/

/* PAGE HEADER — D-LG6: on-brand black→#1a0000→black gradient; purple/gold-stripe removed */
html[data-route="/league"] .page-header {
  background: var(--sns-grad-page-header);
  border-bottom: 2px solid var(--red-primary);
  padding: 32px 24px 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* PAGE HEADER SUB-ELEMENTS */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gray-light);
  text-transform: uppercase;
  padding: 6px 0;
  margin-bottom: 12px;
  transition: color .15s;
  position: relative;
  z-index: 1;
}
.back-link:hover { color: var(--red-primary); }

.page-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.page-header-badge {
  font-size: 16px;
  color: var(--gray-light);
  font-weight: 500;
}
.page-header-badge strong { color: var(--white-bright); }

/* PAGE TITLE — league uses slightly smaller clamp than canonical */
.page-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.5vw, 44px);
  letter-spacing: .04em;
  color: var(--white-bright);
  margin: 0 0 8px;
  line-height: 1;
}

/* LEAGUE ICON — D-LG6: clean 64px helmet slot, no gold border / trophy box */
.league-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  overflow: hidden;
}
.league-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
}

/* STANDINGS TABLE */
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.standings-table th {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--gray-light);
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-border);
  text-align: left;
  white-space: nowrap;
}
.standings-table th:not(:first-child):not(:nth-child(2)) { text-align: right; }
.standings-table td {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.standings-table td:not(:first-child):not(:nth-child(2)) { text-align: right; }
.standings-table tr:last-child td { border-bottom: none; }
.standings-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.rank-num {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--gray-light);
  width: 32px;
}
.rank-1 .rank-num { color: #FFFFFF; }
.rank-2 .rank-num { color: #CFD2D6; }
.rank-3 .rank-num { color: #C7884A; }
.team-name-cell { font-weight: 600; font-size: 16px; }
.team-owner { font-size: 16px; color: var(--gray-light); margin-top: 2px; }
.record-cell { font-family: var(--f-mono); font-size: 16px; color: var(--white-bright); }
.pts-cell { font-family: var(--f-mono); font-size: 16px; color: #FFFFFF; }
.pts-against-cell { font-family: var(--f-mono); font-size: 16px; color: var(--gray-light); }

/* AUTH GATE */
.auth-gate { text-align: center; padding: 48px 24px; }
.auth-gate-icon { font-size: 48px; margin-bottom: 16px; }
.auth-gate-title {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.auth-gate-sub { font-size: 16px; color: var(--gray-light); margin: 0 0 24px; }
.btn-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--red-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity .15s;
}
.btn-signin:hover { opacity: .85; }

/* ERROR / BACK BUTTON */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 20px;
  background: var(--bg-surface-2);
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--white-bright);
  transition: border-color .15s;
}
.btn-back:hover { border-color: var(--red-primary); }

/* NAV SUB-LABEL (page-specific sidebar sub-section heading, not chrome.js) */
.nav-sub-label {
  display: block;
  padding: 6px 32px 2px;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── SEASON STATUS CHIP ───────────────────────────────────────────────── */
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.ss-chip-PRE_DRAFT  { color: var(--gray-light,#C2C2C2); border-color: #2A2A2A; background: rgba(138, 138, 138, .08); }
.ss-chip-DRAFTING   { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); background: rgba(255, 45, 45, .08); }
.ss-chip-IN_SEASON  { color: #3dba6e; border-color: rgba(61, 186, 110, .4); background: rgba(61, 186, 110, .08); }
.ss-chip-PLAYOFFS   { color: #FF1A1A; border-color: rgba(255, 26, 26, .4); background: rgba(255, 26, 26, .08); }
.ss-chip-OFFSEASON  { color: #5AAFFF; border-color: rgba(90, 175, 255, .4); background: rgba(90, 175, 255, .08); }

/* ── ADMIN ACTION BUTTONS ────────────────────────────────────────────── */
.advance-week-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--red-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .15s;
}
.advance-week-btn:hover:not(:disabled) { opacity: .82; }
.advance-week-btn:disabled { opacity: .4; cursor: not-allowed; }

.start-draft-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #FF2D2D, #C40000);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .15s;
  text-decoration: none;
  font-weight: 700;
}
.start-draft-btn:hover:not(:disabled) { opacity: .85; }
.start-draft-btn:disabled { opacity: .45; cursor: not-allowed; }

.goto-draft-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255, 45, 45, .16);
  color: #FFFFFF;
  border: 1px solid rgba(255, 45, 45, .45);
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  text-decoration: none;
}
.goto-draft-btn:hover { background: rgba(255, 45, 45, .25); }

.fill-bots-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--accent, #FF2D2D);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .15s;
}
.fill-bots-btn:hover:not(:disabled) { opacity: .85; }
.fill-bots-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── TOAST ──────────────────────────────────────────────────────────── */
.ss-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  border: 1px solid var(--gray-border);
  color: var(--white-bright);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 16px;
  z-index: 9999;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .6);
  max-width: 360px;
  text-align: center;
  transition: opacity .3s;
}
.ss-toast.hide { opacity: 0; pointer-events: none; }

/* ── PLAYOFF TIE-BREAK MODAL (#514) ──────────────────────────────────
   Focus-trapped, Esc-to-close, confirm-before-finalize. */
.tb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 32px);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s cubic-bezier(.16,1,.3,1);
}
.tb-overlay.is-open { opacity: 1; }
.tb-overlay[hidden] { display: none; }
.tb-modal {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--bg-surface-2);
  border: 1px solid var(--gray-border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .7);
  padding: clamp(18px, 4vw, 28px);
  transform: translateY(12px) scale(.97);
  /* Staggered: modal scale waits 40ms so backdrop blur lands first */
  transition: transform .28s cubic-bezier(.16,1,.3,1) 40ms;
}
.tb-overlay.is-open .tb-modal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tb-overlay { transition: none; }
  .tb-modal { transition: none; }
}
.tb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}
.tb-title {
  font-family: var(--f-display);
  font-size: clamp(20px, 4vw, 26px);
  letter-spacing: .06em;
  color: var(--white-bright);
  margin: 0;
}
.tb-close {
  background: transparent;
  border: 1px solid var(--gray-border);
  color: var(--gray-light);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .15s, color .15s;
}
.tb-close:hover,
.tb-close:focus-visible { border-color: var(--red-primary); color: var(--white-bright); }
.tb-sub {
  font-size: clamp(12px, 2.6vw, 13px);
  color: var(--gray-light);
  line-height: 1.6;
  margin: 0 0 16px;
}
.tb-match {
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 14px;
  background: rgba(255, 255, 255, .03);
}
.tb-match-wk {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .14em;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.tb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.tb-row:last-child { margin-bottom: 0; }
.tb-team {
  font-size: clamp(13px, 3vw, 15px);
  color: var(--white-bright);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tb-input {
  width: 100%;
  background: #070707;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  color: var(--white-bright);
  font-family: var(--f-mono);
  font-size: 16px;
  padding: 9px 10px;
  text-align: right;
}
.tb-input:focus { outline: 2px solid var(--red-primary); outline-offset: 1px; border-color: var(--red-primary); }
.tb-input.tb-invalid { border-color: var(--red-primary); box-shadow: 0 0 0 2px rgba(255, 26, 26, .25); }
.tb-err { color: var(--red-primary); font-size: 16px; margin: 8px 0 0; min-height: 0; }
.tb-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 18px;
}
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  border: none;
  transition: opacity .15s, border-color .15s;
}
.tb-btn-primary { background: var(--red-primary); color: #fff; }
.tb-btn-primary:hover:not(:disabled) { opacity: .85; }
.tb-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.tb-btn-ghost { background: transparent; border: 1px solid var(--gray-border); color: var(--white-bright); }
.tb-btn-ghost:hover { border-color: var(--red-primary); }
@media (prefers-reduced-motion: reduce) {
  .tb-overlay,
  .tb-modal { transition: none; }
  .tb-overlay.is-open .tb-modal { transform: none; }
}

/* ── DYNASTY IMPORT (#454 Tier 1) ────────────────────────────────── */
.di-explain { font-size: 16px; color: var(--gray-light); line-height: 1.6; margin: 6px 0 0; max-width: 680px; }
.di-why {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #FFFFFF;
  border: 1px solid rgba(255, 45, 45, .4);
  border-radius: 20px;
  padding: 3px 10px;
  text-transform: uppercase;
  vertical-align: middle;
}
.di-why:hover { background: rgba(255, 45, 45, .1); }
.di-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(90, 175, 255, .07);
  border: 1px solid rgba(90, 175, 255, .3);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 16px;
  color: #bcd9f5;
  line-height: 1.5;
}
.di-note b { color: #dcebfb; }
.di-ta {
  width: 100%;
  min-height: 230px;
  resize: vertical;
  background: #070707;
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  color: var(--white-bright);
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 1.7;
  padding: 14px 16px;
  letter-spacing: .01em;
}
.di-ta:focus { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 2px rgba(255, 26, 26, .18); }
.di-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
  text-transform: uppercase;
}
.di-btn-primary { background: var(--red-primary); color: #fff; }
.di-btn-primary:hover:not(:disabled) { opacity: .85; }
.di-btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.di-btn-ghost { background: var(--bg-surface-2); border: 1px solid var(--gray-border); color: var(--white-bright); }
.di-btn-ghost:hover { border-color: var(--red-primary); }
.di-btn-sm { padding: 7px 12px; font-size: 16px; }
.di-summary { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 14px; font-size: 16px; color: var(--gray-light); }
.di-summary .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--gray-border);
  font-family: var(--f-mono);
}
.di-pill-ok  { color: #3dba6e; border-color: rgba(61, 186, 110, .4); }
.di-pill-warn { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); }
.di-pill-bad { color: var(--red-primary); border-color: rgba(255, 26, 26, .4); }
.di-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.di-table th {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--gray-light);
  padding: 9px 12px;
  border-bottom: 1px solid var(--gray-border);
  text-align: left;
}
.di-table td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.di-table tr:last-child td { border-bottom: none; }
.di-raw { font-family: var(--f-mono); font-size: 16px; color: var(--gray-light); }
.di-match-name { font-weight: 600; color: var(--white-bright); }
.di-match-sub { font-size: 16px; color: var(--gray-light); margin-top: 2px; }
.di-status { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.di-st-ok   { color: #3dba6e; }
.di-st-warn { color: #FFFFFF; }
.di-st-bad  { color: var(--red-primary); }
.di-sel {
  width: 100%;
  max-width: 320px;
  background: #070707;
  border: 1px solid var(--gray-border);
  border-radius: 7px;
  color: var(--white-bright);
  font-family: var(--f-body);
  font-size: 16px;
  padding: 7px 9px;
}
.di-sel:focus { outline: none; border-color: #FFFFFF; }
.di-fixrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.di-fix {
  flex: 1;
  min-width: 160px;
  background: #070707;
  border: 1px solid var(--gray-border);
  border-radius: 7px;
  color: var(--white-bright);
  font-family: var(--f-mono);
  font-size: 16px;
  padding: 7px 9px;
}
.di-fix:focus { outline: none; border-color: var(--red-primary); }
.di-cta-card { text-align: center; padding: 40px 24px; }
.di-cta-card .ic { font-size: 42px; margin-bottom: 14px; }
.di-cta-title { font-family: var(--f-display); font-size: 24px; letter-spacing: .05em; margin: 0 0 8px; }
.di-cta-sub { font-size: 16px; color: var(--gray-light); margin: 0 auto 22px; max-width: 440px; line-height: 1.6; }
.di-roster-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.di-roster-table th {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--gray-light);
  padding: 9px 12px;
  border-bottom: 1px solid var(--gray-border);
  text-align: left;
}
.di-roster-table td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); }
.di-roster-table tr:last-child td { border-bottom: none; }
.di-pos {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  border: 1px solid rgba(255, 45, 45, .35);
  border-radius: 5px;
  padding: 2px 6px;
}

/* ── MOBILE ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .standings-table th:nth-child(5),
  .standings-table td:nth-child(5) { display: none; }
  .di-table th:nth-child(1),
  .di-table td:nth-child(1) { display: none; }
  .di-sel,
  .di-fix { max-width: none; }
}
@media (max-width: 390px) {
  .standings-table { font-size: 16px; }
  .standings-table th,
  .standings-table td { padding: 8px 6px; }
  .standings-table th:nth-child(4),
  .standings-table td:nth-child(4) { display: none; }
}

/* V0303 — Transfer Portal / Activity card */
.ac-move-list { margin: 0; padding: 0; list-style: none; }
.ac-move-row {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ac-move-row:last-child { border-bottom: none; }
.ac-move-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ac-actor {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--white-bright);
}
.ac-type {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
}
.ac-summary {
  font-size: 16px;
  color: #9a9a9a;
  margin-top: 4px;
  line-height: 1.5;
}

/* V0302 — Trades card */
.td-trade-list { margin: 0; padding: 0; list-style: none; }
.td-trade-row {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.td-trade-row:last-child { border-bottom: none; }
.td-trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.td-teams {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--white-bright);
}
.td-status {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
}
.td-players {
  font-size: 16px;
  color: #9a9a9a;
  margin-top: 4px;
  line-height: 1.5;
}
.td-player { display: inline; }
.td-player-dir { color: #666; }
.td-date { margin-top: 4px; }

/* V0301 — Teams & Rosters card */
.tr-team-list { margin: 0; padding: 0; list-style: none; }
.tr-team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.tr-team-row:last-child { border-bottom: none; }
.tr-team-info { flex: 1; min-width: 0; }
.tr-team-name {
  display: block;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--white-bright);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-team-owner {
  display: block;
  font-size: 16px;
  color: var(--gray-light,#C2C2C2);
  margin-top: 2px;
}
.tr-record {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--gray-light);
  white-space: nowrap;
}
.tr-expand-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  color: var(--red-primary);
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.tr-expand-btn:hover { background: rgba(255,26,26,.1); }
.tr-roster-panel {
  width: 100%;
  padding: 0 0 8px;
}

/* ── D-LG5 DESKTOP MULTI-COLUMN GRID ────────────────────────────────────
   2-col @ ≥1200px, 3-col @ ≥1700px. Mobile stack untouched.
   The .page-header (and .page-header-inner) span all columns.
   Cards flow into columns automatically via auto-placement.

   LG-05 #3: scoped to #main (the canvas hub) specifically, NOT the generic
   `.content` class. `#league-subroute-shim` (the /team, /c2c, /import-roster
   fallback card) also carries class="content" under this same data-route, so
   the old `.content` selector leaked this 2-col grid onto it too: its single
   `.card` auto-placed into column 1, and chrome.js's site footer — appended
   as the shim's next/last child — auto-placed into the empty column 2 of
   that same (short) row, landing top-right beside the card with a large dead
   region below it instead of stacking full-width underneath.
*/
@media (min-width: 1200px) {
  html[data-route="/league"] #main.content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  html[data-route="/league"] #main.content .page-header {
    grid-column: 1 / -1;
  }
  /* P1: runner + showdown canvas span all columns — one hero, no multi-column fragmentation */
  html[data-route="/league"] #main.content #lu-runner,
  html[data-route="/league"] #main.content #lu-battle-hero,
  html[data-route="/league"] #main.content #showdown-section,
  html[data-route="/league"] #main.content #alert-container,
  html[data-route="/league"] #main.content #league-selector,
  html[data-route="/league"] #main.content .lu-week-row,
  html[data-route="/league"] #main.content #lu-art-band,
  html[data-route="/league"] #main.content .lu-art-band {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1700px) {
  html[data-route="/league"] #main.content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Sub-route shim: force a proper single-column main regardless of the
   #main-scoped grid above (belt-and-suspenders — #main.content already
   excludes it, but this keeps the shim correct even if its markup changes to
   only carry class="content" without id="main"). Footer (and anything else
   chrome.js appends) stacks full-width below the card, not beside it. */
@media (min-width: 1200px) {
  html[data-route="/league"] #league-subroute-shim.content {
    display: block;
    max-width: 900px;
  }
}

/* ── Dynamic-card inject animation ──────────────────────────────────────────
   renderTeamsCard / renderTradesCard / renderActivityCard add .card-inject
   after setting innerHTML so the card slides in from below.
   CSS-only; no Motion One dependency needed for this simple one-shot fade. */
@keyframes lg-cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html[data-route="/league"] .card.card-inject {
  animation: lg-cardIn .28s cubic-bezier(.16,1,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  html[data-route="/league"] .card.card-inject { animation: none; }
}

/* ── Active league-selector tab affordance ──────────────────────────────────
   LEDGER: active vs inactive .league-tab elements were visually identical on
   /league/:id (no way to tell which league is current). Give the active tab a
   distinct, on-brand (non-gold) treatment — red underline + bold + bright text
   using existing tokens. The active state is already set by the selector
   renderer (.active + aria-selected="true"); this only supplies the missing
   visual. Scoped under #league-selector so it outranks the shared canvas
   .league-tab.active rule (which is gold). */
html[data-route="/league"] #league-selector .league-tab.active,
html[data-route="/league"] #league-selector .league-tab.is-active,
html[data-route="/league"] #league-selector .league-tab[aria-current="page"],
html[data-route="/league"] #league-selector .league-tab[aria-selected="true"] {
  background: rgba(255,26,26,.15);
  border-color: var(--red-primary);
  color: var(--white-bright);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--red-primary);
}

/* ── Dynasty import: source picker (Paste / Sleeper / Fantrax CSV) ──────── */
.di-source-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.di-source-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-surface-2);
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  color: var(--gray-light);
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.di-source-tab:hover { border-color: var(--red-primary); color: var(--white-bright); }
.di-source-tab.active {
  background: rgba(255, 26, 26, .12);
  border-color: var(--red-primary);
  color: var(--white-bright);
  font-weight: 700;
}
.di-source-panel { display: none; }
.di-source-panel.active { display: block; }
.di-input {
  width: 100%;
  max-width: 480px;
  background: #070707;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  color: var(--white-bright);
  font-family: var(--f-mono);
  font-size: 16px;
  padding: 11px 14px;
  letter-spacing: .01em;
}
.di-input:focus { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 2px rgba(255, 26, 26, .18); }
.di-league-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 16px;
}
.di-league-card .di-league-name { font-family: var(--f-display); font-size: 18px; letter-spacing: .04em; color: var(--white-bright); margin-bottom: 4px; }
.di-league-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: var(--gray-light); margin: 8px 0 14px; }
.di-league-meta span b { color: var(--white-bright); font-weight: 600; }
.di-team-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* audit-0716 #5: /team + /c2c reused the sitewide .card default (core.css)
   for loading and benign-empty/gated states — that default carries a
   red-tinted border + glow appropriate for a real error, so "still loading"
   and "nothing here yet" both read as broken. Reserve the red for actual
   failures; everything else (loading skeleton, join-gates, empty-state
   CTAs) gets this neutral hairline instead. Two classes on the same
   element (.card.card--muted) beats core.css's single-class .card rule on
   specificity without !important. */
.card.card--muted {
  border-color: var(--gray-border, #2A2A2A);
  box-shadow: none;
}
/* script.js's skeleton markup uses the sitewide .sns-skeleton-line
   (core.css) but core.css never defined a "short" width variant — add the
   one visual variety rule here so the loading skeleton isn't three
   identical full-width bars. */
.sns-skeleton-line.short { width: 60%; }