/* =================================================================
   NSNTA.org redesign mock — design tokens + components
   Single stylesheet, used by every page in the mock
   ================================================================= */

/* --- Design tokens ---------------------------------------------- */
:root {
	--teal-800: #004848;
	--teal-700: #006464;
	--teal-600: #008080;        /* primary / brand (matches NSNTA logo) */
	--teal-300: #65B3B3;
	--teal-100: #D6EFEF;
	--teal-50:  #EAF7F7;
	--clay-500: #D97757;        /* accent (CTAs, highlight) */
	--clay-600: #BF5F40;
	--gold-500: #E5B43B;        /* tertiary accent — borrowed from logo stars */
	--ink-900: #0C2533;
	--ink-800: #1A2027;
	--ink-700: #2C3744;
	--ink-600: #4C5560;
	--ink-500: #66707D;
	--ink-400: #7A8290;
	--ink-300: #B8BEC7;
	--ink-200: #DCDEE3;
	--paper: #FAFAF7;
	--paper-card: #FFFFFF;
	--paper-soft: #F0EFE9;
	--paper-tint: #F6F8FA;       /* alternating-band tint for mobile section rhythm */
	--line: #E8E5DE;
	--line-strong: #D6D2C8;
	--line-dark: #2A3A48;

	--shadow-sm: 0 1px 2px rgba(12, 37, 51, 0.05);
	--shadow-md: 0 4px 16px rgba(12, 37, 51, 0.06);
	--shadow-lg: 0 12px 32px rgba(12, 37, 51, 0.10);

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;

	--max-w: 1180px;        /* outer container — every interior page uses this */
	--content-w: 760px;     /* narrow content (forms, prose) — centered within --max-w */
	--gutter: 24px;
}

/* --- Base ------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-800);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	/* Sticky-footer pattern. Short pages (login, verify, logout, fees,
	   etc.) were leaving the footer floating mid-viewport on desktop.
	   Body is a flex column at full viewport height; `margin-top: auto`
	   on the footer (rule below) pushes it to the bottom whenever the
	   page content is shorter than the viewport. Tall pages flow
	   normally — the rule has no effect once content overflows. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3, h4 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink-900);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.85rem, 4.5vw, 3.3rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--clay-600); text-decoration: underline; }

.container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* --- Top navigation -------------------------------------------- */
.topnav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(10px);
}

.topnav-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 12px 0;
	min-height: 64px;
}

.topnav-brand {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}
.topnav-brand:hover { text-decoration: none; }
.topnav-brand img {
	height: 50px;
	width: auto;
	display: block;
}

.topnav-links {
	display: flex;
	gap: 2px;
	align-items: center;
	flex: 1;
	margin-left: 8px;
}

.topnav-link {
	padding: 8px 12px;
	border-radius: var(--r-sm);
	color: var(--ink-800);
	font-weight: 500;
	font-size: 0.93rem;
	white-space: nowrap;
	transition: background 0.15s;
}

.topnav-link:hover {
	background: var(--paper-soft);
	color: var(--ink-900);
	text-decoration: none;
}

.topnav-link.is-active {
	color: var(--teal-700);
	background: var(--teal-50);
}

/* --- Desktop nav dropdown groups (mirror mobile hamburger grouping) ---
   Hover/focus reveals a panel listing the group's links. Each panel has
   its own background + shadow, sits below the nav with a small offset
   so the user can cross the gap without losing hover. */
.nav-group { position: relative; display: inline-block; }
.nav-group-trigger {
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.nav-group-trigger .nav-chev {
	font-size: 0.7em;
	color: var(--ink-400);
	margin-top: 2px;
	transition: transform 0.15s, color 0.15s;
}
.nav-group:hover .nav-group-trigger .nav-chev,
.nav-group:focus-within .nav-group-trigger .nav-chev { transform: rotate(-180deg); color: var(--ink-700); }

.nav-group-panel {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 320px;
	padding: 10px;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	z-index: 110;
}
.nav-group:hover .nav-group-panel,
.nav-group:focus-within .nav-group-panel { display: block; }
/* Invisible bridge below the trigger so moving the cursor down to the
   panel doesn't trigger a hover-loss flicker. */
.nav-group::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	height: 8px;
}

.nav-group-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	color: var(--ink-800);
	font-weight: 500;
	font-size: 0.93rem;
	transition: background 0.12s, color 0.12s;
	text-decoration: none;
}
.nav-group-link:hover {
	background: var(--paper-soft);
	color: var(--ink-900);
	text-decoration: none;
}
.nav-group-link.is-active { color: var(--teal-700); background: var(--teal-50); }

/* Icon column — small brand-tinted square. */
.nav-group-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--paper-soft);
	color: var(--ink-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s, color 0.12s;
}
.nav-group-icon svg { width: 18px; height: 18px; display: block; }
.nav-group-link:hover .nav-group-icon { background: var(--teal-50); color: var(--teal-700); }
.nav-group-link.is-active .nav-group-icon { background: var(--teal-100); color: var(--teal-700); }

/* Body — headline + subtitle stacked. */
.nav-group-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.nav-group-label { font-weight: 600; color: var(--ink-900); line-height: 1.25; }
.nav-group-sub {
	font-size: 0.78rem;
	color: var(--ink-500);
	line-height: 1.3;
	font-weight: 400;
}

/* Primary item — clay accent (Submit a result). */
.nav-group-link.is-primary .nav-group-label { color: var(--clay-600); }
.nav-group-link.is-primary .nav-group-icon  { background: rgba(217, 119, 87, 0.10); color: var(--clay-600); }
.nav-group-link.is-primary:hover { background: rgba(217, 119, 87, 0.06); }
.nav-group-link.is-primary:hover .nav-group-icon  { background: rgba(217, 119, 87, 0.18); color: var(--clay-700, #c25e3e); }

.topnav-cta {
	margin-left: auto;
	padding: 9px 16px;
	background: var(--ink-900);
	color: white !important;
	border-radius: var(--r-sm);
	font-weight: 600;
	font-size: 0.88rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.topnav-cta:hover { background: var(--teal-600); text-decoration: none; }

/* --- Hamburger (mobile) ----------------------------------------- */
.hamburger {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	cursor: pointer;
	margin-left: auto;
}

.hamburger span {
	display: block;
	width: 20px; height: 2px;
	background: var(--ink-900);
	margin: 4px auto;
	transition: transform 0.2s, opacity 0.2s;
}

.hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
	display: none;
	position: fixed;
	top: 64px;
	left: 0; right: 0;
	background: var(--paper-card);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	padding: 12px 0 16px;
	z-index: 99;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

.mobile-menu.is-open { display: block; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { max-height: calc(100vh - 64px); overflow-y: auto; }

.mobile-menu a {
	display: block;
	padding: 13px var(--gutter);
	color: var(--ink-800);
	font-weight: 500;
	font-size: 1.02rem;
	border-bottom: 1px solid var(--line);
}

.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:hover { background: var(--paper-soft); text-decoration: none; }
.mobile-menu a.is-active { color: var(--teal-700); background: var(--teal-50); }

.mobile-menu-cta {
	display: block;
	margin: 14px var(--gutter) 0;
	padding: 14px 18px;
	background: var(--ink-900);
	color: white !important;
	border-radius: var(--r-sm);
	font-weight: 600;
	text-align: center;
}

/* Mobile menu — grouped sections so 11+ items don't read as a wall of
   links. Each group has a small uppercase label, items inside are bare
   rows with hairline dividers (matches the bare-row pattern used in
   page content). Primary action ("Submit a result") gets a clay accent
   to mark it as the high-traffic CTA. */
.mobile-menu-group {
	padding: 6px 0 4px;
	border-bottom: 1px solid var(--line);
}
.mobile-menu-group:last-of-type { border-bottom: none; }
.mobile-menu-label {
	padding: 10px var(--gutter) 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-400);
}
.mobile-menu-group a {
	display: block;
	padding: 11px var(--gutter);
	color: var(--ink-800);
	font-weight: 500;
	font-size: 1rem;
	border-bottom: none;
}
.mobile-menu-group a:last-of-type { border-bottom: none; }
.mobile-menu-group a:hover { background: var(--paper-soft); text-decoration: none; }
.mobile-menu-group a.is-active { color: var(--teal-700); background: var(--teal-50); }

/* Primary action — Submit a result. Clay accent + arrow. */
.mobile-menu-cta-inline {
	color: var(--clay-600) !important;
	font-weight: 700 !important;
}
.mobile-menu-cta-inline:hover { background: rgba(217, 119, 87, 0.06) !important; }

/* Home pinned at the top — slightly larger emphasis. */
.mobile-menu-home {
	padding: 12px var(--gutter);
	color: var(--ink-900);
	font-weight: 600;
	font-size: 1.02rem;
	display: block;
}
.mobile-menu-home.is-active { color: var(--teal-700); background: var(--teal-50); }
.mobile-menu-home:hover { background: var(--paper-soft); text-decoration: none; }

/* --- Buttons ---------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--r-sm);
	font-weight: 600;
	font-size: 0.97rem;
	border: none;
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
	text-decoration: none !important;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary { background: var(--clay-500); color: white; }
.btn-primary:hover { background: var(--clay-600); color: white; }
.btn-secondary { background: var(--paper-card); color: var(--ink-900); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--paper-soft); }
.btn-ghost { background: transparent; color: var(--ink-900); }

.btn-sm { padding: 8px 14px; font-size: 0.88rem; }

/* --- Hero ------------------------------------------------------- */
.hero {
	position: relative;
	padding: 80px 0 90px;
	background:
		radial-gradient(ellipse at top right, rgba(0, 128, 128, 0.12), transparent 60%),
		radial-gradient(ellipse at 20% 90%, rgba(217, 119, 87, 0.08), transparent 50%),
		var(--paper);
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	right: -100px; top: -100px;
	width: 600px; height: 600px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><pattern id='p' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'><path d='M0,5 L10,5 M5,0 L5,10' stroke='%23008080' stroke-width='0.4' opacity='0.6'/></pattern></defs><rect width='200' height='200' fill='url(%23p)'/></svg>") center / cover;
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}

.hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 50px;
	align-items: center;
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: var(--teal-50);
	color: var(--teal-700);
	border: 1px solid var(--teal-100);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 22px;
}

.hero-pill::before {
	content: '';
	width: 8px; height: 8px;
	background: var(--teal-600);
	border-radius: 50%;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.4); opacity: 0.5; }
}

.hero h1 { margin-bottom: 18px; }

.hero-tag {
	font-size: 1.13rem;
	color: var(--ink-600);
	margin-bottom: 32px;
	max-width: 540px;
}

.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Hero "live status" panel */
.hero-status {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px;
	box-shadow: var(--shadow-md);
}

.hero-status-label {
	font-size: 0.75rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 6px;
}

.hero-status-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 16px;
}

.hero-status-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px solid var(--line);
	font-size: 0.92rem;
}
.hero-status-row span:last-child { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* --- Section base ---------------------------------------------- */
section { padding: 70px 0; }

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 32px;
	gap: 24px;
	flex-wrap: wrap;
}

.section-eyebrow {
	font-size: 0.76rem;
	color: var(--teal-600);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 6px;
}

.section-head a {
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--ink-800);
}

.section-head a:hover { color: var(--teal-600); }

/* --- Live-data card grid (homepage 3-up) ----------------------- */
.livegrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.livecard {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px;
	box-shadow: var(--shadow-sm);
	transition: transform 0.15s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
}

.livecard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.livecard h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 1.1rem;
}

.livecard-icon {
	width: 34px; height: 34px;
	background: var(--teal-50);
	color: var(--teal-700);
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-size: 1.05rem;
}

.livecard-foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--teal-700);
}

/* Round snapshot card — stats-based, comp-fair.
 * The headline reads "<big> of <total> matches submitted". `flex-wrap: wrap`
 * lets the .big drop onto its own row if the card is narrow (or if numbers
 * push past the content width), instead of forcing the label to break
 * mid-phrase. `.label` gets `flex-basis: 100%` once it wraps, which makes
 * the description sit cleanly under the number on small screens. */
.snapshot-headline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 14px;
}

.snapshot-headline .big {
	font-size: 2rem;
	font-weight: 800;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.snapshot-headline .label {
	color: var(--ink-500);
	font-size: 0.92rem;
	flex: 1 1 auto;
	min-width: 0;
}

.snapshot-bar {
	height: 8px;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	margin-bottom: 14px;
	background: var(--line);
}

.snapshot-bar > span { height: 100%; }
.snapshot-bar .home { background: var(--teal-600); }
.snapshot-bar .away { background: var(--clay-500); }
.snapshot-bar .draw { background: var(--gold-500); }

.snapshot-legend {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
	font-size: 0.86rem;
	color: var(--ink-600);
	flex-wrap: wrap;
}
.snapshot-legend span::before {
	content: '';
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 2px;
	margin-right: 6px;
	vertical-align: 1px;
}
.snapshot-legend .home::before { background: var(--teal-600); }
.snapshot-legend .away::before { background: var(--clay-500); }
.snapshot-legend .draw::before { background: var(--gold-500); }
.snapshot-legend .outstanding { color: var(--clay-600); }
.snapshot-legend .outstanding::before { background: var(--clay-500); }

.snapshot-comps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}
.snapshot-comp {
	text-align: center;
}
.snapshot-comp .n {
	display: block;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
}
.snapshot-comp .lbl {
	font-size: 0.74rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	white-space: nowrap;
	/* "LADIES · 999" with uppercase + letter-spacing is the widest combo
	   and just barely overflows the 1/3-card column. nowrap keeps the
	   comp name and the scheduled count on one line; the live-card
	   container is wide enough for the worst-case string at every
	   breakpoint where the 3-col snapshot-comps grid is active. */
}

/* League leaders — 3-column grade rollup */
.leaders-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.leaders-col h4 {
	font-size: 0.74rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line);
}
.leaders-col ul {
	list-style: none;
	padding: 0; margin: 0;
}
.leaders-col li {
	padding: 6px 0;
	font-size: 0.88rem;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.leaders-col li .grd {
	color: var(--ink-500);
	font-size: 0.78rem;
	font-weight: 600;
	min-width: 30px;
}
.leaders-col li .team {
	color: var(--ink-900);
	font-weight: 500;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Next round card */
.nextrd {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	background: var(--paper-soft);
	border-radius: var(--r-md);
	margin-bottom: 14px;
}
.nextrd-date { font-weight: 700; color: var(--ink-900); font-size: 1.05rem; }
.nextrd-meta { color: var(--ink-600); font-size: 0.86rem; }

.nextrd-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 12px;
}
.nextrd-stat {
	background: var(--paper-soft);
	border-radius: var(--r-md);
	padding: 10px 12px;
}
.nextrd-stat .n {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.nextrd-stat .lbl {
	font-size: 0.74rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	margin-top: 4px;
	display: block;
}

/* --- News section ---------------------------------------------- */
.news { background: var(--paper); border-top: 1px solid var(--line); }

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.news-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.2s;
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }

.news-image { height: 110px; background-size: cover; background-position: center; position: relative; }
.news-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(12, 37, 51, 0.18));
}

.news-body { padding: 22px 24px 26px; }
.news-card a { display: block; color: var(--ink-800); }
.news-meta {
	font-size: 0.78rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin-bottom: 6px;
}
.news-card h3 { margin-bottom: 8px; color: var(--ink-900); }
.news-card p { color: var(--ink-600); font-size: 0.92rem; margin: 0; }

.news-img-1 { background: linear-gradient(135deg, #008080 0%, #006464 100%); }
.news-img-2 { background: linear-gradient(135deg, #D97757 0%, #BF5F40 100%); }
.news-img-3 { background: linear-gradient(135deg, #4C5560 0%, #0C2533 100%); }
.news-img-4 { background: linear-gradient(135deg, #E5B43B 0%, #C99421 100%); }

/* --- Quick-action banner --------------------------------------- */
.quickact {
	background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-600) 100%);
	color: white;
	border-radius: var(--r-lg);
	padding: 52px 52px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 36px;
	align-items: center;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.quickact::before {
	content: '';
	position: absolute;
	right: -80px; bottom: -80px;
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
	pointer-events: none;
}

.quickact h2 { color: white; margin-bottom: 12px; }
.quickact p { opacity: 0.85; margin: 0; }
.quickact-actions { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.quickact-actions a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: rgba(255,255,255,0.1);
	color: white;
	border-radius: var(--r-sm);
	font-weight: 600;
	border: 1px solid rgba(255,255,255,0.2);
	transition: background 0.15s;
}
.quickact-actions a:hover { background: rgba(255,255,255,0.2); text-decoration: none; }
.quickact-actions a span:last-child { font-size: 1.2em; }

/* --- Sponsors / affiliates ------------------------------------- */
.sponsors {
	padding: 50px 0;
	background: var(--paper);
	border-top: 1px solid var(--line);
}
.sponsors-label {
	text-align: center;
	font-size: 0.76rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 24px;
}
.sponsors-row {
	display: flex;
	gap: 28px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.sponsors-row span,
.sponsors-row a {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink-400);
	font-size: 1rem;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}
.sponsors-row a:hover {
	color: var(--teal-700);
	border-color: var(--teal-600);
}

/* --- Footer ----------------------------------------------------- */
footer {
	background: var(--ink-900);
	color: rgba(255,255,255,0.75);
	padding: 60px 0 28px;
	/* Paired with `body { display: flex; flex-direction: column;
	   min-height: 100vh }` above to pin the footer to the viewport
	   bottom on short pages (login, verify, logout, fees, etc.).
	   Has no effect on pages tall enough to overflow — content flows
	   normally and the footer trails it. */
	margin-top: auto;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 36px;
	margin-bottom: 36px;
}

.footer-brand .topnav-brand { margin-bottom: 14px; }
.footer-brand img {
	height: 56px;
	width: auto;
	/* Invert luminance so the dark map shape shows light on the dark footer.
	   Then tint with a soft hue so it doesn't look like a flat negative. */
	filter: brightness(0) invert(1) opacity(0.92);
}

.footer-brand p {
	font-size: 0.9rem;
	margin: 0;
	opacity: 0.7;
	max-width: 320px;
}

footer h4 {
	color: white;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 14px;
}

footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 8px; }
footer a { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
footer a:hover { color: white; text-decoration: none; }

.footer-bottom {
	border-top: 1px solid var(--line-dark);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	font-size: 0.83rem;
	opacity: 0.65;
	flex-wrap: wrap;
	gap: 16px;
}
.footer-social { display: flex; gap: 12px; }

/* Mobile footer — drop the 4 link columns. Everything in them is also
   in the hamburger menu now, so repeating them at the bottom of every
   page just makes the footer huge. Keep brand block + footer-bottom
   (copyright + social) only. */
@media (max-width: 760px) {
	footer { padding: 32px 0 22px; }
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 22px;
	}
	.footer-grid > div:not(.footer-brand) { display: none; }
	.footer-brand img { height: 44px; }
	.footer-brand p { font-size: 0.86rem; }
	.footer-bottom { padding-top: 16px; font-size: 0.78rem; gap: 12px; }
}
.footer-social a {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	display: grid;
	place-items: center;
	color: white;
}
.footer-social a:hover { background: var(--teal-600); }

/* --- Inner pages — generic --------------------------------------- */
.page-hero {
	padding: 60px 0 40px;
	background:
		radial-gradient(ellipse at top right, rgba(0, 128, 128, 0.10), transparent 60%),
		var(--paper);
}

.crumbs {
	font-size: 0.85rem;
	color: var(--ink-400);
	margin-bottom: 10px;
}
.crumbs a { color: var(--ink-600); }
.crumbs .sep { margin: 0 8px; color: var(--ink-400); }

.page-hero h1 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); margin-bottom: 10px; }
.page-hero .lead { font-size: 1.08rem; color: var(--ink-600); max-width: 700px; }

/* --- Ladders: comp tabs — pivot between All / Mixed / Mens / Ladies.
   Active tab takes the comp's brand colour. */
.lad-comp-tabs {
	display: flex;
	gap: 4px;
	/* Sit close to the breadcrumb above so the comp tabs feel like
	   part of the page header rather than a detached chunk. 12px
	   matches the breathing room used around the chip strip below. */
	margin: 12px 0;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.lad-comp-tab {
	padding: 12px 18px;
	font-size: 0.96rem;
	font-weight: 600;
	color: var(--ink-500);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.lad-comp-tab:hover { color: var(--ink-900); text-decoration: none; }
.lad-comp-tab.is-active.tab-all    { color: var(--ink-900);  border-bottom-color: var(--ink-900); }
.lad-comp-tab.is-active.tab-mixed  { color: var(--teal-700); border-bottom-color: var(--teal-600); }
.lad-comp-tab.is-active.tab-mens   { color: #B35A3C;         border-bottom-color: var(--clay-600); }
.lad-comp-tab.is-active.tab-ladies { color: #7C3AED;         border-bottom-color: #7C3AED; }
@media (max-width: 600px) {
	.lad-comp-tab { padding: 10px 14px; font-size: 0.92rem; }
}

/* Finals-zone highlight — teams in positions 1-4 get a subtle teal
   tint to mark the finals qualifying band. The .pts and rank stay
   readable; this is just a soft contextual cue. */
.preview-card table tr.is-finals { background: rgba(0, 128, 128, 0.04); }
.preview-card table tr.is-finals td:first-child { color: var(--teal-700); font-weight: 700; }
.lad-full tbody tr.is-finals { background: rgba(0, 128, 128, 0.04); }
.lad-full tbody tr.is-finals .rk { background: var(--teal-600); color: white; }

/* --- Ladders: grade-chip nav --------------------------------------
   Sits below the comp tabs and lists every grade as a small pill.
   Sticky on the y-axis so the user can jump between grades at any
   scroll position. Horizontally scrollable on mobile so a 19-grade
   comp doesn't blow up the layout. */
.lad-grade-chips {
	display: flex;
	flex-wrap: nowrap;       /* single-row strip on desktop + mobile */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 6px;
	/* 12px internal padding gives the chips breathing room from the
	   chip strip's edges (top + bottom). The strip itself sits flush
	   against whatever is above it (no external top gap). */
	padding: 12px var(--gutter);
	margin: 0 calc(-1 * var(--gutter)) 12px;
	/* Sticks flush against the topnav's actual bottom edge. The nav's
	   min-height is 64px but the brand image (50px) + .topnav-inner
	   padding (12px top + 12px bottom) + 1px border push the real
	   rendered height to 75px. Use that here so the strip doesn't
	   slide under the nav. Mobile override below offsets for the
	   sticky page-titlebar. */
	position: sticky;
	top: 75px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	z-index: 40;
	border-bottom: 1px solid var(--line);
}
/* Soft right-edge fade hints there's more to scroll on a horizontal
   chip strip. Only show on desktop where horizontal scroll affordance
   isn't as obvious from a swipe gesture. */
.lad-grade-chips::after {
	content: '';
	position: sticky;
	right: 0;
	width: 24px;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to right, transparent, rgba(255,255,255,0.96));
	margin-left: -24px;
	align-self: stretch;
	flex-shrink: 0;
}
.lad-grade-chip {
	display: inline-block;
	/* Uniform width across the strip so chips line up regardless of
	   label length ("A" vs "A +12"). Wide enough to fit the longest
	   abbreviated grade comfortably; longer labels still expand. */
	min-width: 56px;
	padding: 5px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink-700);
	background: var(--paper-soft);
	border-radius: 999px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s, color 0.12s;
}
.lad-grade-chip:hover { background: var(--teal-50); color: var(--teal-700); text-decoration: none; }

@media (max-width: 760px) {
	/* Mobile: tighter padding + sit flush below the sticky page-titlebar
	   (64px nav + ~42px titlebar = 106px). */
	.lad-grade-chips {
		padding: 10px var(--gutter);
		gap: 5px;
		top: 106px;
	}
	/* Mobile keeps the uniform width — slightly smaller to fit a few
	   more chips into the horizontal scroll viewport at once. */
	.lad-grade-chip { padding: 4px 10px; font-size: 0.8rem; min-width: 50px; }
}

/* Per-grade block — one section per grade containing a full ladder.
   Section has its own anchor target (id) for the chip-nav.
   scroll-margin-top must clear the sticky chrome so anchor jumps don't
   land behind the chip strip:
     desktop = 64 nav + 12 gap + ~48 chip strip + ~16 buffer = 140
     mobile  = 64 nav + 42 titlebar + 12 gap + ~42 chip strip + ~15 = 175 */
/* scroll-margin-top clears the sticky chrome so anchor jumps don't
   land behind the chip strip. These static defaults are intentionally
   generous to handle initial-load hash navigation (when the inline
   script in ladders.php hasn't run yet) plus the horizontal scrollbar
   that appears on the chip strip when grades overflow.
     desktop = 75 nav + ~60 chip strip (+scrollbar) + ~14 buffer = 150
     mobile  = 64 nav + 40 titlebar + ~50 chip strip + ~18 buffer = 172
   The inline script overrides these with measured values once it runs. */
/* Reset the global `section { padding: 70px 0 }` (50px on mobile) —
   grade blocks stack tightly inside .lad-grade-list, so the page-level
   section rhythm doesn't apply. Without this override the heading sat
   ~50-70px below the section's top edge, which read as a huge gap
   after an anchor-scroll. */
.lad-grade-block { padding: 0; margin-bottom: 24px; scroll-margin-top: 150px; }
@media (max-width: 760px) {
	.lad-grade-block { scroll-margin-top: 172px; }
}
.lad-grade-block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.lad-grade-block-head h2 {
	font-size: 1.05rem;
	margin: 0;
	color: var(--ink-900);
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}
.lad-grade-block-head .lad-grade-count {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.lad-grade-block-head .lad-grade-top {
	font-size: 0.78rem;
	color: var(--ink-500);
	text-decoration: none;
	font-weight: 500;
}
.lad-grade-block-head .lad-grade-top:hover { color: var(--teal-700); }

/* Inside .lad-grade-block tighten the table cell padding so each grade
   is compact enough to fit 3 across on desktop. */
.lad-grade-block .lad-full table thead th { padding: 8px 8px; font-size: 0.7rem; }
.lad-grade-block .lad-full table tbody td { padding: 7px 8px; font-size: 0.86rem; }
.lad-grade-block .lad-full .rk { width: 22px; height: 22px; font-size: 0.78rem; }

/* Finals weeks: just position + team, no Pts/W/L/%. Let the team
   column breathe since it's now the only data column. */
.lad-grade-block.is-finals-week .lad-full table tbody td:nth-child(2) { font-weight: 600; }

.lad-comp-summary {
	margin: 0 0 22px;
	font-size: 0.86rem;
	color: var(--ink-500);
}

/* On desktop: three grades per row, tight vertical rhythm. At narrower
   widths we step down to 2 then 1 column. */
@media (min-width: 1280px) {
	.lad-grade-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 6px 22px;
		align-items: start;
	}
	.lad-grade-block { margin-bottom: 6px; }
	/* Squeeze the numeric columns so the Team name fits without wrapping —
	   longest club names are ~24 chars and were spilling to a second line
	   in the 3-up layout. */
	.lad-full thead th,
	.lad-full tbody td { padding-left: 7px; padding-right: 7px; }
	.lad-full thead th:nth-child(1),
	.lad-full tbody td:nth-child(1) { width: 34px; }
	.lad-full thead th:nth-child(3),
	.lad-full tbody td:nth-child(3) { width: 42px; }
	.lad-full thead th:nth-child(4),
	.lad-full tbody td:nth-child(4),
	.lad-full thead th:nth-child(5),
	.lad-full tbody td:nth-child(5) { width: 34px; }
	.lad-full thead th:nth-child(6),
	.lad-full tbody td:nth-child(6) { width: 44px; }
	.lad-full tbody td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 900px) and (max-width: 1279px) {
	.lad-grade-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px 22px;
		align-items: start;
	}
	.lad-grade-block { margin-bottom: 8px; }
}

/* Floating back-to-top button — appears once user scrolls deep, taps
   to smooth-scroll back to the top of the page. */
.lad-back-to-top {
	position: fixed;
	bottom: 22px;
	right: 22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ink-900);
	color: #fff;
	border: none;
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	z-index: 60;
	transition: transform 0.15s, opacity 0.15s;
}
.lad-back-to-top:hover { transform: translateY(-2px); background: var(--teal-700); }

/* --- Ladders / filters ---------------------------------------------- */
.lad-filters {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding: 16px;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}
.lad-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 140px;
}
.lad-filter-group label {
	font-size: 0.72rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.lad-filter-group select,
.lad-filter-group input {
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--ink-900);
	cursor: pointer;
	min-height: 38px;
}
/* Disabled state — visibly greyed so users see the control is locked
   (e.g. competition selector when "All competitions" is ticked). Matches
   the `.portal-fixtures-form` treatment so the cue is consistent across
   the public fixture builder and the club-portal version. */
.lad-filter-group select:disabled,
.lad-filter-group input:disabled {
	background: var(--paper-soft);
	color: var(--ink-400);
	cursor: not-allowed;
	opacity: 0.7;
}
.lad-filter-group select:disabled + label,
.lad-filter-group:has(select:disabled) label {
	color: var(--ink-400);
}

/* View-mode segment control (e.g. "Predictive / Confirmed") */
.view-toggle {
	display: inline-flex;
	gap: 2px;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px;
	/* No bottom margin — the chip strip below sits flush against the
	   view toggle so the header chrome reads as one connected block. */
	margin-bottom: 0;
}
.view-toggle button,
.view-toggle a {
	display: inline-block;
	border: none;
	background: transparent;
	padding: 7px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-500);
	text-decoration: none;
	border-radius: calc(var(--r-sm) - 2px);
	cursor: pointer;
	line-height: 1.2;
	transition: background 0.12s ease, color 0.12s ease;
}
.view-toggle button:hover,
.view-toggle a:hover {
	color: var(--ink-900);
}
.view-toggle button.is-active,
.view-toggle a.is-active {
	background: var(--paper-card);
	color: var(--ink-900);
	box-shadow: var(--shadow-sm);
	cursor: default;
}

/* Full ladder table */
.lad-full {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.lad-full table { width: 100%; border-collapse: collapse; }
.lad-full thead th {
	padding: 13px 11px;
	text-align: right;
	font-size: 0.76rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	background: var(--paper-soft);
	border-bottom: 1px solid var(--line);
}
.lad-full thead th:nth-child(2) { text-align: left; }
.lad-full tbody td {
	padding: 12px 11px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--line);
	font-size: 0.95rem;
}
.lad-full tbody td:nth-child(2) { text-align: left; font-weight: 500; color: var(--ink-900); }
.lad-full tbody tr:last-child td { border-bottom: none; }
.lad-full tbody tr:hover { background: var(--paper-soft); }
.lad-full .pts { font-weight: 700; color: var(--ink-900); }
.lad-full .rk {
	display: inline-block;
	width: 22px; height: 22px;
	background: var(--paper-soft);
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.78rem;
	line-height: 22px;
	text-align: center;
	color: var(--ink-600);
}
.lad-full tbody tr:first-child .rk { background: var(--clay-500); color: white; }

/* --- Predictive ladder row state ------------------------------- */
/*    .is-unprocessed: a result has been submitted but not yet
 *      coordinator-processed — render in italics, slightly muted.
 *    .is-missing: at least one expected result for this team is
 *      not on file (neither processed nor submitted) — render in red
 *      so the gap stands out.
 *
 *    NOTE: selectors use doubled class names (`tr.is-missing.is-missing`)
 *    to bump specificity above the position-1 highlight rules further
 *    down the file (`.preview-card tr:first-child td:nth-child(2)` and
 *    `.lad-full tbody tr:first-child .rk`). Same DOM target, just outranks
 *    them in the cascade so the top row also gets the predictive state.
 */
.lad-full tbody tr.is-unprocessed.is-unprocessed td,
.preview-card table tr.is-unprocessed.is-unprocessed td { font-style: italic; }

.lad-full tbody tr.is-missing.is-missing td,
.preview-card table tr.is-missing.is-missing td { color: #dc2626; }

.lad-full tbody tr.is-missing.is-missing .pts,
.preview-card table tr.is-missing.is-missing .pts { color: #dc2626; }

/* Top-row rank pill keeps the clay highlight by default; for a missing
 * top row, swap it to red so the cue carries through. */
.lad-full tbody tr.is-missing.is-missing:first-child .rk { background: #dc2626; color: white; }
.preview-card tr.is-missing.is-missing:first-child td:first-child { color: #dc2626; }

.predictive-banner-inline {
	background: linear-gradient(135deg, rgba(202, 96, 76, 0.06), rgba(15, 118, 110, 0.04));
	border: 1px solid var(--line);
	border-left: 3px solid var(--clay-500);
	border-radius: var(--r-md);
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 0.88rem;
	color: var(--ink-600);
	display: flex;
	align-items: center;
	gap: 10px;
}
.predictive-banner-inline strong { color: var(--ink-900); }
.predictive-banner-inline em { font-style: italic; color: var(--ink-700); }
.predictive-banner-inline .red-cue { color: var(--clay-600); font-weight: 600; }

/* --- Season-at-a-glance (condensed multi-grade view) ----------- */
.glance-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.glance-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.glance-col-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--teal-600);
	margin-bottom: 4px;
}

.glance-col-header h3 {
	margin: 0;
	font-size: 1.15rem;
	color: var(--ink-900);
}

.glance-col-header .count {
	margin-left: auto;
	font-size: 0.78rem;
	color: var(--ink-500);
	background: var(--teal-50);
	padding: 3px 9px;
	border-radius: 999px;
	font-weight: 600;
}

.grade-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px 16px;
	transition: border-color 0.15s, box-shadow 0.2s;
}

.grade-card:hover {
	border-color: var(--teal-300);
	box-shadow: var(--shadow-sm);
}

.grade-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.grade-card-name {
	font-size: 0.78rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

.grade-card-link {
	font-size: 0.78rem;
	color: var(--teal-700);
	font-weight: 600;
}

.grade-card ol {
	list-style: none;
	margin: 0; padding: 0;
	font-size: 0.9rem;
}
.grade-card ol li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-variant-numeric: tabular-nums;
}
.grade-card ol li .pos {
	width: 18px;
	font-weight: 700;
	color: var(--ink-400);
	font-size: 0.82rem;
}
.grade-card ol li:first-child .pos { color: var(--clay-500); }
.grade-card ol li .nm { flex: 1; color: var(--ink-900); }
.grade-card ol li:first-child .nm { font-weight: 600; }
.grade-card ol li .pt { color: var(--ink-600); font-weight: 600; font-size: 0.86rem; }

/* --- Season-at-a-glance: filter bar + pinned + preview-stack ----- */
.glance-toolbar {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px 16px;
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	align-items: center;
}
.glance-toolbar-group {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.glance-toolbar-label {
	font-size: 0.75rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	margin-right: 4px;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper-card);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--ink-700);
	cursor: pointer;
	transition: all 0.12s;
}
.chip:hover { border-color: var(--teal-300); }
.chip.is-active {
	background: var(--teal-600);
	color: white;
	border-color: var(--teal-600);
}
.chip-search {
	flex: 1;
	min-width: 200px;
	padding: 7px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: 0.92rem;
	background: var(--paper);
}
.chip-search:focus { outline: 2px solid var(--teal-300); border-color: var(--teal-600); background: var(--paper-card); }

.pinned-bar {
	background: linear-gradient(135deg, var(--paper-soft) 0%, var(--paper) 100%);
	border: 1px dashed var(--teal-300);
	border-radius: var(--r-md);
	padding: 14px 18px;
	margin-bottom: 28px;
}
.pinned-bar-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.76rem;
	color: var(--teal-700);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 10px;
}
.pinned-bar-head::before { content: '★'; color: var(--gold-500); font-size: 1rem; }
.pinned-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}
.pinned-item {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s;
}
.pinned-item:hover { border-color: var(--teal-300); text-decoration: none; }
.pinned-item .head {
	font-size: 0.72rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
}
.pinned-item .head .pos {
	color: var(--clay-500);
	font-weight: 800;
}
.pinned-item .nm {
	font-weight: 600;
	color: var(--ink-900);
	font-size: 0.96rem;
}
.pinned-item .meta {
	font-size: 0.82rem;
	color: var(--ink-500);
	font-variant-numeric: tabular-nums;
}

/* The preview stack — sections per competition, then grade cards */
.preview-section + .preview-section { margin-top: 36px; }
.preview-section-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--teal-600);
}
.preview-section-head h2 {
	margin: 0;
	font-size: 1.4rem;
}
.preview-section-head .count {
	font-size: 0.82rem;
	color: var(--ink-500);
	font-weight: 500;
}
.preview-section-head .anchor {
	margin-left: auto;
	font-size: 0.84rem;
	font-weight: 600;
}

.preview-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.preview-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.2s;
}
.preview-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }

.preview-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: var(--paper-soft);
	border-bottom: 1px solid var(--line);
}
.preview-card-head .gr {
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--ink-700);
}
.preview-card-head .gr-letter {
	display: inline-block;
	width: 22px; height: 22px;
	border-radius: 4px;
	background: var(--teal-600);
	color: white;
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	margin-right: 6px;
}
.preview-card-head .pin {
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--ink-300);
	font-size: 1rem;
	padding: 4px 6px;
	line-height: 1;
	transition: color 0.12s, transform 0.12s;
}
.preview-card-head .pin:hover { color: var(--gold-500); transform: scale(1.15); }
.preview-card-head .pin.is-pinned { color: var(--gold-500); }
.preview-card-head .open {
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--teal-700);
}

.preview-card table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}
.preview-card td {
	padding: 7px 16px;
	border-top: 1px solid var(--line);
}
.preview-card td:first-child { width: 26px; color: var(--ink-400); font-weight: 700; font-size: 0.78rem; }
.preview-card tr:first-child td { border-top: none; }
.preview-card tr:first-child td:first-child { color: var(--clay-500); }
.preview-card tr:first-child td:nth-child(2) { font-weight: 600; color: var(--ink-900); }
.preview-card td.team { color: var(--ink-800); }
.preview-card td.pts { text-align: right; font-weight: 700; color: var(--ink-900); width: 50px; }
.preview-card td.pct { text-align: right; color: var(--ink-500); font-size: 0.82rem; width: 60px; }

.preview-card-foot {
	padding: 8px 16px 11px;
	border-top: 1px solid var(--line);
	font-size: 0.8rem;
	color: var(--ink-500);
	background: var(--paper);
}
.preview-card-foot a { color: var(--teal-700); font-weight: 600; }

/* --- Info / content page --------------------------------------- */
.content-layout {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 44px;
	margin-bottom: 70px;
}

.content-side {
	position: sticky;
	top: 80px;       /* sit just below the 64px topnav with 16px breathing space */
	align-self: start;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

/* Mobile: collapse the main+sidebar grid to a single column AND hide
   the sidebar entirely. The locked design intent (WEBSITE_UPDATES.md
   §2.5) is that mobile content is the focus — site navigation goes
   through the hamburger; in-page navigation is handled by the page's
   own structure (accordion items on news, tinted category cards on
   info, collapsible role groups on about). A sidebar at the bottom of
   the page on mobile is redundant. Used by every interior page that
   adopts the .content-layout grid (news / info / downloads / about /
   dates / fees). */
@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; gap: 32px; }
	.content-side { display: none; }
}

/* --- Modern compact title bar ----------------------------------
   Replaces the older .page-hero-inline (lead-paragraph-as-chrome) on
   interior pages. Single horizontal row: breadcrumb + H1 left, action
   buttons right. No lead paragraph, no separator. ~28px gap from this
   bar to content below. Used on every interior page so vertical rhythm
   is identical across the site. */
.page-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
}
.page-titlebar-text { min-width: 0; }
.page-titlebar .crumbs {
	font-size: 0.78rem;
	color: var(--ink-400);
	margin-bottom: 4px;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.page-titlebar .crumbs a { color: var(--ink-500); }
.page-titlebar .crumbs a:hover { color: var(--teal-700); }
.page-titlebar .crumbs .sep { margin: 0 6px; color: var(--ink-300); }
.page-titlebar h1 {
	font-size: clamp(1.35rem, 2.6vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	margin: 0;
	line-height: 1.15;
	color: var(--ink-900);
}
.page-titlebar .titlebar-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* Optional intro paragraph — used when a page genuinely needs an intro
   line (e.g. About). Sits as the first content element, not as header
   chrome. Slightly larger + muted to distinguish from regular body. */
.page-intro {
	font-size: 1.02rem;
	color: var(--ink-600);
	max-width: 720px;
	margin-top: 0;
	margin-bottom: 26px;
}

/* Section wrapper — universal padding so every interior page has the
   same gap from nav bottom to the title bar. */
.page-shell { padding: 28px 0 64px; }

/* Narrow content block — centered inside the full-width container.
   Used on pages where the content is a form or prose (fixtures.php),
   so the titlebar can stretch full-width but the body stays readable. */
.narrow-content {
	max-width: var(--content-w);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 600px) {
	.page-titlebar { align-items: flex-start; flex-direction: column; }
	.page-titlebar .titlebar-actions { width: 100%; justify-content: flex-end; }
}

/* Mobile: lock the page-titlebar to the top so the breadcrumb is
   always tappable. The h1 is hidden — the breadcrumb's leaf
   ("Home › About › Season dates") already names the current page.
   .page-shell loses its top padding so the bar sits flush against
   the nav from the first paint (no jump-to-stick on first scroll). */
@media (max-width: 760px) {
	.page-shell { padding-top: 0; }
	.page-titlebar {
		position: sticky;
		top: 64px;          /* sits just under the 64px topnav */
		z-index: 50;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(10px);
		margin-left: calc(-1 * var(--gutter));
		margin-right: calc(-1 * var(--gutter));
		padding: 8px var(--gutter);
		margin-bottom: 14px;
		border-bottom: 1px solid var(--line);
		align-items: center;
		flex-direction: row;
	}
	.page-titlebar .crumbs { margin-bottom: 0; font-size: 0.82rem; }
	.page-titlebar h1 { display: none; }
	.page-titlebar .titlebar-actions { width: auto !important; }
	.page-titlebar .titlebar-actions a.btn,
	.page-titlebar .titlebar-actions button.btn { padding: 5px 10px; font-size: 0.78rem; }
}
.content-side h4 {
	font-size: 0.76rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 12px;
}
.content-side ul { list-style: none; padding: 0; margin: 0; }
.content-side li { margin-bottom: 3px; }
.content-side a {
	display: block;
	padding: 7px 12px;
	border-radius: var(--r-sm);
	color: var(--ink-600);
	font-size: 0.92rem;
}
.content-side a.is-active { background: var(--teal-50); color: var(--teal-700); font-weight: 600; }
.content-side a:hover { background: var(--paper-soft); color: var(--ink-900); text-decoration: none; }

.content-body { font-size: 1.04rem; line-height: 1.75; max-width: var(--content-w); }
.content-body h2 { margin-top: 1.8em; scroll-margin-top: 90px; }
.content-body h2:first-child { margin-top: 0; }
.content-body h3 { margin-top: 1.5em; scroll-margin-top: 90px; }
.content-body ol, .content-body ul { padding-left: 1.4em; }
.content-body li { margin-bottom: 0.5em; }
.content-body blockquote {
	border-left: 4px solid var(--teal-600);
	padding: 0 0 0 20px;
	margin: 1.5em 0;
	color: var(--ink-600);
	font-style: italic;
}

.callout {
	background: var(--teal-50);
	border-left: 4px solid var(--teal-600);
	padding: 18px 22px;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin: 1.5em 0;
}
.callout-title { font-weight: 700; color: var(--teal-700); margin-bottom: 4px; }
.callout p:last-child { margin-bottom: 0; }

/* --- Fixtures page (cascading selectors) ----------------------- */
.fixture-builder {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 32px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 32px;
}

.fixture-step {
	border-top: 1px solid var(--line);
	padding-top: 22px;
	margin-top: 22px;
}
.fixture-step:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.step-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--ink-500);
	margin-bottom: 14px;
}
.step-num {
	width: 22px; height: 22px;
	background: var(--teal-600);
	color: white;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.76rem;
}

.choice-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.choice {
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	cursor: pointer;
	font-weight: 500;
	transition: all 0.15s;
	font-size: 0.95rem;
}
.choice:hover { border-color: var(--teal-300); }
.choice.is-active {
	background: var(--teal-50);
	border-color: var(--teal-600);
	color: var(--teal-700);
	font-weight: 600;
}

.section-checks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.section-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
	font-size: 0.94rem;
}
.section-check input { margin: 0; }

.fixture-summary {
	background: var(--teal-50);
	border: 1px solid var(--teal-100);
	border-radius: var(--r-md);
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}
.fixture-summary-text { flex: 1; }
.fixture-summary-text strong { color: var(--teal-700); display: block; margin-bottom: 2px; }
.fixture-summary-text span { font-size: 0.92rem; color: var(--ink-600); }

/* --- Clubs page ------------------------------------------------ */
.clubs-search-bar {
	display: flex;
	gap: 12px;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 12px;
	margin-bottom: 28px;
	align-items: center;
	/* Sticks flush against the topnav's actual bottom edge (75px —
	   the brand image + .topnav-inner padding push it past the 64px
	   min-height). The bar's own 12px internal padding then gives
	   the input breathing room from the nav's bottom border. Mobile
	   override below offsets for the sticky page-titlebar. */
	position: sticky;
	top: 75px;
	z-index: 50;
	box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) {
	/* On mobile the page-titlebar is also sticky (top: 64, ~37px tall →
	   bottom edge at ~101px). Sit flush below it so the search bar
	   doesn't slide up over the breadcrumb on scroll. */
	.clubs-search-bar { top: 101px; }
}

/* When the search JS scrolls the first matching card into view, this
   scroll-margin offsets the landing position so the card's heading
   appears below the sticky search bar instead of behind it.
     desktop = 75 (bar top) + ~63 (bar height) + 12 buffer = 150
     mobile  = 101 (bar top, below sticky titlebar) + ~63 + 11 = 175 */
.club-dir-card { scroll-margin-top: 150px; }
@media (max-width: 760px) {
	.club-dir-card { scroll-margin-top: 175px; }
}

.clubs-search-bar input {
	flex: 1;
	border: none;
	padding: 9px 4px;
	font-size: 1rem;
	background: transparent;
	color: var(--ink-900);
	outline: none;
}

.clubs-layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 30px;
}

.map-placeholder {
	background:
		linear-gradient(135deg, rgba(0,128,128,0.06) 0%, rgba(0,128,128,0.02) 100%),
		repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,128,128,0.05) 10px 11px),
		var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	min-height: 480px;
	position: relative;
	overflow: hidden;
}
.map-placeholder::after {
	content: 'Interactive club locator (Leaflet / OpenStreetMap)';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: var(--ink-500);
	font-size: 0.92rem;
	background: rgba(255,255,255,0.85);
	padding: 8px 14px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
}
.map-pin {
	position: absolute;
	width: 26px; height: 26px;
	background: var(--clay-500);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 2px solid white;
	box-shadow: var(--shadow-md);
}

.club-cards { display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; padding-right: 4px; }

.club-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 18px;
	transition: border-color 0.15s, box-shadow 0.2s;
}
.club-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }
.club-card h3 {
	margin: 0 0 4px;
	font-size: 1.02rem;
}
.club-card .addr {
	font-size: 0.88rem;
	color: var(--ink-600);
	margin-bottom: 8px;
}
.club-card .tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.club-tag {
	display: inline-block;
	padding: 2px 8px;
	font-size: 0.74rem;
	font-weight: 600;
	background: var(--teal-50);
	color: var(--teal-700);
	border-radius: 999px;
}
.club-tag.alt { background: var(--paper-soft); color: var(--ink-600); }

/* Mobile: drop the card box on .club-card (used by info.php document
   list + club portal). Hairline divider between rows; bare-row layout. */
@media (max-width: 760px) {
	.club-cards { max-height: none; padding-right: 0; gap: 0; }
	.club-card {
		background: transparent;
		border: none;
		border-radius: 0;
		border-top: 1px solid var(--line);
		padding: 12px 0;
	}
	.club-cards .club-card:first-child { border-top: none; padding-top: 4px; }
	.club-card:hover { border-color: transparent; box-shadow: none; }
	.club-card h3 { font-size: 1rem; }
	.club-card .addr { font-size: 0.86rem; margin-bottom: 6px; }
}

/* --- About / committee page ------------------------------------ */
.committee-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.person-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px;
	text-align: center;
}
.person-avatar {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--teal-300), var(--teal-700));
	color: white;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 1.4rem;
	margin: 0 auto 12px;
}
.person-card .name { font-weight: 600; color: var(--ink-900); margin-bottom: 2px; }
.person-card .role { font-size: 0.86rem; color: var(--ink-500); }

/* --- About page — roles table (minimal, formal) ---------------- */
.roles-table {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--paper-card);
	margin-bottom: 28px;
}
.roles-table-head {
	background: var(--paper-soft);
	padding: 10px 18px;
	font-size: 0.78rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	border-bottom: 1px solid var(--line);
}
.roles-row {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 16px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 0.96rem;
	align-items: baseline;
}
.roles-row:last-child { border-bottom: none; }
.roles-row .role-label { color: var(--ink-600); font-weight: 500; }
.roles-row .role-person { color: var(--ink-900); font-weight: 600; }
.roles-row .role-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--ink-500);
	font-variant-numeric: tabular-nums;
	margin-top: 6px;
}
.roles-row .role-contact a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--teal-700);
	font-weight: 600;
	text-decoration: none;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	background: var(--teal-50);
	transition: background 0.12s, color 0.12s;
}
.roles-row .role-contact a:hover {
	background: var(--teal-100);
	color: var(--teal-800);
	text-decoration: none;
}
.roles-row .role-contact a[href^="tel:"]::before {
	content: '☎';
	font-size: 0.95em;
	line-height: 1;
}
.roles-row .role-contact a[href^="mailto:"]::before {
	content: '✉';
	font-size: 0.95em;
	line-height: 1;
}
/* Mobile: roles-table chrome drops away. Each row becomes a bare 3-tier
   block (role label = eyebrow, name = headline, contact = meta line).
   Hairline divider between rows; no card border, no header bar. */
@media (max-width: 760px) {
	.roles-table {
		background: transparent;
		border: none;
		border-radius: 0;
		margin-bottom: 14px;
	}
	.roles-table-head {
		background: transparent;
		border-bottom: none;
		padding: 4px 0 8px;
		font-size: 0.7rem;
	}
	.roles-row {
		padding: 12px 0;
		border-bottom: 1px solid var(--line);
		gap: 4px;
	}
	.roles-row:last-child { border-bottom: none; }
	.roles-row .role-contact { gap: 4px 12px; margin-top: 4px; }
	.roles-row .role-contact a {
		/* drop heavy chip background on mobile, leave just colour + underline */
		background: transparent;
		padding: 0;
	}
	.roles-row .role-contact a:hover { background: transparent; text-decoration: underline; }
}

.life-list {
	columns: 2;
	column-gap: 24px;
	list-style: none;
	margin: 0; padding: 18px;
}
.life-list li {
	padding: 4px 0;
	font-size: 0.96rem;
	color: var(--ink-800);
	break-inside: avoid;
}
.life-list li::before { content: '★ '; color: var(--gold-500); margin-right: 4px; }

/* --- Predictive ladder promotion banner ------------------------- */
.predictive-banner {
	background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800) 100%);
	color: white;
	border-radius: var(--r-lg);
	padding: 36px 44px;
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 36px;
	align-items: center;
}
.predictive-banner::before {
	content: '';
	position: absolute;
	right: -60px; top: -40px;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(229, 180, 59, 0.18), transparent 70%);
	pointer-events: none;
}
.predictive-banner::after {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--gold-500);
}
.predictive-eyebrow {
	font-size: 0.78rem;
	color: var(--gold-500);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 800;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.predictive-eyebrow::before {
	content: '⚡';
	font-size: 1rem;
}
.predictive-banner h2 {
	color: white;
	margin: 0 0 12px;
	font-size: 1.65rem;
}
.predictive-banner p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	font-size: 1rem;
}
.predictive-banner .btn {
	background: var(--gold-500);
	color: var(--ink-900);
	white-space: nowrap;
	font-weight: 700;
}
.predictive-banner .btn:hover { background: #F4C44E; }

.predictive-pseudo {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-md);
	padding: 16px;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	position: relative;
	z-index: 1;
}
.predictive-pseudo-title {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--gold-500);
	margin-bottom: 8px;
}
.predictive-pseudo-row {
	display: grid;
	grid-template-columns: 18px 1fr auto auto;
	gap: 10px;
	padding: 5px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	align-items: center;
	color: rgba(255, 255, 255, 0.9);
}
.predictive-pseudo-row:first-of-type { border-top: none; }
.predictive-pseudo-row .delta {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	min-width: 32px;
	text-align: center;
}
.predictive-pseudo-row .delta.up { background: rgba(229, 180, 59, 0.25); color: var(--gold-500); }
.predictive-pseudo-row .delta.down { background: rgba(217, 119, 87, 0.25); color: #FFB59A; }
.predictive-pseudo-row .delta.same { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

/* --- Submit a result form --------------------------------------- */
.form-stack { max-width: 720px; }
.form-step {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 28px;
	margin-bottom: 18px;
	box-shadow: var(--shadow-sm);
}
.form-step-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.form-step-title h3 { margin: 0; font-size: 1.15rem; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label {
	font-size: 0.78rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.form-field input, .form-field select, .form-field textarea {
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	font-family: inherit;
	font-size: 0.97rem;
	color: var(--ink-900);
	min-height: 40px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	outline: 2px solid var(--teal-300);
	border-color: var(--teal-600);
}

/* Real-form structure — Players selection (4 home + 4 away) */
.players-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.players-side {
	background: var(--paper-soft);
	border-radius: var(--r-md);
	padding: 16px 18px;
}
.players-side h4 {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-700);
	margin: 0 0 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.players-side h4 .team-tag {
	font-weight: 500;
	color: var(--ink-500);
	font-size: 0.74rem;
	text-transform: none;
	letter-spacing: 0;
}
.players-side .player-row {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: center;
	margin-bottom: 6px;
	font-size: 0.92rem;
}
.players-side .player-row .pos {
	font-weight: 700;
	color: var(--ink-400);
	font-size: 0.78rem;
	text-align: center;
}
.players-side .player-row input,
.players-side .player-row select {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	font-family: inherit;
	font-size: 0.94rem;
	color: var(--ink-900);
	min-height: 36px;
}
.players-side .forfeit {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	font-size: 0.86rem;
	color: var(--ink-600);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Real-form structure — Score table (3 sets + tiebreak) */
.score-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-bottom: 14px;
}
.score-table thead th {
	background: var(--paper-soft);
	padding: 12px 14px;
	font-size: 0.78rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	border-bottom: 1px solid var(--line);
}
.score-table thead th:first-child { text-align: left; }
.score-table thead th .total {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--ink-900);
	text-transform: none;
	letter-spacing: -0.02em;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}
.score-table tbody td {
	padding: 12px 14px;
	border-top: 1px solid var(--line);
	vertical-align: middle;
}
.score-table tbody td:first-child {
	font-weight: 600;
	color: var(--ink-700);
	width: 32%;
	font-size: 0.94rem;
}
.score-table tbody td:not(:first-child) {
	text-align: center;
	width: 34%;
}
.score-table tbody input[type=number] {
	width: 70px;
	padding: 10px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 800;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.score-table tbody input[type=number]::-webkit-outer-spin-button,
.score-table tbody input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-table tbody input[type=number]:focus { outline: 2px solid var(--teal-300); border-color: var(--teal-600); }
.score-table tbody tr.tiebreak td { background: var(--teal-50); }

@media (max-width: 700px) {
	.players-block { grid-template-columns: 1fr; }
	.score-table tbody td:first-child { width: 36%; font-size: 0.86rem; }
	.score-table tbody input[type=number] { width: 60px; font-size: 1.2rem; padding: 8px; }
	.score-table thead th .total { font-size: 1.3rem; }
}

.form-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding-top: 14px;
}

/* --- Browse results — list + viewer ---------------------------- */
.browse-filter {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 14px;
	margin-bottom: 24px;
}
@media (max-width: 700px) {
	.browse-filter { grid-template-columns: 1fr; }
}

.results-list-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.results-list-card-head {
	padding: 14px 18px;
	background: var(--paper-soft);
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.results-list-card-head h2 {
	margin: 0;
	font-size: 1.05rem;
}
.results-list-card-head .count {
	font-size: 0.78rem;
	color: var(--ink-500);
	background: var(--paper-card);
	padding: 3px 10px;
	border-radius: 999px;
	font-weight: 600;
	border: 1px solid var(--line);
}

.results-list {
	width: 100%;
	border-collapse: collapse;
}
.results-list tr {
	border-top: 1px solid var(--line);
	cursor: pointer;
	transition: background 0.1s;
}
.results-list tr:hover { background: var(--paper-soft); }
.results-list tr:first-child { border-top: none; }
.results-list td {
	padding: 14px 18px;
	font-size: 0.94rem;
	vertical-align: middle;
}
.results-list td.match {
	font-weight: 600;
	color: var(--ink-900);
}
.results-list td.match .score {
	color: var(--teal-700);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-left: 8px;
}
.results-list td.meta {
	text-align: right;
	color: var(--ink-500);
	font-size: 0.86rem;
	white-space: nowrap;
}
.results-list td.chev {
	text-align: right;
	color: var(--ink-300);
	width: 30px;
	padding-left: 0;
}
@media (max-width: 600px) {
	.results-list td.meta { display: none; }
}

/* Result detail viewer */
.result-viewer {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.result-viewer-nav {
	background: var(--paper-soft);
	border-bottom: 1px solid var(--line);
	padding: 12px 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.result-viewer-nav-title {
	font-weight: 700;
	color: var(--ink-900);
	font-size: 1.02rem;
}
.result-viewer-nav-title small {
	display: block;
	font-weight: 500;
	color: var(--ink-500);
	font-size: 0.82rem;
	margin-top: 2px;
}
.result-viewer-nav-actions { display: flex; gap: 8px; }

.result-content { padding: 26px 28px; }

.result-summary {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 18px;
	align-items: center;
	padding: 18px 0 22px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
}
.result-summary .team {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ink-900);
}
.result-summary .team.away { text-align: right; }
.result-summary .team .sub {
	display: block;
	font-size: 0.82rem;
	color: var(--ink-500);
	font-weight: 500;
	margin-top: 2px;
}
.result-summary .scoreline {
	font-size: 2rem;
	font-weight: 800;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.result-summary .scoreline .sep { color: var(--ink-300); margin: 0 6px; }

.result-rubbers-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.result-rubbers-table thead th {
	font-size: 0.74rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	padding: 8px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}
.result-rubbers-table thead th:nth-child(2),
.result-rubbers-table thead th:nth-child(3) { text-align: center; }
.result-rubbers-table tbody td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}
.result-rubbers-table tbody td:first-child {
	font-weight: 500;
	color: var(--ink-700);
	width: 32%;
}
.result-rubbers-table tbody td:nth-child(2),
.result-rubbers-table tbody td:nth-child(3) {
	text-align: center;
	font-weight: 700;
	color: var(--ink-900);
}
.result-rubbers-table tbody tr.winner-home td:nth-child(2) { color: var(--teal-700); }
.result-rubbers-table tbody tr.winner-away td:nth-child(3) { color: var(--teal-700); }
.result-rubbers-table tbody td:nth-child(4) {
	text-align: right;
	color: var(--ink-500);
	font-size: 0.82rem;
}

/* --- Info / Documents detail — actions below hero separator, consistent gap to content ----- */

/* Action row sits INSIDE the hero, just above the faint border-bottom,
   beneath the lead summary. Right-aligned. */
.doc-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: 14px;
}

/* Doc content + PDF iframe both sit at margin-top: 0 so the gap from the
   hero (or actions if present) is uniform. When both body and iframe are
   present, the iframe gets a small separator. */
.doc-content { margin-top: 0; }
.doc-content > :first-child { margin-top: 0; }

.info-pdf-embed {
	width: 100%;
	height: 780px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	margin-top: 0;
	background: var(--paper);
}
.doc-content + .info-pdf-embed { margin-top: 24px; }

@media (max-width: 600px) {
	.info-pdf-embed { height: 500px; }
}

/* --- Print: strip site chrome, render only the document content ----- */
@media print {
	/* Hide everything that's not the document content */
	.topnav,
	.mobile-menu,
	.hamburger,
	.content-side,
	.titlebar-actions,
	.crumbs,
	.info-pdf-embed,
	footer,
	.page-shell > .container > .page-titlebar,
	/* Bring the print to a single column at full width */
	body::before {
		display: none !important;
	}

	/* Tight whitepage layout */
	html, body {
		background: white !important;
		color: black !important;
		font-size: 11pt !important;
		line-height: 1.45 !important;
	}

	body { padding: 0 !important; margin: 0 !important; }

	.page-shell,
	.container,
	.content-layout,
	.content-body,
	.doc-content {
		display: block !important;
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Promote H1 + intro back into the content body for the printed page,
	   since we hid the title bar (which contained them). When .page-intro
	   exists, that's the section summary — render it as a subtitle. */
	.content-body::before {
		/* CSS can't pull in the H1 text — use it via JS instead OR put a
		   print-only heading clone in the markup. Handled below in info.php
		   with a hidden .print-only-title element. */
	}
	.print-only-title { display: block !important; }
	.print-only-title h1 {
		font-size: 18pt !important;
		margin: 0 0 8pt !important;
		font-weight: 700;
	}
	.print-only-title .meta {
		font-size: 9pt !important;
		color: #555 !important;
		margin-bottom: 14pt;
	}

	/* Body content styling for paper */
	.doc-content h2 {
		font-size: 14pt !important;
		margin-top: 14pt !important;
		page-break-after: avoid;
	}
	.doc-content h3 {
		font-size: 12pt !important;
		page-break-after: avoid;
	}
	.doc-content p { orphans: 3; widows: 3; }
	.doc-content a {
		color: black !important;
		text-decoration: none !important;
	}
	.doc-content ul, .doc-content ol { page-break-inside: avoid; }

	.page-intro {
		font-size: 11pt !important;
		font-style: italic;
		color: #444 !important;
		margin-bottom: 14pt !important;
	}

	/* Hide print-only by default; print media shows it */
	@page { margin: 14mm; }
}

.print-only-title { display: none; }

/* --- Club directory card (v2/clubs.php) ----------------------- */
.club-directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 18px;
}
.club-dir-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.2s;
}
.club-dir-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }

.club-dir-head {
	background: var(--paper-soft);
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.club-dir-name {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ink-900);
	letter-spacing: -0.01em;
}
.club-dir-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.club-dir-body { padding: 14px 18px 16px; }
.club-dir-section + .club-dir-section {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.club-dir-section-label {
	font-size: 0.7rem;
	color: var(--ink-400);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 8px;
}

.club-dir-venue {
	font-size: 0.92rem;
	color: var(--ink-700);
	margin-bottom: 6px;
	line-height: 1.45;
}
.club-dir-venue a { color: var(--ink-700); }
.club-dir-venue a:hover { color: var(--teal-700); }
.club-dir-melways {
	display: block;
	font-size: 0.78rem;
	color: var(--ink-500);
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

.club-dir-facts {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 5px 14px;
	margin: 0;
	font-size: 0.9rem;
}
.club-dir-facts dt { color: var(--ink-500); font-weight: 500; }
.club-dir-facts dd { margin: 0; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.club-dir-facts dd a { color: var(--teal-700); font-weight: 600; }

.club-dir-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	gap: 10px;
}
.club-dir-person { font-size: 0.9rem; }
.club-dir-person-role {
	font-size: 0.7rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	margin-bottom: 2px;
}
.club-dir-person-name { font-weight: 600; color: var(--ink-900); margin-bottom: 2px; }
.club-dir-person-phone {
	font-size: 0.86rem;
	color: var(--ink-600);
	font-variant-numeric: tabular-nums;
}
.club-dir-person-phone a { color: var(--teal-700); font-weight: 600; }

.club-dir-empty { color: var(--ink-400); font-size: 0.9rem; }
.club-dir-notes {
	padding: 10px 18px;
	background: var(--paper);
	border-top: 1px solid var(--line);
	font-size: 0.84rem;
	color: var(--ink-500);
	font-style: italic;
}

/* Mobile: convert cards into bare list rows. Hairline divider between
   clubs; no card border, shadow, or coloured header band. Section
   sublabels become small eyebrow tags. Facts dl flattens so dt + dd
   sit on the same row with a tighter dt column (fixes the horizontal-
   overflow bug from the original mobile audit). */
@media (max-width: 760px) {
	.club-directory { display: block; }
	.club-dir-card {
		background: transparent;
		border: none;
		border-radius: 0;
		border-top: 1px solid var(--line);
		padding: 16px 0 18px;
		overflow: visible;
	}
	.club-dir-card:first-child { border-top: none; padding-top: 4px; }
	.club-dir-card:hover { border-color: transparent; box-shadow: none; }

	.club-dir-head {
		background: transparent;
		border-bottom: none;
		padding: 0;
		margin-bottom: 10px;
		gap: 8px;
	}
	.club-dir-name { font-size: 1.05rem; }
	.club-tag { font-size: 0.65rem; padding: 1px 7px; }

	.club-dir-body { padding: 0; }
	.club-dir-section + .club-dir-section {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px dashed var(--line);
	}
	.club-dir-section-label { font-size: 0.66rem; margin-bottom: 4px; }
	.club-dir-venue { font-size: 0.88rem; margin-bottom: 4px; }

	/* Facts list: stack dt+dd inline with a narrower dt column. Also
	   set min-width:0 + overflow-wrap so long values (curfew strings,
	   URLs) wrap instead of pushing the column wider. */
	.club-dir-facts {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 4px 10px;
		font-size: 0.86rem;
	}
	.club-dir-facts dd { overflow-wrap: anywhere; word-break: break-word; }

	/* Contacts grid: two-up instead of auto-fill at narrow widths,
	   keeps each person's info readable without horizontal scroll. */
	.club-dir-people { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
	.club-dir-person { font-size: 0.86rem; }

	.club-dir-notes { padding: 8px 0; background: transparent; border-top: 1px dashed var(--line); margin-top: 10px; font-size: 0.82rem; }
}

/* Even tighter — single-column contacts at very narrow widths. */
@media (max-width: 420px) {
	.club-dir-people { grid-template-columns: 1fr; }
}

/* --- Season dates timeline ------------------------------------- */
.dates-timeline {
	position: relative;
	padding-left: 30px;
}
.dates-timeline::before {
	content: '';
	position: absolute;
	left: 8px; top: 8px; bottom: 8px;
	width: 2px;
	background: var(--line-strong);
}
.dates-event {
	position: relative;
	padding: 12px 0;
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 18px;
	align-items: baseline;
}
.dates-event::before {
	content: '';
	position: absolute;
	left: -28px;
	top: 18px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--ink-300);
	border: 3px solid var(--paper);
}
.dates-event.is-past::before { background: var(--ink-300); }
.dates-event.is-today::before {
	background: var(--clay-500);
	box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.2);
	transform: scale(1.2);
}
.dates-event.is-future::before { background: var(--teal-600); }
.dates-event.is-key::before { background: var(--gold-500); width: 14px; height: 14px; left: -29px; }
.dates-event .date {
	font-weight: 700;
	color: var(--ink-900);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}
.dates-event.is-past .date { color: var(--ink-400); }
.dates-event.is-today .date { color: var(--clay-600); }
.dates-event .label { color: var(--ink-700); font-size: 0.95rem; }
.dates-event.is-past .label { color: var(--ink-400); }
.dates-event.is-key .label { font-weight: 600; color: var(--ink-900); }
.dates-event .badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--gold-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-left: 8px;
	padding: 1px 8px;
	background: #FFF7E0;
	border-radius: 999px;
}
.dates-event.is-today .badge {
	color: var(--clay-600);
	background: #FFE6DC;
}
.dates-week-head {
	margin: 22px 0 10px;
	padding: 6px 0;
	font-size: 0.74rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	border-bottom: 1px solid var(--line);
	scroll-margin-top: 90px;
}
@media (max-width: 600px) {
	.dates-event { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
}

/* --- v2 Season dates — new structure (2026-05-28) -----------------
   Replaces the long single-timeline view with: a promoted "Next key
   date" card + "Upcoming key dates" list + "Round calendar" grouped
   by month with past rounds hidden behind a toggle. */
.dates-next-key {
	background: linear-gradient(135deg, var(--teal-700), var(--teal-600));
	color: #fff;
	border-radius: var(--r-lg);
	padding: 22px 26px;
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
}
.dates-next-key::after {
	content: '';
	position: absolute;
	right: -60px; bottom: -60px;
	width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
	pointer-events: none;
}
.dates-next-key-eyebrow {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.75;
	margin-bottom: 6px;
}
.dates-next-key-date {
	font-size: 1.05rem;
	font-weight: 600;
	opacity: 0.9;
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}
.dates-next-key-label {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4px;
}
.dates-next-key-detail {
	font-size: 0.92rem;
	opacity: 0.85;
}

.dates-section { margin-bottom: 36px; }
.dates-section-head {
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--teal-600);
}
.dates-section-head-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--teal-600);
}
.dates-section-head-row .dates-section-head { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.dates-toggle-past {
	background: transparent;
	border: none;
	color: var(--teal-700);
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
}
.dates-toggle-past:hover { color: var(--teal-800); text-decoration: underline; }

/* Key dates list */
.dates-key-list { display: flex; flex-direction: column; }
.dates-key-row {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	align-items: center;
}
.dates-key-row:first-child { border-top: none; padding-top: 4px; }
.dates-key-row .date-cell {
	background: var(--paper-soft);
	border-radius: var(--r-sm);
	padding: 8px 4px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}
.dates-key-row.is-today .date-cell { background: var(--clay-500); color: #fff; }
.dates-key-row.is-past .date-cell { background: var(--paper-soft); opacity: 0.55; }
.dates-key-row .d-day { font-size: 1.4rem; font-weight: 700; color: var(--ink-900); }
.dates-key-row.is-today .d-day { color: #fff; }
.dates-key-row .d-mon { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); font-weight: 700; margin-top: 1px; }
.dates-key-row.is-today .d-mon { color: rgba(255,255,255,0.85); }
.dates-key-row .d-dow { font-size: 0.65rem; color: var(--ink-400); margin-top: 2px; }
.dates-key-row.is-today .d-dow { color: rgba(255,255,255,0.7); }
.dates-key-row .info-cell { display: flex; flex-direction: column; }
.dates-key-row .info-cell .label { font-weight: 600; color: var(--ink-900); font-size: 1rem; line-height: 1.3; }
.dates-key-row .info-cell .detail { font-size: 0.86rem; color: var(--ink-500); margin-top: 2px; }
.dates-key-row.is-past .info-cell .label { color: var(--ink-500); }

/* Add-to-calendar button on each key date. Calendar-with-plus SVG icon,
   subtle outline. Sits at the row's right edge. Tap → builds and
   downloads an .ics file. */
.ics-btn {
	background: transparent;
	border: 1px solid var(--line);
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--ink-500);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
	padding: 0;
}
.ics-btn svg { width: 20px; height: 20px; display: block; }
.ics-btn:hover {
	background: var(--teal-50);
	border-color: var(--teal-300);
	color: var(--teal-700);
}
.ics-btn.is-added {
	background: var(--teal-600);
	border-color: var(--teal-600);
	color: #fff;
	transform: scale(1.05);
}

/* Inline calendar icon used in the helper tip line. */
.ics-icon-inline {
	display: inline-block;
	width: 14px;
	height: 14px;
	color: var(--ink-500);
	vertical-align: -3px;
	margin: 0 2px;
}
.dates-key-tip {
	margin-top: 14px;
	font-size: 0.84rem;
	color: var(--ink-500);
}

@media (max-width: 600px) {
	.ics-btn { width: 32px; height: 32px; }
	.ics-btn svg { width: 18px; height: 18px; }
}

/* Round calendar — month-grouped */
.dates-rounds { display: flex; flex-direction: column; }
.dates-month {
	padding: 8px 0 14px;
	border-top: 1px solid var(--line);
}
.dates-month:first-child { border-top: none; padding-top: 4px; }
.dates-month-head {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-500);
	margin-bottom: 8px;
}
.dates-month.is-past { display: none; }
.dates-month.is-past.is-visible { display: block; }
.dates-month.is-past .dates-month-head { color: var(--ink-400); }
.dates-round-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	padding: 8px 0;
	font-size: 0.94rem;
	align-items: center;
}
.dates-round-row .round-cell { font-weight: 700; color: var(--ink-900); }
.dates-round-row .round-dates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	color: var(--ink-700);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}
.dates-round-row .comp-date {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	white-space: nowrap;
}
.dates-round-row .cd-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-400);
}
.dates-round-row .comp-date-ladies .cd-label { color: #7C3AED; }
.dates-round-row .comp-date-mixed  .cd-label { color: var(--teal-700); }
.dates-round-row .comp-date-mens   .cd-label { color: #B35A3C; }
.dates-round-row .cd-value { color: var(--ink-800); font-weight: 600; }
.dates-round-row.is-past .round-cell,
.dates-round-row.is-past .round-dates { color: var(--ink-400); }
.dates-round-row.is-today .round-cell { color: var(--clay-600); }
.dates-round-row.is-today::before { content: ''; }

/* Past dates inside a future-mixed month are hidden by default,
   shown when the toggle is on. */
.dates-round-row.is-past { display: none; }
.dates-round-row.is-past.is-visible { display: grid; }

/* Mobile tweaks */
@media (max-width: 600px) {
	.dates-next-key { padding: 18px 20px; margin-bottom: 22px; }
	.dates-next-key-label { font-size: 1.15rem; }
	.dates-key-row { grid-template-columns: 52px 1fr auto; gap: 10px; padding: 10px 0; }
	.dates-key-row .date-cell { padding: 6px 2px; }
	.dates-key-row .d-day { font-size: 1.25rem; }
	.dates-round-row { grid-template-columns: 80px 1fr; gap: 10px; font-size: 0.9rem; }
	.dates-round-row .round-dates { gap: 4px 6px; font-size: 0.82rem; }
	.dates-round-row .cd-label { font-size: 0.62rem; }
	.dates-section-head-row { flex-wrap: wrap; }
}

/* --- Fees page card --------------------------------------------- */
.fees-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 28px 32px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 18px;
}
.fees-deadline {
	background: linear-gradient(135deg, #FFF1E8 0%, #FFE5D4 100%);
	border-left: 4px solid var(--clay-500);
	padding: 18px 22px;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin-bottom: 22px;
}
.fees-deadline-label {
	font-size: 0.74rem;
	color: var(--clay-600);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 6px;
}
.fees-deadline-date {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.fees-deadline-meta {
	margin-top: 4px;
	font-size: 0.9rem;
	color: var(--ink-600);
}

/* --- Downloads page — file-list with format badges -------------- */
.downloads-section { margin-bottom: 36px; }
.downloads-section-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--teal-600);
}
.downloads-section-head h2 { margin: 0; font-size: 1.3rem; }
.downloads-section-head .count {
	font-size: 0.82rem;
	color: var(--ink-500);
}
.downloads-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 12px;
}
.download-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 18px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	transition: border-color 0.15s, box-shadow 0.2s;
	color: inherit;
	text-decoration: none;
}
.download-card:hover {
	border-color: var(--teal-300);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
}
.download-card .fmt {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--r-sm);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: white;
}
.download-card .fmt-pdf  { background: #C0392B; }
.download-card .fmt-xlsx { background: #1D7B40; }
.download-card .fmt-docx { background: #2C5BAA; }
.download-card .fmt-zip  { background: #555; }
.download-card .body { flex: 1; min-width: 0; }
.download-card .title-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}
.download-card h3 {
	font-size: 1rem;
	margin: 0;
	color: var(--ink-900);
	line-height: 1.3;
	flex: 1;
}
.download-card .period {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--ink-500);
	white-space: nowrap;
}
.download-card .desc {
	font-size: 0.86rem;
	color: var(--ink-600);
	line-height: 1.45;
	margin: 0;
}
.download-card .meta {
	font-size: 0.76rem;
	color: var(--ink-400);
	margin-top: 6px;
	font-weight: 500;
}
.download-card .meta::before { content: '↓ '; color: var(--teal-700); font-weight: 700; }

/* Mobile: drop card boxes — each download becomes a flat list row with
   a small format badge on the left, title + meta stacked, hairline
   divider between rows. Same shape as the rest of the v2 site. */
@media (max-width: 760px) {
	.downloads-list { display: block; }
	.download-card {
		background: transparent;
		border: none;
		border-radius: 0;
		border-top: 1px solid var(--line);
		padding: 12px 0;
		gap: 12px;
	}
	.download-card:first-child { border-top: none; padding-top: 4px; }
	.download-card:hover { border-color: transparent; box-shadow: none; }
	.download-card .fmt { width: 36px; height: 36px; font-size: 0.62rem; }
	.download-card h3 { font-size: 0.96rem; }
	.download-card .desc { font-size: 0.84rem; }
	.downloads-section-head h2 { font-size: 1.1rem; }
	.downloads-section { margin-bottom: 24px; }
}

/* --- News page — long-form post list (matches real nsnta.org style) -- */
.news-feed {
	max-width: 760px;
}
.news-post {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 24px 28px;
	margin-bottom: 18px;
}
.news-post-head {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 0.78rem;
	color: var(--ink-500);
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.news-post-tag {
	display: inline-block;
	padding: 2px 9px;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.news-post-tag.announce { background: var(--teal-50); color: var(--teal-700); }
.news-post-tag.season   { background: #FFF1E8;   color: var(--clay-600); }
.news-post-tag.venue    { background: #F4ECD8;   color: #8A6700; }
.news-post-tag.event    { background: #EEF2FF;   color: #4338CA; }
.news-post-tag.rule     { background: var(--paper-soft); color: var(--ink-700); }
.news-post-date {
	font-weight: 600;
	color: var(--ink-700);
	font-variant-numeric: tabular-nums;
}
.news-post h3 {
	font-size: 1.25rem;
	margin-bottom: 8px;
	color: var(--ink-900);
}
.news-post p {
	color: var(--ink-700);
	margin-bottom: 0.5em;
	font-size: 0.97rem;
	line-height: 1.65;
}
.news-post p:last-child { margin-bottom: 0; }
.news-post .post-contact {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 0.86rem;
	color: var(--ink-500);
}
.news-sidebar-card {
	background: var(--paper-soft);
	border-radius: var(--r-md);
	padding: 16px 18px;
	margin-bottom: 16px;
}
.news-sidebar-card h4 {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-500);
	margin: 0 0 10px;
}
.news-sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.news-sidebar-card li { margin-bottom: 6px; font-size: 0.9rem; }
.news-sidebar-card li a { color: var(--ink-700); }

/* Mobile: compact news posts (no card box, hairline divider between).
   Sidebar moves below main content. */
@media (max-width: 760px) {
	.news-post {
		background: transparent;
		border: none;
		border-radius: 0;
		border-top: 1px solid var(--line);
		padding: 18px 0;
		margin-bottom: 0;
	}
	.news-post:first-child { border-top: none; padding-top: 4px; }
	.news-post h3 { font-size: 1.1rem; }
	.news-post p { font-size: 0.94rem; line-height: 1.55; }
	.news-post .post-contact { margin-top: 10px; padding-top: 10px; font-size: 0.84rem; }
}
.news-sidebar-card li a:hover { color: var(--teal-700); }

/* --- Club portal (authenticated pages) -------------------------- */
/* The landing + sub-pages all use the standard page-titlebar pattern;
   only the inner cards / quicklinks / facts grid below are portal-specific. */
.portal-club-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 28px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 22px;
}
.portal-club-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.portal-club-card-head h2 {
	margin: 0;
	font-size: 1.35rem;
}
.portal-club-card-head h2 .id {
	color: var(--ink-400);
	font-weight: 500;
	font-size: 0.84rem;
	margin-left: 8px;
}
.portal-roles {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.portal-role-badge {
	background: var(--paper-soft);
	color: var(--ink-700);
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.portal-role-badge.primary { background: var(--teal-600); color: white; }

.portal-details {
	/* No background or accent border — the card it sits inside already
	   provides visual grouping, and the "Club details" sub-title (or the
	   disclosure summary on mobile) provides the section label. Keep
	   modest padding-top so the section breathes from the head row above. */
	padding: 8px 0 4px;
	margin-bottom: 18px;
}

/* Collapsible disclosure wrapping `.portal-details` on the portal landing.
   On mobile the details (location / phone / curfews / website / committee
   contacts) are hidden behind a tap-to-expand summary so the action
   quicklinks sit above the fold. On desktop the wrapper is invisible —
   the summary is hidden and the details content is forced visible
   (overriding the UA's closed-<details> rule). */
.portal-details-disclosure { margin-bottom: 16px; }
.portal-details-disclosure > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: 12px 14px;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-weight: 600;
	color: var(--ink-900);
	font-size: 0.95rem;
	list-style: none;
	user-select: none;
}
.portal-details-disclosure > summary::-webkit-details-marker { display: none; }
.portal-details-disclosure > summary::marker { content: ''; }
.portal-details-disclosure > summary .chevron {
	color: var(--teal-700);
	transition: transform 0.15s ease;
	font-size: 0.9rem;
}
.portal-details-disclosure[open] > summary .chevron { transform: rotate(180deg); }
.portal-details-disclosure[open] > summary { margin-bottom: 10px; }

@media (min-width: 701px) {
	/* Desktop bypass — the `<details>` element is rendered `open` from
	   PHP (and never closed by the mobile-collapse JS at >700px), so its
	   content shows by default. We just hide the summary chrome so the
	   layout looks identical to the pre-disclosure version. */
	.portal-details-disclosure > summary { display: none; }
	.portal-details-disclosure { margin-bottom: 0; }
}
.portal-details-title {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--teal-700);
	margin-bottom: 10px;
}
.portal-facts {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 6px 18px;
	margin: 0;
	font-size: 0.93rem;
}
.portal-facts dt { color: var(--ink-600); font-weight: 500; }
.portal-facts dd { margin: 0; color: var(--ink-900); }

.portal-divider {
	border: none;
	border-top: 1px dashed var(--line-strong);
	margin: 18px 0;
}

.portal-people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px 18px;
}
.portal-person {
	font-size: 0.92rem;
}
.portal-person .name {
	font-weight: 600;
	color: var(--ink-900);
}
.portal-person .role-line {
	font-size: 0.78rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2px;
}
.portal-person .contact {
	color: var(--ink-600);
	font-variant-numeric: tabular-nums;
}
.portal-person .contact .unpub {
	color: var(--ink-400);
	font-style: italic;
	font-size: 0.84rem;
}

.portal-quicklinks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.portal-quicklink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-900);
	font-weight: 600;
	font-size: 0.94rem;
	text-decoration: none;
	transition: all 0.15s;
}
.portal-quicklink:hover {
	border-color: var(--teal-600);
	background: var(--teal-50);
	color: var(--teal-700);
	text-decoration: none;
}
.portal-quicklink .icon {
	width: 32px; height: 32px;
	background: var(--paper-soft);
	border-radius: 6px;
	display: grid;
	place-items: center;
	font-size: 1.05rem;
	color: var(--teal-700);
	flex-shrink: 0;
}

.portal-info-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 18px 22px;
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

@media (max-width: 700px) {
	.portal-quicklinks { grid-template-columns: 1fr; }
	.portal-facts { grid-template-columns: 1fr; gap: 0 0; }
	.portal-facts dt { margin-top: 6px; }
}

/* Mobile-only sub-line under the breadcrumb that surfaces the
   signed-in account when the chip on the right is reduced to just
   "Sign out". The full chip on desktop already displays the email,
   so this is hidden by default and revealed inside the ≤700px block. */
.portal-titlebar-email { display: none; }

/* --- Portal sub-page chrome (team_contacts, team_stats, club_report, fixtures) -- */
.portal-signin-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.86rem;
	color: var(--ink-500);
}
.portal-signin-chip .portal-signin-label { color: var(--ink-400); }
.portal-signin-chip strong {
	color: var(--ink-900);
	background: var(--paper-soft);
	padding: 3px 9px;
	border-radius: 999px;
	font-weight: 600;
}

/* Banner message strip — green for success, red for failure. Inline above
   forms in the portal sub-pages to surface POST results. */
.portal-message {
	padding: 10px 14px;
	border-radius: var(--r-sm);
	margin-bottom: 14px;
	font-size: 0.92rem;
	border: 1px solid;
}
.portal-message.is-success {
	background: rgba(15, 118, 110, 0.06);
	border-color: rgba(15, 118, 110, 0.25);
	color: var(--teal-700);
}
.portal-message.is-error {
	background: rgba(202, 96, 76, 0.06);
	border-color: rgba(202, 96, 76, 0.25);
	color: var(--clay-600);
}

/* Filter row used by team_stats / club_report — picker selects + action buttons. */
.portal-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px 16px;
	margin-bottom: 18px;
}
.portal-filters .field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.portal-filters .field label {
	font-size: 0.74rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.portal-filters .field select,
.portal-filters .field input[type=text] {
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--ink-900);
	min-width: 160px;
}
.portal-filters .field-spacer { flex: 1; }
.portal-filters .field-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Iframe-wrapping card for the report/preview pages (team_stats, club_report).
   Header strip + scrollable iframe body. */
.portal-report-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.portal-report-card .report-head {
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	background: var(--paper-soft);
	font-size: 0.92rem;
}
.portal-report-card .report-head strong { color: var(--teal-700); }
.portal-report-card .report-head .meta { color: var(--ink-500); font-size: 0.86rem; margin-left: 8px; }
.portal-report-card iframe {
	width: 100%;
	min-height: 70vh;
	border: 0;
	display: block;
	background: var(--paper-card);
}

/* team_contacts CRUD table */
.portal-contacts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.portal-contacts-table thead th {
	text-align: left;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-500);
	padding: 9px 10px;
	background: var(--paper-soft);
	border-bottom: 1px solid var(--line);
}
.portal-contacts-table tbody td {
	padding: 10px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.portal-contacts-table tbody tr:last-child td { border-bottom: none; }
.portal-contacts-table tbody tr:hover { background: var(--paper-soft); }
.portal-contacts-table .grade-cell {
	font-weight: 600;
	color: var(--ink-700);
	white-space: nowrap;
}
/* "No Grade" placeholder — italic + muted so it reads as a flag rather
   than a real grade value. Applied both to the desktop cell and the
   mobile meta-line inline render. */
.portal-contacts-table .grade-cell.is-empty {
	font-weight: 500;
	font-style: italic;
	color: var(--ink-400);
}
.portal-contacts-table .actions {
	text-align: right;
	white-space: nowrap;
}
.portal-contacts-table .actions form { display: inline-block; }
.portal-contacts-table .placeholder {
	color: var(--ink-400);
	font-style: italic;
}

/* Mobile: collapse the 5-column table to a 2-line card per row.
   Line 1: Name (prominent) + actions on the right.
   Line 2: Grade · Mobile · Email — muted meta strip below. */
@media (max-width: 760px) {
	.portal-contacts-table thead { display: none; }
	.portal-contacts-table,
	.portal-contacts-table tbody,
	.portal-contacts-table tr { display: block; width: 100%; }

	/* Row layout — DO NOT use CSS Grid here. The earlier implementation
	   set `grid-area: meta` on three sibling TDs (grade, mobile, email)
	   so they'd "collapse onto one meta line", but Grid treats each TD
	   as its own grid item and stacks them in the meta cell — the grade
	   abbreviation visibly overlaps the phone number.
	   Use absolute positioning for the actions column instead: the row
	   is plain block flow, the actions float top-right, and the three
	   meta TDs flow inline naturally after the name block. */
	.portal-contacts-table tbody tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--line);
		position: relative;
		/* Reserve space at the right for the Edit + × buttons so the
		   name line doesn't run into them. ~88px = two icon-size buttons
		   + their gap. */
		padding-right: 92px;
	}
	.portal-contacts-table tbody td {
		padding: 0;
		border: none;
		vertical-align: baseline;
	}
	/* Name = its own headline line. */
	.portal-contacts-table tbody tr td:nth-child(2) {
		display: block;
		font-weight: 700;
		color: var(--ink-900);
		font-size: 1rem;
		margin-bottom: 4px;
	}
	/* Grade, mobile, email — inline flow on a single meta row below
	   the name. The `display: inline` lets them sit on one line; the
	   `:not(:empty)::after` separators add ' · ' between non-empty
	   cells without leaving a stray bullet after a blank value. */
	.portal-contacts-table tbody tr td:nth-child(1),
	.portal-contacts-table tbody tr td:nth-child(3),
	.portal-contacts-table tbody tr td:nth-child(4) {
		display: inline;
		font-size: 0.85rem;
		color: var(--ink-500);
	}
	.portal-contacts-table tbody tr td:nth-child(1) {
		font-weight: 600;
		color: var(--ink-700);
	}
	.portal-contacts-table tbody tr td:nth-child(1):not(:empty)::after { content: ' · '; color: var(--ink-300); }
	.portal-contacts-table tbody tr td:nth-child(3):not(:empty)::after { content: ' · '; color: var(--ink-300); }
	.portal-contacts-table tbody tr td:nth-child(4) { overflow-wrap: anywhere; }

	/* Actions — pinned to the top-right of each row. */
	.portal-contacts-table tbody tr td.actions {
		position: absolute;
		top: 12px;
		right: 0;
		display: flex;
		gap: 4px;
	}
	.portal-contacts-table tbody tr td.actions .btn { padding: 5px 10px; font-size: 0.8rem; }
}

/* Section heading per competition inside team_contacts. */
.portal-comp-section { margin-bottom: 26px; }
.portal-comp-section:last-child { margin-bottom: 0; }
.portal-comp-section h3 {
	font-size: 1rem;
	color: var(--ink-900);
	margin: 0 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 10px;
}
.portal-comp-section h3 .ro-badge {
	background: var(--paper-soft);
	color: var(--ink-500);
	font-size: 0.7rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: 999px;
}

/* Settings panel (club_report) — collapsible <details> with v2 styling. */
.portal-cfg {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-bottom: 18px;
	box-shadow: var(--shadow-sm);
}
.portal-cfg > summary {
	cursor: pointer;
	user-select: none;
	padding: 12px 18px;
	background: var(--paper-soft);
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--ink-900);
	list-style: none;
}
.portal-cfg > summary::-webkit-details-marker { display: none; }
.portal-cfg > summary::marker { content: ''; }
.portal-cfg > summary .cfg-chevron {
	color: var(--teal-700);
	transition: transform 0.15s;
	font-weight: 700;
}
.portal-cfg[open] > summary .cfg-chevron { transform: rotate(90deg); }
.portal-cfg > summary .cfg-hint {
	color: var(--ink-500);
	font-size: 0.85rem;
	font-weight: 400;
	margin-left: 6px;
	flex: 1;
}
.portal-cfg > summary .ro-badge {
	background: var(--paper-card);
	color: var(--ink-500);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}
.portal-cfg-section {
	padding: 16px 20px;
	border-top: 1px solid var(--line);
}
.portal-cfg-section:first-of-type { border-top: 0; }
.portal-cfg-section h4 {
	color: var(--teal-700);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
}
.portal-cfg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-cfg-row .field { display: flex; flex-direction: column; gap: 4px; }
.portal-cfg-row .field label { font-size: 0.85rem; font-weight: 500; color: var(--ink-700); }
.portal-cfg-row .field select,
.portal-cfg-row .field input {
	padding: 7px 10px; border: 1px solid var(--line);
	border-radius: var(--r-sm); font-family: inherit; font-size: 0.92rem;
}
.portal-cfg-row .field .hint { color: var(--ink-500); font-size: 0.8rem; }
.portal-cfg-toggle {
	display: flex; align-items: center; gap: 10px;
	padding: 5px 0; color: var(--ink-700);
}
.portal-cfg-toggle input { margin: 0; }
.portal-cfg-cc {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--line-strong);
	display: flex; flex-wrap: wrap; gap: 16px;
}
.portal-cfg-note {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--teal-50);
	border-left: 3px solid var(--teal-600);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-size: 0.85rem;
	color: var(--ink-700);
}
.portal-cfg-note > strong:first-child {
	color: var(--teal-700);
	display: block;
	margin-bottom: 4px;
}
.portal-cfg-note ul { margin: 0; padding-left: 18px; }
.portal-cfg-note code {
	background: rgba(15, 118, 110, 0.08);
	padding: 0 4px;
	border-radius: 3px;
	font-size: 0.86em;
}
.portal-cfg-actions {
	padding: 14px 20px;
	background: var(--paper-soft);
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.portal-cfg-actions .hint { color: var(--ink-500); font-size: 0.85rem; }

/* Fixture-generator (portal) — mode toggle + cascading form. */
.portal-fixtures-mode {
	display: inline-flex;
	gap: 2px;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px;
	margin-bottom: 18px;
}
.portal-fixtures-mode a {
	padding: 7px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-500);
	text-decoration: none;
	border-radius: calc(var(--r-sm) - 2px);
}
.portal-fixtures-mode a.is-active {
	background: var(--paper-card);
	color: var(--ink-900);
	box-shadow: var(--shadow-sm);
}
.portal-fixtures-form .field { margin-bottom: 14px; }
.portal-fixtures-form .field label {
	display: block;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--ink-700);
	margin-bottom: 4px;
}
.portal-fixtures-form .field select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-card);
	font-family: inherit;
	font-size: 0.94rem;
}
.portal-fixtures-form .field select:disabled { background: var(--paper-soft); color: var(--ink-400); }
.portal-section-picker {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	margin-bottom: 14px;
}
.portal-section-picker legend {
	padding: 0 6px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ink-700);
}
.portal-section-picker .picker-actions { font-size: 0.82rem; color: var(--ink-500); margin-bottom: 8px; }
.portal-section-picker .picker-actions button {
	background: none; border: 0;
	color: var(--teal-700); padding: 0; font: inherit;
	cursor: pointer; text-decoration: underline;
}
.portal-section-picker label {
	display: flex; align-items: center; gap: 8px;
	color: var(--ink-700); margin-bottom: 5px; font-size: 0.92rem;
}

@media (max-width: 700px) {
	.portal-cfg-row { grid-template-columns: 1fr; }
	.portal-signin-chip { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
	.portal-filters .field { min-width: 0; flex: 1; }

	/* ===== Club portal — mobile-first pass ===========================
	   Every portal page wraps content in `.portal-club-card` and ships
	   `.field` / `.portal-cfg-*` / `.portal-fixtures-*` / `.portal-modal-*`
	   primitives. None of these had bespoke mobile rules — at 375px the
	   default flex/grid layouts let action rows collide, headers overflow,
	   and form controls render at near-desktop widths. The block below
	   re-tunes each surface for ≤700px without changing desktop behaviour.
	================================================================ */

	/* Card padding — 28px is generous inside a `.narrow-content` shell at
	   375px (~287px usable). Drop to 16/14 so form inputs + buttons aren't
	   wedged against the card edge. */
	.portal-club-card {
		padding: 18px 16px;
		/* Enable child `order` so we can re-stack head → quicklinks →
		   details on mobile. On a phone the user lands on this page to
		   *act* (open Team contacts, Club exception report, etc.) — the
		   tall club-details block (Location / Phone / Curfews / Website
		   / committee contacts) was pushing every action button below
		   the fold. Quicklinks now appear right under the heading; the
		   details block stays accessible by scrolling. Desktop layout is
		   unchanged (this block only applies at ≤700px). */
		display: flex;
		flex-direction: column;
	}
	.portal-club-card-head {
		order: 0;
		margin-bottom: 14px;
		padding-bottom: 12px;
	}
	.portal-club-card-head h2 { font-size: 1.15rem; }
	.portal-quicklinks {
		order: 1;
		margin-bottom: 16px;
	}
	/* Disclosure wraps `.portal-details` on mobile — apply the order +
	   tightened padding to the wrapper. The inner `.portal-details`
	   keeps its visual treatment (teal background + left border) when
	   the disclosure is expanded. */
	.portal-details-disclosure {
		order: 2;
		margin-bottom: 0;
	}
	.portal-details {
		padding: 12px 14px;
		margin-bottom: 0;
	}

	/* Sign-in chip — on the sticky mobile titlebar the chip shares a row
	   with the breadcrumb (375px viewport ≈ 343px usable), so the
	   email + " · " + "Season 2026A · Autumn 2026" + Sign-out together
	   overflow and clip at the right edge.
	   Strip everything from the chip except the Sign-out button:
	     - "Signed in as" label = noise
	     - email = surfaced separately as a sub-line under the
	       breadcrumb (see `.portal-titlebar-email` below)
	     - separator + season string = reference info, not action
	   The Sign-out button is the only thing the user might actually
	   need from the chip on a phone. */
	.portal-signin-chip > *:not(.btn) {
		display: none;
	}
	.portal-signin-chip {
		justify-content: flex-end;
		flex-wrap: nowrap;
	}

	/* Email sub-line under the breadcrumb on mobile. Hidden on desktop
	   (the chip carries it). Truncates with ellipsis so a long address
	   doesn't push the Sign-out button off the row. */
	.portal-titlebar-email {
		display: block;
		font-size: 0.78rem;
		color: var(--ink-500);
		margin-top: 2px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 220px;
	}

	/* Club-report config actions — `space-between` collides hint + button
	   at narrow widths. Stack the button below the hint, full width. */
	.portal-cfg-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 16px;
	}
	.portal-cfg-actions .hint { text-align: center; }
	.portal-cfg-actions .btn { width: 100%; }

	/* Club-report summary header — wrap "Sending …" + "Last sent" meta. */
	.portal-cfg > summary {
		flex-wrap: wrap;
		padding: 12px 14px;
		gap: 6px;
	}
	.portal-cfg > summary .cfg-hint { flex-basis: 100%; margin-left: 0; }
	.portal-cfg-section { padding: 14px 16px; }
	.portal-cfg-cc { gap: 10px; }

	/* Fixtures mode toggle — make the inline pill use full width so the
	   two tabs each get half the row and the toggle reads as a real
	   selector, not a small button. */
	.portal-fixtures-mode {
		display: flex;
		width: 100%;
		margin-bottom: 14px;
	}
	.portal-fixtures-mode a {
		flex: 1;
		text-align: center;
		padding: 9px 12px;
	}
	.portal-fixtures-form .field select { font-size: 16px; padding: 11px 12px; }
	.portal-section-picker { padding: 12px 14px; }
	.portal-section-picker label { padding: 4px 0; font-size: 0.95rem; }

	/* Report / stats header inside `.portal-report-card` — current rule is
	   a flex row with the comp title on the left and the "Round 14"
	   meta inline. Let it wrap so the meta drops to its own line. */
	.portal-report-card .report-head { flex-wrap: wrap; gap: 4px 10px; }
	.portal-report-card .report-head .meta { margin-left: 0; }

	/* Global info card at the bottom of the landing page — `flex-wrap`
	   already wraps, but the trailing "Open ↗" button reads as orphaned.
	   Make the button full-width when the card stacks. */
	.portal-info-card { padding: 14px 16px; }
	.portal-info-card .btn { width: 100%; }

	/* Quicklink tiles — make icon + label more touch-friendly. */
	.portal-quicklink { padding: 14px 14px; min-height: 56px; }
	.portal-quicklink .icon { width: 36px; height: 36px; }

	/* People grid (committee directory inside the club card). The grid is
	   already `auto-fit, minmax(200px, 1fr)` so it collapses at 375px —
	   tighten the gap so two adjacent persons read as one list. */
	.portal-people-grid { gap: 12px 0; }
	.portal-person { padding: 10px 0; border-bottom: 1px solid var(--line); }
	.portal-person:last-child { border-bottom: 0; padding-bottom: 0; }

	/* Team-contacts modal — `width: min(440px, 100vw - 32px)` is fine, but
	   the foot's right-aligned action row can wedge against the close
	   button if labels are long ("Save changes"). Allow wrap + give the
	   primary action full width. */
	.portal-modal-foot { flex-wrap: wrap; padding: 14px 16px; }
	.portal-modal-foot .btn { flex: 1 0 auto; }
	.portal-modal-body { padding: 14px 16px; }
	.portal-modal-head { padding: 12px 14px 12px 16px; }

	/* Portal filters (team_stats + club_report) — the existing
	   `.portal-filters .field { min-width: 0; flex: 1; }` rule above
	   shrinks the field wrapper, but the inner inputs still carry
	   `min-width: 160px` which forces horizontal overflow at 375px.
	   Drop the input min-width + bump font-size to 16px so iOS Safari
	   doesn't auto-zoom when the user focuses a select. */
	.portal-filters {
		padding: 12px 14px;
		gap: 10px;
	}
	.portal-filters .field select,
	.portal-filters .field input[type=text] {
		min-width: 0;
		width: 100%;
		font-size: 16px;
		padding: 9px 10px;
	}
	.portal-filters .field-spacer { display: none; }
	.portal-filters .field-actions {
		width: 100%;
		justify-content: stretch;
	}
	.portal-filters .field-actions .btn { flex: 1; }

	/* Modal body inputs (team_contacts edit modal) — same iOS zoom +
	   width treatment as the filters above. */
	.portal-modal-body .form-field input,
	.portal-modal-body .form-field select {
		font-size: 16px;
		width: 100%;
		box-sizing: border-box;
	}

	/* Login + verify forms — `.form-field` defaults to 0.97rem (≈15.5px)
	   which trips iOS Safari's text-field auto-zoom on focus. Bump to
	   16px across every portal page that uses the shared `.form-field`
	   primitive (login email, verify token redirect, etc.). */
	.portal-club-card .form-field input,
	.portal-club-card .form-field select,
	.portal-club-card .form-field textarea {
		font-size: 16px;
	}
}

/* --- Export button (title bar) + export modal -------------------
   The "Build PDF/Excel" entry on ladders.php opens a modal that lets
   the user pick a subset of grades and a format. Modal = centred
   dialog on desktop, full-width bottom sheet on mobile. */
.btn-export {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ink-700);
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-export:hover { background: var(--paper-soft); border-color: var(--ink-300); color: var(--ink-900); }
.btn-export .btn-icon { flex-shrink: 0; }

.ladder-export-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ladder-export-modal[hidden] { display: none; }
.ladder-export-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 26, 33, 0.45);
	backdrop-filter: blur(2px);
}
.ladder-export-sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(540px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	background: var(--paper);
	border-radius: var(--r-lg);
	box-shadow: 0 20px 50px rgba(15,26,33,0.30);
	overflow: hidden;
	animation: lem-pop 0.18s ease-out;
}
@keyframes lem-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lem-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
}
.lem-head h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink-900);
	flex: 1;
}
.lem-close {
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border: none;
	color: var(--ink-500);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--r-sm);
	transition: background 0.12s, color 0.12s;
}
.lem-close:hover { background: var(--paper-soft); color: var(--ink-900); }
.lem-body {
	padding: 16px 18px 4px;
	overflow-y: auto;
	flex: 1;
}
.lem-field { margin-bottom: 18px; }
.lem-field-label,
.lem-field-label-row .lem-field-label {
	font-size: 0.72rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 8px;
}
.lem-field-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
}
.lem-field-label-row .lem-field-label { margin-bottom: 0; }
.lem-bulk { display: flex; gap: 12px; }
.lem-link {
	background: transparent;
	border: none;
	color: var(--teal-700);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}
.lem-link:hover { text-decoration: underline; }

/* Competition picker — segmented control echoing the on-page comp
   tabs. Each option picks up its brand colour when checked so the
   user gets a visual cue. */
.lem-comp {
	display: inline-flex;
	gap: 2px;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px;
	flex-wrap: wrap;
}
.lem-comp-opt {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	border-radius: calc(var(--r-sm) - 2px);
	padding: 7px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-500);
	transition: background 0.12s, color 0.12s;
}
.lem-comp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lem-comp-opt:has(input:checked) {
	background: var(--paper-card);
	box-shadow: var(--shadow-sm);
}
.lem-comp-opt.tab-mixed:has(input:checked)  { color: var(--teal-700); }
.lem-comp-opt.tab-mens:has(input:checked)   { color: #B35A3C; }
.lem-comp-opt.tab-ladies:has(input:checked) { color: #7C3AED; }

/* Format toggle — segmented control. */
.lem-format {
	display: inline-flex;
	gap: 2px;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 3px;
}
.lem-format label {
	display: inline-flex;
	align-items: center;
	gap: 0;
	cursor: pointer;
	border-radius: calc(var(--r-sm) - 2px);
	padding: 7px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-500);
	transition: background 0.12s, color 0.12s;
}
.lem-format label input { position: absolute; opacity: 0; pointer-events: none; }
.lem-format label:has(input:checked) {
	background: var(--paper-card);
	color: var(--ink-900);
	box-shadow: var(--shadow-sm);
}

/* Grade picker — letter-grouped sections so 30+ grades don't look
   like a wall of chips. Each section has a quiet label + a per-letter
   All/None toggle, then a horizontal chip row. Echoes the on-page
   chip strip visually so the user feels they're picking from the same
   set of grades they were just browsing. */
.lem-grade-groups {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lem-grade-group {
	padding: 8px 10px 10px;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}
.lem-grade-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}
.lem-grade-group-label {
	font-size: 0.7rem;
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.lem-grade-row {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
/* Kept for backward-compat / unused in current markup but harmless. */
.lem-grade-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.lem-grade {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
.lem-grade input { position: absolute; opacity: 0; pointer-events: none; }
.lem-grade span {
	display: inline-block;
	/* Uniform width — matches the .lad-grade-chip rule on the page so
	   chips line up here too. Centered so short labels ("A") read the
	   same as longer ones ("A +1"). */
	min-width: 56px;
	padding: 4px 10px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-700);
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: 999px;
	text-align: center;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lem-grade:hover span { background: var(--teal-50); border-color: var(--teal-300); }
.lem-grade input:checked + span {
	background: var(--teal-600);
	color: #fff;
	border-color: var(--teal-700);
}
.lem-grade input:focus-visible + span { outline: 2px solid var(--teal-600); outline-offset: 2px; }

.lem-cover {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 0.92rem;
	color: var(--ink-700);
}
.lem-cover input { width: 16px; height: 16px; cursor: pointer; }

.lem-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--line);
	background: var(--paper-soft);
}
.lem-foot .btn { white-space: nowrap; }

/* Mobile: become a bottom sheet — pinned to the viewport bottom,
   full width minus the page gutter, slides up on open. */
@media (max-width: 760px) {
	.ladder-export-modal { align-items: flex-end; }
	.ladder-export-sheet {
		width: 100%;
		max-width: 100%;
		max-height: 90vh;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		animation: lem-slide 0.22s ease-out;
	}
	@keyframes lem-slide {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}
	.btn-export .btn-label { display: none; }
	.btn-export { padding: 5px 8px; }
}

/* --- Responsive ------------------------------------------------- */
@media (max-width: 1024px) {
	.topnav-links { gap: 0; }
	.topnav-link { padding: 7px 10px; font-size: 0.88rem; }
}

@media (max-width: 880px) {
	.topnav-links, .topnav-cta { display: none; }
	.hamburger { display: block; }

	/* Mobile nav: logo centered, hamburger anchored top-right with proper
	   breathing room (iOS-style 12-16px from edge, ≥44pt tap target). */
	.topnav-inner {
		position: relative;
		justify-content: center;
	}
	.topnav-brand { margin: 0; }
	.hamburger {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0;
	}
	.hamburger.is-open { transform: translateY(-50%); }
	.hamburger.is-open span:nth-child(1) { transform: translate(0, 6px) rotate(45deg); }
	.hamburger.is-open span:nth-child(3) { transform: translate(0, -6px) rotate(-45deg); }
	.hero-inner { grid-template-columns: 1fr; gap: 36px; }
	.hero { padding: 50px 0 60px; }
	.livegrid { grid-template-columns: 1fr; }
	.news-grid { grid-template-columns: 1fr; }
	.quickact { grid-template-columns: 1fr; padding: 32px 26px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	/* .content-layout collapses to one column above (≤900px) and the
	   sidebar is fully hidden there — see the @media (max-width: 900px)
	   block earlier in this file (WEBSITE_UPDATES.md §2.5). No
	   additional .content-side styling is needed at this tighter
	   breakpoint. */
	section { padding: 50px 0; }
	.glance-grid { grid-template-columns: 1fr; }
	.clubs-layout { grid-template-columns: 1fr; }
	.map-placeholder { min-height: 320px; }
	.club-cards { max-height: none; }

	/* Mobile ladder: switch to card mode.
	   Real ladder columns: 1=Pos, 2=Team, 3=Pts, 4=Won, 5=Lost, 6=%
	   Layout per row:
	     [Pos]  Team name                          [Pts] PTS
	            W ### · L ### · ##%
	   Approach: block-flow the row with team-name as block, rank+pts
	   absolutely positioned, and W/L/% as inline siblings flowing on
	   their own implicit line (because team is block). Grid is not used
	   here because grid auto-placement was pushing 4/5/6 onto separate
	   rows. */
	.lad-full table thead { display: none; }
	.lad-full table, .lad-full tbody { display: block; width: 100%; }
	.lad-full tbody tr {
		display: block;
		position: relative;
		padding: 14px 86px 14px 56px;
		border-bottom: 1px solid var(--line);
		min-height: 64px;
	}
	.lad-full tbody td {
		display: inline;
		padding: 0;
		border: none;
		text-align: left;
	}
	/* 1: Position rank — absolute left, vertically centered */
	.lad-full tbody td:nth-child(1) {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
	}
	/* 2: Team name — block, owns its own line */
	.lad-full tbody td:nth-child(2) {
		display: block;
		font-weight: 600;
		color: var(--ink-900);
		font-size: 1rem;
		margin-bottom: 4px;
		line-height: 1.25;
	}
	/* 3: Points — absolute right, large + with "pts" caption beneath */
	.lad-full tbody td:nth-child(3) {
		position: absolute;
		right: 16px;
		top: 14px;
		font-size: 1.4rem;
		font-weight: 800;
		color: var(--ink-900);
		font-variant-numeric: tabular-nums;
		line-height: 1;
		text-align: right;
	}
	.lad-full tbody td:nth-child(3)::after {
		content: 'PTS';
		display: block;
		font-size: 0.62rem;
		font-weight: 700;
		color: var(--ink-400);
		letter-spacing: 0.07em;
		margin-top: 4px;
		letter-spacing: 0.06em;
	}
	/* 4-6: W · L · % — all inline on the line under the team name.
	   At narrow widths (≤320px or rows with 3-digit % like 150) the
	   default breakable spaces inside the `::before` content let the
	   browser wrap mid-group, pushing the % value onto its own line.
	   Two changes lock the group together:
	     1. Non-breaking spaces (\00a0) inside the pseudo content so the
	        cell value can't detach from its separator.
	     2. `white-space: nowrap` on each cell so digits never break
	        from their pseudo prefix/suffix. */
	.lad-full tbody td:nth-child(4),
	.lad-full tbody td:nth-child(5),
	.lad-full tbody td:nth-child(6) {
		font-size: 0.84rem;
		color: var(--ink-500);
		font-weight: 500;
		white-space: nowrap;
	}
	.lad-full tbody td:nth-child(4)::before {
		content: 'W\00a0';
		color: var(--teal-700);
		font-weight: 700;
	}
	.lad-full tbody td:nth-child(5)::before {
		content: '\00a0·\00a0L\00a0';
		color: var(--clay-600);
		font-weight: 700;
	}
	.lad-full tbody td:nth-child(6) {
		color: var(--ink-700);
		font-weight: 700;
	}
	.lad-full tbody td:nth-child(6)::before {
		content: '\00a0·\00a0';
		color: var(--ink-300);
		font-weight: 400;
	}
	.lad-full tbody td:nth-child(6)::after {
		content: '%';
		font-size: 0.85em;
		color: var(--ink-400);
		font-weight: 600;
	}
}

@media (max-width: 600px) {
	:root { --gutter: 16px; }
	body { font-size: 16px; }
	.footer-grid { grid-template-columns: 1fr; }
	.hero-status { padding: 20px; }
	.snapshot-comps { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
	.snapshot-comp { display: flex; gap: 10px; align-items: baseline; justify-content: flex-start; }
	.snapshot-comp .n { font-size: 1.1rem; }
	.leaders-grid { grid-template-columns: 1fr; gap: 18px; }
	.section-checks { grid-template-columns: 1fr; }
	.fixture-builder { padding: 22px; }
	.fixture-summary { flex-direction: column; align-items: flex-start; }
	.committee-grid { grid-template-columns: repeat(2, 1fr); }
	.lad-filters { gap: 10px; }
	.lad-filter-group { min-width: calc(50% - 5px); }
	.life-list { columns: 1; }
	.predictive-banner { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
	.predictive-banner h2 { font-size: 1.35rem; }
	.preview-grid { grid-template-columns: 1fr; }
	.glance-toolbar-group { width: 100%; }
	.chip-search { width: 100%; }
	.roles-row { grid-template-columns: 1fr; gap: 2px; }
	.roles-row .role-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
	.form-grid-2 { grid-template-columns: 1fr; }
	.score-grid { grid-template-columns: 1fr 56px 56px 1fr; gap: 6px; font-size: 0.86rem; }
	.topnav-brand img { height: 38px; }
}

@media (max-width: 400px) {
	.committee-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   Phase 3 — mobile-first shared helpers (rolled out 2026-05-28)

   Patterns sourced from AFL.com.au / Cricket Australia / Mobbin's
   "Stacked List" pattern library. Applied across the v2 site after
   the homepage rebuild. See MOBILE_FIRST_PLAN.md at the repo root.
   ================================================================= */

/* --- .section-tint — alternating-band background ----------------
   Apply to every other section so page rhythm comes from band
   alternation rather than per-item decoration. Default = main
   --paper colour; tint = --paper-tint. */
.section-tint { background: var(--paper-tint); }

/* --- .mobile-list-row — three-tier stacked list row -------------
   Universal list-item shape: small uppercase eyebrow + strong
   headline + muted meta line. Hairline divider between rows, no
   per-row card box. Used by clubs / news / about / documents /
   downloads / dates / contacts / etc.

   Markup:
     <a class="mobile-list-row" href="...">
       <span class="row-eyebrow">SEASON · 5 JUN</span>
       <span class="row-headline">Team Entries close</span>
       <span class="row-meta">Returns to Chairman by 8:00 pm</span>
     </a>

   The container holding the rows should be plain (no wrapper card);
   rows space themselves via padding + hairline borders. */
.mobile-list-row {
	display: block;
	padding: 14px 0;
	border-top: 1px solid var(--line);
	color: var(--ink-800);
	text-decoration: none;
	transition: background 0.12s;
}
.mobile-list-row:first-child { border-top: none; padding-top: 4px; }
.mobile-list-row:hover { background: var(--paper-tint); text-decoration: none; }
.mobile-list-row .row-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-500);
	margin-bottom: 4px;
}
.mobile-list-row .row-headline {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink-900);
	margin-bottom: 2px;
}
.mobile-list-row .row-meta {
	display: block;
	font-size: 0.86rem;
	color: var(--ink-500);
	line-height: 1.4;
}
.mobile-list-row .row-meta a { color: var(--teal-700); }

/* Compact variant — slimmer padding for dense lists (e.g. doc lists). */
.mobile-list-row.compact { padding: 10px 0; }
.mobile-list-row.compact:first-child { padding-top: 2px; }

/* Comp colour cues — eyebrow tint per competition. Optional. */
.mobile-list-row.row-mixed  .row-eyebrow { color: var(--teal-700); }
.mobile-list-row.row-mens   .row-eyebrow { color: #B35A3C; }
.mobile-list-row.row-ladies .row-eyebrow { color: #7C3AED; }

/* --- .has-sidebar — universal mobile sidebar handling -----------
   For pages with a main+sidebar two-column layout (About, Dates,
   Fees, Info, Downloads), the sidebar sits ABOVE main content at
   narrow widths in the current implementation — pushes the actual
   page intent below the fold. This helper inverts that: sidebar
   visually moves below main on mobile via grid row reordering.

   Markup:
     <div class="has-sidebar">
       <main class="page-main">...</main>
       <aside class="page-aside">...</aside>
     </div>

   At desktop (≥900px) the layout is the existing two-column grid
   defined by the page itself (or by an extension here). At mobile
   the aside is forced to row 2 below the main content. */
@media (max-width: 900px) {
	.has-sidebar {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.has-sidebar .page-main  { order: 1; }
	.has-sidebar .page-aside { order: 2; }
	/* If a sidebar contains pill-grid navigation, collapse to a
	   horizontally-scrollable chip strip on mobile so it doesn't
	   eat vertical space. */
	.has-sidebar .page-aside .sidebar-pills {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	.has-sidebar .page-aside .sidebar-pills > * {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* --- Shared section-head mobile rules ----------------------------
   Lifted from index.php inline CSS so every page benefits. */
@media (max-width: 760px) {
	.section-head h2 { font-size: 1.4rem; line-height: 1.15; }
	.section-head { margin-bottom: 16px; }
	.section-eyebrow { margin-bottom: 4px; font-size: 0.7rem; }
}