/* Hennen Fantasy League — responsive league archive interface. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: light;
  /* Indirection keeps iOS env() values testable with simulated insets. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --background: #f3f5f8;
  --surface: #ffffff;
  --surface-raised: #f2f5f9;
  --ink: #15181d;
  --ink-soft: #3d4652;
  --muted: #566170;
  --muted-light: #657080;
  --rule: #647185;
  --rule-light: #dce2e9;
  --accent: #1d5fa7;
  --accent-dark: #174d87;
  --accent-contrast: #ffffff;
  --field: #247446;
  --backdrop: rgba(9, 14, 22, .68);
  --shadow-modal: rgba(9, 14, 22, .24);
  --shadow-card: rgba(24, 35, 52, .08);
  --field-wash: rgba(36, 116, 70, .10);
  --accent-wash: rgba(29, 95, 167, .10);
  --accent-wash-subtle: rgba(29, 95, 167, .07);
  --pos-qb: #8c2b1f;
  --pos-rb: #247446;
  --pos-wr: #2b4a6b;
  --pos-te: #8a6a1f;
  --pos-k: #6b4a6b;
  --pos-def: #5a4a3a;
  --pos-db: #4a6b7a;
  --pos-dl: #7a5a3a;
  --pos-lb: #3a5a5a;
  --pos-default: #647185;
  --trade-grade-mega: var(--pos-qb);
  --trade-grade-fleece: var(--pos-te);
  --trade-grade-clear: var(--accent);
  --trade-grade-slight: var(--field);
  --trade-grade-push: var(--muted);
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-system);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent-dark); }

table { border-collapse: collapse; width: 100%; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- App shell ---------- */

.page { min-height: 100vh; }

.app-shell {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule-light);
  padding: 20px 28px 0;
}

.site-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.site-brand { min-width: 0; }

.site-title {
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.site-subtitle,
.site-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.site-subtitle { margin-top: 2px; }
.site-status { text-align: right; }

.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.sections-wrap {
  position: relative;
  margin-top: 16px;
}

.sections-wrap::before,
.sections-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 26px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.sections-wrap::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.sections-wrap::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.sections-wrap.can-scroll-start::before,
.sections-wrap.can-scroll-end::after { opacity: 1; }

.sections {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 12px;
}
.sections::-webkit-scrollbar { display: none; }

.section-tab {
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  padding: 10px 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
  color: var(--ink);
  text-decoration: none;
}
.section-tab:hover { background: var(--surface-raised); color: var(--ink); }
.section-tab.is-active { background: var(--accent); color: var(--accent-contrast); }
.section-tab.is-active:hover { background: var(--accent-dark); color: var(--accent-contrast); }

main { padding: 32px 28px 64px; }

/* ---------- Trades ---------- */

.trade-season { margin-bottom: 30px; }
.trade-year {
  font-family: var(--font-system);
  font-size: 28px;
  font-weight: 700;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 14px;
  padding-bottom: 5px;
}
.trade-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.trade-card { padding: 16px 18px 18px; }
.trade-card.is-vetoed { background: var(--surface-raised); border-top: 3px solid var(--muted); }
.trade-card.is-vetoed .trade-when,
.trade-card.is-vetoed .trade-direction { color: var(--muted); }
.trade-card.is-vetoed .trade-participants,
.trade-card.is-vetoed .trade-players { color: var(--ink-soft); }
.trade-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trade-when,
.trade-status,
.trade-direction {
  font-family: var(--font-system);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.trade-status { color: var(--accent); font-weight: 700; }
.trade-participants {
  font-family: var(--font-system);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  margin: 7px 0 12px;
}
.trade-grade {
  --trade-grade-color: var(--trade-grade-push);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 3px 12px;
  margin: -2px 0 12px;
  padding: 7px 9px;
  border-left: 2px solid var(--trade-grade-color);
  background: var(--surface-raised);
}
.trade-grade.is-mega { --trade-grade-color: var(--trade-grade-mega); border-left-width: 6px; }
.trade-grade.is-fleece { --trade-grade-color: var(--trade-grade-fleece); border-left-width: 5px; }
.trade-grade.is-clear { --trade-grade-color: var(--trade-grade-clear); border-left-width: 4px; }
.trade-grade.is-slight { --trade-grade-color: var(--trade-grade-slight); border-left-width: 3px; }
.trade-grade-label {
  color: var(--trade-grade-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.trade-grade-winner { color: var(--ink-soft); font-size: 13px; }
.trade-grade-winner .manager-link { color: var(--ink); font-weight: 700; }
.trade-component { border-top: 1px solid var(--rule-light); padding: 9px 0 3px; }
.trade-component.is-drop { border-left: 3px solid var(--accent); padding-left: 9px; }
.trade-players { font-size: 15px; line-height: 1.4; margin-top: 3px; }

.trade-leaderboard { max-width: 780px; margin-bottom: 44px; }
.trade-grade-note {
  margin: -3px 0 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  background: var(--surface-raised);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}
.trade-grade-note strong { color: var(--ink); }
.trade-career-table { font-family: var(--font-system); font-size: 14px; }
.trade-career-table th {
  padding: 0 9px 8px;
  border-bottom: 2px solid var(--ink);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.trade-career-table th.left { text-align: left; }
.trade-career-table th.right { text-align: right; }
.trade-career-table td { padding: 9px; border-bottom: 1px solid var(--rule-light); }
.trade-career-table th:first-child,
.trade-career-table td:first-child { padding-left: 0; }
.trade-career-table th:last-child,
.trade-career-table td:last-child { padding-right: 0; }
.trade-rank, .trade-num, .trade-record, .trade-pct { text-align: right; }
.trade-rank { width: 42px; color: var(--muted); }
.trade-manager { font-weight: 700; }
.trade-record { font-weight: 700; }
.trade-pct { color: var(--ink-soft); }
.trade-career-table .has-no-trades td { color: var(--muted); }
.trade-career-table .has-no-trades .trade-manager { color: var(--ink); }
.trade-career-list { list-style: none; border-top: 1px solid var(--ink); }
.trade-career-item { padding: 13px 0; border-bottom: 1px solid var(--rule-light); }
.trade-career-manager { font-size: 20px; font-weight: 700; }
.trade-career-detail {
  display: grid;
  grid-template-columns: .6fr .8fr 1.2fr 1fr;
  gap: 10px;
  margin-top: 9px;
}
.trade-career-detail div { min-width: 0; }
.trade-career-detail dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.trade-career-detail dd { margin-top: 2px; color: var(--ink-soft); font-size: 13px; }
.trade-career-item.has-no-trades .trade-career-detail dd { color: var(--muted); }

/* ---------- Wire ---------- */

.wire-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 32px;
}
.wire-feature { padding: 18px; }
.wire-feature-subject {
  font-family: var(--font-system);
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.08;
}
.wire-feature-support {
  min-height: 2.5em;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--font-system);
  font-size: 13px;
  line-height: 1.3;
}
.wire-feature-number {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--rule-light);
  color: var(--accent);
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 700;
}
.wire-table { font-family: var(--font-system); font-size: 12.5px; line-height: 1.3; margin-bottom: 26px; }
.wire-table th {
  border-bottom: 1px solid var(--ink);
  padding: 4px 7px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.wire-table td { border-bottom: 1px solid var(--rule-light); padding: 4px 7px; }
.wire-table .left { text-align: left; }
.wire-table .right,
.wire-num { text-align: right; }
.wire-owner { font-weight: 700; }
.wire-career-list { list-style: none; margin-bottom: 26px; border-top: 1px solid var(--ink); }
.wire-career-item { padding: 13px 0; border-bottom: 1px solid var(--rule-light); }
.wire-career-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wire-career-manager { font-family: var(--font-system); font-size: 21px; font-weight: 700; }
.wire-career-total { font-family: var(--font-system); font-size: 16px; font-weight: 700; }
.wire-career-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 9px; }
.wire-career-detail div { display: flex; justify-content: space-between; gap: 5px; }
.wire-career-detail dt { color: var(--muted-light); font-family: var(--font-system); font-size: 11px; }
.wire-career-detail dd { color: var(--ink-soft); font-family: var(--font-system); font-size: 12px; }
.wire-coverage { border-top: 3px double var(--ink); padding-top: 14px; }
.wire-coverage p { color: var(--ink-soft); font-size: 15px; }

/* ---------- Message board ---------- */

.board-list { max-width: 850px; }
.board-thread { border-top: 1px solid var(--ink); padding: 18px 0 20px; }
.board-post { padding-right: 18px; }
.board-post.is-reply { border-left: 2px solid var(--rule); padding: 10px 16px; }
.board-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-system);
  font-size: 12px;
  color: var(--muted-light);
}
.board-meta strong { color: var(--ink); }
.board-body { font-size: 16px; line-height: 1.55; margin-top: 6px; white-space: pre-wrap; }
.board-replies { margin: 12px 0 0 36px; }

/* ---------- Shared section headings ---------- */

.view-title {
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin-bottom: 8px;
}

.view-deck {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 32px;
  text-wrap: pretty;
}

.section-heading {
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.section-heading.is-compact { font-size: clamp(1.05rem, 4vw, 1.25rem); }

.manager-link {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}
.manager-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.block-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 16px;
}

.card-grid {
  display: grid;
  gap: 14px;
}
.card-grid > * {
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: 14px;
  box-shadow: 0 5px 18px var(--shadow-card);
}

/* ---------- Front page ---------- */

.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: stretch;
}

.champion-hero {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 6vw, 48px);
  background: var(--accent);
  border-radius: 20px;
  color: var(--accent-contrast);
}
.champion-label { font-size: 14px; font-weight: 700; }
.champion-title {
  max-width: 720px;
  margin-top: 8px;
  font-size: clamp(2.25rem, 8vw, 4.25rem);
  font-weight: 780;
  letter-spacing: -.05em;
  line-height: 1.02;
  text-wrap: balance;
}
.draft-date { margin-top: 24px; font-size: clamp(1.05rem, 4vw, 1.3rem); font-weight: 650; }

.front-side { display: grid; gap: 14px; }
.standings-card {
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 5px 18px var(--shadow-card);
}

.rail-standings { font-family: var(--font-system); font-size: 13px; }
.rail-standings th {
  padding: 0 6px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: left;
}
.rail-standings th:first-child,
.rail-standings .r-rank { padding-left: 0; text-align: right; }
.rail-standings th:nth-child(n+3) { text-align: right; }
.rail-standings td { border-top: 1px solid var(--rule-light); }
.rail-standings .r-rank { padding: 7px 0; color: var(--muted-light); width: 18px; }
.rail-standings .r-owner { padding: 7px 8px; }
.rail-standings tr.is-champion .r-owner { font-weight: 700; }
.rail-standings .r-record { padding: 7px 0; text-align: right; color: var(--ink-soft); }
.rail-standings .r-pf { padding: 7px 0 7px 10px; text-align: right; color: var(--muted-light); }

.memoriam {
  max-width: 720px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-light);
}
.memoriam-label {
  margin-bottom: 5px;
  color: var(--muted-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.memoriam p { font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.memoriam strong { color: var(--ink); }

.the-ten { margin-top: 44px; }

.member-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.member-card { padding: 18px; cursor: pointer; display: block; color: inherit; text-decoration: none; }
.member-card:hover { background: var(--surface-raised); color: inherit; }

.member-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.member-card-name { font-family: var(--font-system); font-weight: 700; font-size: 22px; }
.member-card-years { font-family: var(--font-system); font-size: 12px; color: var(--muted-light); }
.member-card-record { font-family: var(--font-system); font-size: 26px; font-weight: 700; line-height: 1; }
.member-card-alltime {
  font-family: var(--font-system);
  font-size: 12px;
  color: var(--muted-light);
  margin-top: 2px;
}
.member-card-titles { margin-top: 12px; font-family: var(--font-system); font-size: 13px; font-weight: 600; color: var(--muted-light); }
.member-card-titles.has-titles { color: var(--accent); }
.member-card-note { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; text-wrap: pretty; }

.alumni { margin-top: 42px; }
.alumni-strip { display: flex; flex-wrap: wrap; gap: 6px 0; }
.alumni-item {
  font-family: var(--font-system);
  font-size: 13px;
  color: var(--ink-soft);
  padding-right: 14px;
  margin-right: 14px;
  border-right: 1px solid var(--rule-light);
  white-space: nowrap;
}
.alumni-item strong,
.alumni-manager { font-weight: 700; }

/* ---------- History ---------- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.history-trophies {
  max-width: 760px;
  margin-bottom: 42px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: 16px;
  box-shadow: 0 5px 18px var(--shadow-card);
}

.stat-table { font-family: var(--font-system); font-size: 14px; }
.stat-table th {
  padding: 0 8px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}
.stat-table th:first-child,
.stat-table td:first-child { padding-left: 0; }
.stat-table th:nth-child(n+2) { text-align: right; }
.stat-table td { padding: 9px 8px; border-top: 1px solid var(--rule-light); }
.stat-table .s-owner { font-weight: 600; }
.stat-table .s-pips { color: var(--accent); letter-spacing: .02em; font-size: 15px; text-align: right; }
.stat-table .s-years { text-align: right; color: var(--muted); }
.stat-table .s-status {
  padding-left: 12px;
  text-align: right;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.stat-table .s-detail { color: var(--muted); }
.stat-table .s-right { text-align: right; color: var(--muted); font-size: 12.5px; }

.record-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.record-box {
  padding: 18px;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border: 0;
  appearance: none;
}
.record-box.is-clickable { cursor: pointer; }
.record-box.is-clickable:hover,
.record-box.is-clickable:focus-visible { background: var(--surface-raised); color: inherit; }
.record-box.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.record-box.has-action { cursor: default; }
.record-box.has-action .record-more { display: inline-flex; align-items: center; min-height: 44px; }
.record-more {
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 10px;
}
.record-label {
  font-family: var(--font-system);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 8px;
}
.record-value { font-family: var(--font-system); font-weight: 900; font-size: 38px; line-height: 1; }
.record-detail { font-family: var(--font-system); font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }

/* ---------- Closest games ---------- */

.close-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.close-card {
  padding: 17px 18px 18px;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border: 0;
  appearance: none;
  cursor: pointer;
}
.close-card:hover, .close-card:focus-visible { background: var(--surface-raised); }
.close-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.close-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.close-rank {
  font-family: var(--font-system);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.close-margin-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.close-margin {
  font-family: var(--font-system);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
}
.close-margin-label {
  font-family: var(--font-system);
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.close-teams {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--rule-light);
  margin-top: 14px;
  padding-top: 12px;
}
.close-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.close-owner {
  font-family: var(--font-system);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.close-score {
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
}
.close-vs {
  font-family: var(--font-system);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.close-meta {
  font-family: var(--font-system);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  text-align: right;
}

/* ---------- Detail modal ---------- */

body.modal-open { overflow: hidden; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) calc(16px + var(--safe-right))
    calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left));
  z-index: 100;
  overflow-y: auto;
}

.modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px var(--shadow-modal);
  padding: 32px 30px 30px;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 48px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 48px);
  margin: auto;
  border-radius: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-card:focus { outline: none; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-system);
}
.modal-close:hover { background: var(--accent-wash); border-color: var(--accent); }
.modal-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.modal-context {
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  padding-right: 64px;
}
.modal-title {
  font-family: var(--font-system);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  padding-right: 64px;
  margin-bottom: 16px;
}
.modal-lede { font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 16px; }

.modal-scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.ms-side { min-width: 0; }
.ms-side.is-second { text-align: right; }
.ms-role {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.ms-side.is-winner .ms-role { color: var(--field); }
.ms-owner { font-family: var(--font-system); font-weight: 700; font-size: 24px; line-height: 1.1; margin-top: 2px; }
.ms-team { font-size: 14px; color: var(--ink-soft); line-height: 1.3; margin-top: 2px; }
.ms-score {
  font-family: var(--font-system);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 8px;
}
.ms-meta {
  font-family: var(--font-system);
  font-size: 11.5px;
  color: var(--muted-light);
  margin-top: 4px;
}
.ms-versus { font-family: var(--font-system); font-size: 13px; color: var(--muted-light); }

.modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 20px;
}
.modal-stat { background: var(--surface); padding: 10px 12px; }
.modal-stat-value { font-family: var(--font-system); font-size: 18px; font-weight: 700; }
.modal-stat-label {
  font-family: var(--font-system);
  font-size: 9.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-top: 2px;
}

.modal-scroll { max-height: 300px; overflow-y: auto; }

/* ---------- Box score ---------- */

.bx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.bx-col { min-width: 0; }
.bx-col + .bx-col { border-left: 1px solid var(--rule-light); padding-left: 26px; }

.bx-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.bx-team { font-family: var(--font-system); font-weight: 700; font-size: 18px; }
.bx-total { font-family: var(--font-system); font-weight: 700; font-size: 17px; }

.bx-table { font-family: var(--font-system); font-size: 12.5px; }
.bx-table td { padding: 5px 0; border-bottom: 1px solid var(--rule-light); vertical-align: top; }
.bx-slot {
  width: 42px;
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding-top: 6px !important;
}
.bx-player { padding-right: 8px !important; }
.bx-name { font-weight: 600; }
.bx-pos { color: var(--muted-light); font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
.bx-pts { text-align: right; width: 52px; font-weight: 700; }
.bx-table tr.is-bench .bx-name { font-weight: 400; color: var(--ink-soft); }
.bx-table tr.is-bench .bx-pts { font-weight: 400; color: var(--muted-light); }

.bx-bench-label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-top: 12px;
  margin-bottom: 2px;
}

.week-table { font-family: var(--font-system); font-size: 13px; }
.week-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule-light); }
.week-table .wk-week { color: var(--muted-light); width: 30px; }
.week-table .wk-outcome { width: 20px; font-weight: 700; color: var(--muted-light); }
.week-table tr.wk-W .wk-outcome { color: var(--field); }
.week-table tr.wk-L .wk-outcome { color: var(--accent); }
.week-table .wk-score { font-weight: 700; text-align: right; width: 62px; }
.week-table .wk-opp { color: var(--ink-soft); padding-left: 12px; }
.week-table .wk-oppscore { text-align: right; color: var(--muted-light); }

/* ---------- Head to head ---------- */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matrix { font-family: var(--font-system); font-size: 13px; }
.matrix th {
  padding: 8px 10px;
  border-bottom: 2px solid var(--ink);
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  font-weight: 700;
  white-space: nowrap;
}
.matrix th.m-corner { text-align: left; letter-spacing: .02em; }
.matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-light);
  text-align: center;
  white-space: nowrap; /* three-part tie records must not wrap and stagger rows */
}
.matrix td.m-name { text-align: left; font-weight: 700; white-space: nowrap; }
.matrix td.m-total { font-weight: 700; border-left: 1px solid var(--rule); }
.matrix td.m-self { color: var(--rule); background: var(--surface-raised); }
.matrix td.m-none { color: var(--rule); }
.matrix td.m-up { color: var(--field); background: var(--field-wash); }
.matrix td.m-down { color: var(--accent); background: var(--accent-wash); }
.matrix td.m-even { color: var(--ink-soft); }
.matrix td.m-strong { font-weight: 700; }

/* ---------- Hall of shame ---------- */

.shame-table { font-family: var(--font-system); font-size: 13.5px; }
.shame-table th {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}
.shame-table th:last-child { text-align: right; }
.shame-table td { padding: 10px; border-top: 1px solid var(--rule-light); vertical-align: top; }
.shame-table th:first-child,
.shame-table td:first-child { padding-left: 0; }
.shame-table .sh-year { color: var(--muted); width: 64px; }
.shame-table .sh-owner { font-weight: 700; }
.sh-entry > .sh-team { display: grid; color: var(--muted); font-size: 12px; margin-top: 2px; }
.shame-table .sh-record { text-align: right; color: var(--muted); }
.shame-table .sh-count { text-align: right; font-weight: 700; }
.shame-table .sh-count.never { color: var(--accent); }

.shame-table.gap-below { margin-bottom: 28px; }

.last-place-table th:nth-child(2),
.last-place-table td:nth-child(2) { text-align: left; }
.last-place-table .sh-year { color: var(--muted); width: 72px; }
.last-place-table .sh-owner { font-weight: 700; }
.last-place-table .sh-team {
  display: grid;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.last-place-table .sh-record { text-align: right; color: var(--muted); }
.shame-bench { max-width: 520px; margin-top: 42px; }

.shame-list { display: grid; gap: 10px; list-style: none; }
.shame-list.gap-below { margin-bottom: 28px; }
.shame-list-item {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--rule-light);
  border-radius: 12px;
}
.shame-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.shame-list-year { color: var(--muted-light); font-family: var(--font-system); font-size: 13px; }
.shame-list-manager { font-family: var(--font-system); font-size: 20px; font-weight: 700; }
.shame-list-count { color: var(--ink-soft); font-family: var(--font-system); font-weight: 700; }
.shame-list-count.never { color: var(--accent); }
.shame-list-note { color: var(--muted); font-family: var(--font-system); font-size: 12px; margin-top: 4px; }
.shame-list-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.shame-list-detail div { min-width: 0; }
.shame-list-detail dt {
  color: var(--muted-light);
  font-family: var(--font-system);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.shame-list-detail dd { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }

.badpicks { margin-top: 44px; }

.bust-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.bust-card { padding: 20px; }
.bust-rank {
  font-family: var(--font-system);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.bust-points {
  font-family: var(--font-system);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  margin-top: 4px;
}
.bust-points-label {
  font-family: var(--font-system);
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-top: 2px;
}
.bust-player {
  font-family: var(--font-system);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  border-top: 1px solid var(--rule-light);
  margin-top: 14px;
  padding-top: 12px;
}
.bust-meta {
  font-family: var(--font-system);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-top: 4px;
}
.bust-owner { font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 8px; text-wrap: pretty; }
.bust-reason {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-light);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Drafts ---------- */

.year-tabs { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.year-tab {
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 13px;
  border: 1px solid var(--rule);
  margin: 0 -1px -1px 0;
  color: var(--ink);
}
.year-tab:hover { background: var(--surface-raised); color: var(--ink); }
.year-tab.is-active { background: var(--ink); color: var(--surface); }
.year-tab.is-active:hover { background: var(--ink); color: var(--surface); }

.draft-board { font-family: var(--font-system); font-size: 12px; }
.draft-board th {
  padding: 7px 8px;
  border-bottom: 2px solid var(--ink);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  text-align: left;
  white-space: nowrap;
}
.draft-board th.d-round { text-align: center; letter-spacing: .02em; }
.draft-board td { padding: 6px 8px; border-bottom: 1px solid var(--rule-light); white-space: nowrap; }
.draft-board td.d-round { text-align: center; color: var(--muted-light); }
.draft-board td.d-pick { border-left: 2px solid var(--rule-light); }
.draft-board tr.is-first-round td.d-pick { background: var(--accent-wash-subtle); }
.draft-player { font-weight: 600; }
.draft-meta { color: var(--muted-light); font-size: 10.5px; letter-spacing: .02em; }

/* ---------- Rule changes ---------- */

.rule-season { border-top: 3px double var(--ink); padding-top: 14px; margin-bottom: 30px; }

.rule-year { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rule-year-num { font-family: var(--font-system); font-weight: 900; font-size: 34px; line-height: 1; }
.rule-year-note {
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.rule-table { font-family: var(--font-system); font-size: 13.5px; }
.rule-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule-light); vertical-align: top; }

.rule-kind {
  width: 74px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding-top: 9px !important;
}
.rule-added .rule-kind { color: var(--field); }
.rule-removed .rule-kind { color: var(--accent); }

.rule-label { width: 46%; }
.rule-name { font-weight: 600; display: block; }
.rule-section {
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.rule-value { color: var(--ink-soft); }
.rule-from { color: var(--muted-light); text-decoration: line-through; }
.rule-removed .rule-from { text-decoration: none; }
.rule-arrow { color: var(--muted-light); }
.rule-to { font-weight: 700; color: var(--ink); }
.rule-added .rule-to { color: var(--field); }

@media (max-width: 640px) {
  .rule-year-num { font-size: 27px; }
  .rule-table { font-size: 12px; }
  .rule-table td { padding-right: 6px; overflow-wrap: anywhere; }
  .rule-kind { width: 62px; font-size: 9px; }
  .rule-label { width: 40%; }
}

/* ---------- Lineup efficiency ---------- */

.lu-table { font-family: var(--font-system); font-size: 13.5px; margin-bottom: 34px; }
.lu-table th {
  padding: 7px 10px 7px 0;
  border-bottom: 2px solid var(--ink);
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  font-weight: 700;
  text-align: left;
}
.lu-table th.right { text-align: right; }
.lu-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-light); }
.lu-rank { width: 26px; color: var(--muted-light); }
.lu-owner { font-weight: 700; white-space: nowrap; }
.lu-bar { width: 46%; min-width: 90px; }
.lu-bar-track { background: var(--rule-light); height: 9px; }
.lu-bar-fill { background: var(--accent); height: 9px; }
.lu-pct, .lu-perfect { text-align: right; }
.lu-pct { font-weight: 700; }
.lu-perfect { color: var(--muted); }

@media (max-width: 640px) {
  .lu-bar { display: none; }
  .lu-table th:nth-child(3), .lu-table td:nth-child(3) { display: none; }
}

/* ---------- Member page ---------- */

.back-link {
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.member-title { font-family: var(--font-system); font-weight: 900; font-size: 52px; line-height: 1; margin: 10px 0 4px; padding-right: 64px; }

.member-stats { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.member-stat { padding: 0 28px 18px 0; margin-right: 28px; border-right: 1px solid var(--rule-light); }
.member-stat:last-child { border-right: 0; }
.member-stat-value { font-family: var(--font-system); font-weight: 900; font-size: 34px; line-height: 1; }
.member-stat-label {
  font-family: var(--font-system);
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-top: 4px;
}

.season-table th:nth-child(2), .season-table td:nth-child(2) { text-align: left; }
.season-table th.right, .season-table td.right { text-align: right; }
.season-table td:last-child, .season-table th:last-child { padding-right: 0; }
.season-table tr.is-champion td { background: var(--accent-wash); }
.season-table .s-detail {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.member-season-list { list-style: none; border-top: 1px solid var(--ink); }
.member-season-item { padding: 13px 0; border-bottom: 1px solid var(--rule-light); }
.member-season-item.is-champion { background: var(--accent-wash); }
.member-season-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.member-season-year { font-family: var(--font-system); font-size: 24px; font-weight: 700; }
.member-season-team { color: var(--ink-soft); text-align: right; overflow-wrap: anywhere; }
.member-season-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.member-season-detail div { min-width: 0; }
.member-season-detail dt {
  color: var(--muted-light);
  font-family: var(--font-system);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.member-season-detail dd { font-family: var(--font-system); font-size: 13px; margin-top: 2px; }
.member-season-note {
  color: var(--accent);
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 8px;
  text-transform: uppercase;
}

.empty { font-family: var(--font-system); font-size: 14px; color: var(--muted); padding: 24px 0; }

/* ---------- Theme ---------- */

.theme-toggle {
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #000000;
  --surface-raised: #11151a;
  --background: #000000;
  --ink: #f3f6fa;
  --ink-soft: #c5ccd6;
  --muted: #aab3bf;
  --muted-light: #98a3b2;
  --rule: #5e6978;
  --rule-light: #2e353e;
  --accent: #75b5fa;
  --accent-dark: #a5d0ff;
  --accent-contrast: #000000;
  --field: #68ca8a;
  --backdrop: rgba(0, 0, 0, .78);
  --shadow-modal: transparent;
  --shadow-card: transparent;
  --field-wash: rgba(104, 202, 138, .14);
  --accent-wash: rgba(117, 181, 250, .15);
  --accent-wash-subtle: rgba(117, 181, 250, .10);
  --pos-qb: #d4675a;
  --pos-rb: #7fa076;
  --pos-wr: #6f9ac4;
  --pos-te: #c7a24f;
  --pos-k: #a888c0;
  --pos-def: #a8927a;
  --pos-db: #7fb0c4;
  --pos-dl: #c49a72;
  --pos-lb: #72b0ab;
  --pos-default: #98a3b2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #000000;
    --surface-raised: #11151a;
    --background: #000000;
    --ink: #f3f6fa;
    --ink-soft: #c5ccd6;
    --muted: #aab3bf;
    --muted-light: #98a3b2;
    --rule: #5e6978;
    --rule-light: #2e353e;
    --accent: #75b5fa;
    --accent-dark: #a5d0ff;
    --accent-contrast: #000000;
    --field: #68ca8a;
    --backdrop: rgba(0, 0, 0, .78);
    --shadow-modal: transparent;
    --shadow-card: transparent;
    --field-wash: rgba(104, 202, 138, .14);
    --accent-wash: rgba(117, 181, 250, .15);
    --accent-wash-subtle: rgba(117, 181, 250, .10);
    --pos-qb: #d4675a;
    --pos-rb: #7fa076;
    --pos-wr: #6f9ac4;
    --pos-te: #c7a24f;
    --pos-k: #a888c0;
    --pos-def: #a8927a;
    --pos-db: #7fb0c4;
    --pos-dl: #c49a72;
    --pos-lb: #72b0ab;
    --pos-default: #98a3b2;
  }
}

/* ---------- Narrow screens ----------
   Wide data (the head-to-head matrix, the draft board) can never fit a phone,
   so those scroll horizontally inside their own container with the identifying
   first column pinned. Everything else collapses to a single column. */

@media (max-width: 900px) {
  .front-grid { grid-template-columns: 1fr; gap: 18px; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .member-title { font-size: 38px; }
}

@media (max-width: 640px) {
  .site-header { padding: 16px 16px 0; }
  .site-header-main { gap: 12px; }
  .site-status { display: none; }
  main { padding: 24px 16px 48px; }

  .sections-wrap { margin: 14px -16px 0; }
  .sections {
    padding: 0 16px 12px;
  }
  .section-tab { padding: 10px 14px; font-size: 13px; }

  .champion-hero { min-height: 270px; border-radius: 16px; }
  .view-deck { margin-bottom: 26px; }
  .member-title { font-size: 30px; }

  .member-grid, .record-grid, .bust-grid, .close-grid {
    grid-template-columns: 1fr;
  }

  .member-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .member-stat {
    padding: 12px 12px 12px 0;
    margin: 0;
    border-right: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);
  }
  .member-stat:nth-child(2n) { border-right: 0; padding-left: 12px; }
  .member-stat-value { font-size: 27px; }

  /* Pin the row label so the matrix stays readable while scrolling sideways. */
  .matrix td.m-name, .matrix th.m-corner {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    box-shadow: 1px 0 0 var(--rule);
  }
  .matrix { font-size: 12px; }
  .matrix th, .matrix td { padding: 7px 8px; }

  .draft-board td.d-round, .draft-board th.d-round {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    box-shadow: 1px 0 0 var(--rule);
  }
  .draft-board tr.is-first-round td.d-round { background: var(--surface); }

  .alumni-item {
    white-space: normal;
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
    flex: 0 0 100%;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule-light);
    margin-bottom: 6px;
  }

  .close-grid { gap: 10px; }
  .close-card { padding: 16px; }
  .close-margin { font-size: 38px; }
  .bust-points { font-size: 34px; }

  /* Full-bleed sheet reads better than a floating card on a phone. */
  .modal-backdrop {
    padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
    align-items: flex-end;
    overflow: hidden;
  }
  .modal-card {
    max-width: none;
    padding: 22px 18px calc(26px + var(--safe-bottom));
    max-height: calc(100vh - var(--safe-top));
    max-height: min(92dvh, calc(100dvh - var(--safe-top)));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin: 0;
  }
  .modal-title { font-size: 24px; }
  .modal-stats { grid-template-columns: 1fr 1fr; }

  /* Two lineups side by side is unreadable on a phone; stack them. */
  .bx-grid { grid-template-columns: 1fr; gap: 22px; }
  .bx-col + .bx-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-light); padding-top: 18px; }

  .ms-owner { font-size: 19px; }
  .ms-score { font-size: 27px; }
  .modal-scroll { max-height: 44vh; }

  /* Horizontal-scroll regions get a bleed and a nudge. */
  .scroll-x { margin: 0 -16px; padding: 0 16px; }
  .scroll-hint::after {
    content: 'Scroll sideways for the rest →';
    display: block;
    font-family: var(--font-system);
    font-size: 10.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted-light);
    padding: 8px 0 0;
    position: sticky;
    left: 0;
  }
}

@media (max-width: 400px) {
  .site-subtitle { font-size: 12px; }
  .theme-toggle { padding-inline: 10px; }
  .member-stats { grid-template-columns: 1fr 1fr; }
}

/* Comfortable tap targets on touch devices without bloating the desktop grid. */
@media (hover: none) {
  .section-tab, .year-tab { min-height: 44px; display: flex; align-items: center; }
  .member-card, .record-box.is-clickable, .close-card { min-height: 44px; }
}

/* The manager overlay is mobile-first. */
.member-backdrop {
  align-items: flex-end;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  overflow: hidden;
}

.member-sheet {
  width: 100%;
  max-width: none;
  max-height: calc(100vh - var(--safe-top));
  max-height: min(92dvh, calc(100dvh - var(--safe-top)));
  margin: 0;
  padding: 8px 18px calc(26px + var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 14px 14px 0 0;
  animation: member-sheet-in .18s ease-out;
}

.member-sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: -8px 44px 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.member-sheet-handle:active { cursor: grabbing; }
.member-sheet-grip { width: 42px; height: 4px; border-radius: 999px; background: var(--muted); }
.member-sheet.is-dragging { animation: none; transition: none; }
.member-sheet.is-dismissing { transform: translateY(100%); transition: transform .16s ease-in; }

@keyframes member-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 641px) {
  .section-heading { font-size: 28px; }
  .section-heading.is-compact { font-size: 22px; }
  .member-backdrop {
    align-items: center;
    padding: calc(24px + var(--safe-top)) calc(16px + var(--safe-right))
      calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left));
    overflow-y: auto;
  }
  .member-sheet {
    max-width: 860px;
    max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 48px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 48px);
    margin: auto;
    padding: 28px 30px 30px;
    border: 1px solid var(--rule);
    border-radius: 18px;
    animation-name: member-dialog-in;
  }
  .member-sheet-handle { display: none; }
}

@keyframes member-dialog-in {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sections-wrap::before,
  .sections-wrap::after,
  .member-sheet,
  .member-sheet.is-dismissing { animation: none; transition: none; }
}

@media print {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    color-scheme: light !important;
    --background: #f3f5f8;
    --surface: #ffffff;
    --surface-raised: #f2f5f9;
    --ink: #15181d;
    --ink-soft: #3d4652;
    --muted: #566170;
    --muted-light: #657080;
    --rule: #647185;
    --rule-light: #dce2e9;
    --accent: #1d5fa7;
    --accent-dark: #174d87;
    --accent-contrast: #ffffff;
    --field: #247446;
    --backdrop: rgba(9, 14, 22, .68);
    --shadow-modal: rgba(9, 14, 22, .24);
    --shadow-card: rgba(24, 35, 52, .08);
    --field-wash: rgba(36, 116, 70, .10);
    --accent-wash: rgba(29, 95, 167, .10);
    --accent-wash-subtle: rgba(29, 95, 167, .07);
    --pos-qb: #8c2b1f;
    --pos-rb: #247446;
    --pos-wr: #2b4a6b;
    --pos-te: #8a6a1f;
    --pos-k: #6b4a6b;
    --pos-def: #5a4a3a;
    --pos-db: #4a6b7a;
    --pos-dl: #7a5a3a;
    --pos-lb: #3a5a5a;
    --pos-default: #647185;
  }
  body { background: #fff; }
  .page { padding: 0; }
  .app-shell { box-shadow: none; border: 0; max-width: none; }
  .sections-wrap, .theme-toggle { display: none; }
}