/* =========================================================================
   Flathead Baseball — main stylesheet (v0.3)
   Register: plain-spoken and left-aligned, patterned on electdugan.com
   (the commissioner's own site): flat dark blocks, sentence case, one
   heading face, framed photos with captions, a single accent color.
   FAMBL's palette comes from the league logo: spruce, glacier sky,
   marigold. One signature element: the outfield-wall CTA strip.

   Contrast notes (AA-checked):
     white on spruce #14342E        ≈ 13.9:1
     marigold #E5A33D on spruce     ≈ 6.1:1
     sky #79BFC6 on spruce          ≈ 6.5:1
     ink #23312B on white           ≈ 13.5:1
     moss #5A6963 on white          ≈ 5.6:1
     spruce-deep on marigold        ≈ 6.6:1
   ========================================================================= */

/* ---------- Heading face (body text is the system stack) -----------------
   Libre Franklin: the Franklin Gothic lineage — newspaper sports-section
   headlines, set in sentence case. */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/libre-franklin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/libre-franklin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/libre-franklin-800.woff2') format('woff2');
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
	--c-spruce: #14342E;
	--c-spruce-deep: #0D241F;
	--c-peak: #1E3A5F;
	--c-sky: #79BFC6;
	--c-mint: #EDF4F0;
	--c-white: #FFFFFF;
	--c-ink: #23312B;
	--c-moss: #5A6963;
	--c-marigold: #E5A33D;
	--c-marigold-deep: #B97F24;
	--c-line: #E3E7E4;

	/* Weekly-award accents (approved icon design handoff, 2026-07): gold =
	   Hitter/home-plate, slate-blue = Pitcher/baseball. */
	--award-gold: #a9762a; --award-gold-deep: #8a5f20; --award-gold-tint: #f4ead6;
	--award-blue: #3d6f80; --award-blue-deep: #356070; --award-blue-tint: #e3edf0;
	--c-dirt: #A6462A; /* warning-track red clay */
	--c-foul: #EDD84A; /* foul-pole yellow */
	--c-sign-blue: #2E6FB0;
	--c-sign-red: #C24B3E;

	--font-head: 'Libre Franklin', 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	--radius: 8px;
	--shadow: 0 2px 12px rgba(20, 52, 46, 0.07);
}

/* ---------- Reset-lite ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p, ul, ol, dl { margin: 0 0 1em; }

a { color: var(--c-peak); text-underline-offset: 2px; }
a:hover { color: var(--c-marigold-deep); }

/* Visible focus everywhere — WCAG 2.4.7 / 2.4.11 */
:focus-visible {
	outline: 3px solid var(--c-marigold-deep);
	outline-offset: 2px;
	border-radius: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.team-hero :focus-visible,
.page-hero :focus-visible {
	outline-color: var(--c-sky);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Utilities ------------------------------------------------------ */
.container {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section-alt { background: var(--c-mint); }
.section-pad-bottom { padding-bottom: clamp(2.75rem, 6vw, 4.5rem); }


.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--radius);
}

.fine-print { color: var(--c-moss); font-size: 0.9rem; }

/* "E — name" fielding-error footnote under the box score. */
.boxscore-errors { color: var(--c-moss); font-size: 0.92rem; margin: 0.25rem 0 0.75rem; }
.boxscore-errors strong { letter-spacing: 0.03em; }

.text-link { font-weight: 700; }

.prose { max-width: 68ch; }
.prose img { border-radius: var(--radius); }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
	display: inline-block;
	padding: 0.75rem 1.4rem;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: 6px;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--c-marigold); color: var(--c-spruce-deep); }
.btn-primary:hover { background: var(--c-marigold-deep); color: var(--c-white); }

.btn-secondary { background: transparent; color: var(--c-ink); border-color: currentColor; }
.btn-secondary:hover { color: var(--c-marigold-deep); }
.btn-on-dark { color: var(--c-white); }
.btn-on-dark:hover { color: var(--c-sky); }

.btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }

/* ---------- Header --------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 0px,
			rgba(255, 255, 255, 0.035) 2px,
			transparent 2px,
			transparent 110px
		),
		var(--c-spruce-deep);
	color: var(--c-white);
	/* Painted home-run line along the top rail. */
	border-top: 4px solid var(--c-marigold);
}
.header-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 64px;
	flex-wrap: wrap;
	padding-block: 0.4rem;
}

.site-branding {
	margin-right: auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.site-branding .custom-logo { max-height: 64px; width: auto; }
.site-title {
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.15;
	max-width: 15ch;
	color: var(--c-white);
	text-decoration: none;
}

/* Mobile menu button */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }

/* Mobile nav panel */
.primary-nav {
	display: none;
	flex-basis: 100%;
	padding-block: 0.5rem 1rem;
}
.primary-nav.is-open { display: block; }

.primary-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav .menu a {
	display: block;
	padding: 0.7rem 0.25rem;
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.primary-nav .menu a:hover,
.primary-nav .menu .current-menu-item > a,
.primary-nav .menu a[aria-current='page'] {
	color: var(--c-marigold);
}
.nav-cta { padding-top: 1rem; }

.header-cta { display: none; }
@media (min-width: 480px) {
	.header-cta { display: block; }
}

/* Nav submenus (Schedule → RSVP). Mobile: an indented run of the same
   stacked list. Desktop: a small spruce dropdown on hover, kept open for
   keyboard users via :focus-within. The parent link still navigates —
   touch users land on the schedule page, which carries its own RSVP
   button, so nothing is hover-only. */
.menu-item-has-children > a::after {
	content: ' ▾';
	font-size: 0.75em;
	opacity: 0.7;
}
.primary-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.1rem;
}

/* Desktop nav */
@media (min-width: 920px) {
	.nav-toggle { display: none; }
	.primary-nav {
		display: block;
		flex-basis: auto;
		padding: 0;
	}
	.primary-nav .menu {
		display: flex;
		gap: 0.25rem;
	}
	.primary-nav .menu a {
		padding: 0.6rem 0.5rem;
		font-size: 0.9rem;
		border-bottom: 0;
		border-radius: 6px;
	}
	.primary-nav .menu a:hover { background: rgba(255, 255, 255, 0.12); color: var(--c-white); }
	.primary-nav .menu .current-menu-item > a,
	.primary-nav .menu a[aria-current='page'] {
		box-shadow: inset 0 -3px 0 var(--c-marigold);
		color: var(--c-white);
	}
	/* Desktop dropdown: attached flush under the parent item (no hover gap). */
	.primary-nav .menu .menu-item-has-children { position: relative; }
	.primary-nav .menu .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 110;
		min-width: 10rem;
		padding: 0.3rem;
		background: var(--c-spruce-deep);
		border-radius: 6px;
		box-shadow: 0 10px 24px rgba(13, 36, 31, 0.35);
	}
	.primary-nav .menu .menu-item-has-children:hover .sub-menu,
	.primary-nav .menu .menu-item-has-children:focus-within .sub-menu { display: block; }
	.primary-nav .menu .sub-menu a { display: block; }
	.primary-nav .menu .sub-menu a:hover { background: var(--c-spruce); }
	.nav-cta { display: none; }
	/* The name beside the badge carries readability; the badge just needs presence. */
	.site-branding .custom-logo { max-height: 76px; }
	.site-title { font-size: 1.05rem; }
}

/* ---------- Hero: full-bleed photo, text on the quiet side ---------------- */
.hero {
	background: var(--c-spruce);
	background-size: cover;
	background-position: center;
	color: var(--c-white);
	position: relative;
}
/* Shade is heaviest behind the text and eases off across the photo. */
.hero.has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(13, 36, 31, 0.88) 0%, rgba(13, 36, 31, 0.6) 55%, rgba(13, 36, 31, 0.3) 100%);
}
.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 660px;
	padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero-kicker {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-sky);
	margin-bottom: 1rem;
}
.hero-title {
	color: var(--c-white);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-bottom: 0.4em;
}
.hero-title .hero-accent { color: var(--c-marigold); }
.hero-sub {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.94);
	max-width: 52ch;
}
/* Links in the hero (e.g. the MSBL/MABL link) need a bright color and underline
   to read against the dark photo — the default link navy disappears there. */
.hero a:not(.btn) {
	color: var(--c-marigold);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hero a:not(.btn):hover { color: var(--c-white); }
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* "Join our Discord": a secondary action under the signup, centered to the
   form's width so it lines up beneath the submit button. */
.hero-discord {
	margin: 1.5rem 0 0;
}
/* Secondary "Score a game" prompt under the signup — a white ghost button so it
   reads on the photo without competing with the marigold primary action. */
.hero-score-cta {
	margin-top: 1.1rem;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.hero-score-cta .btn {
	margin-left: 0.5rem;
	background: transparent;
	color: var(--c-white);
	border: 2px solid var(--c-white);
}
.hero-score-cta .btn:hover,
.hero-score-cta .btn:focus-visible {
	background: var(--c-white);
	color: var(--c-spruce-deep);
}
.hero-deadline {
	margin-top: 1rem;
	font-weight: 600;
	color: var(--c-marigold);
}
/* The badge poster-size on the hero's quiet side — wide screens only;
   the header lockup carries the name everywhere else. */
.hero-badge { display: none; }
@media (min-width: 1100px) {
	.hero .container { position: relative; }
	.hero-badge {
		display: block;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		height: clamp(280px, 24vw, 380px);
		width: auto;
		z-index: 1;
		border-radius: 4px;
		box-shadow: 0 14px 36px rgba(13, 36, 31, 0.45);
	}
}

/* Photo credit, tucked where a photographer would put it */
.hero-photo-credit {
	position: absolute;
	right: 1rem;
	bottom: 0.6rem;
	z-index: 1;
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Homepage: the ask ---------------------------------------------- */
.join-inner { max-width: 68ch; }
.join-action { margin-block: 1.25rem; }

/* ---------- Cards ------------------------------------------------------------ */
.card {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-top: 4px solid var(--c-marigold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.4rem 1.25rem;
}
.card h2, .card h3 { margin-top: 0; }

.card-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) {
	.two-up { grid-template-columns: repeat(2, 1fr); }
}

.card-link { font-weight: 700; }

/* ---------- Role guide embeds ------------------------------------------------ */
.guide-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--c-peak);
	border-bottom: 2px solid var(--c-marigold);
	padding-bottom: 2px;
}
.guide-jump:hover { color: var(--c-marigold-deep); }
.guide-jump-arrow { transition: transform 0.15s ease; }
.guide-jump:hover .guide-jump-arrow { transform: translateY(2px); }
/* On the dark hero, flip to white for contrast. */
.page-hero .guide-jump { color: var(--c-white); }
.page-hero .guide-jump:hover { color: var(--c-marigold); }

.guide-embed {
	margin: 2rem 0 0;
	scroll-margin-top: 1.25rem;
}
.guide-embed-heading {
	margin: 0 0 0.35rem;
}
.guide-embed-intro {
	margin: 0 0 1rem;
	color: var(--c-moss);
	max-width: 60ch;
}
.guide-embed-frame {
	border: 1px solid var(--c-line);
	border-top: 4px solid var(--c-marigold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	background: var(--c-white);
}
.guide-embed-frame iframe {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 520px;
	max-height: 760px;
	border: 0;
}
.guide-embed-fallback {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
}

.check-list {
	list-style: none;
	padding: 0;
	max-width: 46ch;
}
.check-list li {
	padding: 0.35rem 0 0.35rem 1.75rem;
	position: relative;
}
.check-list li::before {
	content: '✔';
	position: absolute;
	left: 0;
	color: var(--c-marigold-deep);
	font-weight: 700;
}

.pricing-list { list-style: none; padding: 0; }
.pricing-list li { padding-block: 0.4rem; border-bottom: 1px solid var(--c-line); }
.pricing-list li:last-child { border-bottom: 0; }
.pricing-list strong {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--c-spruce);
}

.recruit-band { margin-top: 2rem; }

/* ---------- Badges ------------------------------------------------------------ */
.badge {
	display: inline-block;
	padding: 0.15em 0.65em;
	border-radius: 4px;
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.badge-final { background: var(--c-spruce); color: var(--c-white); }
.badge-alert { background: var(--c-peak); color: var(--c-white); }
.badge-note { background: var(--c-mint); color: var(--c-ink); border: 1px solid var(--c-line); }
.badge-division { background: var(--c-sky); color: var(--c-spruce-deep); }
.badge-record { background: var(--c-peak); color: var(--c-white); }
.badge-tier { background: var(--c-mint); color: var(--c-moss); border: 1px solid var(--c-line); font-weight: 600; }

/* ---------- Game rows ----------------------------------------------------------- */
.game-day-heading {
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 1.75rem 0 0.6rem;
	color: var(--c-ink);
}
.game-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.game-row {
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'when   result'
		'match  result'
		'where  result';
	align-items: center;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
}
.game-when { grid-area: when; color: var(--c-moss); font-size: 0.9rem; }
.game-when .game-time::before { content: '· '; }
.game-matchup {
	grid-area: match;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--c-ink);
}
.game-matchup .badge { margin-left: 0.5rem; }
/* Let the matchup column actually shrink inside the grid... */
.game-matchup { min-width: 0; }
/* ...so a long note (e.g. an "estimated stats" disclaimer) drops to its own line
   and clips with an ellipsis instead of blowing out the row. The full text still
   shows on the game page. */
.game-matchup .badge-note {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0.35rem 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.game-where { grid-area: where; color: var(--c-moss); font-size: 0.9rem; }
.game-result { grid-area: result; text-align: right; }

.game-row--rainout .game-matchup,
.game-row--canceled .game-matchup { color: var(--c-moss); }

@media (min-width: 720px) {
	.game-row {
		grid-template-columns: 150px 1fr auto auto;
		grid-template-areas: 'when match where result';
	}
	.game-when .game-time::before { content: ''; }
	.game-when .game-time { display: block; }
}

/* ---------- Season filter pills --------------------------------------------------- */
.season-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.pill {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 2px solid var(--c-spruce);
	border-radius: 999px;
	color: var(--c-spruce);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}
.pill:hover { border-color: var(--c-marigold-deep); color: var(--c-marigold-deep); }
.pill.is-active { background: var(--c-spruce); color: var(--c-white); }

/* ---------- Tables ------------------------------------------------------------------ */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.5rem;
}
.standings-table,
.roster-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-line);
}
.standings-table caption,
.roster-table caption {
	font-family: var(--font-head);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--c-ink);
	text-align: left;
	padding: 0.75rem 0.25rem;
}
.standings-table th,
.standings-table td,
.roster-table th,
.roster-table td {
	padding: 0.6rem 0.75rem;
	text-align: center;
	border-bottom: 1px solid var(--c-line);
	font-variant-numeric: tabular-nums;
}
.standings-table thead th,
.roster-table thead th {
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.standings-table thead abbr,
.roster-table thead abbr { text-decoration: none; }
.standings-table tbody th,
.roster-table tbody th { text-align: left; font-weight: 600; }
.standings-table .col-wide,
.roster-table .col-wide { text-align: left; width: 40%; }
.standings-table tbody tr:nth-child(even),
.roster-table tbody tr:nth-child(even) { background: var(--c-mint); }
.standings-table tbody tr:first-child { box-shadow: inset 4px 0 0 var(--c-marigold); }
.standings-table tbody tr:first-child th,
.standings-table tbody tr:first-child td { font-weight: 700; }

/* ---------- Team & player pages ------------------------------------------------- */
.team-hero {
	background: var(--c-spruce);
	color: var(--c-white);
	padding-block: clamp(2rem, 5vw, 3rem);
}
.team-hero h1 { color: var(--c-white); margin-bottom: 0.25em; }
.team-hero-inner {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}
.team-hero-logo img {
	max-width: 120px;
	max-height: 120px;
	object-fit: contain;
	background: var(--c-white);
	border-radius: var(--radius);
	padding: 0.5rem;
}
.team-hero-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.team-sponsor-line a { color: var(--c-sky); }

.team-card { text-align: left; }
.team-card-logo img { max-height: 110px; object-fit: contain; }
.team-card-name { font-size: 1.25rem; margin: 0.5rem 0 0.35rem; }
.team-card-name a { color: var(--c-ink); text-decoration: none; }
.team-card-name a:hover { color: var(--c-marigold-deep); }
.team-card-record, .team-card-manager { margin: 0.15rem 0; color: var(--c-moss); font-size: 0.95rem; }

.team-roster, .team-schedule { margin-top: 2.5rem; }

.player-card { max-width: 560px; }
.player-photo img { border-radius: var(--radius); margin-bottom: 1rem; }
.player-number { color: var(--c-moss); font-size: 0.7em; }
.player-facts dt {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--c-spruce);
}
.player-facts dd { margin: 0 0 0.75rem; }

/* ---------- Register page --------------------------------------------------------- */
.page-hero {
	background: var(--c-spruce);
	color: var(--c-white);
	padding-block: clamp(2rem, 5vw, 3rem);
	margin-bottom: 2rem;
}
.page-hero h1 { color: var(--c-white); }
.page-hero .hero-deadline { color: var(--c-marigold); font-weight: 600; }

.steps-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	counter-reset: step;
	margin: 1rem 0 0;
	padding: 0;
}
.steps-strip li {
	counter-increment: step;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
}
.steps-strip li::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--c-marigold);
	color: var(--c-spruce-deep);
	font-family: var(--font-head);
	font-weight: 800;
}

.register-layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 920px) {
	.register-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.register-aside { display: grid; gap: 1rem; }

.notice-box {
	background: var(--c-mint);
	border-left: 5px solid var(--c-marigold);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

/* ---------- Forms (native + Fluent Forms when it arrives) ----------------------- */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
input[type='date'],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.75rem;
	border: 2px solid var(--c-line);
	border-radius: 6px;
	background: var(--c-white);
	color: var(--c-ink);
	font: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--c-spruce);
}
label { font-weight: 600; }

.search-form { max-width: 480px; margin-block: 1rem; }
.search-controls { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.search-field { flex: 1; }

/* Match the site's primary (marigold) buttons. !important beats Fluent Forms'
   own default button colour, which otherwise renders it blue. */
.fluentform .ff-btn-submit,
.fluentform button[type='submit'] {
	background: var(--c-marigold) !important;
	color: var(--c-spruce-deep) !important;
	border: 0 !important;
	border-radius: 6px;
	padding: 0.85rem 1.9rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type='submit']:hover { background: var(--c-marigold-deep) !important; color: var(--c-white) !important; }

/* The hero email-list signup is the same Fluent Forms markup as the Register
   form, so it inherits the inputs and marigold submit button above. These rules
   only adapt it to the hero: a compact width and light label/help/message text
   so it reads against the dark photo. */
.hero-form { max-width: 34rem; }
/* The form ships with no heading, so the theme prints one above it (a prompt
   like "Get league updates"). Light + bold so it reads over the dark photo. */
.hero-form-label {
	margin: 0 0 0.6rem;
	color: var(--c-white);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.hero-form .fluentform .ff-el-group { margin-bottom: 0; }
/* The field placeholders ("Enter Your First Name", "Email Address") name each
   field, so hide the form's own labels — they render dark from the form styler
   and disappear against the photo. Kept for screen readers (visually hidden). */
.hero-form .fluentform .ff-el-input--label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.hero-form .fluentform .ff-section-heading,
.hero-form .fluentform .ff-el-help-message,
.hero-form .fluentform .ff-el-custom-html,
.hero-form .fluentform .ff-message-success { color: var(--c-white); }
.hero-form .fluentform input::placeholder { color: var(--c-moss); opacity: 1; }
/* Size the field and button to the same 44px height as the site buttons, so the
   signup and the "See the schedule" button sit balanced side by side. */
.hero-form .fluentform input[type='email'],
.hero-form .fluentform input[type='tel'],
.hero-form .fluentform input[type='text'] { min-height: 44px; padding: 0.6rem 0.85rem; }
/* Give the submit button room below the inputs (the field groups have their
   bottom margin zeroed for compactness, which otherwise crowds the button). */
.hero-form .fluentform .ff-btn-submit,
.hero-form .fluentform button[type='submit'] { min-height: 44px; margin-top: 1rem; padding: 0.6rem 1.5rem; }
/* Fluent Forms centers the submit button; left-align it so it lines up with the
   inputs above and the "Join our Discord" button below. */
.hero-form .fluentform .ff_submit_btn_wrapper { text-align: left; }

/* ---------- CTA strip: the outfield wall ----------------------------------------- */
/* The one theatrical element, kept quiet: wall green, a painted top
   rail, the distance marker ghosted in the corner — like Memorial
   Field's fence in the team photos. */
.cta-band {
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 0px,
			rgba(255, 255, 255, 0.035) 2px,
			transparent 2px,
			transparent 110px
		),
		var(--c-spruce-deep);
	color: var(--c-white);
	position: relative;
	border-top: 5px solid var(--c-marigold);
}
/* 320, painted low on the right near the foul pole. */
.cta-band::after {
	content: '320';
	position: absolute;
	right: calc(7% + 2.5rem); /* a fixed gap to the left of the foul pole (at 7%) */
	bottom: 2.4rem;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	color: var(--c-marigold);
	opacity: 0.9;
	pointer-events: none;
	z-index: 0;
}

/* FAMBL badge on the left of the wall (desktop only — no room on phones). */
.wall-logo { display: none; }
@media (min-width: 920px) {
	.wall-logo {
		display: block;
		position: absolute;
		left: 3%;
		top: 50%;
		transform: translateY(-50%);
		height: 92%; /* fill most of the wall height */
		width: calc(47vw - 320px); /* cap the box so the badge never reaches the banners */
		z-index: 0;
		filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
	}
	.wall-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; border-radius: 8px; }
}

/* Foul pole on the right: a painted yellow line down the wall, with the pole and
   mesh screen rising above it (desktop). The white foul line lives on the footer. */
.foul-pole {
	position: absolute;
	right: 7%;
	top: 0;
	bottom: 0;
	width: clamp(2px, 0.3vw, 4px);
	background: var(--c-foul);
	z-index: 0;
	pointer-events: none;
}
.foul-pole-mast,
.foul-pole-screen { position: absolute; bottom: 100%; }
.foul-pole-mast {
	left: 50%;
	transform: translateX(-50%);
	width: clamp(5px, 0.55vw, 8px);
	/* Tall enough to reach the heading of the section above the wall. That section
	   gets taller on narrow screens (text wraps more), so the height grows as the
	   viewport narrows. */
	height: clamp(430px, calc(653px - 15.1vw), 640px);
	background: var(--c-foul);
	border-radius: 3px 3px 0 0;
}
.foul-pole-screen {
	right: calc(50% + 2px); /* the fair (left) side of the mast */
	width: clamp(30px, 7vw, 100px);
	height: clamp(390px, calc(613px - 15.1vw), 600px);
	margin-bottom: clamp(12px, 2vw, 24px);
	background: radial-gradient(circle, transparent 1.9px, var(--c-foul) 2.1px) 0 0 / 7px 7px;
	border: 1px solid var(--c-foul);
}
/* On phones, keep the "How the league works" text clear of the tall foul
   pole/mesh on the right (they rise up into this section). Desktop clears on its
   own. */
@media (max-width: 719px) {
	.how-it-works .prose { padding-right: 4.75rem; }
	/* Interior pages don't reserve room above the wall for the pole, so hide the
	   mast + mesh that rise above it on phones (they'd overlap page content). The
	   painted line down the wall stays. Desktop keeps the full pole. */
	.cta-band--interior .foul-pole-mast,
	.cta-band--interior .foul-pole-screen { display: none; }
}

/* The three CTA "ad banners": staggered, varied colour, text centred. */
.cta-band-inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
.cta-band-title,
.cta-alt {
	margin: 0;
	border: 3px solid var(--c-white);
	border-radius: 10px;
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}
.cta-band-title {
	align-self: flex-start;
	max-width: 12em;
	padding: clamp(0.5rem, 1.4vw, 0.9rem) clamp(0.8rem, 1.8vw, 1.3rem);
	font-size: clamp(1.15rem, 2.4vw, 1.7rem);
	line-height: 1.15;
	background: var(--c-sign-blue);
	color: var(--c-white);
}
.cta-band-action { align-self: flex-end; margin: 0; }
.cta-band-action .btn {
	border: 3px solid var(--c-white);
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}
.cta-alt {
	align-self: center;
	padding: 0.45rem 0.9rem;
	border-width: 2px;
	background: var(--c-sign-red);
	color: var(--c-white);
	font-size: 0.92rem;
}
.cta-alt a { color: var(--c-white); text-decoration: underline; }
.cta-spots, .cta-deadline { align-self: center; margin: 0; color: var(--c-marigold); font-weight: 600; }
/* On phones, keep the banners clear of the foul pole line on the right, and tuck
   the 320 (smaller) into the space below the banners so it isn't hidden. */
@media (max-width: 719px) {
	.cta-band-inner { padding-right: 4.2rem; }
	.cta-band::after { font-size: 1.4rem; bottom: 0.5rem; z-index: 2; }
}

/* ---------- Sponsors ----------------------------------------------------------------- */
.sponsor-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
@media (min-width: 640px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .sponsor-grid { grid-template-columns: repeat(4, 1fr); } }

.sponsor-item {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	min-height: 110px;
}
.sponsor-item img { max-height: 72px; object-fit: contain; }
.sponsor-name {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
}

/* ---------- Blog / news cards ---------------------------------------------------------- */
.post-list { display: grid; gap: 1rem; }
.post-card-title { margin-bottom: 0.25rem; }
.post-card-title a { color: var(--c-ink); text-decoration: none; }
.post-card-title a:hover { color: var(--c-marigold-deep); }
.post-card-meta { color: var(--c-moss); font-size: 0.9rem; }

.navigation.pagination { margin-block: 1.5rem; }
.navigation.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 2px solid var(--c-spruce);
	border-radius: 6px;
	text-decoration: none;
	color: var(--c-spruce);
	font-family: var(--font-head);
	font-weight: 700;
}
.navigation.pagination .page-numbers.current { background: var(--c-spruce); color: var(--c-white); }

/* ---------- 404 --------------------------------------------------------------------------- */
.link-list { list-style: none; padding: 0; }
.link-list li { padding-block: 0.3rem; }

/* ---------- Footer --------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	/* Stadium grass with mowed stripes, and a straight warning-track dirt strip
	   along the top (an inset shadow keeps it a uniform width). */
	background: repeating-linear-gradient(90deg, #163a2b 0, #163a2b 72px, #1e4a39 72px, #1e4a39 144px);
	box-shadow: inset 0 36px 0 var(--c-dirt);
	color: rgba(255, 255, 255, 0.92);
}
/* When a CTA-band wall sits directly above, the footer is the field: a straight
   warning track (from the base footer above) with the foul line off the right. */
.site-footer.has-wall {
	padding-top: 22px; /* keep the warning track off the footer text below it */
	overflow: hidden; /* clip the long foul line to the footer's bottom edge */
}
.site-footer.has-wall::before {
	content: '';
	position: absolute;
	top: 0; /* the warning-track top, where the yellow wall line ends */
	right: 7%;
	width: clamp(2px, 0.3vw, 4px);
	height: 120vh; /* runs to the bottom of the window (clipped by the footer) */
	background: rgba(255, 255, 255, 0.85);
	transform-origin: top center;
	transform: rotate(8deg); /* angle down toward home, clear of the footer text */
	z-index: 5; /* above the clay track so it crosses it and meets the pole */
	pointer-events: none;
}
.site-footer a { color: var(--c-white); }
.site-footer a:hover { color: var(--c-marigold); }

.footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.footer-heading {
	font-size: 1rem;
	color: var(--c-sky);
	margin-bottom: 0.75rem;
}
.footer-contact { font-style: normal; }
.footer-contact p { margin-bottom: 0.35rem; }

.site-footer .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .menu a {
	display: inline-block;
	padding-block: 0.3rem;
	text-decoration: none;
}
.site-footer .menu a:hover { text-decoration: underline; }

.social-links {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	gap: 1rem;
}
.social-links a { font-weight: 700; }

.footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-block: 1rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.75);
}
.footer-legal p { margin: 0; }

/* ---------- Single game: the box score ---------------------------------------------------------
   The league's printed record of one game, in newspaper order: scoreline,
   line score, batting, pitching. The line score sits in the dark band like
   the scoreboard at the field (spruce-deep slab, marigold rail — same family
   as the outfield-wall CTA). The tables below run denser than the standings
   table on purpose: sports-section agate. No E column — FAMBL doesn't score
   errors. */

/* Same specificity as .section; these come later in the file, so the
   tighter top padding wins after the hero band. */
.game-body { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }

.game-hero .hero-kicker { margin-bottom: 0.75rem; }
.game-hero h1 { margin-bottom: 0.3em; }
.game-hero-note { margin: 0.75rem 0 0; }
/* The note here can be a full sentence (e.g. an "estimated stats" disclaimer),
   so let it wrap to multiple lines at a readable width instead of running off as
   a one-line badge. */
.game-hero-note .badge-note {
	white-space: normal;
	max-width: min(60ch, 100%);
	line-height: 1.5;
	padding: 0.5em 0.85em;
	text-align: left;
}

/* Called-off banner in the game hero: loud, plain-language, stands off the
   dark hero. Red clay for canceled and rained-out games. */
.game-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0.7rem 1rem;
	border-radius: var(--radius);
	max-width: min(60ch, 100%);
	background: var(--c-dirt);
	color: var(--c-white);
}
.game-callout-label {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.game-callout-blurb { line-height: 1.4; }

/* The line score slab: hugs its numbers like a real scoreboard, never
   stretches to fill the band. */
.linescore-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 1.5rem;
	max-width: 100%;
}
.linescore {
	border-collapse: collapse;
	background: var(--c-spruce-deep);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-top: 4px solid var(--c-marigold);
	font-family: var(--font-head);
	font-variant-numeric: tabular-nums;
	color: var(--c-white);
}
.linescore th,
.linescore td {
	padding: 0.45rem 0.6rem;
	text-align: center;
	border: 0;
	min-width: 2em;
}
.linescore thead th,
.linescore thead td {
	color: var(--c-sky);
	font-size: 0.72rem;
	font-weight: 700;
	padding-top: 0.55rem;
	padding-bottom: 0.15rem;
}
.linescore tbody th {
	text-align: left;
	font-weight: 700;
	font-size: 0.95rem;
	padding-right: 1.25rem;
	padding-left: 0.9rem;
	white-space: nowrap;
}
.linescore tbody td { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.linescore .ls-rh {
	border-left: 2px solid rgba(255, 255, 255, 0.28);
	font-weight: 800;
}
.linescore tbody .ls-rh { font-size: 1.05rem; }
.linescore .ls-win { color: var(--c-marigold); }
.linescore tbody tr:last-child th,
.linescore tbody tr:last-child td { padding-bottom: 0.6rem; }

/* Batting / pitching: two-up on desktop, away (bats first) on the left. */
.boxscore-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: start;
	margin-bottom: 0.5rem;
}
@media (min-width: 920px) { .boxscore-grid { grid-template-columns: repeat(2, 1fr); } }

.game-pitching { margin-top: 2rem; }

.box-team .table-scroll { margin-bottom: 0; }

/* Agate: smaller, tighter, numerals right-aligned — box scores are dense
   because that's how you know they're real. */
.box-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	font-size: 0.9rem;
	line-height: 1.4;
}
.box-table caption {
	font-family: var(--font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-ink);
	text-align: left;
	padding: 0 0.25rem 0.5rem;
}
.box-table th,
.box-table td {
	padding: 0.35rem 0.6rem;
	text-align: right;
	border-bottom: 1px solid var(--c-line);
	font-variant-numeric: tabular-nums;
}
.box-table thead th {
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.box-table thead abbr { text-decoration: none; }
.box-table tbody th,
.box-table tfoot th { text-align: left; font-weight: 600; white-space: nowrap; }
/* Phones: shave the cell padding so a full batting line fits without a
   sideways scroll (the .table-scroll wrapper stays as the fallback). */
@media (max-width: 640px) {
	.box-table th,
	.box-table td { padding-inline: 0.35rem; }
	.box-table .col-wide { width: auto; }
}
.box-table .col-wide { text-align: left; width: 44%; }
.box-table tfoot th,
.box-table tfoot td {
	border-top: 2px solid var(--c-spruce);
	border-bottom: 0;
	background: var(--c-mint);
	font-weight: 700;
}

.box-extras {
	margin: 0.5rem 0 0;
	padding-inline: 0.25rem;
	color: var(--c-moss);
	font-size: 0.85rem;
}

/* Play-by-play: the chronological account under the box score. */
.game-plays { margin-top: 2.5rem; }
.pbp-inning { margin-top: 1.25rem; }
.pbp-head {
	font-size: 1rem;
	margin: 0 0 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--c-marigold);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.pbp-team { color: var(--c-moss); font-size: 0.85rem; font-weight: 400; }
.pbp-list { list-style: none; margin: 0; padding: 0; }
.pbp-play {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pbp-play--scored { font-weight: 600; }
.pbp-score {
	font-variant-numeric: tabular-nums;
	color: var(--c-moss);
	white-space: nowrap;
}

.game-backlink { margin-top: 2rem; }

/* Schedule rows: a final with a box score links to its game page. */
.game-matchup a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--c-marigold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.game-matchup a:hover { color: var(--c-marigold-deep); }

/* Win/loss chip on a final game's teams (schedule + team pages). */
.wl {
	display: inline-block;
	margin-left: 0.3em;
	padding: 0 0.36em;
	border-radius: 4px;
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1.55;
	vertical-align: text-top;
}
.wl-w { background: var(--c-spruce); color: var(--c-white); }
.wl-l { background: var(--c-line); color: var(--c-moss); }

/* ---------- Team check-in (/rsvp/) --------------------------------------------------------------
   A utility page for signed-in players: quiet house cards, one clear
   segmented control per game. In = marigold (the answer managers want),
   Maybe = sky, Out = outline. Tap targets stay ≥44px. */

.rsvp-app { max-width: 620px; }
.rsvp-loading { color: var(--c-moss); }
.rsvp-error { color: #8A2A1B; font-weight: 600; }

.rsvp-card { margin-bottom: 1.25rem; }
.rsvp-card h2 { font-size: 1.35rem; }

.rsvp-login-form,
.rsvp-join-form { display: grid; gap: 0.6rem; justify-items: start; margin-top: 0.75rem; }
.rsvp-login-form input,
.rsvp-join-form input { max-width: 320px; }
.rsvp-code-input {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	max-width: 220px;
}

.rsvp-roster {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .rsvp-roster { grid-template-columns: repeat(2, 1fr); } }
.rsvp-player-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--c-ink);
	text-align: left;
	cursor: pointer;
}
.rsvp-player-btn:hover { border-color: var(--c-spruce); }
.rsvp-player-number { color: var(--c-moss); font-weight: 700; font-size: 0.85rem; }

.rsvp-join-head { margin-top: 0.5rem; }

.rsvp-linklike {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	margin-top: 0.5rem;
	color: var(--c-peak);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.rsvp-linklike:hover { color: var(--c-marigold-deep); }

.rsvp-me { color: var(--c-moss); }
.rsvp-me strong { color: var(--c-ink); }

/* ---- Player dashboard (My FAMBL) ---- */
.rsvp-dash-head { border-top: 4px solid var(--c-marigold); }
.rsvp-dash-kicker {
	margin: 0 0 0.15rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-marigold-deep);
}
.rsvp-dash-name {
	margin: 0 0 0.2rem;
	font-size: 1.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.rsvp-dash-number { font-size: 1rem; font-weight: 600; color: var(--c-moss); }
.rsvp-dash-team { margin: 0 0 0.6rem; color: var(--c-ink); }
.rsvp-dash-team a { font-weight: 700; }

.rsvp-dash-stats h3,
.rsvp-dash-balance h3 { margin: 0 0 0.6rem; }
.rsvp-dash-balance { border-top: 4px solid var(--c-dirt); }
.rsvp-balance-amount {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--c-dirt);
}
.rsvp-stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.rsvp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--c-mint);
	border-radius: var(--radius);
	padding: 0.6rem 0.25rem;
}
.rsvp-stat-val { font-size: 1.35rem; font-weight: 800; color: var(--c-spruce); line-height: 1.1; }
.rsvp-stat-key {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin-top: 0.15rem;
}

.rsvp-stat-label {
	margin: 0.9rem 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.rsvp-stat-label:first-of-type { margin-top: 0.2rem; }

.rsvp-stats-toggle { margin-top: 0.9rem; }

.rsvp-stats-full {
	margin-top: 0.9rem;
	border-top: 1px solid var(--c-line);
	padding-top: 0.9rem;
}
.rsvp-fullgrid-label {
	margin: 0.6rem 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.rsvp-fullgrid-label:first-child { margin-top: 0; }
.rsvp-fullgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 0.4rem;
}
.rsvp-fullstat {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--c-mint);
	border-radius: 6px;
	padding: 0.4rem 0.15rem;
}
.rsvp-fullstat-val { font-size: 1rem; font-weight: 800; color: var(--c-spruce); line-height: 1.1; }
.rsvp-fullstat-key {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin-top: 0.1rem;
}

.rsvp-stats-empty { color: var(--c-moss); margin: 0 0 0.9rem; }
.rsvp-stats-sent { color: var(--c-spruce); font-weight: 600; margin: 0.5rem 0 0; }

.rsvp-section-head {
	margin: 1.5rem 0 0.75rem;
	font-size: 1.1rem;
}

/* One game: header, the segmented answer, then who's said what. */
.rsvp-game {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
}
.rsvp-game-head { margin-bottom: 0.75rem; }
.rsvp-game-head p { margin: 0; }
.rsvp-game-when { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-game-matchup {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--c-ink);
}
.rsvp-game-where { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-game-head .badge { margin-top: 0.35rem; }

.rsvp-choice {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}
.rsvp-btn {
	flex: 1 1 0;
	min-width: 90px;
	min-height: 46px;
	padding: 0.55rem 1rem;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: 6px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rsvp-btn:hover:not(:disabled) { border-color: var(--c-spruce); }
.rsvp-btn:disabled { opacity: 0.45; cursor: default; }
.rsvp-btn--in.is-active { background: var(--c-marigold); border-color: var(--c-marigold); color: var(--c-spruce-deep); }
.rsvp-btn--maybe.is-active { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-spruce-deep); }
.rsvp-btn--out.is-active { background: var(--c-spruce); border-color: var(--c-spruce); color: var(--c-white); }

.rsvp-tally { border-top: 1px solid var(--c-line); padding-top: 0.6rem; }
.rsvp-tally-line { margin: 0 0 0.35rem; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; }
.rsvp-tally-row { margin: 0 0 0.2rem; color: var(--c-moss); font-size: 0.9rem; }
.rsvp-tally-row strong { color: var(--c-ink); font-family: var(--font-head); font-size: 0.85rem; }

.rsvp-dash-fillins { border-top: 4px solid var(--c-moss); }
.rsvp-fillin-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.rsvp-fillin-row {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
	margin-bottom: 0.75rem;
}
.rsvp-fillin-row p { margin: 0 0 0.25rem; }
.rsvp-fillin-head {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
}
.rsvp-fillin-status { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-fillin-claimant { font-weight: 600; color: var(--c-ink); }
.rsvp-fillin-where { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-fillin-notes { font-style: italic; color: var(--c-moss); font-size: 0.9rem; }
.rsvp-fillin-row .btn,
.rsvp-fillin-row .rsvp-linklike { margin-top: 0.4rem; }
.rsvp-fillin-form {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--c-line);
}
.rsvp-fillin-form select,
.rsvp-fillin-form input { max-width: 320px; }

.is-busy { opacity: 0.6; }

/* ---------- Stats (page + player profiles) ------------------------------------------------------
   Season aggregates from the scoring app's box scores. Leaders read like
   the agate column of a sports page — names and numbers, no big-number
   cards. Full tables reuse the game page's .box-table agate; rows under
   the rate-stat minimums are quieted, not hidden. */

.stats-leaders { margin-bottom: 1.5rem; }
.statlead-group { margin-bottom: 1.5rem; }
.statlead-group h3 { margin-bottom: 0.6rem; }

/* Each category is its own small numbered leaderboard; the cards flow into
   as many columns as the width allows — easier to scan than a run-on line.
   Namespaced .statlead-* so it never collides with the postseason
   .leader-* season-leader cards. */
.statlead-cats {
	display: grid;
	gap: 1rem 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.statlead-cat h4 {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
	margin: 0 0 0.35rem;
	padding-bottom: 0.2rem;
	border-bottom: 2px solid var(--c-marigold);
}
.statlead-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rank;
	font-size: 0.95rem;
}
.statlead-list li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.22rem 0;
	border-bottom: 1px solid var(--c-line);
}
.statlead-list li:last-child { border-bottom: 0; }
.statlead-list li::before {
	counter-increment: rank;
	content: counter(rank) '.';
	flex: 0 0 1.5em;
	color: var(--c-moss);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}
.statlead-name { flex: 1; min-width: 0; }
.statlead-name a { color: var(--c-ink); }
.statlead-name a:hover { color: var(--c-marigold-deep); }
.statlead-val {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
}

.stats-section { margin-top: 2rem; }
.stats-table .stat-team { text-align: left; white-space: nowrap; }
.stats-table .stat-uq th,
.stats-table .stat-uq td,
.stat-uq th,
.stat-uq td { color: var(--c-moss); }
.stat-uq th a { color: var(--c-moss); }

/* Click-to-sort headings (enhanced by assets/js/stats-sort.js). Without the
   script the tables render as normal server-sorted tables; the script wraps
   each heading in this button and toggles aria-sort. */
.stats-table thead th { padding: 0; }
.stats-sort-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.3rem;
	width: 100%;
	margin: 0;
	padding: 0.35rem 0.6rem;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
@media (max-width: 640px) {
	.stats-table thead th .stats-sort-btn { padding-inline: 0.35rem; }
}
/* Player and Team read left-to-right; their headings align left to match. */
.stats-table thead th.col-wide .stats-sort-btn,
.stats-table thead th:nth-child(2) .stats-sort-btn { justify-content: flex-start; }
.stats-sort-btn:hover { background: var(--c-spruce-deep); }
.stats-sort-btn:focus-visible { outline: 2px solid var(--c-marigold); outline-offset: -2px; }
/* A faint up/down glyph hints every column is sortable; the active column
   shows a solid arrow for its direction. */
.stats-sort-ind {
	font-size: 0.9em;
	line-height: 1;
}
.stats-sort-ind::before { content: "\21C5"; } /* up-down arrow */
.stats-table thead th[aria-sort="none"] .stats-sort-ind { opacity: 0.4; }
.stats-table thead th[aria-sort="ascending"] .stats-sort-ind::before { content: "\2191"; } /* up */
.stats-table thead th[aria-sort="descending"] .stats-sort-ind::before { content: "\2193"; } /* down */

/* Player profile: game log as a quiet dated list. */
.game-log {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 560px;
}
.game-log li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--c-line);
	font-size: 0.95rem;
}
.game-log li:last-child { border-bottom: 0; }
.game-log-when {
	flex: 0 0 3.2em;
	color: var(--c-moss);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}
.game-log-opp { font-weight: 600; white-space: nowrap; }
.game-log-line { color: var(--c-ink); }

/* ---------- Sticky mobile CTA ------------------------------------------------------------------ */
.sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	justify-content: center;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(13, 36, 31, 0.97);
	box-shadow: 0 -2px 12px rgba(13, 36, 31, 0.4);
}
.sticky-cta .btn {
	width: 100%;
	max-width: 420px;
}
body.has-sticky-cta { padding-bottom: 4.5rem; }

@media (min-width: 920px) {
	.sticky-cta { display: none; }
	body.has-sticky-cta { padding-bottom: 0; }
}

/* ---------- Manager player pool (/player-pool/) -------------------------------------------------
   Managers open a magic link and see this season's sign-ups — available up top,
   claimed below and quieted. Same house-card look as the check-in page. */
.pool-app { max-width: 720px; }
.pool-head { font-size: 1.2rem; margin: 1.75rem 0 0.75rem; }
.pool-list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin-bottom: 0.5rem;
}
@media (min-width: 620px) { .pool-list { grid-template-columns: repeat(2, 1fr); } }

.pool-player {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1rem 1.1rem;
}
.pool-player.is-claimed { background: var(--c-mint); box-shadow: none; opacity: 0.9; }
.pool-player-name { margin: 0; font-size: 1.1rem; }
.pool-player-contact { margin: 0; font-size: 0.95rem; word-break: break-word; }
.pool-player-fields {
	list-style: none;
	margin: 0.1rem 0 0;
	padding: 0;
	color: var(--c-moss);
	font-size: 0.9rem;
}
.pool-player-fields li { margin-bottom: 0.1rem; }
.pool-player-fields strong { color: var(--c-ink); font-family: var(--font-head); font-size: 0.82rem; }

.pool-player-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.35rem;
}
.pool-player-actions .btn { padding: 0.5rem 1.1rem; min-height: 40px; }
.pool-claimed-by {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--c-spruce);
}

/* ---------- Umpire assignments (/umpire/) -------------------------------------------------------
   Umpires take the plate or bases on upcoming games. Reuses the check-in game
   card; each game shows two slots. Games short an umpire get a warning-track rail. */
.ump-app { max-width: 620px; }
.ump-game {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
}
.ump-game.needs-ump { box-shadow: inset 4px 0 0 var(--c-dirt), var(--shadow); }
.ump-game .rsvp-game-head { margin-bottom: 0.5rem; }
.ump-slot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-top: 1px solid var(--c-line);
}
.ump-slot-label {
	flex: 0 0 4.5em;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.ump-slot-who { font-weight: 600; color: var(--c-ink); }
.ump-slot .btn { margin-left: auto; padding: 0.45rem 1rem; min-height: 40px; }

/* ---------- League HQ (/hq/) --------------------------------------------------------------------
   Commissioner view + manager fill-in RSVPs. Reuses the check-in game card;
   adds compact per-player answer rows (name, status pill, mini In/Maybe/Out)
   and the links vault (collapsed team cards full of copy buttons). Games
   short an umpire get the same warning-track rail as the umpire portal. */

.hq-app { max-width: 720px; }

.hq-section-head {
	margin: 2rem 0 0.75rem;
	font-size: 1.25rem;
	color: var(--c-ink);
}

.hq-attn {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: inset 4px 0 0 var(--c-dirt), var(--shadow);
}
.hq-attn li { margin: 0.2rem 0; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; }

.hq-game.needs-ump { box-shadow: inset 4px 0 0 var(--c-dirt), var(--shadow); }

.hq-ump-line { margin: 0 0 0.5rem; font-size: 0.9rem; }
.hq-ump-label {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.hq-ump-who { font-weight: 600; color: var(--c-ink); }
.hq-ump-open { font-weight: 700; color: #8A2A1B; text-transform: uppercase; font-size: 0.85rem; }

.hq-details { border-top: 1px solid var(--c-line); padding: 0.4rem 0; }
.hq-side-sum {
	cursor: pointer;
	padding: 0.35rem 0;
	font-size: 0.95rem;
	color: var(--c-moss);
}
.hq-side-sum strong { color: var(--c-ink); font-family: var(--font-head); }
.hq-side-sum:hover { color: var(--c-spruce); }

.hq-tally-line { margin: 0 0 0.4rem; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; }

.hq-player-list { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; }
.hq-player-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	padding: 0.4rem 0;
	border-top: 1px solid var(--c-line);
}
.hq-player-name { flex: 1 1 10em; min-width: 8em; font-weight: 600; color: var(--c-ink); }

.hq-pill {
	flex: 0 0 auto;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hq-pill--in { background: var(--c-marigold); color: var(--c-spruce-deep); }
.hq-pill--maybe { background: var(--c-sky); color: var(--c-spruce-deep); }
.hq-pill--out { background: var(--c-spruce); color: var(--c-white); }
.hq-pill--none { background: var(--c-mint); color: var(--c-moss); }

.hq-set { display: inline-flex; gap: 0.3rem; }
.hq-set-btn {
	min-height: 36px;
	padding: 0.3rem 0.7rem;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: 6px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hq-set-btn:hover { border-color: var(--c-spruce); }
.hq-set-btn--in.is-active { background: var(--c-marigold); border-color: var(--c-marigold); color: var(--c-spruce-deep); }
.hq-set-btn--maybe.is-active { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-spruce-deep); }
.hq-set-btn--out.is-active { background: var(--c-spruce); border-color: var(--c-spruce); color: var(--c-white); }

/* Links vault */
.hq-links-card {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0.6rem 1.25rem;
	margin-bottom: 0.75rem;
}
.hq-linkrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0.5rem 0;
}
.hq-link-label {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.hq-link-note { color: var(--c-moss); font-size: 0.9rem; overflow-wrap: anywhere; }
.hq-alert { color: #8A2A1B; font-weight: 600; }
.hq-code {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.18em;
	color: var(--c-ink);
}
.hq-copy { min-height: 36px; padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* ---------- Postseason: bracket, champions, leaders --------------------------------- */
.postseason {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 3px solid var(--c-marigold);
}
.postseason > h2 {
	font-family: var(--font-head);
	font-size: 1.6rem;
	color: var(--c-ink);
	margin: 0 0 1.25rem;
}
.postseason h3 {
	font-family: var(--font-head);
	font-size: 1.15rem;
	color: var(--c-spruce);
	margin: 0 0 0.25rem;
}

/* Bracket */
.postseason-bracket { margin-bottom: 2rem; }
.bracket-head { margin-bottom: 1rem; }
.bracket-note { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--c-moss); font-style: italic; }
.bracket-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
}
.bracket-round { flex: 1 1 260px; min-width: 240px; }
.bracket-round-label {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin-bottom: 0.5rem;
}
.bracket-round--semis .bracket-matchup + .bracket-matchup { margin-top: 1rem; }

.bracket-matchup { position: relative; }
.bracket-matchup-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-moss);
	margin-bottom: 0.3rem;
}
.bracket-card {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.bracket-team {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
}
.bracket-team + .bracket-team { border-top: 1px solid var(--c-line); }
.bracket-seed {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--c-mint);
	color: var(--c-moss);
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
.bracket-name {
	flex: 1 1 auto;
	color: var(--c-ink);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bracket-name:hover { color: var(--c-marigold-deep); }
.bracket-score {
	flex: none;
	min-width: 1.5rem;
	text-align: right;
	font-family: var(--font-head);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}
.bracket-team.is-winner { background: color-mix(in srgb, var(--c-marigold) 12%, var(--c-white)); }
.bracket-team.is-winner .bracket-seed { background: var(--c-marigold); color: var(--c-spruce-deep); }
.bracket-team.is-winner .bracket-name { color: var(--c-spruce); }
.bracket-team--tbd { color: var(--c-moss); }
.bracket-team--tbd .bracket-name { color: var(--c-moss); font-weight: 500; }

.bracket-status { display: inline-block; margin-top: 0.35rem; font-size: 0.75rem; color: var(--c-moss); }
.bracket-status a { color: var(--c-moss); }
.bracket-status.is-final {
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.bracket-round--final .bracket-card { border-color: var(--c-marigold); }
.bracket-champion {
	margin-top: 0.75rem;
	padding: 0.6rem 0.75rem;
	background: var(--c-spruce);
	color: var(--c-white);
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-weight: 700;
}
.bracket-champion a { color: var(--c-foul); text-decoration: none; }
.bracket-champion a:hover { text-decoration: underline; }
.bracket-trophy { margin-right: 0.15rem; }
.bracket-third { margin-top: 1.5rem; max-width: 300px; }

/* Champions roll */
.postseason-champions { margin-bottom: 2rem; }
.champions-table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-line);
}
.champions-table th,
.champions-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--c-line);
}
.champions-table thead th {
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.champions-table tbody th { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.champions-table tbody tr:nth-child(even) { background: var(--c-mint); }
.champions-table a { color: var(--c-ink); text-decoration: none; font-weight: 600; }
.champions-table a:hover { color: var(--c-marigold-deep); }
.champ-cell { font-weight: 700; }
.champ-trophy { margin-right: 0.15rem; }
.champ-none { color: var(--c-moss); }

/* Season leaders strip */
.postseason-leaders { margin-bottom: 1rem; }
.leader-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.leader-chip {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.6rem 0.9rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-marigold);
	border-radius: var(--radius);
	min-width: 120px;
}
.leader-cat {
	font-family: var(--font-head);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.leader-name { font-weight: 600; color: var(--c-ink); }
.leader-name a { color: var(--c-ink); text-decoration: none; }
.leader-name a:hover { color: var(--c-marigold-deep); }
.leader-val { font-family: var(--font-head); font-weight: 700; color: var(--c-spruce); font-variant-numeric: tabular-nums; }
.leaders-more { margin: 0.75rem 0 0; font-size: 0.9rem; }
.leader-groups { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.leader-group-title {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-spruce);
	margin: 0 0 0.4rem;
}
.leader-group .leader-chips { margin-top: 0; }

@media (max-width: 640px) {
	.bracket-grid { flex-direction: column; align-items: stretch; gap: 1.25rem; }
	.bracket-round { min-width: 0; }
}

/* ---------- Documents library ------------------------------------------------------ */
.doc-group { margin-bottom: 2rem; }
.doc-group-title {
	font-family: var(--font-head);
	font-size: 1.15rem;
	color: var(--c-spruce);
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--c-marigold);
}
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.doc-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-decoration: none;
	color: var(--c-ink);
	transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.doc-link:hover, .doc-link:focus {
	border-color: var(--c-marigold);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(20, 52, 46, 0.12);
	outline: none;
}
.doc-icon { flex: none; font-size: 1.4rem; line-height: 1; }
.doc-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.doc-name { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.doc-desc { font-size: 0.9rem; color: var(--c-moss); }
.doc-hint {
	flex: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-moss);
	background: var(--c-mint);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	white-space: nowrap;
}
.doc-link:hover .doc-name { color: var(--c-marigold-deep); }

/* ---------- Divisions + waitlist --------------------------------------------------- */
.division-pills { margin-top: -0.5rem; }

.waitlist-band {
	background: var(--c-mint);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-marigold);
	border-radius: var(--radius);
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0 0;
}
.waitlist-band > h2 {
	font-family: var(--font-head);
	font-size: 1.4rem;
	color: var(--c-ink);
	margin: 0 0 0.4rem;
}
.waitlist-band > p { margin: 0 0 1rem; color: var(--c-moss); max-width: 46ch; }

.waitlist-form { max-width: 520px; }
.waitlist-field { margin: 0 0 0.9rem; }
.waitlist-field label {
	display: block;
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 0.25rem;
}
.waitlist-field input,
.waitlist-field select,
.waitlist-field textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-white);
	font: inherit;
	color: var(--c-ink);
}
.waitlist-field input:focus,
.waitlist-field select:focus,
.waitlist-field textarea:focus {
	outline: none;
	border-color: var(--c-marigold);
	box-shadow: 0 0 0 3px rgba(229, 163, 61, 0.25);
}
.waitlist-field--split { display: flex; gap: 0.9rem; }
.waitlist-field--split > span { flex: 1 1 0; }
.waitlist-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 520px) {
	.waitlist-field--split { flex-direction: column; gap: 0; }
	.waitlist-field--split > span { margin-bottom: 0.9rem; }
}

/* ---------- Awards: page cards + badge chips --------------------------------------- */
.award-week { margin-bottom: 2rem; }
.award-week-title {
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--c-spruce);
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--c-marigold);
}
.award-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.award-card {
	position: relative;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-top: 3px solid var(--award-gold);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem 1.25rem;
	box-shadow: var(--shadow);
}
.award-card--pitcher { border-top-color: var(--award-blue); }
/* Weekly-award icon tile (approved icon design handoff, 2026-07): custom
   home-plate (hitter) / baseball (pitcher) SVG in a tinted rounded tile. */
.award-icon {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.award-card--hitter  .award-icon { background: var(--award-gold-tint); color: var(--award-gold); }
.award-card--pitcher .award-icon { background: var(--award-blue-tint); color: var(--award-blue); }
.award-type {
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin: 0.35rem 0 0.15rem;
}
.award-card--hitter  .award-type { color: var(--award-gold-deep); }
.award-card--pitcher .award-type { color: var(--award-blue-deep); }
.award-player {
	font-family: var(--font-head);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--c-ink);
	line-height: 1.15;
}
.award-player a { color: inherit; text-decoration: none; }
.award-player a:hover { color: var(--c-marigold-deep); }
.award-card--hitter  .award-player,
.award-card--hitter  .award-player a { color: var(--award-gold); }
.award-team {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--c-moss);
	margin-top: 0.15rem;
}
.award-rule { height: 1px; background: var(--c-line); margin: 0.9rem 0 0.85rem; }
.award-line {
	margin-top: 0.6rem;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}

/* Homepage "Around the league": Players of the Week + season leaders */
.home-highlights .home-awards { margin-bottom: 1.5rem; }
.home-highlights-sub {
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--c-spruce);
	margin: 0 0 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}
.home-awards-week {
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--c-moss);
}
.home-highlights .postseason-leaders { margin-bottom: 0; }
.home-highlights .postseason-leaders h3 {
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--c-spruce);
	margin: 0 0 0.25rem;
}

/* Season-leader per-group accent — homepage module only (Schedule/Standings
   keep the default marigold). The award-card icon design is now global (above). */
.home-highlights .leader-group--batting  .leader-chip { border-left-color: var(--award-gold); }
.home-highlights .leader-group--pitching .leader-chip { border-left-color: var(--award-blue); }

/* Badge chips — shared by My FAMBL dashboard + player profiles. */
.fambl-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fambl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	background: color-mix(in srgb, var(--c-marigold) 14%, var(--c-white));
	border: 1px solid var(--c-marigold);
	border-radius: 999px;
	font-size: 0.82rem;
	color: var(--c-ink);
	line-height: 1.2;
}
.fambl-badge--pitcher {
	background: color-mix(in srgb, var(--c-sky) 18%, var(--c-white));
	border-color: var(--c-sky);
}
.fambl-badge-icon { display: inline-flex; color: var(--award-gold); }
.fambl-badge-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.fambl-badge--pitcher .fambl-badge-icon { color: var(--award-blue); }
.fambl-badge-week { color: var(--c-moss); }

/* Footer quick links (Awards / Documents) above the copyright line. */
.footer-legal .footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 0.5rem;
	font-weight: 600;
}
.footer-legal .footer-links a { color: var(--c-white); text-decoration: none; }
.footer-legal .footer-links a:hover { color: var(--c-marigold); text-decoration: underline; }

/* ---------- Rainout makeup tags + schedule key ------------------------------------- */
/* Pending = the actionable state (still needs rescheduling) — marigold to stand out. */
.badge-pending {
	background: var(--c-marigold);
	color: var(--c-spruce-deep);
	font-weight: 700;
}
/* Made up = resolved; it's a link to the makeup game. */
.badge-makeup {
	background: var(--c-mint);
	color: var(--c-spruce);
	border: 1px solid var(--c-sky);
	text-decoration: none;
}
a.badge-makeup:hover,
a.badge-makeup:focus { background: var(--c-sky); color: var(--c-spruce-deep); }

/* A rainout still awaiting a makeup gets a subtle marigold left-edge so it catches
   the eye when scanning the schedule. */
.game-row--rainout,
.game-row--canceled { position: relative; }
.game-row--rainout:has(.badge-pending),
.game-row--canceled:has(.badge-pending) { box-shadow: inset 3px 0 0 var(--c-marigold); }

.schedule-key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.1rem;
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--c-moss);
}
.schedule-key-label { font-weight: 700; color: var(--c-ink); }
.schedule-key-item { display: inline-flex; align-items: center; gap: 0.4rem; }