/* ============================================================
   DOPEY CHALLENGE RESULTS - STYLESHEET
   ============================================================
   Table of Contents:
   1. Font Faces
   2. CSS Variables / Custom Properties
   3. Reset / Base Styles
   4. Typography
   5. Layout (nav, main, article, header, footer)
   6. Forms
   7. Tables
   8. Components (cards, buttons, heroes, etc.)
   9. Graphs & Charts
   10. Page-Specific Styles
   11. Animations
   12. Media Queries (Responsive)
   13. Print Styles
   ============================================================ */

/* ============================================================
   1. FONT FACES
   ============================================================ */

@font-face {
	font-family: 'Waltograph';
	src: url('waltograph42.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mouse Memoirs';
	src: url('MouseMemoirs-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('Montserrat-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('Montserrat-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('OpenSans-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('OpenSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('Poppins-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('Poppins-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('Poppins-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('Poppins-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   2. CSS VARIABLES / CUSTOM PROPERTIES
   ============================================================ */

:root {
	/* Primary colors */
	--color1: #5d41ac;
	--color1-dark: #3d2b7a;
	--color1-light: #7c5dc4;
	--color1b: #FFFFFF;
	--color2: #f0ecf9;
	--color2-hover: #e8e4f4;
	--color3: #00B0B0;
	--color4: #5d41ac;

	/* Aliases for clarity */
	--purple-primary: var(--color1);

	/* Navigation */
	--color-nav-bg: #5d41ac;
	--color-nav-text: #FFFFFF;

	/* Backgrounds */
	--color-bg: #FFFFFF;
	--color-article-bg: #FFFFFF;
	--color-article-text: #162344;

	/* Footer */
	--color-footer-bg: #162344;
	--color-footer-text: #FFFFFF;

	/* Layout */
	--max-width: 3200px;
	--nav-height: 60px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 16px rgba(0,0,0,0.12);

	/* Button gradient (used in multiple places) */
	--btn-gradient: linear-gradient(135deg, var(--color1) 0%, var(--color1-light) 100%);
}

/* ============================================================
   3. RESET / BASE STYLES
   ============================================================ */

* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: #c4b5e0 #f5f5f5;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	background-color: var(--color-bg);
	margin: 0;
	color: var(--color-article-text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

/* Keyboard focus styles for accessibility */
:focus-visible {
	outline: 2px solid var(--color1);
	outline-offset: 2px;
}

a:focus-visible {
	border-radius: 4px;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Custom text selection */
::selection {
	background: rgba(93, 65, 172, 0.2);
	color: inherit;
}

/* Custom scrollbar (WebKit browsers) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #c4b5e0 0%, #a890d3 100%);
	border-radius: 5px;
	border: 2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #a890d3 0%, var(--color1) 100%);
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1 {
	font-family: 'Waltograph', 'Open Sans', sans-serif;
	font-size: 57px;
	font-weight: normal;
	letter-spacing: 1px;
	margin-bottom: 0px;
	margin-top: 0px;
}

h2 {
	font-family: 'Mouse Memoirs', sans-serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 1px;
}

/* ============================================================
   5. LAYOUT
   ============================================================ */

/* --- Navigation --- */
nav {
	justify-content: start;
	background-color: var(--color-nav-bg);
	color: var(--color-nav-text);
	box-shadow: var(--shadow-md);
}

/* --- Header --- */
header {
	padding-top: var(--nav-height);
	display: grid;
	background-color: var(--color-article-text);
}

header img {
	width: 100%;
}

header video {
	width: 100%;
}

header iframe {
	width: 100%;
	height: 56vw;
}

header .slideShow {
	grid-row: 1;
	height: 85vh;
}

header .slideShow img {
	object-fit: cover;
}

/* --- Main Content Area --- */
main {
	max-width: var(--max-width);
	width: 100%;
	margin: auto;
	flex: 1;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(450px, calc(50% - 10px)), 1fr));
	gap: 20px;
	padding: 20px;
	animation: fadeInUp 0.4s ease-out;
}

main > article:first-child,
main > .hero,
main > .hero + article {
	grid-column: 1 / -1;
}

main > .hero {
	margin: -20px -20px 0 -20px;
	width: calc(100% + 40px);
}

main > article table {
	margin: 0 auto;
}

/* --- Article --- */
article {
	padding-top: calc(var(--nav-height) + 32px);
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 32px;
	margin: 0 24px 8px;
	background-color: var(--color-article-bg);
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: start;
	border-radius: 16px;
}

/* Single article fills the page */
article:only-of-type {
	margin: 0;
	border-radius: 0;
	min-height: calc(100vh - var(--nav-height) - 200px);
	background: linear-gradient(180deg, #ffffff 0%, #f8f6fc 100%);
}

/* Articles following a hero section don't need nav-height padding */
.hero + article {
	padding-top: 32px;
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Consecutive articles get visual separation */
article + article {
	padding-top: 48px;
	margin-top: 0;
	border-top: 1px solid rgba(93, 65, 172, 0.08);
}

article h1 {
	color: var(--color1);
	text-align: center;
	margin-bottom: 24px;
	margin-top: 0;
}

article h2 {
	color: var(--color1);
	text-align: center;
	font-weight: 400;
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 32px;
}

article > p {
	text-align: center;
	color: #666;
	margin-top: 0;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.5;
}

article h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #555;
	margin-top: 32px;
	margin-bottom: 16px;
	text-align: center;
}

article a {
	color: var(--color1);
	text-decoration: none;
	transition: color 0.15s ease;
}

article a:hover {
	color: var(--color1-dark);
	text-decoration: underline;
}

article ul {
	padding: 0;
	margin: auto;
	list-style-type: none;
}

article > img {
	display: block;
	margin: auto;
	max-width: 100%;
	object-fit: scale-down;
}

/* Expandable articles with SVG charts (not tables) */
main > article:has(svg) {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

main > article:has(svg):hover {
	box-shadow: 0 8px 24px rgba(93, 65, 172, 0.15);
}

/* Expanded article overlay */
article.expanded {
	position: fixed !important;
	top: 20px !important;
	left: 20px !important;
	right: 20px !important;
	bottom: 20px !important;
	max-width: none !important;
	width: auto !important;
	height: auto !important;
	z-index: 1000;
	overflow: auto;
	margin: 0 !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: expandIn 0.3s ease;
}

article.expanded svg {
	max-width: 100%;
	max-height: calc(100vh - 250px);
	min-height: auto;
}

/* Overlay backdrop */
.article-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	animation: fadeIn 0.3s ease;
}

/* --- Footer --- */
footer {
	background-color: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding: 48px 32px 24px;
	margin-top: 0;
}

.footer-content {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-section h3 {
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
	color: #a8d4ff;
}

.footer-section p {
	font-size: 14px;
	line-height: 1.6;
	opacity: 0.85;
}

.footer-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-section ul li {
	margin-bottom: 8px;
}

.footer-section ul li a {
	color: var(--color-footer-text);
	text-decoration: none;
	font-size: 14px;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.footer-section ul li a:hover {
	opacity: 1;
	text-decoration: underline;
}

.footer-bottom {
	text-align: center;
	padding-top: 24px;
	font-size: 13px;
	opacity: 0.7;
}

/* ============================================================
   6. FORMS
   ============================================================ */

input, button, select, textarea {
	font-family: 'Mouse Memoirs', sans-serif;
	letter-spacing: 1px;
}

article > form {
	margin: 16px auto 16px auto;
}

article > form input[type="text"],
article > form input[type="search"] {
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	border-radius: 50px;
	border: 2px solid #e0e0e0;
	box-shadow: var(--shadow-sm);
	padding: 14px 24px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	min-width: min(300px, 100%);
	width: 100%;
	max-width: 400px;
	background: white;
}

article > form input[type="text"]:hover,
article > form input[type="search"]:hover {
	border-color: #ccc;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

article > form input[type="text"]:focus,
article > form input[type="search"]:focus {
	outline: none;
	border-color: var(--color1);
	box-shadow: 0 0 0 4px rgba(93, 65, 172, 0.12), var(--shadow-md);
	transform: translateY(-1px);
}

article > form input::placeholder {
	color: #999;
	font-weight: 400;
}

/* Consolidated button styles */
article > form button,
article > form input[type="submit"],
#sqlQueryPage form button {
	font-size: 16px;
	font-weight: 600;
	padding: 14px 32px;
	border-radius: 50px;
	border: none;
	background: var(--btn-gradient);
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: var(--shadow-sm);
}

article > form button:hover,
article > form input[type="submit"]:hover,
#sqlQueryPage form button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(93, 65, 172, 0.35);
}

article > form button:active,
article > form input[type="submit"]:active {
	transform: translateY(0);
}

article textarea {
	width: 100%;
	height: 50vh;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 16px;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.5;
	resize: vertical;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

article textarea:focus {
	outline: none;
	border-color: var(--color1);
	box-shadow: 0 0 0 4px rgba(93, 65, 172, 0.12);
}

/* ============================================================
   7. TABLES
   ============================================================ */

.table-wrapper {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 24px auto;
	border-radius: 12px;
	box-shadow: var(--shadow-md);
}

.table-wrapper > table {
	margin: 0 auto;
	box-shadow: none;
	border-radius: 0;
}

article > table {
	margin: 24px auto 32px;
	text-align: left;
	border-spacing: 0;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

article table caption {
	border: none;
	font-size: 18px;
	white-space: nowrap;
	margin-bottom: 8px;
	color: var(--color3);
	padding: 0;
}

article table .hidden {
	display: none;
}

article table td, article table th {
	padding: 12px 14px;
}

article table th {
	font-size: 13px;
	font-weight: 600;
	background: linear-gradient(180deg, #6b4dc4 0%, var(--color1) 100%);
	color: var(--color1b);
	vertical-align: bottom;
	padding: 14px 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap;
}

article table td {
	border-bottom: 1px solid rgba(93, 65, 172, 0.08);
	font-variant-numeric: tabular-nums;
}

article table tr:nth-child(even) {
	background-color: var(--color2);
}

article table tbody tr {
	transition: background-color 0.15s ease, transform 0.1s ease;
}

article table tbody tr:hover {
	background-color: #e8e0f7;
}

article table tbody tr:active {
	transform: scale(0.995);
}

article table td a {
	font-weight: 500;
}

article table td a:hover {
	text-decoration: none;
	background: rgba(93, 65, 172, 0.1);
	border-radius: 4px;
	padding: 2px 4px;
	margin: -2px -4px;
}

/* Table cell alignments */
article table td.text-center,
article table th.text-center {
	text-align: center;
}

/* Centered narrow table wrapper */
.table-centered {
	max-width: 400px;
	margin: 0 auto;
}

/* ============================================================
   8. COMPONENTS
   ============================================================ */

/* --- Hero Section --- */
.hero {
	position: relative;
	background: linear-gradient(135deg, var(--color1) 0%, var(--color1-dark) 100%);
	color: white;
	padding: calc(var(--nav-height) + 48px) 32px 64px;
	text-align: center;
	margin-bottom: 0;
	overflow: hidden;
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
}

.hero h1 {
	font-family: 'Waltograph', sans-serif;
	font-size: 70px;
	font-weight: normal;
	margin-bottom: 16px;
	color: white;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	letter-spacing: 1px;
}

.hero p {
	font-size: 20px;
	opacity: 0.95;
	margin-bottom: 32px;
	line-height: 1.5;
}

.hero-stats {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.hero-stat {
	text-align: center;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	backdrop-filter: blur(10px);
	transition: transform 0.2s ease, background 0.2s ease;
}

.hero-stat:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.15);
}

.hero-stat-number {
	font-family: 'Mouse Memoirs', sans-serif;
	font-size: 48px;
	font-weight: 400;
	color: #ffd700;
	display: block;
	letter-spacing: 2px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-stat-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.9;
	margin-top: 4px;
}

.hero-cta {
	display: inline-block;
	background-color: #ffd700;
	color: var(--color-article-text);
	padding: 14px 32px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: var(--shadow-md);
}

.hero-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* --- Stat Cards --- */
.stat-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0 auto 24px;
	max-width: 900px;
}

.stat-cards .stat-card {
	flex: 0 1 200px;
	min-width: 160px;
}

.stat-card {
	background: white;
	border-radius: 12px;
	padding: 24px 16px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #eee;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(93, 65, 172, 0.12);
	border-color: rgba(93, 65, 172, 0.2);
}

.stat-card-number {
	font-family: 'Mouse Memoirs', sans-serif;
	font-size: 40px;
	font-weight: 400;
	color: var(--color1);
	display: block;
	letter-spacing: 1px;
	line-height: 1.1;
}

.stat-card-label {
	font-size: 11px;
	color: #777;
	margin-top: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
}

/* --- Person Info Cards --- */
.person-info-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin: 24px 0;
}

.person-info-card {
	background: var(--color2);
	border-radius: 12px;
	padding: 16px 24px;
	text-align: center;
	min-width: 120px;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.person-info-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #666;
	margin-bottom: 4px;
}

.person-info-value {
	display: block;
	font-family: 'Mouse Memoirs', sans-serif;
	font-size: 24px;
	color: var(--color1);
	letter-spacing: 1px;
}

.person-info-card-perfect {
	background: linear-gradient(135deg, #ffd700 0%, #ffec80 100%);
	border: 2px solid #d4af37;
}

.person-info-card-perfect .person-info-value {
	color: #8b6914;
	font-weight: 500;
}

/* --- Person Admin Panel --- */
.person-admin-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin: 16px 0;
	padding: 12px 16px;
	background: #f5f5f5;
	border-radius: 8px;
	border: 1px dashed #ccc;
}

.person-admin-label {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
}

.person-admin-panel a {
	font-size: 14px;
	padding: 6px 12px;
	background: var(--color1);
	color: white !important;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.person-admin-panel a:hover {
	background: var(--color1-dark);
	text-decoration: none;
}

.person-admin-panel img {
	max-width: 100px;
	border-radius: 8px;
	box-shadow: var(--shadow-sm);
}

/* --- Person Profile Image (Jeff only) --- */
.person-profile-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
}

.person-profile-image img {
	max-width: 200px;
	max-height: 200px;
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	object-fit: cover;
}

.person-profile-image a {
	font-size: 14px;
	color: var(--color1);
}

/* --- Image Paste Zone (Jeff only) --- */
#imagePasteZone {
	padding: 20px;
	text-align: center;
	cursor: pointer;
	margin: 16px auto;
	max-width: 240px;
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#imagePasteZone:hover {
	background-color: #fafafa;
}

#imagePasteZone:focus {
	outline: none;
	background-color: #f0f0f0;
}

#imagePasteZone.loading {
	opacity: 0.6;
	pointer-events: none;
}

#imagePasteZone img {
	max-width: 200px;
	max-height: 200px;
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	object-fit: cover;
}

#imagePasteZone .paste-hint {
	color: #888;
	font-size: 14px;
}

#personInfo .facebook-link {
	display: block;
	text-align: center;
	font-size: 14px;
	color: var(--color1);
	margin-bottom: 8px;
}

/* --- Person Table Image (Jeff only) --- */
.person-table-image {
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	padding: 4px !important;
	line-height: 0;
}

.person-table-image img {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.person-table-image a {
	display: block;
	line-height: 0;
}

/* --- Comparison Tables --- */
.comparison-row {
	display: flex;
	gap: 48px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 8px;
}

.comparison-col {
	flex: 1;
	min-width: 320px;
	max-width: 520px;
}

.comparison-col h3 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid currentColor;
}

.comparison-col h3.improved {
	color: #27ae60;
}

.comparison-col h3.declined {
	color: #e74c3c;
}

/* --- Horizontal Bar Charts --- */
.bar-chart {
	margin-top: 8px;
}

.bar-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.bar-label {
	width: 120px;
	font-size: 14px;
	text-align: right;
	padding-right: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bar-track {
	flex: 1;
	background: #f0f0f0;
	border-radius: 6px;
	height: 28px;
	overflow: hidden;
}

.bar-fill {
	height: 100%;
	border-radius: 6px;
	transition: width 0.4s ease;
}

.bar-fill.green {
	background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
}

.bar-fill.red {
	background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
}

.bar-value {
	width: 90px;
	font-size: 14px;
	padding-left: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border-radius: 12px;
	background: #fafafa;
}

/* --- PDF Download Grid --- */
.pdf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px 0;
}

.pdf-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 16px;
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	text-decoration: none;
	color: var(--color-article-text);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	box-shadow: var(--shadow-sm);
}

.pdf-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color1);
}

.pdf-year {
	font-family: 'Mouse Memoirs', sans-serif;
	font-size: 48px;
	color: var(--color1);
	letter-spacing: 2px;
	line-height: 1;
}

.pdf-label {
	font-size: 12px;
	color: #666;
	margin-top: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pdf-size {
	font-size: 13px;
	color: #999;
	margin-top: 4px;
}

/* --- Time Change Indicators --- */
.time-positive {
	color: #27ae60;
	font-weight: bold;
}

.time-negative {
	color: #e74c3c;
	font-weight: bold;
}

/* --- Error Message --- */
.error-message {
	background: #fee2e2;
	color: #dc2626;
	padding: 16px 24px;
	border-radius: 8px;
	margin: 16px auto;
	max-width: 800px;
	text-align: center;
	font-weight: 500;
}

/* --- Statistics Section --- */
.statistics {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid rgba(93, 65, 172, 0.1);
}

.statistics h2 {
	margin-bottom: 24px;
}

.statistics h3 {
	margin-top: 0;
	margin-bottom: 16px;
}

/* --- Loading Skeleton --- */
.skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200px 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 4px;
}

/* ============================================================
   9. GRAPHS & CHARTS
   ============================================================ */

article svg {
	width: 100%;
	max-width: 900px;
	height: auto;
	min-height: 320px;
	margin: 0 auto;
	display: block;
	border: 1px solid #eee;
	border-radius: 12px;
	background: #fafafa;
}

.graphLegend {
	display: flex;
	justify-content: center;
	gap: 24px;
	list-style: none;
	padding: 14px 24px;
	margin: 20px auto 0;
	background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
	border-radius: 50px;
	border: 1px solid #e8e8e8;
	max-width: fit-content;
}

.graphLegend li {
	font-weight: 500;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Graph legend color classes */
.graphLegend .legend-black { color: #333; }
.graphLegend .legend-red { color: #e74c3c; }
.graphLegend .legend-green { color: #27ae60; }
.graphLegend .legend-blue { color: #3498db; }
.graphLegend .legend-purple { color: #9b59b6; }
.graphLegend .legend-orange { color: #e67e22; }
.graphLegend .legend-gray { color: #95a5a6; }

/* Chart description text */
.chart-description {
	text-align: center;
	color: #666;
	margin-bottom: 16px;
	font-size: 14px;
}

.chart-notes {
	color: #666;
	font-size: 14px;
	margin: 0 0 16px 0;
	padding: 0;
	text-align: center;
	list-style-position: inside;
}

.chart-notes li {
	margin: 4px 0;
}

/* Search page description */
.search-description {
	text-align: center;
	color: #555;
	font-size: 15px;
	margin: -8px 0 24px;
	font-weight: 400;
	letter-spacing: 0.2px;
}

/* ============================================================
   10. PAGE-SPECIFIC STYLES
   ============================================================ */

/* --- Login Page --- */
#loginPage {
	background: var(--color1);
	min-height: 100vh;
}

#loginPage nav {
	display: none;
}

#loginPage main {
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	background: var(--color1);
	justify-content: center;
	min-height: 100vh;
}

#loginPage article {
	background-color: rgba(255, 255, 255, 0.95);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px;
	margin: 24px;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	max-width: 420px;
	width: 100%;
	min-height: auto;
}

#loginPage h1 {
	font-size: 32px;
	color: var(--color1);
	margin-bottom: 8px;
	text-align: center;
}

#loginPage form {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 8px;
}

#loginPage form label {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-article-text);
	margin-top: 12px;
	text-align: left;
	align-self: flex-start;
}

#loginPage form input[type='text'],
#loginPage form input[type='password'] {
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	padding: 14px 18px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	text-align: left;
}

#loginPage form input[type='text']:focus,
#loginPage form input[type='password']:focus {
	outline: none;
	border-color: var(--color1);
	box-shadow: 0 0 0 3px rgba(93, 65, 172, 0.1);
}

#loginPage form .error {
	text-align: center;
	background-color: #fee2e2;
	color: #dc2626;
	padding: 12px;
	border-radius: 8px;
	font-size: 14px;
	margin-top: 8px;
}

#loginPage form .error:empty {
	display: none;
}

#loginPage form input[type='submit'] {
	padding: 14px;
	font-size: 16px;
	font-weight: 600;
	margin-top: 24px;
	background: var(--btn-gradient);
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#loginPage form input[type='submit']:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(93, 65, 172, 0.4);
}

/* --- About Page --- */
#aboutPage article h1 {
	margin-bottom: 12px;
}

#aboutPage article p {
	margin: auto;
	max-width: 1200px;
}

#aboutPage article table th {
	text-align: right;
}

#aboutPage article ul li {
	list-style: circle;
}

#aboutPage article a {
	color: var(--color4);
	text-decoration: none;
}

#about .text-muted {
	color: #666;
	font-style: italic;
}

.about-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	margin-bottom: 32px;
}

.about-link-card {
	display: block;
	background: white;
	border-radius: 8px;
	padding: 16px;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	border-left: 4px solid var(--purple-primary);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.about-link-title {
	display: block;
	font-weight: 600;
	color: var(--purple-primary);
	margin-bottom: 4px;
}

.about-link-desc {
	display: block;
	font-size: 14px;
	color: #555;
	line-height: 1.4;
}

.changelog {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.changelog-item {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

.changelog-item:last-child {
	border-bottom: none;
}

.changelog-date {
	flex-shrink: 0;
	font-weight: 600;
	color: var(--purple-primary);
	font-size: 14px;
	width: 100px;
}

.changelog-text {
	color: #444;
	font-size: 14px;
	line-height: 1.4;
}

/* --- SQL Query Page --- */
#sqlQueryPage form {
	width: 100%;
	max-width: 1024px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --- Person Info Table --- */
#personInfoTable tbody th {
	text-align: right;
}

/* --- Grand Floridian TV Page --- */
#grandFloridianTVPage footer {
	display: none;
}

#grandFloridianTVPage nav {
	position: relative;
	border-bottom: none;
}

#grandFloridianTVPage main {
	padding: 0;
	max-width: none;
}

#grandFloridianTVPage #grandFloridianTV {
	padding: 0;
	margin: 0;
	border-radius: 0;
	min-height: auto;
	background: none;
	max-width: none;
}

#grandFloridianTVPage #grandFloridianTV::before {
	content: '';
	display: block;
	height: 10px;
	background:
		linear-gradient(to bottom, transparent, #9B565E),
		linear-gradient(135deg, rgba(93, 65, 172, 0.95) 0%, rgba(61, 43, 122, 0.95) 100%);
}

#grandFloridianTVPage #grandFloridianTV iframe {
	display: block;
	width: 100%;
	height: calc(100vh - var(--nav-height) - 10px);
	border: none;
}

/* ============================================================
   11. ANIMATIONS
   ============================================================ */

/* Page load animation */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes expandIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 200px 0;
	}
}

@keyframes cardFadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes barGrow {
	from {
		width: 0;
	}
}

/* Card entrance animations */
.stat-card {
	animation: cardFadeIn 0.4s ease-out backwards;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }
.stat-card:nth-child(6) { animation-delay: 0.3s; }

.person-info-card {
	animation: cardFadeIn 0.4s ease-out backwards;
}

.person-info-card:nth-child(1) { animation-delay: 0.05s; }
.person-info-card:nth-child(2) { animation-delay: 0.1s; }
.person-info-card:nth-child(3) { animation-delay: 0.15s; }
.person-info-card:nth-child(4) { animation-delay: 0.2s; }
.person-info-card:nth-child(5) { animation-delay: 0.25s; }

/* Bar chart animation */
.bar-fill {
	animation: barGrow 0.6s ease-out backwards;
}

.bar-row:nth-child(1) .bar-fill { animation-delay: 0.1s; }
.bar-row:nth-child(2) .bar-fill { animation-delay: 0.15s; }
.bar-row:nth-child(3) .bar-fill { animation-delay: 0.2s; }
.bar-row:nth-child(4) .bar-fill { animation-delay: 0.25s; }
.bar-row:nth-child(5) .bar-fill { animation-delay: 0.3s; }
.bar-row:nth-child(6) .bar-fill { animation-delay: 0.35s; }
.bar-row:nth-child(7) .bar-fill { animation-delay: 0.4s; }
.bar-row:nth-child(8) .bar-fill { animation-delay: 0.45s; }
.bar-row:nth-child(9) .bar-fill { animation-delay: 0.5s; }
.bar-row:nth-child(10) .bar-fill { animation-delay: 0.55s; }

/* ============================================================
   12. MEDIA QUERIES (RESPONSIVE)
   ============================================================ */

/* Force single column at medium widths to prevent table clipping */
@media only screen and (max-width: 1200px) {
	main {
		grid-template-columns: 1fr;
	}
}

/* Smaller nav height for mobile */
@media only screen and (max-width: 1000px) {
	:root {
		--nav-height: 44px;
	}
}

/* --- Results Search Table Responsive --- */
/* Columns: 1-first, 2-last, 3-age, 4-gender, 5-hometown, 6-year, 7-5k, 8-10k, 9-half, 10-full, 11-notes */
#resultsSearchTable tr *:nth-child(3) {
	text-align: center;
}

#resultsSearchTable tr *:nth-child(2),
#resultsSearchTable tr *:nth-child(5),
#resultsSearchTable tr *:nth-child(6),
#resultsSearchTable tr *:nth-child(7),
#resultsSearchTable tr *:nth-child(8),
#resultsSearchTable tr *:nth-child(9) {
	text-align: right;
}

@media only screen and (max-width: 1200px) {
	#resultsSearchTable {
		font-size: 12px;
	}
	#resultsSearchTable th {
		font-size: 12px;
	}
	/* Hide 5k (7), 10k (8) */
	#resultsSearchTable tr > *:nth-child(7),
	#resultsSearchTable tr > *:nth-child(8) {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	#resultsSearchTable {
		font-size: 11px;
	}
	/* Hide 5k (7), 10k (8), half (9), notes (11) */
	#resultsSearchTable tr > *:nth-child(7),
	#resultsSearchTable tr > *:nth-child(8),
	#resultsSearchTable tr > *:nth-child(9),
	#resultsSearchTable tr > *:nth-child(11) {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	#resultsSearchTable {
		font-size: 10px;
	}
	#resultsSearchTable th,
	#resultsSearchTable td {
		padding: 6px 4px;
	}
	/* Hide gender (4), 5k (7), 10k (8), half (9), notes (11) */
	#resultsSearchTable tr > *:nth-child(4),
	#resultsSearchTable tr > *:nth-child(7),
	#resultsSearchTable tr > *:nth-child(8),
	#resultsSearchTable tr > *:nth-child(9),
	#resultsSearchTable tr > *:nth-child(11) {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	/* Hide gender (4), hometown (5), 5k (7), 10k (8), half (9), notes (11) */
	#resultsSearchTable tr > *:nth-child(4),
	#resultsSearchTable tr > *:nth-child(5),
	#resultsSearchTable tr > *:nth-child(7),
	#resultsSearchTable tr > *:nth-child(8),
	#resultsSearchTable tr > *:nth-child(9),
	#resultsSearchTable tr > *:nth-child(11) {
		display: none;
	}
}

/* --- Hometown Search Table (perRunnerTable) Responsive --- */
/* Columns: 1-name, 2-age, 3-gender, 4-hometown, 5-year, 6-5k, 7-10k, 8-half, 9-full */
@media only screen and (max-width: 1200px) {
	#perRunnerTable {
		font-size: 12px;
	}
	/* Hide 5k (6), 10k (7) */
	#perRunnerTable tr > *:nth-child(6),
	#perRunnerTable tr > *:nth-child(7) {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	#perRunnerTable {
		font-size: 11px;
	}
	/* Hide 5k (6), 10k (7), half (8) */
	#perRunnerTable tr > *:nth-child(6),
	#perRunnerTable tr > *:nth-child(7),
	#perRunnerTable tr > *:nth-child(8) {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	#perRunnerTable {
		font-size: 10px;
	}
	#perRunnerTable th,
	#perRunnerTable td {
		padding: 6px 4px;
	}
	/* Hide gender (3), 5k (6), 10k (7), half (8) */
	#perRunnerTable tr > *:nth-child(3),
	#perRunnerTable tr > *:nth-child(6),
	#perRunnerTable tr > *:nth-child(7),
	#perRunnerTable tr > *:nth-child(8) {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	/* Hide gender (3), hometown (4), 5k (6), 10k (7), half (8) */
	#perRunnerTable tr > *:nth-child(3),
	#perRunnerTable tr > *:nth-child(4),
	#perRunnerTable tr > *:nth-child(6),
	#perRunnerTable tr > *:nth-child(7),
	#perRunnerTable tr > *:nth-child(8) {
		display: none;
	}
}

/* --- Person Results Table Responsive --- */
/* Columns: 1-name, 2-age, 3-gender, 4-hometown, 5-year, 6-5k, 7-10k, 8-half, 9-full */
@media only screen and (max-width: 1200px) {
	#personResultsTable {
		font-size: 12px;
	}
	#personResultsTable th {
		font-size: 12px;
	}
	/* Hide 5k (6), 10k (7) */
	#personResultsTable tr > *:nth-child(6),
	#personResultsTable tr > *:nth-child(7) {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	#personResultsTable {
		font-size: 11px;
	}
	/* Hide 5k (6), 10k (7), half (8) */
	#personResultsTable tr > *:nth-child(6),
	#personResultsTable tr > *:nth-child(7),
	#personResultsTable tr > *:nth-child(8) {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	#personResultsTable {
		font-size: 10px;
	}
	#personResultsTable th,
	#personResultsTable td {
		padding: 6px 4px;
	}
	/* Hide gender (3), 5k (6), 10k (7), half (8) */
	#personResultsTable tr > *:nth-child(3),
	#personResultsTable tr > *:nth-child(6),
	#personResultsTable tr > *:nth-child(7),
	#personResultsTable tr > *:nth-child(8) {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	/* Hide gender (3), hometown (4), 5k (6), 10k (7), half (8) */
	#personResultsTable tr > *:nth-child(3),
	#personResultsTable tr > *:nth-child(4),
	#personResultsTable tr > *:nth-child(6),
	#personResultsTable tr > *:nth-child(7),
	#personResultsTable tr > *:nth-child(8) {
		display: none;
	}
}

/* --- Persons Table Responsive --- */
/* Columns: 1-first, 2-last, 3-sex, 4-age, 5-hometown, 6-total, 7-first year, 8-last year, 9-perfect, 10-fastest, 11-slowest, 12-notes */
@media only screen and (max-width: 1400px) {
	#personsTable {
		font-size: 13px;
	}
	#personsTable th {
		font-size: 13px;
		padding: 10px 8px;
	}
	#personsTable td {
		padding: 8px 6px;
	}
	/* Hide slowest (11) */
	#personsTable tr > *:nth-child(11) {
		display: none;
	}
}

@media only screen and (max-width: 1200px) {
	#personsTable {
		font-size: 12px;
	}
	#personsTable th {
		font-size: 12px;
	}
	/* Hide: fastest (10), slowest (11) */
	#personsTable tr > *:nth-child(10),
	#personsTable tr > *:nth-child(11) {
		display: none;
	}
}

@media only screen and (max-width: 1000px) {
	#personsTable {
		font-size: 11px;
	}
	#personsTable th {
		font-size: 11px;
		padding: 8px 6px;
	}
	/* Hide: first year (7), last year (8), perfect (9), fastest (10), slowest (11) */
	#personsTable tr > *:nth-child(7),
	#personsTable tr > *:nth-child(8),
	#personsTable tr > *:nth-child(9),
	#personsTable tr > *:nth-child(10),
	#personsTable tr > *:nth-child(11) {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	/* Hide: total (6), first year (7), last year (8), perfect (9), fastest (10), slowest (11) */
	#personsTable tr > *:nth-child(6),
	#personsTable tr > *:nth-child(7),
	#personsTable tr > *:nth-child(8),
	#personsTable tr > *:nth-child(9),
	#personsTable tr > *:nth-child(10),
	#personsTable tr > *:nth-child(11) {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	#personsTable {
		font-size: 11px;
	}
	/* Hide all stats and notes */
	#personsTable tr > *:nth-child(6),
	#personsTable tr > *:nth-child(7),
	#personsTable tr > *:nth-child(8),
	#personsTable tr > *:nth-child(9),
	#personsTable tr > *:nth-child(10),
	#personsTable tr > *:nth-child(11),
	#personsTable tr > *:nth-child(12) {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	#personsTable {
		font-size: 10px;
	}
	#personsTable th {
		font-size: 10px;
		padding: 6px 4px;
	}
	#personsTable td {
		padding: 6px 4px;
	}
	/* Hide sex (3), hometown (5), and all stats/notes */
	#personsTable tr > *:nth-child(3),
	#personsTable tr > *:nth-child(5),
	#personsTable tr > *:nth-child(6),
	#personsTable tr > *:nth-child(7),
	#personsTable tr > *:nth-child(8),
	#personsTable tr > *:nth-child(9),
	#personsTable tr > *:nth-child(10),
	#personsTable tr > *:nth-child(11),
	#personsTable tr > *:nth-child(12) {
		display: none;
	}
}

/* --- General Responsive Adjustments --- */
@media only screen and (max-width: 768px) {
	.graphLegend {
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}

	article svg {
		min-height: 280px;
	}

	.stat-cards {
		gap: 12px;
	}

	.stat-cards .stat-card {
		flex: 0 1 140px;
		min-width: 120px;
	}

	.comparison-row {
		gap: 32px;
	}

	.comparison-col {
		min-width: 280px;
	}

	.bar-label {
		width: 100px;
		font-size: 13px;
	}

	.bar-value {
		width: 80px;
		font-size: 13px;
	}
}

@media only screen and (max-width: 700px) {
	h1 {
		text-align: center;
		font-size: 48px;
	}

	h2 {
		text-align: center;
		font-size: 24px;
	}

	article {
		margin: 16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	article p {
		margin: 0;
	}

	.hero h1 {
		font-size: 52px;
	}

	.hero p {
		font-size: 15px;
		padding: 0 8px;
	}

	.hero-stats {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
		justify-content: space-around;
	}

	.hero-stat {
		flex: 1 1 80px;
		min-width: 80px;
	}

	.hero-stat-number {
		font-size: 28px;
	}

	.hero-stat-label {
		font-size: 11px;
	}

	.stat-card {
		padding: 16px 12px;
	}

	.stat-card-number {
		font-size: 28px;
	}

	.stat-card-label {
		font-size: 12px;
	}

	.footer-content {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

@media only screen and (max-width: 600px) {
	.person-info-cards {
		gap: 10px;
	}

	.person-info-card {
		padding: 12px 16px;
		min-width: 100px;
	}

	.person-info-value {
		font-size: 20px;
	}

	.person-admin-panel {
		flex-direction: column;
		gap: 8px;
	}

	.pdf-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.pdf-card {
		padding: 16px 12px;
	}

	.pdf-year {
		font-size: 36px;
	}

	.pdf-label {
		font-size: 10px;
	}

	/* About page table */
	#aboutPage article table {
		font-size: 12px;
	}
	#aboutPage article table th,
	#aboutPage article table td {
		padding: 8px 6px;
	}
}

@media only screen and (max-width: 550px) {
	h1 {
		text-align: center;
		font-size: 36px;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	h2 {
		text-align: center;
		font-size: 18px;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	article {
		margin: 8px;
		padding-left: 12px;
		padding-right: 12px;
		border-radius: 12px;
	}

	/* Fix stat cards at narrow widths */
	.stat-cards {
		gap: 8px;
	}

	.stat-cards .stat-card {
		flex: 1 1 calc(50% - 8px);
		min-width: calc(50% - 8px);
		max-width: calc(50% - 4px);
	}

	.stat-card {
		padding: 12px 6px;
		overflow: hidden;
	}

	.stat-card-number {
		font-size: 20px;
		word-break: break-all;
	}

	.stat-card-label {
		font-size: 9px;
		line-height: 1.3;
		word-wrap: break-word;
	}

	.hero {
		padding: calc(var(--nav-height) + 12px) 16px 32px;
	}

	.hero h1 {
		font-size: 40px;
		margin-bottom: 4px;
		margin-top: 0;
	}

	.hero p {
		font-size: 14px;
	}

	.hero-stat-number {
		font-size: 24px;
	}

	.comparison-row {
		gap: 24px;
	}

	.comparison-col {
		min-width: 100%;
	}

	.bar-label {
		width: 80px;
		font-size: 12px;
		padding-right: 8px;
	}

	.bar-track {
		height: 24px;
	}

	.bar-value {
		width: 70px;
		font-size: 12px;
		padding-left: 8px;
	}

	article svg {
		min-height: 250px;
	}

	#aboutPage header .slideShow {
		top: -40px;
	}
}

/* Mobile: single column layout to prevent horizontal overflow */
@media only screen and (max-width: 500px) {
	main {
		grid-template-columns: 1fr !important;
		padding: 4px 0;
		gap: 8px;
	}

	article {
		margin: 0;
		padding-left: 12px;
		padding-right: 12px;
		min-width: 0;
		max-width: 100%;
		border-radius: 0;
		overflow: visible;
	}

	/* Tables fill width on mobile - use viewport width */
	.table-wrapper {
		width: 100vw;
		max-width: none;
		margin-left: -12px;
		margin-top: 16px;
		margin-bottom: 16px;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.table-wrapper > table,
	article > table {
		width: 100%;
		margin: 0;
		border-radius: 0;
	}

	/* Override centered table on mobile */
	.table-centered {
		max-width: none !important;
		width: 100vw !important;
		margin-left: -20px !important;
	}

	article table td,
	article table th {
		padding: 8px 6px;
	}

	article table th {
		font-size: 11px;
		padding: 10px 6px;
	}

	article table td {
		font-size: 13px;
	}

	/* Hide id, ip address, and hostname columns in access log on mobile */
	#accessLogTable th:nth-child(1),
	#accessLogTable td:nth-child(1),
	#accessLogTable th:nth-child(4),
	#accessLogTable td:nth-child(4),
	#accessLogTable th:nth-child(5),
	#accessLogTable td:nth-child(5) {
		display: none;
	}

	.stat-cards {
		padding: 0 4px;
	}

	.stat-cards .stat-card {
		flex: 1 1 calc(50% - 4px);
		min-width: calc(50% - 4px);
	}

	/* Person info cards tighter on mobile */
	.person-info-cards {
		gap: 8px;
		margin: 16px 0;
	}

	.person-info-card {
		padding: 10px 12px;
		min-width: 70px;
	}

	.person-info-label {
		font-size: 9px;
	}

	.person-info-value {
		font-size: 18px;
	}

	/* Keep hero stats with padding on sides */
	.hero-stats {
		padding: 0 12px;
	}

	/* About page responsive */
	.about-links {
		grid-template-columns: 1fr;
	}

	.about-link-card {
		padding: 14px;
	}

	.changelog-item {
		flex-direction: column;
		gap: 4px;
	}

	.changelog-date {
		width: auto;
	}
}

/* Login page mobile */
@media only screen and (max-width: 480px) {
	#loginPage article {
		margin: 16px;
		padding: 32px 24px;
	}

	#loginPage h1 {
		font-size: 26px;
	}
}

/* Very narrow screens (iPhone SE, etc.) */
@media only screen and (max-width: 400px) {
	h1 {
		font-size: 28px;
	}

	h2 {
		font-size: 16px;
	}

	.stat-cards {
		gap: 6px;
	}

	.stat-cards .stat-card {
		flex: 1 1 calc(50% - 6px);
		min-width: calc(50% - 6px);
	}

	.stat-card {
		padding: 10px 4px;
	}

	.stat-card-number {
		font-size: 18px;
	}

	.stat-card-label {
		font-size: 8px;
	}

	.hero-stats {
		gap: 12px;
	}

	.hero-stat-number {
		font-size: 20px;
	}

	.hero-stat-label {
		font-size: 9px;
	}

	/* About page table stacked layout */
	#aboutPage article table {
		font-size: 10px;
	}
	#aboutPage article table th,
	#aboutPage article table td {
		padding: 6px 4px;
		display: block;
		text-align: left !important;
	}
	#aboutPage article table tr {
		display: block;
		margin-bottom: 12px;
		border-bottom: 1px solid #eee;
		padding-bottom: 12px;
	}
	#aboutPage article table th {
		font-weight: 600;
		color: var(--color1);
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   13. PRINT STYLES
   ============================================================ */

@media print {
	nav, footer, .person-admin-panel {
		display: none !important;
	}

	body {
		background: white;
		font-size: 12pt;
	}

	article {
		padding-top: 0;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
	}

	article h1 {
		font-size: 24pt;
		color: black;
	}

	article h2 {
		font-size: 18pt;
		color: black;
	}

	article table {
		box-shadow: none;
		border: 1px solid #ccc;
	}

	article table th {
		background: #eee !important;
		color: black !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	article svg {
		max-width: 100%;
		border: 1px solid #ccc;
	}

	.stat-card, .person-info-card {
		box-shadow: none;
		border: 1px solid #ccc;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	a {
		text-decoration: none;
		color: black;
	}

	a[href]::after {
		content: none;
	}
}