/* BBGM League Explorer: "Courtside" theme.
   Palette: charcoal #50514F, coral #F25F5C, gold #FFE066, cerulean #247BA0, teal #70C1B3.
   Light (warm off-white) is the base; dark (charcoal) applies under the media query
   unless the user picked light, and under an explicit data-theme="dark".
   Text-colored tokens (--accent, --link, --gold...) are tuned per theme for WCAG AA;
   raw brand fills live in --coral/--gold-fill/--cerulean/--teal. */
:root {
	color-scheme: light dark;
	--coral: #F25F5C; --gold-fill: #FFE066; --cerulean: #247BA0; --teal: #70C1B3; --charcoal: #50514F;
	--brand-gradient: linear-gradient(90deg, #50514F, #F25F5C, #FFE066, #247BA0, #70C1B3);
	--bg: #f7f4ee;
	--panel: #fffdf9;
	--panel-2: #f1ece3;
	--line: #e3dccf;
	--text: #262725;
	--dim: #5c5d5a;
	--accent: #b93a37;
	--accent-soft: rgba(242, 95, 92, .13);
	--link: #1f6c8e;
	--good: #1d7466;
	--bad: #a8302a;
	--warn: #8a6400;
	--gold: #7a5c00;
	--r-elite: #17705f;
	--r-good: #1f6c8e;
	--r-ok: #8a6a00;
	--r-meh: #b4521a;
	--r-bad: #c0362f;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(80, 81, 79, .08), 0 4px 16px rgba(80, 81, 79, .06);
	--shadow-lg: 0 12px 40px rgba(38, 39, 37, .18);
	--hover: rgba(80, 81, 79, .07);
	--chip: rgba(80, 81, 79, .10);
	--topbar-bg: #50514F; --topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .72);
	--on-accent: #ffffff;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--sans: "LT Soul", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ui: "Caviar Dreams", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--data: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--display: "Mont", "LT Soul", system-ui, sans-serif;
	--score: "Russo One", "Mont", system-ui, sans-serif;
	--serif: "IM Fell English", Georgia, "Times New Roman", serif;
	--np-serif: "IM Fell English", Georgia, "Times New Roman", serif;
	--fr-heat-lo: #F25F5C; --fr-heat-hi: #247BA0;
	--hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(36,123,160,.6), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(242,95,92,.48), transparent 60%), #3b3c3a;
	--ball: conic-gradient(from 200deg, #F25F5C, #FFE066, #70C1B3, #247BA0, #F25F5C);
	--topH: 60px;
	--navW: 220px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #1d1e1c; --panel: #282927; --panel-2: #323331; --line: #41423f;
		--text: #f3f1ec; --dim: #b4b3ad; --accent: #F78C89; --accent-soft: rgba(242, 95, 92, .18);
		--link: #70C1B3; --good: #70C1B3; --bad: #f8918e; --warn: #FFE066; --gold: #FFE066;
		--r-elite: #70C1B3; --r-good: #6db4d8; --r-ok: #FFE066; --r-meh: #f6a067; --r-bad: #f47b78;
		--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 18px rgba(0, 0, 0, .18);
		--hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09);
		--topbar-bg: #141513; --on-accent: #1d1e1c;
		--fr-heat-lo: #F25F5C; --fr-heat-hi: #4FA3C7;
	}
}
:root[data-theme="dark"] {
	--bg: #1d1e1c; --panel: #282927; --panel-2: #323331; --line: #41423f;
	--text: #f3f1ec; --dim: #b4b3ad; --accent: #F78C89; --accent-soft: rgba(242, 95, 92, .18);
	--link: #70C1B3; --good: #70C1B3; --bad: #f8918e; --warn: #FFE066; --gold: #FFE066;
	--r-elite: #70C1B3; --r-good: #6db4d8; --r-ok: #FFE066; --r-meh: #f6a067; --r-bad: #f47b78;
	--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 18px rgba(0, 0, 0, .18);
	--hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09);
	--topbar-bg: #141513; --on-accent: #1d1e1c;
	--fr-heat-lo: #F25F5C; --fr-heat-hi: #4FA3C7;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg); color: var(--text); font-family: var(--sans);
	font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
p { margin: 0 0 .8em; }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--dim); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- top bar ---------------------------------------------------------------- */
.topbar {
	position: sticky; top: 0; z-index: 50; height: var(--topH);
	display: flex; align-items: center; gap: 12px; padding: 0 16px;
	background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
/* Brand mark: the player pictogram as a mask, painted in the text colour so it shows on any top bar. */
.brand-ball { width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: url(../img/logo-mask.png) center / contain no-repeat; mask: url(../img/logo-mask.png) center / contain no-repeat; }
.league-chip { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.search-box { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.search-box input { width: 100%; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.search-results, .picker-list {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
	background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
	max-height: 380px; overflow-y: auto;
}
.search-item, .picker-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; cursor: pointer; }
.search-item.active, .picker-item.active, .search-item:hover, .picker-item:hover { background: var(--accent-soft); }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.only-league { display: none; }
body.has-league .only-league { display: initial; }
body.has-league .search-box.only-league { display: block; }
.only-mobile { display: none; }

/* ---- layout ------------------------------------------------------------------- */
.layout { display: flex; min-height: calc(100vh - var(--topH)); }
.sidebar {
	width: var(--navW); flex: 0 0 var(--navW); border-right: 1px solid var(--line); background: var(--panel);
	position: sticky; top: var(--topH); height: calc(100vh - var(--topH)); overflow-y: auto; padding: 10px 0 30px;
}
body.has-league .sidebar.only-league { display: block; }
.nav-group { padding: 4px 0 8px; }
.nav-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 6px 18px 3px; font-weight: 600; }
.sidebar a { display: block; padding: 5px 18px; color: var(--text); border-left: 3px solid transparent; }
.sidebar a:hover { background: var(--hover); text-decoration: none; }
.sidebar a.active { border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.main { flex: 1; min-width: 0; }
.page { padding: 20px 24px 60px; max-width: 1400px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-header h1 { margin: 0; }
.page-header .sub { color: var(--dim); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- generic components --------------------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 16px; min-width: 0; }
.card-title { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.stats-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { background: var(--panel-2); border-radius: 8px; padding: 8px 12px; min-width: 92px; }
.stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.stat-sub { font-size: 12px; color: var(--dim); }
.btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
	border: 1px solid var(--line); background: var(--panel-2); color: var(--text); white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.ghost { background: transparent; }
.btn.small { padding: 3px 8px; font-size: 12px; }
select, input[type="text"], input[type="search"], input[type="number"] {
	padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); max-width: 100%;
}
input[type="range"] { accent-color: var(--accent); }
label.inline { display: inline-flex; align-items: center; gap: 6px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tab { background: none; border: none; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--dim); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab:hover { color: var(--text); }
.badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: var(--chip); color: var(--dim); vertical-align: middle; white-space: nowrap; }
.badge-good { background: rgba(26, 127, 75, .15); color: var(--good); }
.badge-bad { background: rgba(192, 50, 58, .14); color: var(--bad); }
.badge-gold { background: rgba(184, 134, 11, .16); color: var(--gold); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge.cov { border: 1px dashed currentColor; background: transparent; }
.cov-game { color: var(--good); }
.cov-season, .cov-events { color: var(--link); }
.cov-estimated, .cov-partial { color: var(--warn); }
.chip { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; background: var(--chip); line-height: 16px; white-space: nowrap; }
.team-chip:hover { text-decoration: none; filter: brightness(1.1); }
.tlink { white-space: nowrap; }
/* Very long team names must not push a phone-width page sideways: outside table cells a team link may wrap. */
@media (max-width: 700px) { :not(td):not(th) > .tlink { white-space: normal; overflow-wrap: anywhere; } :is(td, th) .tlink { white-space: nowrap; overflow-wrap: normal; } }
.tlink .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.plink.hof { font-weight: 600; }
.plink.hof::after { content: "★"; color: var(--gold); font-size: 10px; margin-left: 2px; vertical-align: 2px; }
.plink-tag { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); vertical-align: 1px; }
.empty { padding: 28px; text-align: center; color: var(--dim); border: 1px dashed var(--line); border-radius: var(--radius); }
.error { padding: 12px 14px; border-radius: 8px; background: rgba(192, 50, 58, .1); color: var(--bad); border: 1px solid rgba(192, 50, 58, .3); margin: 12px 0; }
.note { padding: 10px 12px; border-radius: 8px; background: var(--panel-2); color: var(--dim); font-size: 13px; margin: 8px 0 14px; }
.rating { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: 6px; background: var(--chip); border-radius: 3px; overflow: hidden; min-width: 40px; }
.bar-fill { height: 100%; border-radius: 3px; }
.spark-ref { stroke: var(--line); stroke-dasharray: 2 2; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--dim); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.controls label { display: inline-flex; gap: 6px; align-items: center; color: var(--dim); font-size: 13px; }

/* ---- tables ------------------------------------------------------------------------ */
.table-wrap { min-width: 0; }
.table-scroll { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.data.dense th, table.data.dense td { padding: 3px 6px; font-size: 13px; }
table.data th { font-size: 12px; color: var(--dim); font-weight: 600; background: var(--panel); position: sticky; top: 0; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text); }
table.data th.sorted-desc::after { content: " ▾"; }
table.data th.sorted-asc::after { content: " ▴"; }
table.data td.num, table.data th.num { text-align: right; }
table.data tr.clickable { cursor: pointer; }
table.data tbody tr:hover { background: var(--hover); }
table.data tr.highlight { background: var(--accent-soft); }
table.data tr.champ td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
table.data caption { text-align: left; color: var(--dim); padding: 4px 0 8px; caption-side: top; }
.pager { display: flex; align-items: center; gap: 10px; padding: 10px 0; justify-content: flex-end; }

/* ---- tooltip / charts --------------------------------------------------------------- */
.tooltip {
	position: fixed; z-index: 100; pointer-events: none; display: none; max-width: 340px;
	background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
	padding: 8px 10px; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.tooltip strong { display: block; margin-bottom: 2px; }
.chart { width: 100%; overflow: hidden; position: relative; }
.chart svg { display: block; max-width: 100%; }
.chart text, svg.chart-svg text { fill: var(--dim); font-size: 11px; }
.chart .axis path, .chart .axis line { stroke: var(--line); }
.chart .grid line { stroke: var(--line); stroke-opacity: .6; }
.chart .grid path { display: none; }

/* ---- faces ----------------------------------------------------------------------------- */
.face { position: relative; flex: 0 0 auto; overflow: hidden; border-radius: 8px; background: var(--panel-2); }
.face-svg, .face-svg svg { width: 100%; height: 100%; display: block; }
.face-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Until a photo loads, the drawn face fills the frame and the photo sits on top. */
.face.has-photo .face-photo { position: absolute; inset: 0; }
.face.has-photo:not(.photo-loaded) .face-photo { opacity: 0; }

/* ---- landing ----------------------------------------------------------------------------- */
.landing { max-width: 760px; margin: 0 auto; padding: 48px 20px 60px; }
.hero h1 { font-size: 34px; margin-bottom: 10px; }
.lede { font-size: 17px; }
.dropzone {
	margin: 24px 0 14px; padding: 42px 20px; text-align: center; border: 2px dashed var(--line); border-radius: 14px;
	background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-icon { font-size: 34px; color: var(--accent); }
.drop-title { font-size: 17px; font-weight: 600; margin: 4px 0; }
.landing-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cached { margin-top: 26px; }
.cached-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.howto { margin-top: 26px; }
.loading { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.loading-box { background: var(--panel); border-radius: 14px; padding: 24px 28px; width: min(420px, 90vw); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.loading-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.progress { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; margin: 14px 0 10px; position: relative; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.progress-bar.indeterminate { width: 35% !important; position: absolute; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { left: -35%; } 100% { left: 100%; } }

/* ---- pickers ------------------------------------------------------------------------------- */
.picker { position: relative; display: inline-block; min-width: 240px; }
.picker-input { width: 100%; }

/* ---- event lists ----------------------------------------------------------------------------- */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.event-list .ev-season { color: var(--dim); font-size: 12px; min-width: 38px; font-variant-numeric: tabular-nums; }
.event-type { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; background: var(--chip); color: var(--dim); white-space: nowrap; }

/* ---- responsive ------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.only-mobile { display: inline-block; }
	.league-chip { display: none; }
	body.has-league .sidebar.only-league { display: none; }
	body.has-league.nav-open .sidebar.only-league {
		display: block; position: fixed; left: 0; top: var(--topH); bottom: 0; z-index: 70; height: auto; box-shadow: 4px 0 20px rgba(0,0,0,.25);
	}
	.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
	.page { padding: 14px 16px 50px; }
	#load-new { display: none !important; }
	.topbar { gap: 8px; padding: 0 10px; }
	.brand { font-size: 0; gap: 0; }
}

/* ---- home ------------------------------------------------------------------------------------ */
.moment-season { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.moment-text { font-size: 16px; }
.player-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px; border-radius: 8px; color: var(--text); }
.pcard:hover { background: var(--hover); text-decoration: none; }
.pcard-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.pcard-sub { font-size: 12px; color: var(--dim); }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.explore-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.explore-item:hover { border-color: var(--accent); text-decoration: none; }

/* League-only controls stay hidden until a league is open (beats .btn's display). */
body:not(.has-league) .only-league, body:not(.has-league) #nav-toggle { display: none !important; }
#theme-toggle { font-size: 18px; line-height: 1; }

/* ---- storylines --------------------------------------------------------------------------------- */
.story-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chipbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 13px; }
.chipbtn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chipbtn.active .muted { color: rgba(255,255,255,.8); }
.chipbtn:disabled { opacity: .45; cursor: default; }
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.story { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.story-crest { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }
.story-body { min-width: 0; }
.story-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 700; }
.story-title { font-family: var(--serif); font-size: 18px; margin: 2px 0 6px; }
.story p { margin: 0; }
.obits { display: grid; gap: 10px; margin-bottom: 12px; }
.obit { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.obit h3 { font-family: var(--serif); font-size: 18px; }
.obit p { margin: 0 0 6px; }
.plaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 12px; }
.plaque { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 2px solid var(--gold); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.plaque-top { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.plaque-name { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.plaque p { margin: 0 0 6px; font-size: 13px; }
.plaque-speech { font-style: italic; color: var(--dim); }
@media (max-width: 820px) { .stories, .plaques { grid-template-columns: minmax(0, 1fr); } }

/* ---- shell accessibility and mobile --------------------------------------------------------- */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { top: 8px; text-decoration: none; }
.scrim { display: none; }
@media (max-width: 820px) {
	body.has-league.nav-open .scrim { display: block; position: fixed; inset: var(--topH) 0 0 0; background: rgba(0, 0, 0, .4); z-index: 65; }
	/* Tabs scroll sideways instead of wrapping onto two lines. */
	.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.tabs::-webkit-scrollbar { display: none; }
	/* a soft fade on whichever edge has more tabs (ui.js sets the classes) */
	.tabs.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
	.tabs.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
	.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
	.tab { white-space: nowrap; flex: 0 0 auto; }
	.search-box input { font-size: 13px; }
}
.search-item.muted { cursor: default; }
.now-strip { border-left: 4px solid var(--accent); }
.now-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.now-items { display: grid; gap: 4px; }
.now-events { margin-top: 8px; }

/* ---- shared components (UI.breadcrumb / seasonStepper / segmented / coverageNote / favButton) ---- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); margin-bottom: 6px; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--link); }
.crumb-sep { opacity: .6; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper .btn { min-width: 34px; justify-content: center; }
.ui-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); max-width: 100%; overflow-x: auto; }
.ui-seg-btn { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; color: var(--dim); white-space: nowrap; font-size: 13px; }
.ui-seg-btn + .ui-seg-btn { border-left: 1px solid var(--line); }
.ui-seg-btn:hover { color: var(--text); background: var(--hover); }
.ui-seg-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.ui-seg-small .ui-seg-btn { padding: 3px 9px; font-size: 12px; }
.cov-note { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.not-found { padding: 10px 0; }
.fav-btn { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--dim); padding: 2px 4px; vertical-align: middle; }
.fav-btn.on { color: var(--gold); }
.fav-btn:hover { color: var(--gold); }
.pager .spacer { flex: 1; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.landing-back { margin: 0 0 14px; }
.feature-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 26px; }
.feature-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ft-icon { font-size: 22px; color: var(--accent); line-height: 1.2; }
.fav-teams { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.fav-team { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }

/* ---- app banners (light mode, cache skipped, history fill) and heavy-page gate ---- */
.notices { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.notice { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 40px 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); font-size: 0.9rem; }
.notice-warn { border-left: 4px solid var(--warn); }
.notice-info { border-left: 4px solid var(--link); }
.notice-text { flex: 1 1 260px; min-width: 0; }
.notice-close { position: absolute; top: 4px; right: 4px; }
.heavy-warn { max-width: 560px; margin: 24px auto; padding: 20px; }
.heavy-warn .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ==== Courtside theme layer ========================================================
   Shared component styling on top of the tokens above. Views inherit it through
   the common classes (.card, .btn, .tabs, table.data, .page-header...). */
body { font-size: 15px; line-height: 1.5; letter-spacing: .005em; font-feature-settings: "kern"; }
h1, h2, .page-header h1, .hero h1, .loading-title { font-family: var(--display); font-weight: 900; letter-spacing: -.015em; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-weight: 700; }
a { text-underline-offset: 2px; }
::selection { background: var(--gold-fill); color: #262725; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

/* top bar: charcoal in both themes, with the five-color stripe underneath */
.topbar { background: var(--topbar-bg); color: var(--topbar-text); border-bottom: 0; box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--brand-gradient); }
.brand { color: #fff; font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: -.01em; text-transform: uppercase; }
.brand-ball { width: 28px; height: 28px; background: currentColor; }
.league-chip { color: var(--topbar-dim); font-weight: 500; }
.league-chip a, .league-chip strong { color: #fff; }
.topbar .search-box input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 999px; padding: 8px 16px; transition: background .15s, border-color .15s; }
.topbar .search-box input::placeholder { color: rgba(255,255,255,.62); }
.topbar .search-box input:focus { background: rgba(255,255,255,.16); border-color: var(--gold-fill); outline: none; }
.search-results, .picker-list { border-radius: 12px; box-shadow: var(--shadow-lg); color: var(--text); padding: 4px; }
.search-item, .picker-item { border-radius: 8px; }
.topbar .icon-btn { border-color: rgba(255,255,255,.18); color: #fff; border-radius: 10px; background: rgba(255,255,255,.04); }
.topbar .icon-btn:hover { background: rgba(255,255,255,.12); border-color: var(--gold-fill); }
.topbar .btn.ghost { color: #fff; border-color: rgba(255,255,255,.25); background: transparent; border-radius: 999px; }
.topbar .btn.ghost:hover { border-color: var(--gold-fill); background: rgba(255,255,255,.08); }
.icon-btn { color: var(--text); }

/* sidebar */
.layout { padding-top: 4px; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); top: calc(var(--topH) + 4px); height: calc(100vh - var(--topH) - 4px); padding: 14px 10px 30px; }
.nav-title { font-family: var(--display); font-weight: 900; font-size: 10.5px; letter-spacing: .12em; padding: 10px 12px 4px; color: var(--dim); }
.sidebar a { padding: 6px 12px; border-left: 0; border-radius: 9px; color: var(--text); font-weight: 500; margin: 1px 0; position: relative; }
.sidebar a.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.sidebar a.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: var(--coral); }

/* page header: display title over a short gradient rule */
.page { padding: 26px 28px 70px; }
.page-header { align-items: flex-end; margin-bottom: 20px; padding-bottom: 14px; position: relative; }
.page-header::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 4px; border-radius: 4px; background: var(--brand-gradient); }
.page-header h1 { font-size: 32px; line-height: 1.05; overflow-wrap: anywhere; }
.page-header .sub { font-size: 14px; margin-top: 6px; }
.crumbs { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* home hero */
.page-header.home-hero {
	background: var(--hero-bg);
	color: #fff; border-radius: 20px; padding: 34px 30px 38px; margin-bottom: 22px; overflow: hidden; box-shadow: var(--shadow);
}
.page-header.home-hero::after { left: 0; right: 0; width: auto; height: 6px; border-radius: 0; }
.page-header.home-hero h1 { font-size: clamp(30px, 5vw, 52px); color: #fff; text-transform: uppercase; }
.page-header.home-hero .sub { color: rgba(255,255,255,.82); font-size: 15px; }
.page-header.home-hero .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }

/* cards and panels */
.card { border-radius: var(--radius); padding: 18px 20px; border-color: var(--line); margin-bottom: 18px; }
.card-title { font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .1em; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--coral); flex: 0 0 auto; }
.grid > .card:nth-child(4n+2) .card-title::before { background: var(--cerulean); }
.grid > .card:nth-child(4n+3) .card-title::before { background: var(--teal); }
.grid > .card:nth-child(4n+4) .card-title::before { background: var(--gold-fill); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.grid { gap: 18px; }

/* stat tiles: scoreboard numerals */
.stat { background: var(--panel-2); border-radius: 12px; padding: 10px 14px; min-width: 100px; border-top: 3px solid var(--coral); }
.stats-row .stat:nth-child(5n+2) { border-top-color: var(--cerulean); }
.stats-row .stat:nth-child(5n+3) { border-top-color: var(--gold-fill); }
.stats-row .stat:nth-child(5n+4) { border-top-color: var(--teal); }
.stats-row .stat:nth-child(5n+5) { border-top-color: var(--charcoal); }
.stat-value { font-family: var(--score); font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: .01em; overflow-wrap: anywhere; }
.stat-label { font-weight: 700; letter-spacing: .08em; font-size: 10.5px; }

/* buttons */
.btn { border-radius: 999px; padding: 7px 15px; font-weight: 600; background: var(--panel); border-color: var(--line); transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; }
.btn:hover:not(:disabled) { border-color: var(--text); background: var(--panel-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 2px 10px rgba(242,95,92,.3); }
.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.small { padding: 3px 10px; font-size: 12.5px; }

/* inputs */
select, input[type="text"], input[type="search"], input[type="number"] { border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); padding: 7px 11px; transition: border-color .15s, box-shadow .15s; }
select:hover, input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover { border-color: var(--dim); }
select:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(36,123,160,.2); }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--coral); }

/* tabs: pill track */
.tabs { gap: 4px; border-bottom: 0; background: var(--panel-2); border-radius: 999px; padding: 4px; width: fit-content; max-width: 100%; margin-bottom: 18px; }
.tab { border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 600; color: var(--dim); transition: background .15s, color .15s; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab.active { background: var(--panel); color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12), inset 0 -3px 0 var(--coral); }
.ui-seg { border-radius: 999px; border: 1.5px solid var(--line); padding: 2px; gap: 2px; }
.ui-seg-btn { border-radius: 999px; font-weight: 600; }
.ui-seg-btn + .ui-seg-btn { border-left: 0; }
.ui-seg-btn.active { background: var(--charcoal); color: #fff; }
:root[data-theme="dark"] .ui-seg-btn.active { background: var(--gold-fill); color: #262725; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-seg-btn.active { background: var(--gold-fill); color: #262725; } }
.chipbtn { border-radius: 999px; font-weight: 600; border-width: 1.5px; }
.chipbtn:hover:not(:disabled) { border-color: var(--text); }

/* badges and chips */
.badge { font-weight: 600; padding: 2px 9px; }
.badge-good { background: rgba(112,193,179,.2); }
.badge-bad { background: rgba(242,95,92,.16); }
.badge-gold { background: rgba(255,224,102,.3); }
.chip { border-radius: 6px; }

/* tables */
table.data th, table.data td { padding: 8px 10px; }
table.data th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--dim); background: var(--panel); border-bottom: 2px solid var(--text); }
table.data th.sortable:hover { color: var(--accent); }
table.data th.sorted-desc, table.data th.sorted-asc { color: var(--accent); }
table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-2) 45%, transparent); }
table.data tbody tr:hover { background: var(--accent-soft); }
table.data tr.highlight { background: rgba(255,224,102,.22); }
table.data.dense th, table.data.dense td { padding: 5px 7px; }
.table-scroll { border-radius: 10px; }
.pager { font-weight: 600; }
.pager .muted { white-space: nowrap; }
@media (max-width: 520px) { .pager { flex-wrap: wrap; gap: 6px; } .pager .muted { white-space: normal; text-align: center; } .pager .spacer { flex-basis: 100%; height: 0; } }

/* empty, notes, errors, loading */
.empty { padding: 40px 24px; border: 2px dashed var(--line); border-radius: 16px; background: repeating-linear-gradient(135deg, transparent 0 12px, var(--hover) 12px 13px); font-weight: 500; }
.empty::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--ball); opacity: .85; -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px); }
.note { border-radius: 12px; border-left: 4px solid var(--cerulean); }
.error { border-radius: 12px; border-left: 4px solid var(--coral); background: var(--accent-soft); }
.notice { border-radius: 12px; }
/* No backdrop blur: it is re-rasterised on every progress update and, without a GPU (software compositing), cost seconds of CPU during a big load. */
.loading { background: rgba(29,30,28,.72); }
.loading-box { border-radius: 20px; border-top: 6px solid transparent; border-image: var(--brand-gradient) 1; border-image-slice: 1; }
.progress { height: 10px; border-radius: 999px; }
.progress-bar { background: var(--brand-gradient); background-size: 420px 100%; border-radius: 999px; }
.tooltip { border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px 12px; border-top: 3px solid var(--coral); }

/* charts */
.chart text, svg.chart-svg text { font-family: var(--sans); }
.bar { height: 7px; border-radius: 999px; }
.bar-fill { border-radius: 999px; }
.legend-swatch { border-radius: 4px; }

/* landing hero */
.landing { padding-top: 40px; }
.hero { position: relative; padding: 38px 30px 34px; border-radius: 24px; color: #fff; overflow: hidden; background: var(--hero-bg); box-shadow: var(--shadow-lg); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brand-gradient); }
.hero h1 { font-size: clamp(34px, 7vw, 56px); line-height: 1; text-transform: uppercase; color: #fff; }
.hero .lede, .hero p { color: rgba(255,255,255,.86); }
.hero .muted { color: rgba(255,255,255,.7); }
.hero a { color: var(--gold-fill); }
.dropzone { border-radius: 20px; border-width: 2px; padding: 46px 20px; }
.dropzone:hover, .dropzone.over { border-color: var(--coral); }
.drop-icon { color: var(--coral); }
.drop-title { font-family: var(--display); font-weight: 900; font-size: 19px; }
.feature-tile { border-radius: 14px; border-top: 4px solid var(--coral); box-shadow: var(--shadow); }
.feature-tile:nth-child(5n+2) { border-top-color: var(--cerulean); }
.feature-tile:nth-child(5n+3) { border-top-color: var(--gold-fill); }
.feature-tile:nth-child(5n+4) { border-top-color: var(--teal); }
.feature-tile:nth-child(5n+5) { border-top-color: var(--charcoal); }
.ft-icon { color: var(--accent); }

/* home pieces */
.pcard { border-radius: 14px; border: 1px solid transparent; transition: border-color .15s, background .15s, transform .15s; }
.pcard:hover { border-color: var(--line); background: var(--panel-2); transform: translateY(-2px); }
.pcard .face { border-radius: 50%; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--line); }
.explore-item { border-radius: 12px; background: var(--panel-2); border-color: transparent; font-weight: 600; transition: border-color .15s, transform .15s; }
.explore-item:hover { border-color: var(--coral); transform: translateY(-1px); }
.now-strip { border-left: 0; border-top: 4px solid transparent; border-image: var(--brand-gradient) 1; }
.moment-text { font-size: 17px; font-weight: 500; }
.event-type { border-radius: 999px; font-weight: 700; }

/* stories and plaques pick up the serif */
.story { border-radius: var(--radius); border-left: 4px solid var(--coral); }
.story-title, .obit h3, .plaque-name { font-weight: 400; font-size: 20px; }

@media (max-width: 820px) {
	.topbar { padding: 0 10px; }
	.brand { font-size: 0; }
	.page { padding: 18px 16px 60px; }
	.page-header h1 { font-size: 26px; }
	.page-header.home-hero { padding: 24px 18px 28px; border-radius: 16px; }
	.tabs { width: auto; border-radius: 14px; }
	.sidebar a.active::before { left: -10px; }
	.hero { padding: 28px 20px 26px; border-radius: 18px; }
	.card { padding: 14px 14px; }
	.stat { min-width: 0; flex: 1 1 calc(50% - 10px); }
}

/* UI chrome in Caviar Dreams Bold; data tables in a system face with tabular digits */
.sidebar a, .btn, .tab, .ui-seg-btn, .chipbtn, .badge, .crumbs, .stat-label, .nav-title + a, .league-chip, select, input, .topbar .search-box input, .pager, .event-type, .legend { font-family: var(--ui); font-weight: 700; }
.nav-title { font-family: var(--display); }
table.data { font-family: var(--data); font-size: 14px; }
table.data th { font-family: var(--ui); }
.num, .rating { font-family: var(--data); font-variant-numeric: tabular-nums; }
.stat-value.num, .stat-value .num { font-family: var(--score); }
.topbar .muted, .topbar .league-chip * { color: var(--topbar-dim); }
.topbar .league-chip a, .topbar .league-chip strong { color: #fff; }

/* ---- alternate palettes ----------------------------------------------------------
   data-palette on <html> (set by app.js, stored separately from light/dark/auto).
   Courtside is the default (no attribute or "courtside"). Each palette sets the full
   token set; its dark block uses one more attribute so it outranks the light block.
   Fill slots keep their Courtside names: --coral = primary fill, --cerulean = secondary,
   --teal = tertiary, --gold-fill = highlight, --charcoal = neutral dark. Cards (cards.css)
   are not affected. */

/* Evergreen: evergreen #0A210F, dark-spruce #14591D, lime-moss #99AA38, pale-amber #E1E289, icy-blue #ACD2ED */
:root[data-palette="evergreen"] {
	--coral: #14591D; --gold-fill: #E1E289; --cerulean: #4F86B0; --teal: #99AA38; --charcoal: #0A210F;
	--brand-gradient: linear-gradient(90deg, #0A210F, #14591D, #99AA38, #E1E289, #ACD2ED);
	--bg: #f3f5ec; --panel: #fcfdf8; --panel-2: #e9eedd; --line: #d4dcc4;
	--text: #0f2414; --dim: #4b5b4d; --accent: #14591D; --accent-soft: rgba(20, 89, 29, .12);
	--link: #2a5f86; --good: #14591D; --bad: #a8322a; --warn: #6b6500; --gold: #6e6200;
	--r-elite: #14591D; --r-good: #2a5f86; --r-ok: #6e6200; --r-meh: #9a5512; --r-bad: #a8322a;
	--shadow: 0 1px 2px rgba(10, 33, 15, .08), 0 4px 16px rgba(10, 33, 15, .06);
	--hover: rgba(10, 33, 15, .06); --chip: rgba(10, 33, 15, .09);
	--topbar-bg: #0A210F; --topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .74);
	--on-accent: #ffffff;
	--fr-heat-lo: #b5532e; --fr-heat-hi: #14591D;
	--hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(172,210,237,.38), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(153,170,56,.5), transparent 60%), #0f2f16;
	--ball: conic-gradient(from 200deg, #14591D, #99AA38, #E1E289, #ACD2ED, #14591D);
}
:root[data-palette="evergreen"][data-theme="dark"] {
	--coral: #99AA38; --cerulean: #ACD2ED; --teal: #4f9a5a; --charcoal: #E1E289;
	--bg: #08180b; --panel: #0f2414; --panel-2: #163019; --line: #284430;
	--text: #edf2e2; --dim: #a9b8a5; --accent: #b3c44c; --accent-soft: rgba(153, 170, 56, .2);
	--link: #ACD2ED; --good: #a9c95a; --bad: #f59d93; --warn: #E1E289; --gold: #E1E289;
	--r-elite: #a9c95a; --r-good: #ACD2ED; --r-ok: #E1E289; --r-meh: #f0a868; --r-bad: #f08a7e;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .22);
	--hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09);
	--topbar-bg: #051007; --on-accent: #0A210F;
	--fr-heat-lo: #e0805f; --fr-heat-hi: #99AA38;
}
@media (prefers-color-scheme: dark) {
	:root[data-palette="evergreen"]:not([data-theme="light"]) {
		--coral: #99AA38; --cerulean: #ACD2ED; --teal: #4f9a5a; --charcoal: #E1E289;
		--bg: #08180b; --panel: #0f2414; --panel-2: #163019; --line: #284430;
		--text: #edf2e2; --dim: #a9b8a5; --accent: #b3c44c; --accent-soft: rgba(153, 170, 56, .2);
		--link: #ACD2ED; --good: #a9c95a; --bad: #f59d93; --warn: #E1E289; --gold: #E1E289;
		--r-elite: #a9c95a; --r-good: #ACD2ED; --r-ok: #E1E289; --r-meh: #f0a868; --r-bad: #f08a7e;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .22);
		--hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09);
		--topbar-bg: #051007; --on-accent: #0A210F;
		--fr-heat-lo: #e0805f; --fr-heat-hi: #99AA38;
	}
}

/* Graphite: alabaster-grey #CFDBD5, soft-linen #E8EDDF, tuscan-sun #F5CB5C, carbon-black #242423, graphite #333533 */
:root[data-palette="graphite"] {
	--coral: #F5CB5C; --gold-fill: #F5CB5C; --cerulean: #333533; --teal: #9fb3a9; --charcoal: #242423;
	--brand-gradient: linear-gradient(90deg, #CFDBD5, #E8EDDF, #F5CB5C, #242423, #333533);
	--bg: #E8EDDF; --panel: #f8faf4; --panel-2: #dfe7e2; --line: #c6d1cb;
	--text: #242423; --dim: #4e514d; --accent: #7a5800; --accent-soft: rgba(245, 203, 92, .28);
	--link: #35574a; --good: #275e3d; --bad: #a3312b; --warn: #745500; --gold: #745500;
	--r-elite: #2d6a45; --r-good: #35574a; --r-ok: #745500; --r-meh: #9a4f16; --r-bad: #a3312b;
	--shadow: 0 1px 2px rgba(36, 36, 35, .08), 0 4px 16px rgba(36, 36, 35, .06);
	--hover: rgba(36, 36, 35, .06); --chip: rgba(36, 36, 35, .09);
	--topbar-bg: #242423; --topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .72);
	--on-accent: #ffffff;
	--fr-heat-lo: #a3312b; --fr-heat-hi: #3f6e5c;
	--hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(245,203,92,.42), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(207,219,213,.22), transparent 60%), #2a2b29;
	--ball: conic-gradient(from 200deg, #F5CB5C, #E8EDDF, #CFDBD5, #333533, #F5CB5C);
}
:root[data-palette="graphite"][data-theme="dark"] {
	--teal: #CFDBD5; --cerulean: #8fa69a; --charcoal: #CFDBD5;
	--brand-gradient: linear-gradient(90deg, #333533, #CFDBD5, #E8EDDF, #F5CB5C, #CFDBD5);
	--bg: #1c1c1b; --panel: #242423; --panel-2: #333533; --line: #44463f;
	--text: #E8EDDF; --dim: #b3bbb5; --accent: #F5CB5C; --accent-soft: rgba(245, 203, 92, .18);
	--link: #CFDBD5; --good: #9fd1a8; --bad: #f59d93; --warn: #F5CB5C; --gold: #F5CB5C;
	--r-elite: #9fd1a8; --r-good: #b6d0e0; --r-ok: #F5CB5C; --r-meh: #f0a868; --r-bad: #f08a7e;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .22);
	--hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09);
	--topbar-bg: #121211; --on-accent: #242423;
	--fr-heat-lo: #e07a6f; --fr-heat-hi: #F5CB5C;
}
@media (prefers-color-scheme: dark) {
	:root[data-palette="graphite"]:not([data-theme="light"]) {
		--teal: #CFDBD5; --cerulean: #8fa69a; --charcoal: #CFDBD5;
		--brand-gradient: linear-gradient(90deg, #333533, #CFDBD5, #E8EDDF, #F5CB5C, #CFDBD5);
		--bg: #1c1c1b; --panel: #242423; --panel-2: #333533; --line: #44463f;
		--text: #E8EDDF; --dim: #b3bbb5; --accent: #F5CB5C; --accent-soft: rgba(245, 203, 92, .18);
		--link: #CFDBD5; --good: #9fd1a8; --bad: #f59d93; --warn: #F5CB5C; --gold: #F5CB5C;
		--r-elite: #9fd1a8; --r-good: #b6d0e0; --r-ok: #F5CB5C; --r-meh: #f0a868; --r-bad: #f08a7e;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .22);
		--hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09);
		--topbar-bg: #121211; --on-accent: #242423;
		--fr-heat-lo: #e07a6f; --fr-heat-hi: #F5CB5C;
	}
}

/* ---- fixed-mode palettes ------------------------------------------------------
   Each of these is designed for one mode; app.js (and the head script) force
   data-theme to that mode while it is active, so every other stylesheet sees a
   consistent light/dark. Specificity ties with the default dark block and wins by order. */
/* Harbor (light, forces data-theme="light"): #2274a5 #e7dfc6 #e9f1f7 #131b23 #816c61 */
:root[data-palette="harbor"] {
	color-scheme: light;
	--coral: #2274a5; --gold-fill: #e7dfc6; --cerulean: #816c61; --teal: #7fb0d0;
	--charcoal: #131b23; --brand-gradient: linear-gradient(90deg, #131b23, #2274a5, #e9f1f7, #e7dfc6, #816c61); --bg: #e9f1f7; --panel: #f8fbfd;
	--panel-2: #efe9d8; --line: #cdd9e3; --text: #131b23; --dim: #5a4b43;
	--accent: #1b6390; --accent-soft: rgba(34, 116, 165, .13); --link: #1b6390; --good: #1d6b45;
	--bad: #a8302a; --warn: #765600; --gold: #765600; --r-elite: #1d6b45;
	--r-good: #1b6390; --r-ok: #765600; --r-meh: #94501a; --r-bad: #a8302a;
	--shadow: 0 1px 2px rgba(19, 27, 35, .08), 0 4px 16px rgba(19, 27, 35, .06); --hover: rgba(19, 27, 35, .06); --chip: rgba(129, 108, 97, .14); --topbar-bg: #131b23;
	--topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .74); --on-accent: #ffffff; --fr-heat-lo: #816c61;
	--fr-heat-hi: #2274a5; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(34,116,165,.6), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(231,223,198,.35), transparent 60%), #131b23; --ball: conic-gradient(from 200deg, #2274a5, #e9f1f7, #e7dfc6, #816c61, #2274a5);
}

/* Forest Fire (dark, forces data-theme="dark"): #034732 #008148 #c6c013 #ef8a17 #ef2917 */
:root[data-palette="forestfire"] {
	color-scheme: dark;
	--coral: #ef8a17; --gold-fill: #c6c013; --cerulean: #008148; --teal: #c6c013;
	--charcoal: #ef2917; --brand-gradient: linear-gradient(90deg, #034732, #008148, #c6c013, #ef8a17, #ef2917); --bg: #02301f; --panel: #034732;
	--panel-2: #08503a; --line: #1f6a50; --text: #f5f3e6; --dim: #bcd0c3;
	--accent: #f8a64e; --accent-soft: rgba(239, 138, 23, .18); --link: #e2dc4a; --good: #5fd894;
	--bad: #ffa092; --warn: #e2dc4a; --gold: #e2dc4a; --r-elite: #5fd894;
	--r-good: #9fd8f0; --r-ok: #e2dc4a; --r-meh: #f8b062; --r-bad: #ffa092;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .22); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-bg: #011f15;
	--topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .74); --on-accent: #02301f; --fr-heat-lo: #ef2917;
	--fr-heat-hi: #c6c013; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(239,138,23,.5), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(0,129,72,.6), transparent 60%), #022519; --ball: conic-gradient(from 200deg, #ef2917, #ef8a17, #c6c013, #008148, #ef2917);
}

/* Amethyst (dark, forces data-theme="dark"): #42033d #680e4b #7c238c #854798 #7c72a0 */
:root[data-palette="amethyst"] {
	color-scheme: dark;
	--coral: #a565ba; --gold-fill: #d9b8e6; --cerulean: #7c72a0; --teal: #7c238c;
	--charcoal: #680e4b; --brand-gradient: linear-gradient(90deg, #42033d, #680e4b, #7c238c, #854798, #7c72a0); --bg: #1d0a1c; --panel: #2b0d29;
	--panel-2: #3b1438; --line: #57285a; --text: #f6eef7; --dim: #c9b9d1;
	--accent: #d2a6e3; --accent-soft: rgba(133, 71, 152, .28); --link: #bdb5e6; --good: #8fdcae;
	--bad: #ff8fa8; --warn: #f2c66d; --gold: #f2c66d; --r-elite: #8fdcae;
	--r-good: #bdb5e6; --r-ok: #f2c66d; --r-meh: #f5a56e; --r-bad: #ff8fa8;
	--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-bg: #42033d;
	--topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .76); --on-accent: #1d0a1c; --fr-heat-lo: #680e4b;
	--fr-heat-hi: #a99fd0; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(133,71,152,.65), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(104,14,75,.7), transparent 60%), #24061f; --ball: conic-gradient(from 200deg, #680e4b, #7c238c, #854798, #7c72a0, #680e4b);
}

/* Arcade (dark, forces data-theme="dark"): #2274a5 #f75c03 #f1c40f #d90368 #00cc66 */
:root[data-palette="arcade"] {
	color-scheme: dark;
	--coral: #f75c03; --gold-fill: #f1c40f; --cerulean: #2274a5; --teal: #00cc66;
	--charcoal: #d90368; --brand-gradient: linear-gradient(90deg, #2274a5, #00cc66, #f1c40f, #f75c03, #d90368); --bg: #0f131b; --panel: #171d28;
	--panel-2: #212937; --line: #323c4d; --text: #f2f4f8; --dim: #b1b9c7;
	--accent: #ff8a47; --accent-soft: rgba(247, 92, 3, .2); --link: #6db8ea; --good: #2ee088;
	--bad: #ff5fa2; --warn: #f1c40f; --gold: #f1c40f; --r-elite: #2ee088;
	--r-good: #6db8ea; --r-ok: #f1c40f; --r-meh: #ff8a47; --r-bad: #ff5fa2;
	--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-bg: #090c12;
	--topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .74); --on-accent: #0f131b; --fr-heat-lo: #d90368;
	--fr-heat-hi: #00cc66; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(34,116,165,.7), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(217,3,104,.55), transparent 60%), #0c1018; --ball: conic-gradient(from 200deg, #f75c03, #f1c40f, #00cc66, #2274a5, #d90368, #f75c03);
}

/* Lagoon (dark, forces data-theme="dark"): #71f79f #3dd6d0 #15b097 #513c2c #28190e */
:root[data-palette="lagoon"] {
	color-scheme: dark;
	--coral: #3dd6d0; --gold-fill: #71f79f; --cerulean: #15b097; --teal: #71f79f;
	--charcoal: #513c2c; --brand-gradient: linear-gradient(90deg, #28190e, #513c2c, #15b097, #3dd6d0, #71f79f); --bg: #1c1209; --panel: #28190e;
	--panel-2: #38281b; --line: #513c2c; --text: #f4ede4; --dim: #c8b8a6;
	--accent: #3dd6d0; --accent-soft: rgba(61, 214, 208, .15); --link: #71f79f; --good: #71f79f;
	--bad: #ff8f7a; --warn: #f2cf6d; --gold: #f2cf6d; --r-elite: #71f79f;
	--r-good: #3dd6d0; --r-ok: #f2cf6d; --r-meh: #f5a56e; --r-bad: #ff8f7a;
	--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-bg: #140c05;
	--topbar-text: #ffffff; --topbar-dim: rgba(255, 255, 255, .74); --on-accent: #1c1209; --fr-heat-lo: #ff8f7a;
	--fr-heat-hi: #3dd6d0; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(61,214,208,.45), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(21,176,151,.4), transparent 60%), #28190e; --ball: conic-gradient(from 200deg, #15b097, #3dd6d0, #71f79f, #513c2c, #15b097);
}

/* Slate Sage (light, forces data-theme="light"): #384d48 #6e7271 #acad94 #d8d4d5 #e2e2e2 */
:root[data-palette="slatesage"] {
	color-scheme: light;
	--shadow: 0 1px 2px rgba(56, 77, 72, .08), 0 4px 16px rgba(56, 77, 72, .06); --hover: rgba(56, 77, 72, .06); --chip: rgba(56, 77, 72, .09); --topbar-text: #ffffff;
	--topbar-dim: rgba(255, 255, 255, .74); --on-accent: #ffffff; --coral: #384d48; --gold-fill: #acad94;
	--cerulean: #6e7271; --teal: #acad94; --charcoal: #384d48; --brand-gradient: linear-gradient(90deg, #384d48, #6e7271, #acad94, #d8d4d5, #e2e2e2);
	--bg: #e2e2e2; --panel: #f4f4f2; --panel-2: #d8d4d5; --line: #c4c2bd;
	--text: #1f2a27; --dim: #4a4e4d; --accent: #384d48; --accent-soft: rgba(56, 77, 72, .13);
	--link: #2f5a63; --good: #2c5a35; --bad: #9a2e28; --warn: #5f5300;
	--gold: #5f5300; --r-elite: #2c5a35; --r-good: #2f5a63; --r-ok: #5f5300;
	--r-meh: #874814; --r-bad: #9a2e28; --topbar-bg: #384d48; --fr-heat-lo: #9a5a4a;
	--fr-heat-hi: #384d48; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(172,173,148,.5), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(110,114,113,.5), transparent 60%), #2c3c38; --ball: conic-gradient(from 200deg, #384d48, #6e7271, #acad94, #d8d4d5, #384d48);
}

/* Inferno (dark, forces data-theme="dark"): #fcba04 #a50104 #590004 #250001 #f3f3f3 */
:root[data-palette="inferno"] {
	color-scheme: dark;
	--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-text: #ffffff;
	--topbar-dim: rgba(255, 255, 255, .74); --coral: #a50104; --gold-fill: #fcba04; --cerulean: #e0503a;
	--teal: #fcba04; --charcoal: #590004; --brand-gradient: linear-gradient(90deg, #250001, #590004, #a50104, #fcba04, #f3f3f3); --bg: #190001;
	--panel: #250001; --panel-2: #3a0805; --line: #5a1a14; --text: #f3f3f3;
	--dim: #cdbdb8; --accent: #fcba04; --accent-soft: rgba(252, 186, 4, .16); --link: #ffd25a;
	--good: #9fdc7a; --bad: #ff8a80; --warn: #fcba04; --gold: #fcba04;
	--r-elite: #9fdc7a; --r-good: #ffd25a; --r-ok: #fcba04; --r-meh: #ffa060;
	--r-bad: #ff8a80; --topbar-bg: #590004; --on-accent: #250001; --fr-heat-lo: #a50104;
	--fr-heat-hi: #fcba04; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(252,186,4,.45), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(165,1,4,.7), transparent 60%), #250001; --ball: conic-gradient(from 200deg, #a50104, #fcba04, #f3f3f3, #590004, #a50104);
}

/* Celadon (dark, forces data-theme="dark"): #a5d0a8 #8cada7 #110b11 #b7990d #f2f4cb */
:root[data-palette="celadon"] {
	color-scheme: dark;
	--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-text: #ffffff;
	--topbar-dim: rgba(255, 255, 255, .74); --coral: #a5d0a8; --gold-fill: #b7990d; --cerulean: #8cada7;
	--teal: #a5d0a8; --charcoal: #f2f4cb; --brand-gradient: linear-gradient(90deg, #110b11, #8cada7, #a5d0a8, #f2f4cb, #b7990d); --bg: #110b11;
	--panel: #1c151c; --panel-2: #282028; --line: #3d343d; --text: #f2f4cb;
	--dim: #c2c4a8; --accent: #a5d0a8; --accent-soft: rgba(165, 208, 168, .15); --link: #a5d0d0;
	--good: #a5d0a8; --bad: #f59d93; --warn: #d9bb30; --gold: #d9bb30;
	--r-elite: #a5d0a8; --r-good: #8fc0d0; --r-ok: #d9bb30; --r-meh: #f0a868;
	--r-bad: #f59d93; --topbar-bg: #0a060a; --on-accent: #110b11; --fr-heat-lo: #d9776a;
	--fr-heat-hi: #a5d0a8; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(140,173,167,.45), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(183,153,13,.4), transparent 60%), #110b11; --ball: conic-gradient(from 200deg, #a5d0a8, #8cada7, #f2f4cb, #b7990d, #a5d0a8);
}

/* Seafoam (light, forces data-theme="light"): #7c7287 #9dc0bc #b2edc5 #baffdf #c1fff2 */
:root[data-palette="seafoam"] {
	color-scheme: light;
	--shadow: 0 1px 2px rgba(61, 53, 70, .08), 0 4px 16px rgba(61, 53, 70, .06); --hover: rgba(61, 53, 70, .06); --chip: rgba(61, 53, 70, .09); --topbar-text: #ffffff;
	--topbar-dim: rgba(255, 255, 255, .74); --on-accent: #ffffff; --coral: #7c7287; --gold-fill: #baffdf;
	--cerulean: #9dc0bc; --teal: #b2edc5; --charcoal: #3d3546; --brand-gradient: linear-gradient(90deg, #7c7287, #9dc0bc, #b2edc5, #baffdf, #c1fff2);
	--bg: #eefcf6; --panel: #fbfffd; --panel-2: #ddf5ea; --line: #bfe0d4;
	--text: #2a2433; --dim: #564d61; --accent: #5d5269; --accent-soft: rgba(124, 114, 135, .15);
	--link: #2d6662; --good: #22663f; --bad: #9e2f3a; --warn: #6a5800;
	--gold: #6a5800; --r-elite: #22663f; --r-good: #2d6662; --r-ok: #6a5800;
	--r-meh: #8f4c14; --r-bad: #9e2f3a; --topbar-bg: #4a4256; --fr-heat-lo: #7c7287;
	--fr-heat-hi: #3a9a8a; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(157,192,188,.55), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(178,237,197,.35), transparent 60%), #4a4256; --ball: conic-gradient(from 200deg, #7c7287, #9dc0bc, #b2edc5, #c1fff2, #7c7287);
}

/* Primary (light, forces data-theme="light"): #fdfffc #235789 #c1292e #f1d302 #020100 */
:root[data-palette="primary"] {
	color-scheme: light;
	--shadow: 0 1px 2px rgba(2, 1, 0, .08), 0 4px 16px rgba(2, 1, 0, .06); --hover: rgba(2, 1, 0, .06); --chip: rgba(2, 1, 0, .09); --topbar-text: #ffffff;
	--topbar-dim: rgba(255, 255, 255, .74); --on-accent: #ffffff; --coral: #c1292e; --gold-fill: #f1d302;
	--cerulean: #235789; --teal: #f1d302; --charcoal: #020100; --brand-gradient: linear-gradient(90deg, #020100, #235789, #fdfffc, #f1d302, #c1292e);
	--bg: #f4f5f0; --panel: #fdfffc; --panel-2: #ebede4; --line: #d6d8cf;
	--text: #020100; --dim: #4a4a46; --accent: #235789; --accent-soft: rgba(35, 87, 137, .12);
	--link: #235789; --good: #1f6a3a; --bad: #b0252a; --warn: #6a5c00;
	--gold: #6a5c00; --r-elite: #1f6a3a; --r-good: #235789; --r-ok: #6a5c00;
	--r-meh: #924a10; --r-bad: #b0252a; --topbar-bg: #020100; --fr-heat-lo: #c1292e;
	--fr-heat-hi: #235789; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(35,87,137,.7), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(193,41,46,.55), transparent 60%), #0e0e0c; --ball: conic-gradient(from 200deg, #c1292e, #f1d302, #235789, #020100, #c1292e);
}

/* Neon Night (dark, forces data-theme="dark"): #0a1045 #00c2d1 #f9e900 #f6af65 #ed33b9 */
:root[data-palette="neonnight"] {
	color-scheme: dark;
	--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .25); --hover: rgba(255, 255, 255, .06); --chip: rgba(255, 255, 255, .09); --topbar-text: #ffffff;
	--topbar-dim: rgba(255, 255, 255, .74); --coral: #ed33b9; --gold-fill: #f9e900; --cerulean: #00c2d1;
	--teal: #f6af65; --charcoal: #0a1045; --brand-gradient: linear-gradient(90deg, #0a1045, #00c2d1, #f9e900, #f6af65, #ed33b9); --bg: #070b33;
	--panel: #0a1045; --panel-2: #151c58; --line: #28307a; --text: #f2f4ff;
	--dim: #b6bce0; --accent: #00c2d1; --accent-soft: rgba(0, 194, 209, .16); --link: #5fe0ea;
	--good: #5fe0a0; --bad: #ff7ad6; --warn: #f9e900; --gold: #f9e900;
	--r-elite: #5fe0a0; --r-good: #5fe0ea; --r-ok: #f9e900; --r-meh: #f6af65;
	--r-bad: #ff7ad6; --topbar-bg: #050826; --on-accent: #070b33; --fr-heat-lo: #ed33b9;
	--fr-heat-hi: #00c2d1; --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(0,194,209,.5), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(237,51,185,.5), transparent 60%), #0a1045; --ball: conic-gradient(from 200deg, #00c2d1, #f9e900, #f6af65, #ed33b9, #00c2d1);
}

/* ---- theme picker ------------------------------------------------------------- */
.theme-picker { position: relative; }
.theme-pop {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 248px; max-width: calc(100vw - 24px);
	background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-lg); padding: 12px;
}
.theme-pop fieldset { border: 0; margin: 0 0 10px; padding: 0; }
.theme-pop fieldset:last-child { margin-bottom: 0; }
.theme-pop legend { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; padding: 0 0 6px; }
.theme-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; min-height: 40px; }
.theme-opt:hover { background: var(--hover); }
.theme-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.theme-opt:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 1px; }
.theme-swatch { display: flex; height: 18px; width: 70px; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: 0 0 auto; }
.theme-swatch i { flex: 1; }
.theme-pop { max-height: calc(100vh - var(--topH) - 24px); overflow-y: auto; }
.theme-pop.mode-fixed .theme-modes::after { content: "This palette sets its own mode; pick a mode to return to Courtside."; grid-column: 1 / -1; font-size: 11px; color: var(--dim); }
.theme-pop { width: 300px; }
.theme-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.theme-pals .theme-opt { padding: 5px 6px; gap: 6px; min-height: 34px; font-size: 13px; }
.theme-pals .theme-swatch { width: 34px; height: 14px; }
.theme-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.theme-modes .theme-opt { justify-content: center; padding: 6px 4px; font-size: 13px; }

/* Version dialog (app.js askDialog): newer / older export of a saved league. */
.ask-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.ask-dialog { max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, .35); }
.ask-dialog h2 { margin: 0 0 10px; font-size: 1.2rem; }
.ask-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Programmatic focus on a new page's heading / the main region (App.focusPage): no ring around it. */
/* Only the page container and headings that App.focusPage focuses lose the ring; roving-tabindex widgets
   (tabindex=-1 cells that arrow keys focus) keep a visible keyboard focus. */
#view:focus, #view h1[tabindex="-1"]:focus, #view .page-header[tabindex="-1"]:focus, #view main[tabindex="-1"]:focus, #view .page[tabindex="-1"]:focus { outline: none; }
#view [tabindex="-1"]:focus-visible:not(h1):not(h2):not(.page-header):not(.page):not(main) { outline: 2px solid var(--accent); outline-offset: 2px; }
#loading-cancel { margin-top: 12px; }

/* Notices sit above the page: line them up with the page column and keep them short on phones. */
#view > .notices { margin: 0; padding: 14px 28px 0; max-width: 1400px; }
#view > .notices + .page { padding-top: 16px; }
.notice-close { width: 28px; height: 28px; font-size: 15px; line-height: 1; padding: 0; }
@media (max-width: 820px) {
	#view > .notices { padding: 10px 16px 0; }
	#view > .notices + .page { padding-top: 12px; }
	.notice { padding: 6px 36px 6px 10px; font-size: 0.82rem; line-height: 1.35; gap: 6px; }
	.notice-text { flex-basis: 100%; }
	.notice .btn.small { padding: 4px 10px; font-size: 0.8rem; }
	.notice-check { font-size: 0.78rem; }
}
@media (max-width: 520px) {
	.page-header.home-hero .btn { padding: 6px 12px; font-size: 14px; }
}
.search-item.search-head, .search-item.search-head:hover { background: none; cursor: default; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 0.7rem; padding-bottom: 2px; }

/* Slow cold route: a thin indeterminate bar under the top edge until the page renders. */
.route-loading { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 900; overflow: hidden; pointer-events: none; background: transparent; }
.route-loading::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent); border-radius: 2px; animation: route-slide 1s ease-in-out infinite; }
@keyframes route-slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .route-loading::after { animation: none; left: 0; width: 100%; opacity: .5; } }

/* Logo attribution (sidebar foot and theme menu). */
.nav-credit, .theme-credit { margin: 10px 0 0; font-size: 11px; line-height: 1.35; color: var(--dim); }
.nav-credit { padding: 10px 12px 0; border-top: 1px solid var(--line); }
.sidebar .nav-credit a { display: inline; padding: 0; margin: 0; font: inherit; font-weight: 400; color: var(--dim); border-radius: 0; }
.nav-credit a:hover, .theme-credit a:hover { color: var(--text); text-decoration: underline; background: none; }
.theme-credit a { color: var(--dim); }
.nav-credit p, .theme-credit p { margin: 0 0 6px; }
/* Sources & attribution (#/sources) */
.src-table { width: 100%; table-layout: fixed; }
.src-table th:nth-child(1) { width: 28%; } .src-table th:nth-child(2) { width: 22%; }
table.data.src-table td, table.data.src-table th { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
@media (max-width: 600px) {
	.src-table, .src-table tbody { display: block; width: 100%; }
	.src-table thead { display: none; }
	.src-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
	table.data.src-table td { display: block; padding: 2px 0; border: 0; }
}
.src-table a, .src-table td * { white-space: normal; overflow-wrap: anywhere; }