/*
 * Sunday Night Winner League — design system
 *
 * Dark stadium-night theme: Sunday night kickoff under the lights. Gold is
 * reserved for glory (trophies, wins), crimson for shame, turf green for
 * action and links. Hive amber is a *mild* honeycomb accent, not a
 * redesign — see .hex-accent. Every page on the site loads this one file;
 * this is where the whole site's look is centralized.
 */

:root {
	/* Design-language tokens (binding — see plan Global Constraints) */
	--bg: #0B1220;
	--panel: #131C2E;
	--panel-raised: #182545;
	--text: #F4F1E8;
	--turf: #2FBF71;
	--gold: #F5B301;
	--hive: #FFB300;
	--shame: #C0392B;

	--border: rgba(244, 241, 232, 0.10);
	--border-strong: rgba(244, 241, 232, 0.18);
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

	--radius: 10px;
	--radius-sm: 6px;
	--max-width: 1100px;

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	color-scheme: dark;
}

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

html, body {
	margin: 0;
	padding: 0;
	/* No horizontal scroll anywhere on the site, ever. */
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--turf);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--gold);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Uppercase, bold, letterspaced headings — no webfonts, system-ui only. */
h1, h2, h3, h4 {
	margin: 0 0 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Header + mild hive/honeycomb branding */
.site-header {
	position: relative;
	overflow: hidden;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

/* Tileable honeycomb outline, very low opacity — "mild" branding per spec:
   an accent motif, not a redesign. Colored with --hive (amber). */
.hex-accent {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background-repeat: repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FFB300' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23FFB300' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* The league's hive-buzz mark, ghosted large in the header — the source
   image is black line-art on white, so `invert` flips it to pale line-art
   on near-black, which merges softly into --panel at this opacity. Clipped
   by .site-header's own `overflow: hidden`, no extra containment needed. */
.hex-accent-mark {
	position: absolute;
	top: 50%;
	right: -40px;
	transform: translateY(-50%);
	width: 220px;
	height: 220px;
	opacity: 0.08;
	filter: invert(1);
	pointer-events: none;
}

.header-inner {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
}

.brand:hover,
.brand:focus-visible {
	color: var(--hive);
	text-decoration: none;
}

.brand-mark {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	flex: none;
}

.site-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.site-nav a {
	color: var(--text);
	opacity: 0.85;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.2rem 0.1rem;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--gold);
	opacity: 1;
	border-bottom-color: var(--gold);
	text-decoration: none;
}

.nav-sep {
	color: var(--hive);
	opacity: 0.4;
	margin: 0 0.6rem;
	font-weight: 700;
}

/* Page layout */
.site-main {
	max-width: var(--max-width);
	margin: 2rem auto;
	padding: 0 1.25rem;
	width: 100%;
}

/* .card — the base panel component every section sits in. */
.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--shadow);
}

.card:last-child { margin-bottom: 0; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

/* .plaque — engraved record cards for the Wall of Glory / trophy case. */
.plaque {
	position: relative;
	background:
		linear-gradient(155deg, rgba(245, 179, 1, 0.14), rgba(245, 179, 1, 0) 60%),
		var(--panel-raised);
	border: 1px solid rgba(245, 179, 1, 0.35);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), var(--shadow);
}

.plaque-title {
	margin: 0 0 0.35rem;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 800;
	font-size: 0.85rem;
}

.plaque-holder {
	font-weight: 700;
	font-size: 1.05rem;
}

.plaque-detail {
	color: var(--text);
	opacity: 0.8;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

.plaque-year {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* A photo tagged with the plaque's holder + record year, laid low-opacity
   behind the plaque's text (never in front of it — see the negative
   z-index, which paints below the plaque's normal-flow content within its
   own `.plaque { position: relative }` stacking context). */
.plaque-photo-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	pointer-events: none;
}

/* .plaque--shame — Wall of Shame: crimson, desaturated, tilted 1deg. */
.plaque--shame {
	background:
		linear-gradient(155deg, rgba(192, 57, 43, 0.16), rgba(192, 57, 43, 0) 60%),
		var(--panel-raised);
	border-color: rgba(192, 57, 43, 0.45);
	transform: rotate(-1deg);
	filter: saturate(0.75);
}

.plaque--shame .plaque-title {
	color: var(--shame);
}

/* Stadium-scoreboard tables: tabular numerals, uppercase headers. */
table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th, td {
	padding: 0.55rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

th {
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	font-weight: 700;
	border-bottom: 2px solid var(--border-strong);
	white-space: nowrap;
}

tbody tr {
	transition: background-color 0.12s ease;
}

tbody tr:hover {
	background: rgba(255, 255, 255, 0.035);
}

tbody tr:last-child td {
	border-bottom: none;
}

td.num, th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Footer — present on every page. */
.site-footer {
	max-width: var(--max-width);
	margin: 3rem auto 0;
	padding: 1.75rem 1.25rem 3rem;
	text-align: center;
	border-top: 1px solid var(--border);
	color: var(--text);
	opacity: 0.75;
	font-size: 0.85rem;
}

.commish-sig {
	margin-top: 0.4rem;
	color: var(--gold);
	font-style: italic;
	letter-spacing: 0.03em;
	opacity: 1;
}

.footer-mark {
	/* Override the global img{display:block} reset — this mark sits inline
	   with the footer's centered text, not as a block on its own line. */
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--border);
	vertical-align: middle;
	margin-left: 0.35rem;
}

/* Home hero — the league's mark gets its biggest, boldest showing right at
   the top of the home page. */
.home-hero {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.home-hero-mark {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid rgba(245, 179, 1, 0.4);
	box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.08), var(--shadow);
}

.home-hero-text h1 {
	margin-bottom: 0.15rem;
}

.home-hero-text p:last-child {
	margin-top: 0.15rem;
}

/* Small helpers reused across later pages */
.eyebrow {
	color: var(--hive);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.75rem;
}

.muted {
	opacity: 0.7;
}

.pill {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

.pill-gold {
	border-color: rgba(245, 179, 1, 0.45);
	color: var(--gold);
}

/* Wide tables (standings, scoreboards) scroll within their own container on
   narrow viewports instead of the page ever scrolling horizontally. */
.table-scroll {
	overflow-x: auto;
}

.table-scroll table {
	min-width: 460px;
}

/* Rank-1 gets a subtle gold treatment — the reigning champion once a season
   is final, or simply whoever's on top mid-season otherwise. */
tbody tr.row-lead {
	background: linear-gradient(90deg, rgba(245, 179, 1, 0.14), rgba(245, 179, 1, 0) 70%);
	box-shadow: inset 3px 0 0 var(--gold);
}

tbody tr.row-lead:hover {
	background: linear-gradient(90deg, rgba(245, 179, 1, 0.2), rgba(245, 179, 1, 0.03) 70%);
}

/* Last place gets the matching crimson treatment. */
tbody tr.row-shame {
	background: linear-gradient(90deg, rgba(192, 57, 43, 0.14), rgba(192, 57, 43, 0) 70%);
	box-shadow: inset 3px 0 0 var(--shame);
}

tbody tr.row-shame:hover {
	background: linear-gradient(90deg, rgba(192, 57, 43, 0.2), rgba(192, 57, 43, 0.03) 70%);
}

/* Season archive: a big year + champion banner. */
.season-hero h1 {
	font-size: 2.6rem;
	margin-bottom: 0.35rem;
}

.season-hero-champion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: 1.05rem;
}

/* Archive-gaps footnote box — a quieter aside, not another data table. */
.notes-box {
	border-left: 3px solid var(--hive);
}

.notes-box ul {
	margin: 0;
	padding-left: 1.1rem;
	opacity: 0.85;
	font-size: 0.9rem;
}

.notes-box li {
	margin-bottom: 0.35rem;
}

.notes-box li:last-child {
	margin-bottom: 0;
}

.week-group {
	margin-bottom: 1.5rem;
}

.week-group:last-child {
	margin-bottom: 0;
}

/* Today in League History: photo + plaque side by side, each filling the
   space gracefully when the other is absent. */
.today-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.25rem;
}

.today-grid > img {
	flex: 1 1 260px;
	max-height: 320px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.today-grid > .plaque {
	flex: 1 1 260px;
}

/* Manager pages — the site's crown jewels: a celebration of each franchise. */
.manager-card {
	display: block;
	color: var(--text);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.manager-card:hover,
.manager-card:focus-visible {
	color: var(--text);
	text-decoration: none;
	border-color: var(--border-strong);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.manager-card h2 {
	margin-bottom: 0.15rem;
	font-size: 1.15rem;
}

.manager-nickname {
	margin-bottom: 0.6rem;
	font-style: italic;
}

.manager-record {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0.4rem 0 0;
}

.manager-trophies {
	margin: 0.35rem 0 0;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
}

.manager-span {
	margin-top: 0.75rem;
	font-size: 0.75rem;
}

/* Hero header — big, confident, first thing a visitor sees on a profile. */
.manager-hero h1 {
	font-size: 2.4rem;
	margin-bottom: 0.25rem;
}

.manager-hero-nickname {
	font-style: italic;
	font-size: 1.1rem;
	opacity: 0.85;
	margin-bottom: 0.75rem;
}

.manager-hero-record {
	font-variant-numeric: tabular-nums;
	font-size: 1.3rem;
	font-weight: 700;
}

/* Trophy Case / Shame Case plaque stacks. */
.plaque-stack {
	display: grid;
	gap: 0.75rem;
}

/* Trophy plaques get a CSS-only confetti burst on hover — no JS, per the
   design brief. Colored dots fan out from the plaque's corners. */
.plaque--trophy {
	position: relative;
}

.plaque--trophy::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: inherit;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 7px 7px;
	background-image:
		radial-gradient(circle, var(--gold) 45%, transparent 50%),
		radial-gradient(circle, var(--turf) 45%, transparent 50%),
		radial-gradient(circle, var(--hive) 45%, transparent 50%),
		radial-gradient(circle, var(--gold) 45%, transparent 50%),
		radial-gradient(circle, var(--turf) 45%, transparent 50%);
	background-position:
		8% -12%, 30% -18%, 70% -16%, 92% -10%, 50% -20%;
	opacity: 0;
	transform: translateY(6px) scale(0.7);
	transition: opacity 0.2s ease, transform 0.3s ease;
}

.plaque--trophy:hover::before,
.plaque--trophy:focus-within::before {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Photo strip — horizontal scroller so the page itself never scrolls
   sideways. */
.photo-strip {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.photo-strip img {
	flex: 0 0 160px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

@media (max-width: 640px) {
	.header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.site-nav {
		gap: 0.25rem;
	}

	.card {
		padding: 1.1rem;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.2rem; }

	.manager-hero h1 { font-size: 1.8rem; }
	.season-hero h1 { font-size: 2rem; }

	.home-hero {
		gap: 0.85rem;
	}

	.home-hero-mark {
		width: 52px;
		height: 52px;
	}

	.hex-accent-mark {
		width: 140px;
		height: 140px;
		right: -30px;
	}
}