/* The Basepath: the table is the page, and the page is the one thing that scrolls.  Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--head) + var(--s2)); }
body {
  margin: 0; padding-top: calc(var(--bar-h) + 1px); background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.47; font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
a { color: var(--accent); text-decoration: none; }
p a, .meta a, .footer a, .caption a, .pct__caption a, .note a, .defs a { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
p { margin: 0 0 var(--s3); max-width: 44rem; }
b, strong { font-weight: 700; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
h1 { font-family: var(--display); font-weight: 500; font-size: var(--fs-h1); letter-spacing: -.01em; line-height: 1.1; }
h2 { font-size: var(--fs-body); }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.caption { color: var(--ink-2); font-size: var(--fs-sm); margin: var(--s2) 0; }
.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; }
.skip { position: absolute; left: -999px; top: 4px; background: var(--ink); color: var(--paper); padding: 6px var(--s3); z-index: 100; }
.skip:focus { left: 4px; }
.num, .lchart, .pct__val, .pct__num, .fig__value, .cbars, .traj { font-variant-numeric: tabular-nums; }

/* == top bar: mark, Players | Teams, the scope switch, search; one line from 320 to 1440 */
/* Fixed, not sticky: axe's target-size reads a fixed bar as an overlay. */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar__inner { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); height: var(--bar-h); display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s5); }
.wordmark { display: inline-flex; flex: none; align-items: center; gap: var(--s2); color: var(--ink); white-space: nowrap; min-height: 44px; }
.wordmark__text { font-family: var(--display); font-weight: 500; font-size: 1.375rem; letter-spacing: -.012em; line-height: 1; }
.mark { width: 26px; height: 26px; flex: none; }
.mark__paths { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; }
.mark__traced { fill: none; stroke: var(--accent); stroke-width: 3.6; stroke-linejoin: round; stroke-linecap: round; }
.mark__plate { fill: var(--ink); }
/* The mark at chart-label size marks the leader. */
.mark.mark--lead { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.nav { display: flex; flex: none; align-self: stretch; gap: var(--s4); }
.nav a { display: inline-flex; align-items: center; white-space: nowrap; color: var(--ink-2); font-size: var(--fs-ui); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast) var(--ease-enter); }
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.scope { margin-left: auto; flex: none; display: inline-flex; height: 32px; border: 1px solid var(--control); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-ui); font-weight: 500; }
.scope__pick { position: relative; display: inline-flex; color: var(--ink-2); }
.scope__pick::after { content: ''; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.scope__year { appearance: none; font: inherit; font-variant-numeric: tabular-nums; color: inherit; background: transparent; border: 0; border-radius: 0; height: 100%; padding: 0 24px 0 10px; cursor: pointer; }
.scope__year option { color: var(--ink); background: var(--paper); }
.scope__all { display: inline-flex; align-items: center; padding: 0 10px; border-left: 1px solid var(--control); color: var(--ink-2); white-space: nowrap; }
.scope[data-mode='season'] .scope__pick, .scope__all[aria-current] { background: var(--ink); color: var(--paper); }
.scope__year:focus-visible, .scope__all:focus-visible { outline-offset: -3px; }
.search-trigger { flex: none; }
.icon-btn { font: inherit; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* == page */
/* min-height reserves the screen before the view arrives, so the footer never jumps (CLS). */
.page { max-width: var(--measure); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s6); min-height: calc(100svh - var(--bar-h)); }
.page:focus { outline: none; }
.skeleton { height: 70vh; }
.loading, .empty { color: var(--ink-2); padding: var(--s6) 0; text-align: center; max-width: none; }
.pagehead { margin: 0 0 var(--s2); }
.pagehead__main { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-height: 36px; }
.pagehead__controls { display: flex; gap: var(--s2); }
.pagehead__sub { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: none; }
.meta b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.meta__sep { color: var(--ink-3); }
.live { display: inline-flex; align-items: center; gap: var(--s1); color: var(--live); font-weight: 500; }
.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.note { font-size: var(--fs-sm); color: var(--ink-2); background: var(--panel); padding: 6px var(--s2); max-width: none; }
.sect { margin: var(--s5) 0 0; }
.sect__head { display: flex; align-items: center; gap: var(--s3); min-height: 32px; margin: 0 0 var(--s2); border-bottom: 1px solid var(--rule); padding-bottom: var(--s1); }

/* Club chip: an 8px dot (sinkClub() light, liftClub() dark) beside the printed abbreviation. */
.club-chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: 24px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none; vertical-align: middle; }
.club-dot { width: 8px; height: 8px; border-radius: var(--radius-dot); flex: none; background: var(--dot-l, var(--control)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .club-dot { background: var(--dot-d, var(--control)); } }
:root[data-theme='dark'] .club-dot { background: var(--dot-d, var(--control)); }

/* == controls */
.btn { font: inherit; font-size: var(--fs-ui); font-weight: 500; min-height: 28px; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--control); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s1); }
.btn:disabled { color: var(--ink-3); border-color: var(--line); cursor: default; }
.btn--quiet { border-color: transparent; color: var(--accent); padding: 0 var(--s1); }
.btn--link { border: 0; background: none; padding: 0 2px; min-height: 24px; color: var(--accent); text-decoration: underline; text-underline-offset: .16em; font-size: inherit; }
.btn--icon { width: 28px; padding: 0; justify-content: center; }
.btn svg, .icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.icon { display: inline-flex; }
.seg { display: inline-flex; flex: none; border: 1px solid var(--control); border-radius: var(--radius); overflow: hidden; }
.seg__opt { font: inherit; font-size: var(--fs-sm); font-weight: 500; font-stretch: 92%; min-height: 28px; padding: 0 var(--s2); border: 0; border-left: 1px solid var(--control); background: var(--paper); color: var(--ink-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); transition: background-color var(--dur-fast) var(--ease-enter), color var(--dur-fast) var(--ease-enter); }
.seg__opt:first-child { border-left: 0; }
.seg__opt[aria-pressed='true'], .seg__opt[aria-current='true'] { background: var(--ink); color: var(--paper); }
.select { font: inherit; font-size: var(--fs-sm); font-weight: 500; min-height: 28px; padding: 0 var(--s5) 0 var(--s2); border: 1px solid var(--control); border-radius: var(--radius); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5l3-3' fill='none' stroke='%237d838b' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 7px center; color: var(--ink); appearance: none; cursor: pointer; }
.select--date { padding-right: var(--s2); background-image: none; }

/* == the filter bar: first under a board's title, the same on all four boards */
.pagehead--board { margin: 0 0 var(--s4); }
.board-controls { margin-top: var(--s3); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.filters__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filters__label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.filters__control { display: flex; gap: var(--s2); }
.filters .seg__opt, .filters .select { min-height: 36px; font-size: var(--fs-ui); }
.filters .seg__opt { padding: 0 var(--s3); }
.showing:empty { display: none; }
.showing { margin: var(--s2) 0 0; min-height: 24px; font-size: var(--fs-sm); color: var(--ink-2); max-width: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.showing b { color: var(--ink); font-weight: 500; }
[aria-busy='true'] .instrument { opacity: .6; transition: opacity var(--dur-fast) var(--ease-enter); }

/* == ledger */
.ledger__wrap { margin: 0; }
.ledger__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s1) var(--s4); flex-wrap: wrap; margin-bottom: var(--s1); }
.ledger__caption { color: var(--ink-2); font-size: var(--fs-sm); }
.ledger__status { margin: 0 0 var(--s1); color: var(--ink-2); font-size: var(--fs-xs); height: 16px; line-height: 16px; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.legend__ramp { width: 48px; height: 10px; border: 1px solid var(--line); background: linear-gradient(90deg, var(--shade-good), var(--paper), var(--shade-bad)); }
.ledger__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s1); }
.ledger__more { display: flex; gap: var(--s3); }
.defs { font-size: var(--fs-sm); color: var(--ink-2); }
.defs summary { cursor: pointer; min-height: 28px; display: flex; align-items: center; }
.defs__list { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s3); margin: var(--s1) 0 0; }
.defs__list dt { font-weight: 500; color: var(--ink); }
.defs__list dd { margin: 0; }

.instrument { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The frame: the head sticks under the top bar; the body scrolls sideways only, and only when the columns cannot fit. */
.ledger__frame { position: relative; min-width: 0; }
.ledger__headbox { position: sticky; top: calc(var(--bar-h) + 1px); z-index: 5; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; background: var(--paper); border-top: 1px solid var(--rule); }
.scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.ledger { --cell-x: 4px; border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--fs-cell); line-height: 18px; }
.ledger--head { table-layout: fixed; min-width: 0; }
.ledger col.is-sorted { background: var(--band); }
.ledger thead th { background: var(--paper); font-size: var(--fs-xs); font-weight: 500; font-stretch: 85%; color: var(--ink-2); text-align: left; white-space: nowrap; padding: 0; vertical-align: bottom; }
.ledger__sizer th { height: 0; line-height: 0; scroll-snap-align: start; }
.th__btn.th__sizer { display: flex; height: 0; overflow: hidden; visibility: hidden; }
.ledger__groups th { height: 18px; font-weight: 500; padding: 0 var(--cell-x); overflow: hidden; }
.ledger__groups th.group { border-left: 1px solid var(--line); }
.ledger__head th { height: var(--head); border-bottom: 1px solid var(--rule); }
.ledger__head th.num { text-align: right; }
.ledger__head th.rank { padding: 0 var(--s1) 0 0; text-align: right; vertical-align: middle; }
.ledger__head th[aria-sort] { background: var(--band); color: var(--accent); }
.th__btn { font: inherit; color: inherit; background: none; border: 0; width: 100%; height: var(--head); padding: 0 var(--cell-x); display: inline-flex; align-items: center; justify-content: inherit; gap: 2px; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-enter); }
.num .th__btn { justify-content: flex-end; }
/* The arrow's place is kept on every header, so a sort never changes a column's width. */
.th__arrow { width: 0; height: 0; border: 4px solid transparent; display: inline-block; visibility: hidden; margin-top: var(--s1); }
th[aria-sort='descending'] .th__arrow { visibility: visible; border-top-color: currentColor; }
th[aria-sort='ascending'] .th__arrow { visibility: visible; border-bottom-color: currentColor; margin: 0 0 var(--s1); }
.ledger td, .ledger tbody th { position: relative; height: var(--row); padding: 0 var(--cell-x); border-bottom: 1px solid var(--line); white-space: nowrap; font-stretch: 85%; text-align: left; font-weight: 400; }
.ledger td.num { text-align: right; }
.ledger td.group, .ledger thead th.group { border-left: 1px solid var(--line); }
.ledger .sticky { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.ledger thead .sticky { z-index: 4; }
.ledger .rank { width: 32px; min-width: 32px; text-align: right; color: var(--ink-3); font-size: var(--fs-xs); padding: 0 var(--s1) 0 0; }
.ledger.has-rank .name { left: 32px; }
.ledger .name { font-stretch: 94%; font-weight: 500; max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.ledger .name:has(.club-link) { max-width: 240px; }
.ledger .name a { color: var(--ink); }
.ledger td a, .ledger th a { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; max-width: 100%; }
.ledger .name a { display: inline-block; line-height: 24px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* The leader's cell: a stroke, not a weight, keeps the figures' advance. */
.ledger td.lead { color: var(--accent); -webkit-text-stroke: .5px currentColor; }
/* Shading: every stat column, mixed from the paper toward its best or worst end by --p (ledger.js). */
.ledger td.sh-g { background: color-mix(in oklab, var(--shade-good) var(--p), var(--paper)); }
.ledger td.sh-r { background: color-mix(in oklab, var(--shade-bad) var(--p), var(--paper)); }
/* Rows: a tint over the shading for the pointer, the tapped row and the selection, faded in (opacity only). */
.ledger tbody tr > *::after { content: ''; position: absolute; inset: 0; background: var(--tint-hover); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-enter); }
.ledger tbody tr.is-hot > *::after { opacity: 1; }
.ledger tbody tr.is-sel > *::after { opacity: 1; background: var(--tint-sel); }
.ledger tbody tr:focus { outline: none; }
.ledger tbody tr:focus-visible > :first-child, .ledger tbody tr.is-sel > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* Sideways cues: a shadow on the pinned name once numbers pass under it; a fade at the edge while more wait. */
.ledger__frame[data-scrolled] .name { box-shadow: var(--shadow-edge); }
.ledger__frame[data-more]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 14px; z-index: 6; pointer-events: none; background: linear-gradient(to left, var(--panel), transparent); }

/* == linked chart */
.lchart { position: relative; font-size: var(--fs-sm); color: var(--ink-2); }
.lchart__title { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); font-stretch: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.lchart__marks { position: relative; }
.lbar-item { position: absolute; top: 0; left: 0; }
.lbar { font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; text-align: left; transition: opacity var(--dur-fast) var(--ease-enter); }
.lbar__track { position: relative; display: block; overflow: hidden; }
.lbar__fill { position: absolute; inset: 0; background: var(--bar); }
.lbar__fill::after { content: ''; position: absolute; inset: 0; background: var(--bar-sel); opacity: 0; transition: opacity var(--dur-fast) var(--ease-enter); }
.lbar.is-neg .lbar__fill { background: var(--control); }
.lbar.is-sel .lbar__fill::after, .lbar.is-hot .lbar__fill::after { opacity: 1; }
.lbar.is-sel .lbar__val, .lbar.is-hot .lbar__val { color: var(--ink); font-weight: 700; }
.lbar:focus-visible { outline-offset: -2px; }
.lbar__val { font-stretch: 85%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tick { position: absolute; pointer-events: none; }
.tick span { position: absolute; font-size: var(--fs-sm); font-stretch: 85%; color: var(--ink-2); white-space: nowrap; }

/* wide: one more column beside the table, a bar per row at the row's pitch; its head sticks with the table's */
.lchart--h { border-left: 1px solid var(--line); }
.lchart--h .lchart__head { position: sticky; top: calc(var(--bar-h) + 1px); z-index: 2; background: var(--paper); overflow: hidden; height: var(--lc-head, 32px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 2px var(--s2) 0; }
.lchart--h .lchart__axis { position: absolute; left: 8px; right: 52px; bottom: 2px; height: 15px; }
.lchart--h .tick { left: 0; top: 0; width: 100%; height: 100%; }
.lchart--h .tick span { left: 0; transform: translateX(-50%); }
.lchart--h .lchart__body { position: relative; overflow: hidden; }
.lchart--h .lchart__body::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(8px + (100% - 60px) * var(--lc-zero-f, 0)); width: 1px; background: var(--control); z-index: 1; }
.lchart--h .lbar-item { width: 100%; height: var(--lc-pitch, 28px); }
.lchart--h .lbar { display: grid; grid-template-columns: 1fr 44px; align-items: center; padding: 0 0 0 var(--s2); border-bottom: 1px solid var(--line); }
.lchart--h .lbar__track { height: 10px; }
.lchart--h .lbar__fill { transform-origin: 0 50%; }
.lchart--h .lbar__val { text-align: right; padding-right: var(--s2); }

/* narrow: a 98px strip of columns above the table, 44px targets, scrolls sideways */
.lchart--v { margin: 0 0 var(--s2); }
.lchart--v .lchart__plot { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-top: 2px; }
.lchart--v .lchart__axis { position: relative; height: 98px; }
.lchart--v .tick { left: 0; right: 4px; bottom: 18px; height: 62px; }
.lchart--v .tick span { right: 0; bottom: 0; transform: translateY(50%); }
.lchart--v .lchart__body { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; }
.lchart--v .lchart__marks { height: 98px; }
.lchart--v .lchart__marks::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: var(--control); }
.lchart--v .lbar-item { width: 44px; height: 98px; }
.lchart--v .lbar { display: flex; flex-direction: column; align-items: stretch; }
.lchart--v .lbar__val { height: 18px; text-align: center; font-size: var(--fs-sm); line-height: 18px; }
.lchart--v .lbar__track { height: 62px; margin: 0 var(--s2); }
.lchart--v .lbar__fill { transform-origin: 50% 100%; }
.lbar__name:has(.lbar__tag) { display: flex; justify-content: center; }
.lbar__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lbar__tag { flex: none; }
.lchart--v .lbar__name { height: 18px; line-height: 18px; font-size: var(--fs-sm); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-stretch: 85%; color: var(--ink-2); }

/* Beside the rows (ledger.js place()) only when every column fits beside it. */
.instrument { --lc-w: 220px; }
.instrument.is-beside { grid-template-columns: minmax(0, 1fr) var(--lc-w); }
.instrument.is-beside .lchart { grid-column: 2; grid-row: 1; }
.instrument.is-beside .ledger__frame { grid-column: 1; grid-row: 1; }

/* == tooltip */
.tip { position: fixed; z-index: 60; padding: 6px var(--s2); background: var(--ink); color: var(--paper); font-size: var(--fs-sm); line-height: 1.4; border-radius: var(--radius); pointer-events: none; animation: fade-in var(--dur-fast) var(--ease-enter); }
.tip__title { font-weight: 500; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* == search sheet */
.sheet { width: min(640px, calc(100% - 32px)); max-height: min(560px, calc(100svh - 96px)); margin: 72px auto auto; padding: 0; border: 1px solid var(--control); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); flex-direction: column; overflow: hidden; }
.sheet[open] { display: flex; animation: fade-in var(--dur-fast) var(--ease-enter); }
.sheet::backdrop { background: rgba(10, 12, 14, .4); }
.sheet__top { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.sheet__icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; }
.sheet__input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; }
.sheet__input:focus { outline: none; }
.sheet__top:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.sheet__input::placeholder { color: var(--ink-3); opacity: 1; }
.sheet__cancel { font: inherit; font-size: var(--fs-ui); min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent); cursor: pointer; }
.sheet__echo { margin: 0; padding: 0 var(--s3); min-height: 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: none; }
.sheet__echo:not(:empty) { padding: 6px var(--s3) 0; }
.sheet__list { flex: 1; overflow: auto; padding: var(--s1) 0 var(--s2); }
.sheet__group + .sheet__group { margin-top: var(--s1); }
.sheet__heading { padding: var(--s2) var(--s3) 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); font-stretch: 85%; }
.sheet__opt { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-ui); cursor: pointer; }
.sheet__opt[aria-selected='true'] { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.sheet__detail { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; font-stretch: 85%; }
.sheet__none { padding: var(--s3); color: var(--ink-2); font-size: var(--fs-ui); margin: 0; }

/* == footer */
.footer { border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); }
.footer__inner { max-width: var(--measure); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s6); }
.footer p { max-width: 60rem; margin: 0 0 6px; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.footer__links a, .footer__links .btn--link { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--fs-sm); }
.footer__dateline { min-height: 1.47em; }

/* == hover only; each has a tap equivalent (a tapped row is selected, a tapped bar selects its row) */
@media (hover: hover) {
  .nav a:hover { color: var(--ink); }
  .ledger tbody tr:hover > *::after { opacity: 1; }
  .ledger .name a:hover { text-decoration: underline; }
  .sheet__opt:hover { background: var(--panel); }
  .seg__opt:hover:not([aria-pressed='true']):not([aria-current='true']), .btn:hover:not(:disabled), .icon-btn:hover, .scope__all:hover:not([aria-current]) { background: var(--panel-2); color: var(--ink); }
  .scope[data-mode='all'] .scope__pick:hover { background: var(--panel-2); color: var(--ink); }
  .th__btn:hover { color: var(--ink); }
  .lchart.has-hot .lbar:not(.is-hot) { opacity: .45; }
  .lbar:hover .lbar__fill::after { opacity: 1; }
  a:hover { text-decoration: underline; }
  .club-chip:hover { border-color: var(--control); text-decoration: none; }
}

/* == touch: rows are targets */
@media (pointer: coarse) {
  .seg__opt, .select, .btn, .btn--link, .filters .seg__opt, .filters .select { min-height: 44px; }
  .btn--icon, .icon-btn { min-width: 44px; height: 44px; }
  .seg__opt { padding: 0 var(--s3); min-width: 44px; }
  .scope { height: 40px; }
  .th__btn { min-width: 44px; }
  .ledger__groups { display: none; }
  .defs summary { min-height: 44px; }
  .footer__links a, .footer__links .btn--link { min-height: 44px; }
  .sheet__opt { min-height: 44px; }
}

/* == phone */
@media (max-width: 719px) {
  .topbar__inner { gap: var(--s3); }
  .wordmark__text { font-size: 1.125rem; }
  .wordmark { gap: 6px; }
  .mark { width: 22px; height: 22px; }
  .nav { gap: var(--s3); }
  .scope__year { padding: 0 20px 0 var(--s2); }
  .scope__pick::after { right: 7px; }
  .scope__all { padding: 0 var(--s2); }
  .search-trigger { min-width: 40px; margin-right: -8px; }
  /* The sheet is full-screen on a phone. */
  .sheet { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .sheet__top { padding: var(--s1) var(--s2) var(--s1) var(--s3); }
  .pagehead__main { justify-content: space-between; min-height: 32px; }
  .page { padding-top: var(--s3); }
  .filters { padding: var(--s3); gap: var(--s3); }
  .filters__item { flex: 1 1 auto; }
  .filters .seg { display: flex; }
  .filters .seg__opt { flex: 1 1 auto; padding: 0 var(--s2); }
  .ledger__tools { flex-direction: column; align-items: flex-start; }
  .ledger .name { max-width: 128px; }
  .lchart--v .lchart__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lchart--v { margin-bottom: var(--s1); }
}
/* The bar keeps one line: below 600 it tightens; below 440 the wordmark gives way to the mark (its link keeps the name); below 360 the type steps down. */
@media (max-width: 599px) {
  .topbar__inner, .nav { gap: var(--s2); }
  .nav a, .scope { font-size: var(--fs-sm); }
  .scope__year { padding: 0 18px 0 6px; }
  .scope__pick::after { right: 6px; }
  .scope__all { padding: 0 6px; }
}
@media (max-width: 439px) {
  .wordmark__text { display: none; }
  .wordmark { min-width: 32px; justify-content: center; }
  .nav a, .scope { font-size: var(--fs-ui); }
  .nav { gap: var(--s3); }
}
@media (max-width: 399px) { .filters .seg__opt { padding: 0 var(--s1); font-size: var(--fs-sm); } }
@media (max-width: 359px) { .nav a, .scope { font-size: var(--fs-sm); } .nav { gap: var(--s2); } }

/* == not found and load error (views/stats-states.js) */
.gl-empty { padding: var(--s6) 0; display: grid; justify-items: start; gap: var(--s3); max-width: 32rem; }
.gl-empty h1, .gl-empty p { margin: 0; }
.gl-empty__mark { width: 56px; height: 56px; color: var(--control); }
.gl-empty__ways { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.gl-empty a { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
.gl-empty__ways a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-ui); }

/* == clubs */
.club-rule { height: var(--s1); margin: var(--s2) 0 0; background: var(--dot-l, var(--control)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .club-rule { background: var(--dot-d, var(--control)); } }
:root[data-theme='dark'] .club-rule { background: var(--dot-d, var(--control)); }
.club-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 24px; color: inherit; text-decoration: none; }
.club-link .club-chip { min-width: 3.5em; }
/* The franchise board has the most columns: its clubs go by nickname beside the chip, as on phones. */
@media (max-width: 719px) { .club-link__city { display: none; } }
.view--franchises .club-link__city { display: none; }
.club-link__name { color: var(--accent); }
@media (hover: hover) { .club-link:hover .club-link__name { text-decoration: underline; } .club-link:hover .club-chip { border-color: var(--control); } }