style.css

/* Brian Dew BD Economics - style.css */

/* ===== Font Face ===== */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lato-400i.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/lato-700i.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/albert-sans-normal.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/albert-sans-400i.woff2') format('woff2'); }

/* ===== Variables ===== */
:root {
  color-scheme: light dark;

  --font: 'Lato', sans-serif;
  --font-accent: 'Albert Sans', sans-serif;
  --radius: 0;

  /* Spacing Scale — 4px base, 1.5× progression (Swiss grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type Scale — fluid from 320px to 1080px viewport */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-lg: 17px;
  --text-xl: clamp(16px, 0.5vw + 14.5px, 18px);
  --text-2xl: clamp(18px, 0.5vw + 16.5px, 20px);
  --text-3xl: clamp(20px, 1vw + 17px, 24px);
  --text-4xl: clamp(24px, 1.5vw + 19px, 32px);

  /* Width Tiers — all content snaps to one of these */
  --width-page: 1080px;
  --width-xl: 1030px;
  --width-lg: 720px;
  --width-md: 600px;
  --width-sm: 400px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* Z-index Scale */
  --z-nav: 999;
  --z-dropdown: 1000;
  --z-overlay: 1001;

  /* Brand Colors */
  --color-accent-red: #E04040;

  /* Navigation */
  --color-nav-bg: #4B4B4B;
  --color-nav-text: #f2f2f2;
  --color-nav-hover: #111;

  /* Text Colors — 3-tier hierarchy */
  --color-text-strong: #161616;
  --color-text: #3a3a3a;
  --color-text-muted: #666;

  /* Backgrounds: canvas (page) → surface (panels) → highlight (emphasis) → alt (zebra rows) */
  --color-canvas: #f5f5f5;
  --color-surface: #fff;
  --color-bg-input: #fff;
  --color-bg-alt: #f2f2f2;
  --color-bg-highlight: #e8e8e8;

  /* Links */
  --color-link: #A80038;
  --color-link-visited: #900C3F;
  --color-link-hover: #CC9900;

  /* Borders */
  --color-border: #e9ecef;
  --color-border-light: #ccc;

  /* Code */
  --color-code-bg: #efefef;

  /* Elevation */
  --elevation-border: 2px solid var(--color-border-light);

  /* Chart colors */
  --color-grid: color-mix(in srgb, black 6%, transparent);
  --color-tooltip-bg: color-mix(in srgb, #4b4b4b 95%, transparent);

  /* Card/chart body background */
  --color-card-bg: #fff;

  /* Trail badge colors */
  --color-trail-intro: #2e7d32;
  --color-trail-beginner: #1565c0;
  --color-trail-other: #555;

  /* Syntax highlighting */
  --syn-base: #333;
  --syn-comment: #8d8d8d;
  --syn-keyword: #713bc5;
  --syn-number: #ff8132;
  --syn-string: #009e07;
  --syn-title: #900;
  --syn-function: #e22978;
  --syn-type: #458;
  --syn-tag: #000080;
  --syn-symbol: #990073;
  --syn-deletion-bg: #fdd;
  --syn-addition-bg: #dfd;

  /* Card Header Colors */
  --color-card-blue: #3d5a8a;
  --color-card-green: #3a7a5a;
  --color-card-red: #E04040;
  --color-card-orange: #9a6830;
  --color-card-purple: #5a4a70;
  --color-card-ltblue: #4a7a96;
  --color-card-teal: #3a7878;
  --color-card-brown: #7a6a3a;
}

/* Dark theme
   Surface hierarchy (darker = further back):
   Canvas #121212 → Panel #1e1e1e → Panel-item #252525 → Highlight #2e2e2e → Chrome #333
   Header #424242 is distinct from nav to avoid blending
   Borders provide structural edges (no shadows in dark mode) */
[data-theme="dark"] {
  --color-nav-bg: #333;
  --color-nav-text: #e0e0e0;
  --color-nav-hover: #4a4a4a;

  --color-text-strong: #efefef;
  --color-text: #c8c8c8;
  --color-text-muted: #999;

  --color-canvas: #121212;
  --color-surface: #1e1e1e;
  --color-bg-input: #1e1e1e;
  --color-bg-alt: #1a1a1a;
  --color-bg-highlight: #383838;

  --color-link: #ff6b8a;
  --color-link-visited: #e0527a;
  --color-link-hover: #ffb347;

  --color-border: #444444;
  --color-border-light: #555555;

  --color-code-bg: #2a2a2a;

  --elevation-border: 1px solid var(--color-border);

  --color-grid: color-mix(in srgb, white 8%, transparent);
  --color-tooltip-bg: color-mix(in srgb, #282828 95%, transparent);

  --color-card-bg: #282828;

  --color-trail-intro: #66bb6a;
  --color-trail-beginner: #42a5f5;
  --color-trail-other: #bbb;

  --syn-base: #c0c0c0;
  --syn-comment: #9ca3af;
  --syn-keyword: #a78bfa;
  --syn-number: #fb923c;
  --syn-string: #4ade80;
  --syn-title: #f472b6;
  --syn-function: #f472b6;
  --syn-type: #a78bfa;
  --syn-tag: #60a5fa;
  --syn-symbol: #f472b6;
  --syn-deletion-bg: none;
  --syn-addition-bg: none;

  --color-card-blue: #5a7aaa;
  --color-card-green: #5a9a7a;
  --color-card-red: #e85a5a;
  --color-card-orange: #b08050;
  --color-card-purple: #7a6a90;
  --color-card-ltblue: #6a9ab0;
  --color-card-teal: #4a8a8a;
  --color-card-brown: #9a8a5a;
}
/* ===== Accent Colors ===== */
.accent-blue   { --accent: var(--color-card-blue); }
.accent-green  { --accent: var(--color-card-green); }
.accent-red    { --accent: var(--color-card-red); }
.accent-orange { --accent: var(--color-card-orange); }
.accent-purple { --accent: var(--color-card-purple); }
.accent-teal   { --accent: var(--color-card-teal); }
.accent-ltblue { --accent: var(--color-card-ltblue); }
.accent-brown  { --accent: var(--color-card-brown); }
/* ===== Base & Typography ===== */

/* Focus styles for keyboard navigation */
:is(a, button, select, input):focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.site-nav :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--color-accent-red);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: var(--z-dropdown);
  font-size: var(--text-sm);
  text-decoration: none;
  &:focus { top: 0; color: #fff; }
}
/* Screen reader only — accessible hidden text */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* General document styling */
html{
	margin: 0 auto;
	max-width: var(--width-page);
	min-width: 300px;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	}
body{
	margin: 0;
	padding: 50px 0 0;  /* clear fixed nav universally */
	font-family: var(--font);
	background-color: var(--color-canvas);
	color: var(--color-text-strong);
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	}

main {
	padding: var(--space-2) var(--space-5) var(--space-5);
	box-sizing: border-box;
	background: var(--color-surface);
	border: var(--elevation-border);
	border-bottom: none;
}

p, li { font-size: var(--text-base); color: var(--color-text); line-height: 1.6; }
p { margin-bottom: 0.75em; }

/* Button reset — bare interactive element, no browser chrome */
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

hr {
	border: none;
	border-top: 2px solid var(--color-border-light);
	margin: var(--space-6) auto;
	width: 90%;
}
/* Prose content wrapper — standard readable width */
.prose {
	max-width: var(--width-lg);
	margin: 0 auto;
	padding: 0 var(--space-3);
	box-sizing: border-box;
	& h2 { font-size: var(--text-3xl); margin: var(--space-7) 0 var(--space-3); }
	& h3 { font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-3); }
	& h4 { color: var(--color-text-muted); margin: var(--space-6) 0 var(--space-3); }
	/* Prevent prose spacing from bleeding into nested containers */
	& .card-body :is(h2, h3, h4),
	& .info-box :is(h2, h4) { margin-top: var(--space-4); }
	& .card-body h4, & .info-box h4 { color: var(--color-text-strong); }
	& .card-body p { margin-bottom: var(--space-3); }
	& ul, & ol { padding-left: 1.5em; margin: var(--space-2) 0 var(--space-5); }
	& li { margin-bottom: 0.4em; }
	& p { margin-bottom: 1.5em; }
	& p code { font-weight: bold; }
	& img { max-width: 100%; }
	& .card, & .info-box { margin-bottom: var(--space-5); }
}
/* Report prose — justified long-form text with wider spacing */
.prose-report {
	& > p:not(.callout) { line-height: 1.65; margin-bottom: 28px; }
}

/* Noscript fallback warning */
.noscript-warning { background: var(--color-bg-highlight); color: var(--color-text); padding: var(--space-3); font-size: var(--text-sm); border: var(--elevation-border); }
:is(h1, h2, h3, h4) { font-family: var(--font-accent); font-weight: 800; line-height: 1.2; text-wrap: balance; letter-spacing: -0.02em; scroll-margin-top: var(--space-8); }
h1 { margin: var(--space-2) 0; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-lg); }


/* Styling for links — underline by default (accessibility), remove on hover */
a {
	&:link { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
	&:visited { color: var(--color-link-visited); }
	&:hover { text-decoration: none; color: var(--color-link-hover); }
}


/* Code blocks */
pre {
	background: var(--color-code-bg);
	border: 2px solid var(--color-border-light);
	padding: var(--space-4);
	margin: var(--space-4) 0;
	overflow-x: auto;
	font-size: var(--text-sm);
	line-height: 1.5;
	& .hljs { background: none; padding: 0; }
}
code {
	text-align: left; background: var(--color-bg-highlight);
	padding: 2px 4px; font-size: 0.9em;
	pre & { background: none; padding: 0; border-radius: 0; font-size: inherit; }
}

/* Inline SVG icons */
svg.icon { width: 1em; height: 1em; vertical-align: -0.125em; }

/* ===== Navigation ===== */

/* Top Navigation Bar */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--z-nav);
}
header > nav {
	background-color: var(--color-nav-bg);
	}
.site-nav {
	list-style: none;
	max-width: var(--width-page);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	align-items: center;
	& li:first-child { margin-right: auto; order: 1; }
	& li a, & li p {
		display: inline-block;
		font-family: var(--font-accent);
		color: var(--color-nav-text);
		text-align: center;
		padding: 14px 24px;
		text-decoration: none;
		transition: var(--transition-normal);
		font-size: var(--text-sm);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		line-height: 22px;
	}
	& .icon-external { width: 0.7em; height: 0.7em; }
	& li a:hover { background-color: var(--color-nav-hover); }
	& li a.active { background-color: var(--color-accent-red); font-weight: 700; }
	& li.icon { display: none; }
	& .icon button { padding: 14px 16px; font-size: var(--text-base); }
	/* Dropdown */
	& ul {
		display: none;
		position: fixed;
		background: var(--color-nav-bg);
		padding: 0;
		overflow: hidden;
		& li { display: block; }
		& li a {
			display: block;
			padding: 12px 20px;
			color: var(--color-nav-text);
			text-align: left;
			font-size: var(--text-base);
			border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
		}
		& li:last-child a { border-bottom: none; }
		& li a:hover { background: var(--color-nav-hover); }
	}
}
.nav-main { font-weight: bold; }
.brand-logo {
	height: 16px;
	width: auto;
	vertical-align: middle;
}
ul li a:hover + .hidden, .hidden:hover { display: block; }
/* Theme toggle button */
.theme-toggle {
  color: var(--color-nav-text);
  padding: 14px 10px; margin-right: var(--space-4);
  font-size: var(--text-base); line-height: 1; opacity: 0.7; transition: opacity var(--transition-normal);
  &:hover { opacity: 1; }
}

/* Top Navigation - Responsive */
@media screen and (max-width: 760px) {
	.site-nav {
		width: 100%;
		& li:not(:first-child) { display: none; }
		& li.icon { display: inline-block; }
		& li:has(.theme-toggle) {
			display: inline-block !important;
			position: absolute;
			right: 42px;
			top: 13px;
			& .theme-toggle { padding: 6px 20px; font-size: var(--text-lg); line-height: 1; }
		}
		& li a { min-width: 0; }
		& .icon button { color: white; font-size: var(--text-3xl); padding: 4px 16px; line-height: 1; }

		/* Menu open: right-side slide panel */
		&.responsive {
			position: fixed;
			top: 50px;
			right: 0;
			width: 240px;
			max-height: calc(100vh - 50px);
			overflow-y: auto;
			flex-direction: column;
			align-items: stretch;
			background-color: var(--color-nav-bg);
			border-left: var(--elevation-border);
			z-index: var(--z-dropdown);

			& li { display: block; }
			& li:first-child {
				position: fixed; top: 0; left: 10px;
				z-index: var(--z-overlay); margin-right: 0; order: 0;
				& a { border-bottom: none; }
			}
			& li.icon { position: fixed; right: 0; top: 7px; z-index: var(--z-overlay); }
			& li:has(.theme-toggle) { display: inline-block !important; position: fixed; right: 42px; top: 13px; z-index: var(--z-overlay); }
			& li:nth-child(5) { order: 1; }
			& li:nth-child(4) { order: 2; }
			& li:nth-child(3) { order: 3; }
			& li:nth-child(2) { order: 4; }
			& li a {
				display: block; text-align: left; min-width: 0;
				font-size: var(--text-lg); padding: 16px 20px;
				min-height: 52px; box-sizing: border-box;
				border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
				&:hover { background-color: var(--color-nav-hover); }
				&.active { background-color: transparent; border-left: 3px solid var(--color-accent-red); padding-left: 17px; font-weight: 700; }
			}
			& ul.hidden { display: none !important; }
			& .nav-arrow { display: none; }
		}
	}
	nav { height: 50px; padding: 0; }
	.card-nav { min-height: auto; }
	.card-nav .card-body { min-height: auto; }
	main { padding: var(--space-2) var(--space-3) var(--space-3); }
	footer { padding: var(--space-4) var(--space-3) var(--space-2); }
}

/* Phone — tighter spacing, touch targets, stacked controls
   Breakpoints: 760px (tablet), 480px (phone) */
@media (max-width: 480px) {
	main { padding: var(--space-2) var(--space-2) var(--space-3); }
	.prose { padding: 0 var(--space-2); }
	footer { padding: var(--space-3) var(--space-2) var(--space-2); }

	/* Tighten vertical rhythm */
	.prose h2 { margin-top: var(--space-6); }
	.prose h3 { margin-top: var(--space-6); }
	hr { margin: var(--space-5) auto; }
	section { padding-top: var(--space-4); }

	/* Touch targets — 44px minimum */
	.btn, .form-select, summary { min-height: 44px; }
	.form-select { font-size: var(--text-base); }

	/* Stack controls vertically */
	.control-panel { flex-direction: column; align-items: stretch; }
	.control-row { flex-wrap: wrap; }

	/* Full-bleed cards on phone */
	.card-grid { gap: var(--space-3); }

	/* Subfooter */
	.subfooter { padding: var(--space-4) var(--space-2) 0; }
	.subfooter-siblings { gap: var(--space-1); }
	.subfooter-siblings a { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

	/* Footer sitemap tighter */
	.footer-sitemap { padding: var(--space-4) var(--space-3); }
	.footer-bottom { padding: var(--space-2) var(--space-3); }
}

/* ===== Layout ===== */

/* Page title bar — gray bar with centered white heading */
.page-title {
	padding: var(--space-4) 0;
	text-align: center;
	background-color: #707070;
	color: white;
	[data-theme="dark"] & { background-color: #424242; }
	& h1 { margin: 0 auto; max-width: var(--width-lg); font-weight: 700; font-size: clamp(22px, 2vw + 16px, 30px); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 var(--space-3); }
	& .page-title-byline { color: color-mix(in srgb, white 55%, transparent); margin: var(--space-1) 0 0; line-height: 1; letter-spacing: 0.12em; }
	@media (max-width: 480px) { padding: var(--space-3) var(--space-2); & h1 { letter-spacing: 0.03em; } }
}

/* Footer styling */
footer {
	background: var(--color-surface);
	border: var(--elevation-border);
	border-top: none;
	position: relative;
	&::before { content: ''; position: absolute; top: 0; left: 5%; width: 90%; border-top: 2px solid var(--color-border-light); }
}
.footer-sitemap {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
	max-width: var(--width-lg); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-4);
	& h4 {
		font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 700;
		text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-strong);
		margin: 0 0 var(--space-2);
		& a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } }
	}
	& ul { list-style: none; margin: 0; padding: 0; }
	& li { margin: 0; }
	& a {
		display: block; padding: var(--space-1) 0;
		font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
		&:hover { color: var(--color-text-strong); }
	}
	@media (max-width: 760px) { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
}
.footer-bottom {
	display: flex; justify-content: space-between; align-items: flex-start;
	padding: var(--space-3) var(--space-5) var(--space-2);
	border-top: 1px solid var(--color-border-light);
}
.footer-left {
	font-family: var(--font-accent); font-weight: 600; color: var(--color-text-muted);
	& p { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
}
.footer-right { text-align: right; }
.footer-right a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; min-height: 36px; padding: var(--space-2); margin: 1px;
	text-decoration: none; font-size: var(--text-2xl); transition: var(--transition-normal);
	color: var(--color-accent-red);
	&:hover { color: var(--color-text-strong); }
}

/* Subfooter — sibling page navigation at bottom of tutorials */
.subfooter { max-width: var(--width-lg); margin: var(--space-6) auto 0; padding: var(--space-5) var(--space-3) 0; box-sizing: border-box; border-top: 2px solid var(--color-border-light); }
.subfooter-hub {
	font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-2);
	& a { text-decoration: none; color: var(--color-text-muted); &:hover { text-decoration: underline; } }
}
.subfooter-siblings {
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	& a {
		display: inline-block; padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border-light);
		font-size: var(--text-sm); text-decoration: none; color: var(--color-text-strong);
		transition: border-color var(--transition-fast), color var(--transition-fast);
		&:hover { border-color: var(--color-link); color: var(--color-link); }
		&.current { background: var(--accent-color, var(--color-card-blue)); border-color: var(--accent-color, var(--color-card-blue)); color: white; font-weight: 600; pointer-events: none; }
	}
}

/* Section formatting */
section { margin: 0; padding: var(--space-5) 0 0; }
article:not(.prose) > :first-child { margin-top: 0; }
/* Side-by-side row — two items, stacks on mobile */
.split-row {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	@media (max-width: 760px) { flex-direction: column; }
}

/* Dashboard column — centered narrower column for charts, controls, tables */
.dash-column { max-width: var(--width-md); margin-left: auto; margin-right: auto; }

/* Page-level strip images */
.page-strip {
	height: clamp(100px, 12vw + 20px, 150px); overflow: hidden; line-height: 0;
	background-color: var(--accent);
	@media (max-width: 760px) { display: none; }
}
.page-strip-img { height: 100%; }
.page-strip-compact { height: 80px; }

/* Card grid */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, 300px);
	gap: var(--space-5); justify-content: center; padding: var(--space-3) 0; width: 100%;
	& a { text-decoration: none; }
	& > h2, & > h3 { grid-column: 1 / -1; margin: var(--space-2) auto var(--space-1); }
	& > h2 { font-size: var(--text-3xl); font-weight: 700; }
	/* Flex layout — cards stretch to equal height with badges pinned to bottom */
	& .card-nav { display: flex; flex-direction: column; height: 100%; }
	& .trail-badge { margin-top: auto; }
	@media (max-width: 680px) { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}

/* Trail difficulty badges */
.trail-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	padding: var(--space-1) var(--space-2);
	border-radius: 10px;
	letter-spacing: 0.3px;
}
.trail-intro { color: var(--color-trail-intro); background: color-mix(in srgb, var(--color-trail-intro) 12%, transparent); }
.trail-beginner { color: var(--color-trail-beginner); background: color-mix(in srgb, var(--color-trail-beginner) 12%, transparent); }
.trail-intermediate,
.trail-advanced { color: var(--color-trail-other); background: color-mix(in srgb, var(--color-trail-other) 12%, transparent); }

/* ===== Cards ===== */

/* Card — the universal container: border, background, optional colored header.
   Used for nav cards, chart cards, info panels, report sections. */
.card {
	--card-ph: var(--space-4);
	position: relative;
	border: var(--elevation-border);
	background: var(--color-card-bg);
	transition: none;
}
.info-box {
	--card-ph: var(--space-4);
	position: relative;
	border: var(--elevation-border);
	background: var(--color-bg-alt);
	padding: var(--card-ph);
	& h3 {
		font-size: var(--text-base); font-weight: 700; color: var(--color-text-strong);
		margin: 0 0 var(--space-2); padding-bottom: var(--space-1);
		border-bottom: 2px solid var(--accent, var(--color-border-light));
		display: table;
	}
	& :is(h2, h4) { margin: var(--space-3) 0 var(--space-2); }
	& :is(h2, h4):first-child { margin-top: 0; }
	& h4 { color: var(--color-text-strong); }
	& p:not(.note):not(.chart-source) { font-size: var(--text-sm); color: var(--color-text); margin: 0 0 var(--space-2); line-height: 1.6; }
	& > :last-child { margin-bottom: 0; }
	& > p:last-child:not(.note):not(.chart-source) { margin-bottom: 0; }
	& hr { margin: var(--space-3) 0; }
	/* Offset tab — category label plate above the box */
	& .info-box-tab {
		position: absolute;
		top: 18px;
		left: 50%;
		transform: translate(-50%, -100%);
		font-family: var(--font-accent);
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding: 2px var(--space-3);
		background: var(--accent, var(--color-text-muted));
		color: #fff;
		line-height: 1.4;
		white-space: nowrap;
	}
}
.control-panel {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-border-light);
	border-bottom: 1px solid var(--color-border-light);
	font-size: var(--text-sm);
	color: var(--color-text);
	& label { font-weight: 600; white-space: nowrap; }
	& select, & input { font-family: var(--font); font-size: var(--text-sm); }
}
.card-accent { border-color: var(--accent); & .card-title, & .chart-title { color: var(--accent); } }
.info-box-accent { border-color: var(--accent); background: var(--color-bg); }
.info-box + .control-panel { border-top: none; padding-top: var(--space-2); }
.card-header {
	padding: var(--space-2) var(--card-ph);
	background: var(--color-bg-highlight);
	color: var(--color-text-strong);
	border-top: 4px solid var(--accent);
	display: flex;
	justify-content: space-between;
	align-items: center;
	& a, & button:not(.btn) { color: var(--color-text-muted); opacity: 1; font-size: var(--text-sm); }
	& a { text-decoration: none; }
	& button:not(.btn) { padding: 0; }
	& a:hover, & button:not(.btn):hover { color: var(--color-text-strong); }
}
.card-title, .chart-title { margin: 0; font-size: var(--text-2xl); font-weight: 600; color: inherit; }
.card-body {
	padding: var(--space-2) var(--card-ph);
	& > :first-child { margin-top: 0; }
	/* Card interior rhythm — override prose/global spacing that bleeds in */
	& :is(h2, h3, h4) { margin-top: var(--space-4); margin-bottom: var(--space-2); }
	& :is(h2, h3, h4):first-child { margin-top: 0; }
	& p { margin-bottom: var(--space-3); }
	& hr { margin: var(--space-3) auto; }
}
.card-body-fill { display: flex; flex-direction: column; flex: 1; }
.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-1) var(--card-ph) var(--space-2);
}

/* Card variant: nav card — clickable link cards in grids */
.card-nav {
	text-align: center;
	text-decoration: none;
	min-height: 180px;
	&:hover { border-color: var(--color-text-muted); }
	& .card-banner { border-top: 4px solid var(--accent); }
	& .card-header {
		border-top: none;
		align-items: center; gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		&::before {
			content: ''; width: 10px; height: 10px; flex-shrink: 0;
			background: var(--accent);
		}
		& h3 { font-size: var(--text-xl); font-weight: bold; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
	}
	& .card-body {
		padding: var(--space-1) var(--space-3) var(--space-3); min-height: 125px;
		& p { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--text-base); line-height: 1.4;
			@media (max-width: 760px) { margin-bottom: var(--space-2); }
		}
	}
}
.card-muted { opacity: 0.5; &:hover { opacity: 1; } }
.card-banner { height: 30px; overflow: hidden; background-color: color-mix(in srgb, var(--accent) 25%, var(--color-bg-input)); }
.card-banner img,
.page-strip-img {
	width: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.8;
	mix-blend-mode: multiply;
	[data-theme="dark"] & { opacity: 0.5; mix-blend-mode: screen; }
}
.card-banner img { height: 30px; }

/* ===== Tables ===== */

/* Base table — shared structure for all data tables */
table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--text-sm);
	& th, & td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border-light); }
	& th { font-family: var(--font-accent); font-weight: 700; letter-spacing: 0.04em; }
	& td { font-variant-numeric: tabular-nums; }
	& tbody tr:nth-child(even) { background-color: var(--color-bg-alt); }
	& tbody tr:hover { background: var(--color-bg-highlight); }
	& tbody tr:last-child td { border-bottom: none; }
}

/* Data table — minimal data presentation table
   Albert Sans 700 headers, 2px strong header/footer rules, no zebra/hover
   First column left-aligned, all others right-aligned
   Modifiers: .highlight (row/col/cell accent wash), .strong (row/cell bold)
   Requires .accent-* on table for highlight color */
.data-table {
	font-size: var(--text-xs);
	& th, & td { padding: var(--space-1); }
	& th { font-family: var(--font-accent); font-weight: 700; font-size: var(--text-xs); color: var(--color-text-strong); border-bottom: 2px solid var(--color-text-strong); letter-spacing: 0; }
	& tbody tr:nth-child(even) { background: none; }
	& tbody tr:hover { background: none; }
	& tbody tr:last-child td { border-bottom: 2px solid var(--color-text-strong); }
	& td:not(:first-child), & th:not(:first-child) { text-align: right; }
	& tr.highlight td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
	& col.highlight { background: color-mix(in srgb, var(--accent) 10%, transparent); }
	& td.highlight, & th.highlight { background: color-mix(in srgb, var(--accent) 10%, transparent); }
	& tr.strong td { font-weight: 700; }
	& td.strong, & th.strong { font-weight: 700; }
}

/* Dash table — dashboard data: uppercase headers, right-aligned values */
.dash-table {
	& th, & td { text-align: right; }
	& th:first-child, & td:first-child { text-align: left; }
	& th { color: var(--color-text-strong); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; }
}

/* Dataframe — tutorial output: centered, sticky first column */
.table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
.dataframe {
	max-width: var(--width-md);
	&.wide { max-width: 100%; }
	& th, & td { text-align: center; white-space: nowrap; }
	& th { border-bottom: 1px solid var(--color-border); }
	& td:first-child { font-weight: bold; text-align: left; position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
	& tr:nth-child(even) td:first-child { background: var(--color-bg-alt); }
	& tbody tr:hover td:first-child { background: var(--color-bg-highlight); }
	@media (max-width: 760px) { & th, & td { padding: var(--space-1); font-size: var(--text-xs); } }
}

/* ===== Chart Data Viz ===== */

/* Chart-specific elements inside cards (title, indicators, legend, source, tooltip) */
.chart-subtitle {
	display: block;
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-text);
	margin: 0 var(--space-2) var(--space-1) 0;
	flex: 1;
	min-width: 0;
}
.chart-filter {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
	& button { padding: 0; color: var(--color-link); }
	& button:hover { text-decoration: underline; }
}
.chart-legend { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); }
.chart-legend-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-right: 2px; }
.chart-legend-box { width: 14px; height: 3px; }
.chart-legend-item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	color: var(--color-text-strong);
	&:hover { opacity: 0.8; }
	&.legend-off { opacity: 0.35; }
}
/* Note — small muted text for sources, footnotes, attributions */
.chart-source, .note {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* Card modifiers — size, layout, and reusable card-level elements */
.card-compact {
	--card-ph: var(--space-3);
	/* Chart variant: tight vertical padding to maximize canvas space */
	&.card-chart .card-body { padding: var(--space-3) var(--space-4) var(--space-1); }
	&.card-chart .card-footer { padding: var(--space-1) var(--space-4) var(--space-4); }
	@media (max-width: 760px) {
		& .card-header { padding: var(--space-2); }
		& .card-body { padding: var(--space-2); }
		& .card-footer { padding: var(--space-1) var(--space-2) var(--space-2); }
	}
}
.card-logo { fill: var(--color-text); opacity: 0.5; }
.card-actions {
	display: flex;
	gap: var(--space-2);
	margin-left: auto;
	& button {
		border: none;
		padding: var(--space-1);
		color: color-mix(in srgb, white 80%, transparent);
		line-height: 0;
		transition: color var(--transition-fast);
		&:hover { color: #fff; }
	}
	& svg, & .icon { width: 14px; height: 14px; }
}
.chart-svg { display: block; width: 100%; height: auto; }

/* ===== UI Controls ===== */

/* Collapsible Details */
.details-section {
	margin: var(--space-5) 0 var(--space-3);
	& summary {
		font-family: var(--font-accent); font-size: var(--text-base); font-weight: 600;
		text-transform: uppercase; letter-spacing: 0.04em;
		cursor: pointer; padding: var(--space-2) 0; color: var(--color-text-strong);
		border-bottom: 1px solid var(--color-border-light);
		list-style: none;
		&::-webkit-details-marker { display: none; }
		&::before {
			content: ''; display: inline-block;
			border-left: 5px solid var(--color-text-muted);
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			margin-right: var(--space-2); transition: transform var(--transition-fast);
		}
	}
	&[open] summary::before { transform: rotate(90deg); }
	&[open] summary { margin-bottom: var(--space-3); }
	& h3 { margin: var(--space-5) 0 var(--space-3); }
	& ol, & ul { margin-bottom: 0; }
}

/* Button — selectable button primitive. Compose with modifiers:
   .btn-group  — joined segmented control (first/last radius, shared borders)
   .btn--pill  — standalone pill shape (border-radius: 20px) */
.btn {
	font-family: var(--font);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border-light);
	background: var(--color-bg-input);
	color: var(--color-text);
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
	font-size: var(--text-xs);
	font-weight: 600;
	&:hover { background: var(--color-bg-highlight); }
	&.active { background: var(--accent, var(--color-text-muted)); border-color: var(--accent, var(--color-text-muted)); color: white; }
	&:disabled { opacity: 0.3; cursor: default; }
}
.btn--pill { border-radius: 20px; }
.btn-group {
	display: flex;
	& .btn:not(:first-child) { border-left: none; }
}

/* Control row — label + input in a horizontal row */
.control-row {
	display: flex; align-items: center; gap: var(--space-2);
	& label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; }
	& select, & input { flex: 1; min-width: 0; }
}

/* Combo box — autocomplete dropdown */
.combo-box {
	flex: 1; min-width: 0; position: relative;
	& input { width: 100%; box-sizing: border-box; flex: 1; min-width: 0; }
}
.combo-list {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	max-height: 220px; overflow-y: auto;
	background: var(--color-bg-input); border: 1px solid var(--color-border-light);
	border-top: none;
	z-index: 50; box-shadow: 0 4px 12px color-mix(in srgb, black 12%, transparent);
	&.open { display: block; }
}
.combo-item {
	padding: var(--space-2) var(--space-3); font-size: var(--text-sm); cursor: pointer; color: var(--color-text-strong);
	&:hover, &.active { background: var(--color-card-blue); color: #fff; }
	& mark { background: none; font-weight: 700; color: inherit; }
}

/* Form select — standard styled dropdown */
.form-select {
	padding: var(--space-2);
	font-size: var(--text-sm);
	font-family: var(--font);
	border: 2px solid var(--color-border-light);
	border-radius: 0;
	background: var(--color-bg-input);
	color: var(--color-text-strong);
}

/* Chart tooltip — floating data label */
.chart-tooltip {
	position: absolute;
	pointer-events: none;
	background: var(--color-tooltip-bg);
	color: #fff;
	font-size: var(--text-xs);
	padding: var(--space-2) var(--space-3);
	z-index: 100;
	line-height: 1.45;
	opacity: 0;
	transition: opacity var(--transition-fast);
	&.visible { opacity: 1; }
}
.chart-tooltip-header {
	font-weight: 600;
	font-size: var(--text-sm);
	margin-bottom: var(--space-1);
	border-bottom: 1px solid color-mix(in srgb, white 20%, transparent);
	padding-bottom: var(--space-1);
}

/* ===== Text Components ===== */

/* Label — small uppercase marker text */
.label {
	font-family: var(--font-accent);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Step label — label + colored underline, used for tutorial code steps */
.step-label {
	font-size: var(--text-sm);
	font-weight: 700;
	margin: var(--space-5) 0 var(--space-2);
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--accent);
}

/* Accent heading — underlined heading, line is text-width */
.heading-accent { display: table; padding-bottom: var(--space-1); border-bottom: 3px solid var(--accent, var(--color-accent-red)); }

/* Accent rules — decorative page-colored HRs */
.hr-accent, .section-bar { border: none; background-color: var(--accent); [data-theme="dark"] & { opacity: 0.6; } }
.hr-accent { width: 120px; height: 4px; margin: var(--space-6) auto; }
.section-bar { width: 90%; height: 5px; margin: var(--space-6) auto var(--space-2); }

/* Tutorial metadata bar */
.tutorial-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: var(--space-5) 0 var(--space-5);
	flex-wrap: wrap;
}
.tutorial-meta span { white-space: nowrap; }
.tutorial-meta .meta-sep { color: var(--color-border-light); }
.tutorial-meta button {
	padding: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-1);
	transition: var(--transition-fast);
	&:hover { color: var(--color-text-strong); }
	& svg { width: 12px; height: 12px; }
}

/* Accent border — left border accent stripe, used by callout and blockquote */
.callout, .blockquote-accent { border-left: 5px solid var(--accent); color: var(--color-text-strong); }
.callout {
	font-size: var(--text-xl);
	font-weight: 500;
	max-width: var(--width-lg);
	margin: 0 auto var(--space-5);
	padding: var(--space-2) var(--space-3);
	box-sizing: border-box;
	background: var(--color-bg-alt);
}
.blockquote-accent {
	margin: var(--space-5) 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-4);
	font-size: var(--text-base);
	font-style: italic;
	line-height: 1.55;
	[data-theme="dark"] & { background: var(--color-surface); padding: var(--space-3) var(--space-4); }
	& cite { display: block; font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
}

/* Inline accent highlight */
.highlight-accent {
	color: #fff;
	padding: 1px var(--space-2);
	font-weight: 600;
	white-space: nowrap;
	background: var(--accent);
}
/* Key stat — prominent number/value display */
.key-stat {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--color-text-strong);
	font-family: var(--font);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: var(--space-2) 0;
}


/* Stat group — label + prominent value + optional note/delta, used for data summaries */
.stat-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.stat-label {
	font-family: var(--font-accent);
	font-size: 11px;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.stat-value {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-text-strong);
	font-family: var(--font);
	line-height: 1.2;
}
.stat-value-lg { font-size: var(--text-3xl); }
.stat-note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.stat-delta { font-size: var(--text-xs); font-family: var(--font-accent); }
.stat-delta-up { color: var(--color-card-green); }
.stat-delta-down { color: var(--color-card-red); }
.stat-row {
	display: flex;
	gap: var(--space-4);
	& .stat-group { flex: 1; min-width: 0; }
}
/* Stat inline — horizontal year + value + delta on one line (WEO summary pattern) */
.stat-row-inline {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-2);
}
.stat-inline {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.stat-inline-year {
	font-family: var(--font-accent);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.stat-inline-value {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-text-strong);
	font-family: var(--font);
}
@media (max-width: 760px) {
	.stat-row-inline { gap: var(--space-2); }
	.stat-inline { flex-direction: column; align-items: flex-start; gap: 0; }
	.stat-inline-value { font-size: var(--text-lg); }
}

/* Step cards — numbered instruction sequence */
.step-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: var(--space-4) 0 var(--space-5);
}
.step-card {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3);
}
.step-number {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: var(--accent, var(--color-text-muted));
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: 600;
}
.step-content {
	& :is(h3, h4) { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: 700; color: var(--color-text-strong); border-bottom: none; display: block; padding-bottom: 0; }
	& p { margin: 0; font-size: var(--text-sm); line-height: 1.4; }
}

/* Badge — small colored label pill. Variants: .badge-accent (uses --accent), .badge-{color} for fixed colors */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: var(--space-1) var(--space-2);
	border-radius: 8px;
	letter-spacing: 0.3px;
	white-space: nowrap;
	background: color-mix(in srgb, var(--accent, var(--color-text-muted)) 15%, transparent);
	color: var(--accent, var(--color-text-muted));
}
.badge-solid {
	background: var(--accent, var(--color-text-muted));
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 0 3px;
	border-radius: 2px;
	line-height: 1.5;
}

/* Primary action button — dark background, white text, used for downloads/CTAs */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-nav-bg);
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	font-family: var(--font);
	font-size: var(--text-sm);
	font-weight: 600;
	border: none;
	&, &:link, &:visited { color: white; }
	&:hover { background: var(--color-nav-hover); color: white; text-decoration: none; }
}

/* Card title aliases — proper names for card sub-elements (chart-title/chart-subtitle are legacy) */
.card-title { margin: 0; font-size: var(--text-2xl); font-weight: 600; color: inherit; }
.card-subtitle {
	display: block;
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-text);
	margin: 0 var(--space-2) var(--space-1) 0;
	flex: 1;
	min-width: 0;
}

/* Data list — key-value pairs displayed as a vertical list */
.data-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--text-sm);
}
.data-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-1) 0;
	border-bottom: 1px solid var(--color-border-light);
	&:last-child { border-bottom: none; }
}
.data-label { color: var(--color-text); }
.data-value { font-weight: 600; color: var(--color-text-strong); text-align: right; font-variant-numeric: tabular-nums; }

/* Data list: stacked variant — label above value */
.data-list-stacked .data-item {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	border-bottom: none;
}
.data-list-stacked .data-value { text-align: left; }

/* Alert — notification/status box with accent left border */
.alert {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-light);
	border-left: 4px solid var(--accent, var(--color-text-muted));
	background: var(--color-bg-alt);
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.5;
	& strong { color: var(--color-text-strong); }
	& p { margin: 0 0 var(--space-2); &:last-child { margin-bottom: 0; } }
}

/* Loading spinner — CSS-only animated spinner */
.spinner {
	width: 22px;
	height: 22px;
	border: 2.5px solid var(--color-border-light);
	border-top-color: var(--accent, var(--color-card-blue));
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading overlay — covers parent, shows spinner centered */
.loading-overlay {
	position: absolute;
	inset: 0;
	background: var(--color-card-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-fast);
	&.active { opacity: 0.8; pointer-events: auto; }
}

/* Figure — image/chart with caption */
figure {
	margin: var(--space-4) 0;
	& img { max-width: 100%; display: block; }
	& figcaption {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		line-height: 1.5;
		margin-top: var(--space-2);
	}
}

/* Empty state — placeholder for no-data scenarios */
.empty-state {
	text-align: center;
	padding: var(--space-7) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	& strong { display: block; font-size: var(--text-base); color: var(--color-text); margin-bottom: var(--space-2); }
}

/* Grid columns — simple equal-width grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 760px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Button sizes */
.btn-sm { padding: 2px var(--space-2); font-size: 11px; }
.btn-lg { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

/* Link variants */
.link-muted { color: var(--color-text-muted); text-decoration: none; &:hover { color: var(--color-text-strong); text-decoration: underline; } }
.link-plain { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } }

/* Text utilities — sparingly, only what the toolkit needs */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-mono { font-family: var(--font-accent); }
.text-muted { color: var(--color-text-muted); }
.text-strong { color: var(--color-text-strong); font-weight: 700; }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

/* Tab bar — horizontal tab navigation, accent-colored active state */
.tab-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid var(--color-border-light);
}
.tab {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-family: var(--font);
	color: var(--color-text);
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
	border: none;
	background: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
	&:hover { color: var(--color-text-strong); background: var(--color-bg-highlight); }
	&.active {
		color: var(--accent, var(--color-text-strong));
		border-bottom-color: var(--accent, var(--color-text-strong));
		font-weight: 600;
	}
}
/* Tab bar: filled variant — active tab gets solid accent background */
.tab-bar-filled .tab.active {
	background: var(--accent, var(--color-card-teal));
	color: #fff;
	border-bottom-color: var(--accent, var(--color-card-teal));
}

/* Figure overlay — image with gradient caption overlay at bottom */
.figure-overlay {
	position: relative;
	overflow: hidden;
	& img { display: block; width: 100%; height: auto; }
	& figcaption {
		position: absolute;
		inset: auto 0 0;
		padding: var(--space-7) var(--space-3) var(--space-2);
		background: linear-gradient(transparent, color-mix(in srgb, black 75%, transparent));
		color: #fff;
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.02em;
		line-height: 1.4;
	}
}
/* Figure overlay: accent caption bar (no gradient, solid bg) */
.figure-caption-bar figcaption {
	position: relative;
	inset: auto;
	padding: var(--space-2) var(--space-3);
	background: var(--accent, var(--color-card-teal));
	font-size: var(--text-sm);
	font-weight: 500;
}

/* Compare columns — side-by-side lists with highlighted row */
.compare-cols {
	display: flex;
	gap: var(--space-3);
	@media (max-width: 760px) { flex-direction: column; }
}
.compare-col { flex: 1; min-width: 0; }
.compare-col-header {
	padding: var(--space-3);
	display: block;
	& h4 { margin: 0; }
	& .compare-col-sub { font-size: var(--text-sm); opacity: 0.85; margin: var(--space-1) 0 0; }
}
.compare-list {
	border: 1px solid var(--color-border-light);
	border-top: none;
}
.compare-row {
	display: flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-sm);
	border-bottom: 1px solid var(--color-border-light);
	color: var(--color-text-strong);
	&:last-child { border-bottom: none; }
}
.compare-name { flex: 1; min-width: 0; }
.compare-value { flex-shrink: 0; font-weight: 600; margin-left: var(--space-2); text-align: right; min-width: 60px; font-variant-numeric: tabular-nums; }
.compare-row-highlight {
	background: var(--accent, var(--color-card-teal));
	color: #fff;
	font-weight: 600;
	& .compare-value { color: #fff; }
}

/* Status cells — color-coded coverage/status indicators */
.status-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	font-size: var(--text-xs);
	text-align: center;
}
.status-established { background: var(--accent, var(--color-card-teal)); color: #fff; font-weight: 600; }
.status-partial { background: color-mix(in srgb, var(--accent, var(--color-card-teal)) 40%, transparent); border: 1.5px dashed var(--accent, var(--color-card-teal)); }
.status-planned { background: color-mix(in srgb, var(--accent, var(--color-card-teal)) 15%, transparent); border: 1.5px dashed var(--accent, var(--color-card-teal)); }
.status-none { background: var(--color-bg-alt); border: 1px solid var(--color-border-light); color: var(--color-text-muted); }
/* Status swatch — inline legend key matching status-cell colors */
.status-swatch {
	display: inline-block;
	width: 13px;
	height: 13px;
	vertical-align: -2px;
	margin-right: var(--space-1);
}

/* ===== Syntax Highlighting ===== */

.hljs { color: var(--syn-base); }
.hljs-comment, .hljs-quote { color: var(--syn-comment); }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--syn-keyword); font-weight: bold; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable { color: var(--syn-number); }
.hljs-string, .hljs-doctag { color: var(--syn-string); }
.hljs-title, .hljs-section, .hljs-selector-id { color: var(--syn-title); font-weight: bold; }
.hljs-title.function_ { color: var(--syn-function); }
.hljs-type { color: var(--syn-type); font-weight: bold; }
.hljs-tag, .hljs-name, .hljs-attribute { color: var(--syn-tag); }
.hljs-regexp, .hljs-link { color: var(--syn-string); }
.hljs-symbol, .hljs-bullet { color: var(--syn-symbol); }
.hljs-built_in { color: var(--syn-function); }
.hljs-meta { color: var(--syn-comment); font-weight: bold; }
.hljs-deletion { background: var(--syn-deletion-bg); }
.hljs-addition { background: var(--syn-addition-bg); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

/* =====================================================================
   Page-Specific Styles
   Body-class scoped. Each page adds its class to <body>.
   ===================================================================== */

/* ----- Home ----- */

.page-home {
	& .announcement {
		background: var(--color-bg-highlight);
		padding: var(--space-4) var(--space-5);
		margin: 0;
		font-size: var(--text-base);
		border: 1px solid var(--color-border-light);
		border-top: 1px solid transparent;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
	}
	& .announce-text { transition: opacity var(--transition-normal); opacity: 1; }
	& .announce-text.fade-out { opacity: 0; }
	& .announcement a { color: var(--color-text-strong); text-decoration: none; }
	& .announcement a:hover { text-decoration: underline; }
	& .announce-label { font-weight: 700; }
	& .announce-arrow { color: var(--color-text-muted); padding: var(--space-1); line-height: 1; flex-shrink: 0; }
	& .announce-arrow:hover { color: var(--color-text); }
	& .card-grid { padding-top: var(--space-6); }
	& .home-intro { max-width: var(--width-lg); margin: 0 auto; align-items: stretch; }
	& .home-intro > * { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
	& .home-sparkline {
		padding-top: var(--space-2);
		& .sparkline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
		& .sparkline-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
		& .sparkline-stat .label { font-size: 11px; color: var(--color-text-muted); }
		& .sparkline-header .key-stat { font-size: var(--text-2xl); margin: 0; }
		& .sparkline-label { display: flex; align-items: center; gap: var(--space-2); }
		& .sparkline-label .label { margin: 0; color: var(--color-text-strong); font-size: var(--text-sm); }
		& .sparkline-icon { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
		& .sparkline-nav { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); flex-wrap: wrap; }
		& .sparkline-nav .btn { white-space: nowrap; font-size: 11px; padding: var(--space-1) var(--space-2); }
		& .sparkline-nav .note { margin-left: auto; white-space: nowrap; }
		& .sparkline-wrap { position: relative; height: 128px; }
		& canvas { display: block; }
	}
	& .home-blog { list-style: none; padding: 0; margin: 0; & li { padding: var(--space-2) 0; } & a { font-size: var(--text-sm); } & .note { display: inline; margin-left: var(--space-2); white-space: nowrap; } }
	& .blog-featured {
		padding: 0 var(--card-ph) var(--space-2) !important; margin: calc(-1 * var(--space-2)) calc(-1 * var(--card-ph)) 0;
		& > a:first-child { display: block; margin: 0 calc(-1 * var(--card-ph)); }
		& > a:first-child img { width: 100%; height: 160px; object-fit: cover; display: block; opacity: 0.85; mix-blend-mode: multiply; background: var(--color-bg-highlight); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-1); }
		[data-theme="dark"] & > a:first-child img { mix-blend-mode: normal; opacity: 0.9; }
	}
	& .blog-featured + li { padding-top: var(--space-2); }
}

/* ----- Python Guides ----- */

.page-python {
	& .py-row { align-items: center; }
	& .py-intro { flex: 1; min-width: 0; }
	& .py-row a { text-decoration: none; flex: 0 0 300px; }
	& .py-arrow { text-align: right; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin: 0; }
	& .py-arrow-down { display: none; }
	@media (max-width: 760px) {
		& .py-row a { flex: none; width: 300px; }
		& .py-arrow { text-align: center; }
		& .py-arrow-right { display: none; }
		& .py-arrow-down { display: inline; }
	}
}

/* ----- About ----- */

.page-about {
	& .bio-prose { flex: 1; min-width: 0; }
	& .bio { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); flex-shrink: 0; }
	& .bio-photo { width: 160px; height: 160px; object-fit: cover; object-position: center 15%; background: var(--color-bg-highlight); border: 1px solid var(--color-border); }
	& .bio-text { text-align: center; }
	& .bio-text h2 { margin: 0; font-size: var(--text-xl); }
	& .bio-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
	& .bio-social { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
}

/* ----- Chartbook ----- */

.page-chartbook {
	& .cb-free { text-align: center; margin: var(--space-2) 0 var(--space-1); }
	& .cb-previews { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin: var(--space-4) 0 var(--space-2); }
	& .cb-previews img {
		width: 220px; height: auto; border: 1px solid var(--color-grid); cursor: pointer; transition: opacity var(--transition-fast);
		&:hover { opacity: 0.85; }
	}
	& .cb-row { align-items: stretch; }
	& .cb-download, & .cb-sources {
		display: flex; flex-direction: column;
	}
	& .cb-download {
		flex: 1 1 320px; min-height: 420px;
		& > .card-body { gap: var(--space-3); }
		& a { text-decoration: none; flex: 1; display: flex; }
		& .card-nav { margin: 0 var(--space-4); flex: 1; }
		& .card-nav .card-body .cb-updated-label { margin: var(--space-4) 0 0; }
		& .card-nav .card-body .cb-updated-date { font-size: var(--text-2xl); margin: var(--space-2) 0 0; }
		& .cb-free { margin: 0; }
	}
	& .cb-sources {
		flex: 1 1 320px; min-width: 0;
		& table { flex: 1; }
		& td:last-child { text-align: right; color: var(--color-text-muted); white-space: nowrap; }
		& .cb-st { margin: var(--space-3) 0 0; }
		& .cb-more td { color: var(--color-text-muted); border: none; padding-top: 2px; }
	}
	& .cb-lightbox {
		border: none; background: transparent; padding: 0;
		max-width: 90vw; max-height: 90vh;
		&::backdrop { background: color-mix(in srgb, black 80%, transparent); cursor: pointer; }
		& img { max-width: 90vw; max-height: 90vh; box-shadow: 0 4px 24px color-mix(in srgb, black 40%, transparent); }
	}
	& .section-bar { max-width: var(--width-lg); }
	@media (max-width: 760px) {
		& .cb-previews img { width: 160px; }
		& .cb-download { min-height: auto; }
		& .cb-row .card-grid { flex: none; width: 100%; }
	}
}

/* ----- Dashboard Pages (shared) ----- */


/* ----- IMF WEO Forecast Tracker ----- */

.page-weo {
	& .chart-header-indicator { display: block; font-size: var(--text-sm); & strong { color: var(--color-text-strong); } }

	/* Banner: no tint, natural photo */
	& .page-strip { background: var(--color-bg); }

	/* Title bar edition info — same layout as old .weo-panel-edition, white text */
	& .weo-title-edition {
		display: flex; justify-content: space-between; align-items: baseline;
		gap: var(--space-4); font-size: var(--text-sm);
		max-width: var(--width-md); margin: var(--space-3) auto 0;
		color: white;
		& > div > .label { display: block; margin-bottom: var(--space-1); color: color-mix(in srgb, white 55%, transparent); }
	}

	/* CTA above controls */
	& .weo-cta {
		font-family: var(--font-accent); font-size: var(--text-xs);
		text-transform: uppercase; letter-spacing: 0.04em;
		color: var(--color-text-muted); margin: 0 0 var(--space-2);
		padding-left: var(--space-4);
	}

	/* Summary box — attached to bottom of chart card */
	& .card-chart { margin-bottom: 0; }
	& .weo-summary {
		margin-top: 0;
		border-top: none;
	}

	/* Controls */
	& .weo-controls {
		display: flex; gap: var(--space-3);
		margin-bottom: var(--space-3);
		&[hidden] { display: none; }
		& .combo-box { flex: 3; min-width: 0; }
		& select { flex: 2; min-width: 0; }
		& select, & input { font-family: var(--font); font-size: var(--text-sm); }
	}

	/* Time range bar */
	& .weo-range-bar { text-align: center; padding: var(--space-1) 0; }
	& .weo-range-toggle {
		display: inline-flex; gap: 0;
		border: 1px solid var(--color-border-light); border-radius: 4px;
		overflow: hidden;
	}
	& .weo-range-btn {
		padding: 3px var(--space-3);
		font-size: var(--text-xs); font-family: var(--font);
		border: none; background: none;
		color: var(--color-text-muted); cursor: pointer;
		&.active {
			background: var(--color-card-blue); color: white;
		}
		&:hover:not(.active) { background: var(--color-bg-alt); }
		& + .weo-range-btn { border-left: 1px solid var(--color-border-light); }
	}
	& .chart-footnote { text-align: left; padding: 0 var(--space-4); }

	/* (view-btn removed — replaced by weo-range-btn segmented control) */

	/* Legend — simple row (default) */
	& .legend-simple {
		display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
		font-size: 14px; color: var(--color-text-muted);
		padding: var(--space-1) 0 var(--space-1) var(--space-2);
		margin-top: -5px; margin-bottom: 0; line-height: 1.5;
		&[hidden] { display: none; }
	}
	& .legend-more-btn {
		background: none; border: none; cursor: pointer; padding: var(--space-1) var(--space-2);
		font-size: var(--text-xs); color: var(--color-link); text-decoration: underline;
		&:hover { color: var(--color-link-hover, var(--color-link)); }
	}

	/* Legend — 3-column grid */
	& .chart-legend { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 0 var(--space-7); font-size: 14px; color: var(--color-text-muted); margin-top: -5px; margin-bottom: 0; line-height: 1.5; padding: var(--space-1) 0 var(--space-1) var(--space-2); &[hidden] { display: none; } }
	& .legend-col-header {
		font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px;
		color: var(--color-text-strong); padding-bottom: var(--space-1); margin-bottom: var(--space-1);
		border-bottom: 3.5px solid var(--color-card-blue); cursor: pointer; user-select: none;
		&.legend-off { opacity: 0.35; }
	}
	& .legend-hdr-latest { grid-column: 1; grid-row: 1; }
	& .legend-hdr-prev   { grid-column: 2 / 4; grid-row: 1; }
	& .legend-hdr-nc     { grid-column: 3; grid-row: 2; margin-left: -4px; font-size: 10px; border-bottom-width: 1.5px; margin-bottom: 3px; white-space: nowrap; }
	& .legend-col1 { grid-column: 1; }
	& .legend-col2 { grid-column: 2; }
	& .legend-col3 { grid-column: 3; margin-left: -4px; }
	& [data-toggle="actual"]     { grid-row: 2; }
	& [data-toggle="forecast"]   { grid-row: 3; }
	& [data-toggle="first_outcome"] { grid-row: 4; }
	& [data-toggle="world"]      { grid-row: 5; }
	& [data-toggle="region"]     { grid-row: 6; }
	& [data-toggle="cloud_1yr"]   { grid-row: 2; }
	& [data-toggle="cloud_2yr"]   { grid-row: 3; }
	& [data-toggle="cloud_3yr"]   { grid-row: 4; }
	& [data-toggle="cloud_4plus"] { grid-row: 5; }
	& [data-toggle="nc_apr"]     { grid-row: 3; }
	& [data-toggle="nc_oct"]     { grid-row: 4; }
	& .legend-swatch { display: inline-block; flex-shrink: 0; }
	& .legend-line, & .legend-line-dashed, & .legend-line-gray, & .legend-line-region, & .legend-line-fo { width: 14px; }
	& .legend-line-fo { height: 2px; border-top: 1.5px dashed rgba(50, 140, 120, 0.7); }

	/* Tooltip extensions */
	& .weo-tooltip-icon { display: inline-block; flex-shrink: 0; margin-right: 3px; vertical-align: middle; }
	& .weo-tooltip { max-width: 240px; }
	& .weo-tooltip-latest { font-weight: 600; margin-bottom: var(--space-1); }
	& .weo-tooltip-list { max-height: 180px; overflow-y: auto; }
	& .weo-tooltip-row { display: flex; justify-content: space-between; gap: var(--space-2); }

	/* Info bar (legacy compat) */

	/* Summary stats */
	& .weo-summary-header {
		display: flex; justify-content: space-between; align-items: baseline;
	}
	& .weo-summary-stats {
		display: flex; gap: var(--space-3); margin-top: var(--space-2);
	}
	& .weo-stat {
		flex: 1; min-width: 0;
		display: flex; align-items: baseline; gap: var(--space-2);
		flex-wrap: wrap;
	}
	& .weo-stat-label {
		font-family: var(--font-accent); font-size: 11px;
		color: var(--color-text-muted); text-transform: uppercase;
		letter-spacing: 0.04em; width: 100%;
	}
	& .weo-stat-year {
		font-family: var(--font-accent); font-size: var(--text-sm);
		color: var(--color-text-muted);
	}
	& .weo-stat-value {
		font-size: var(--text-xl); font-weight: 700;
		color: var(--color-text-strong); font-family: var(--font);
	}
	& .weo-stat-delta {
		font-size: var(--text-xs); color: var(--color-text-muted);
		font-family: var(--font-accent);
	}
	& .weo-delta-up { color: var(--color-card-green); }
	& .weo-delta-down { color: var(--color-card-red); }

	/* Forecast scores */
	& .scores-table {
		font-size: var(--text-sm); table-layout: fixed;
		& th, & td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		& th:first-child, & td:first-child { width: 35%; }
		& th { cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--color-bg-input);
			&:hover { color: var(--color-link); }
			& .sort-arrow { font-size: 10px; margin-left: 2px; }
		}
		& tbody tr { cursor: pointer;
			&.scores-active { background: var(--color-bg-highlight); & td { font-weight: 600; } }
		}
	}
	& .scores-scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--color-border-light); }

	/* View tabs */
	& .weo-view-tabs {
		display: flex; gap: 0;
		margin-bottom: var(--space-2);
		border-bottom: 2px solid var(--color-border-light);
	}
	& .weo-tab {
		padding: var(--space-2) var(--space-4);
		font-size: var(--text-sm); font-family: var(--font-accent);
		font-weight: 600; letter-spacing: 0.02em;
		border: none; background: none;
		color: var(--color-text-muted);
		cursor: pointer; position: relative;
		&::after {
			content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
			height: 2px; background: transparent;
		}
		&.active {
			color: var(--color-card-blue);
			&::after { background: var(--color-card-blue); }
		}
		&:hover:not(.active) { color: var(--color-text); }
	}

	/* Table mode controls */
	& .weo-table-controls {
		& select { flex: 1; min-width: 0; }
	}

	/* Mode toggle (Values / Revisions) */
	& .weo-table-bar {
		display: flex; align-items: center; justify-content: space-between;
		padding: 0 0 var(--space-1);
	}
	& .weo-mode-toggle {
		display: inline-flex; gap: 0;
		border: 1px solid var(--color-border-light); border-radius: 4px;
		overflow: hidden;
	}
	& .weo-mode-btn {
		padding: 3px var(--space-3);
		font-size: var(--text-xs); font-family: var(--font);
		border: none; background: none;
		color: var(--color-text-muted); cursor: pointer;
		&.active {
			background: var(--color-card-blue); color: white;
		}
		&:hover:not(.active) { background: var(--color-bg-alt); }
		& + .weo-mode-btn { border-left: 1px solid var(--color-border-light); }
	}

	/* Forecast table */
	& .weo-table-scroll { max-height: 600px; overflow-y: auto; }
	& .weo-table-info {
		display: flex; justify-content: space-between; align-items: baseline;
		font-size: var(--text-xs); color: var(--color-text-muted);
		padding: 0 0 var(--space-1);
	}
	& #weo-forecast-table {
		table-layout: fixed; width: 100%;
		font-variant-numeric: tabular-nums;
		& th:not(:first-child), & td:not(:first-child) { padding: var(--space-1) var(--space-2); }
		& th:first-child, & td:first-child {
			width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
		}
		& th {
			cursor: pointer; user-select: none;
			position: sticky; top: 0; z-index: 1;
			background: var(--color-surface, var(--color-bg));
			&:hover { color: var(--color-link); }
			& .sort-arrow { font-size: 10px; margin-left: 2px; opacity: 0.5; }
		}
		& tr.strong td { border-bottom: 2px solid var(--color-text-strong); }
		& tbody tr:hover { background: color-mix(in srgb, var(--accent, var(--color-card-blue)) 6%, transparent); }
		& th em { font-style: italic; font-weight: inherit; }
		& .weo-val-pos { color: var(--color-card-green); }
		& .weo-val-neg { color: var(--color-card-red); }
		& .weo-val-na { color: var(--color-text-muted); }
	}
	@media (max-width: 760px) {
		& .col-extra { display: none; }
	}

	/* How-to-read guide */
	& .weo-guide {
		position: relative;
		margin-top: var(--space-3);
		padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
		border: 1px solid var(--color-border-light);
		border-radius: 4px;
		background: var(--color-bg-alt);
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		line-height: 1.55;
		& p { margin: 0; }
		& strong { color: var(--color-text); }
	}
	& .weo-guide-close {
		position: absolute; top: var(--space-1); right: var(--space-2);
		background: none; border: none; cursor: pointer;
		font-size: 18px; line-height: 1; padding: 0 4px;
		color: var(--color-text-muted); &:hover { color: var(--color-text-strong); }
	}

	/* Collapsible sections */

	/* Share/download */
	& .weo-share { flex-direction: column; align-items: flex-end; align-self: center; }

	/* Data download */
	& .weo-download-card { max-width: var(--width-md); }
	& .weo-json-details { margin-top: var(--space-4); }

	/* Mobile */
	@media (max-width: 760px) {
		& main { padding: 0; }
		& .page-title { padding: var(--space-4) var(--space-3); }
		& .prose { padding: 0 var(--space-3); }
		& .dash-column { max-width: none; width: calc(100% + var(--space-5)); margin-left: calc(-1 * var(--space-3)); box-sizing: border-box; }
		& .weo-controls { gap: var(--space-2); flex-direction: column; margin-bottom: var(--space-1); padding: 0 var(--space-3); }
		& .weo-summary-stats { gap: var(--space-2); }
		& .weo-stat { flex-direction: column; align-items: flex-start; gap: 0; }
		& .weo-stat-value { font-size: var(--text-lg); }
		& .weo-stat-delta { font-size: 11px; }
		& .card { margin-top: var(--space-1); margin-bottom: 0; }
		& .noscript-warning { order: 0; }
		& .legend-simple { font-size: var(--text-xs); gap: var(--space-2); padding: var(--space-1); }
		& .chart-legend { font-size: var(--text-xs); column-gap: var(--space-2); padding: var(--space-1); margin-bottom: var(--space-1); }
		& .legend-col-header { font-size: 10px; margin-bottom: var(--space-1); padding-bottom: var(--space-1); }
		& .legend-hdr-nc { font-size: 8px; margin-left: 0; }
		& .legend-col3 { margin-left: 0; }
		& #legend-region { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
		& .scores-table { font-size: var(--text-xs); }
		& .scores-controls { flex-direction: column; gap: var(--space-1); }
		& .weo-view-tabs { margin-bottom: var(--space-2); }
		& .weo-tab { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
		& .weo-download-links { display: none; }
		& .weo-table-controls { padding: 0 var(--space-3); flex-wrap: wrap;
			& select { flex: 1 1 45%; }
		}
		& .weo-table-scroll { overflow-x: auto; }
		& #weo-forecast-table th:first-child, & #weo-forecast-table td:first-child { width: 30%; }
	}
	@media (max-width: 480px) {
		& .prose { padding: 0 var(--space-2); }
		& .dash-column { width: calc(100% + var(--space-4)); margin-left: calc(-1 * var(--space-2)); }
	}
}

/* ----- Economic Indicators ----- */

.page-indicators {
	& .card-footer-meta { display: flex; align-items: center; gap: var(--space-3); }
	& .card-download { text-decoration: none; &:hover { text-decoration: underline; } }
	& .card-nav-btn { line-height: 1; &:hover { border-color: var(--color-card-blue); color: var(--color-card-blue); } }
	/* Banner: blue bar left, blue-tinted photo, cinnamon bleed from right */
	& .page-strip {
		background: linear-gradient(90deg, #4a7a96 2%, #4a7a96 60%, #7a7060 72%, #9a6830 82%);
		position: relative; overflow: hidden;
		& .page-strip-img { opacity: 0.3; clip-path: inset(0 0 0 2%); }
		&::after {
			content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 4px;
			background: linear-gradient(90deg, #4a7a96, #9a6830);
			transform: skewY(-0.5deg); z-index: 2;
		}
	}

	/* Flip card mechanism */
	& .chart-flip-wrapper { perspective: 1000px; max-width: var(--width-sm); margin: var(--space-4) auto; }
	& .chart-flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
	& .chart-flip-wrapper.flipped .chart-flip-inner { transform: rotateY(180deg); }
	& .chart-flip-front, & .chart-flip-back { backface-visibility: hidden; }
	& .chart-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
	& .chart-flip-wrapper .card { margin: 0; }
	& .chart-flip-back .card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }

	@media (prefers-reduced-motion: reduce) { & .chart-flip-inner { transition: none; } }

	/* Card back content */
	& .card-compact .chart-back-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--space-4) var(--space-3); overflow-y: auto; }
	& .chart-back-body p { font-size: var(--text-xs); line-height: 1.5; margin: 0 0 var(--space-3); }
	& .card-stats-table { font-size: var(--text-xs);
		& th { border-bottom: 2px solid var(--color-border); }
		& .stat-highlight { font-weight: 700; }
	}

	/* Badges */
	& .badge { margin-left: var(--space-2); vertical-align: middle; }
	& .card-header button { font-size: var(--text-base); padding: var(--space-1); }

	/* Chart selector nav */
	& .chart-selector {
		max-width: var(--width-sm); margin: 0 auto var(--space-4);
		justify-content: center;
		flex-wrap: nowrap;
	}
	& .chart-selector-center { flex: 1; text-align: center; }
	& .chart-selector-title { font-weight: 600; color: var(--color-text-strong); text-align: center; margin: 0; }
	& .ind-share { gap: var(--space-2); margin-right: var(--space-2); }

	/* Chart grid navigation */
	& .chart-grid-details {
		max-width: var(--width-md); margin: 0 auto var(--space-4);
		& summary {
			font-size: var(--text-sm); color: var(--color-link); cursor: pointer; text-align: center; list-style: none;
			&::-webkit-details-marker { display: none; }
			&::before { content: '▸ '; }
			&:hover { text-decoration: underline; }
		}
		&[open] summary::before { content: '▾ '; }
	}
	& .chart-grid-menu { padding: var(--space-2) 0; }
	& .chart-grid-group {
		display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0;
		border-bottom: 1px solid var(--color-border-light);
		&:last-child { border-bottom: none; }
		&.active { border-left: 3px solid var(--cat-color, var(--color-link)); padding-left: var(--space-3); }
	}
	& .chart-grid-icon { flex-shrink: 0; width: 90px; & img { width: 100%; height: auto; cursor: pointer; } }
	& .chart-grid-links { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-4);
		& .chart-grid-category { width: 100%; }
		& .chart-grid-item { width: calc(50% - var(--space-2)); }
	}
	& .chart-grid-category { margin: 0 0 var(--space-1); cursor: pointer; &:hover { color: var(--color-link); } }
	& .chart-grid-item {
		font-size: var(--text-sm); color: var(--color-text-strong); padding: var(--space-1) 0;
		cursor: pointer; text-decoration: none; display: block;
		&:hover { color: var(--color-link); }
		&.active { font-weight: 700; color: var(--color-link); }
	}

	/* Loading overlay — uses shared .loading-overlay + .spinner */

	/* Fade transition */
	& .chart-flip-front .card-body { transition: opacity var(--transition-fast); &.fading { opacity: 0; } }
	& .chart-latest-mobile { display: none; margin: var(--space-1) 0 0; text-align: center; }

	/* Desktop */
	@media (min-width: 760px) {
		& .chart-flip-wrapper { max-width: var(--width-md); }
		& .chart-flip-wrapper.card-vertical { max-width: var(--width-sm); & .card-body { min-height: 340px; } }
		& .card-compact .chart-back-body { padding: var(--space-4) var(--space-5); }
		& .chart-flip-back .card-compact .card-footer { padding-left: var(--space-5); padding-right: var(--space-5); margin-bottom: var(--space-2); }
		& .chart-back-body p { font-size: var(--text-sm); }
	}

	/* Mobile */
	@media (max-width: 760px) {
		& section { display: flex; flex-direction: column; }
		& .ind-chart { order: 1; }
		& .ind-intro { order: 2; margin-top: var(--space-5); }
		& .subfooter { order: 3; }
		& .noscript-warning { order: 0; }
		& .chart-flip-wrapper { max-width: none; width: calc(100% + 24px); margin-left: -12px; }
		& .card-vertical .card-compact .card-body { padding: var(--space-2) 0; }
		& .card-vertical .chart-subtitle { padding-left: var(--space-2); }
		& .chart-selector { margin-bottom: var(--space-2); max-width: none; flex-direction: row; align-items: center; }
		& .chart-grid-details { margin-bottom: var(--space-2); }
		& .chart-grid-icon { width: 70px; }
		& .chart-grid-links .chart-grid-item { width: 100%; }
		& .chart-latest-mobile.active { display: block; }
		& .chart-legend { gap: var(--space-1) var(--space-2); }
	}
	@media (max-width: 480px) {
		& .chart-flip-wrapper { width: calc(100% + var(--space-4)); margin-left: calc(-1 * var(--space-2)); }
		& .ind-intro { margin-top: var(--space-4); }
	}
}


/* Indicators dark mode — data-theme is on <html>, page class on <body> */
[data-theme="dark"] .page-indicators {
	& .chart-flip-inner { border: 1px solid var(--color-border); }
	& .chart-flip-wrapper .card { border: none; background: var(--color-card-bg); }
}

/* ----- Monthly GDP ----- */

.page-gdpm {
	& .chart-row > .card { min-width: 0; }
	& .chart-body-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-1); }
	& .chart-toggle { font-size: var(--text-xs); margin-top: var(--space-1); }

	/* Info boxes */
	& .info-boxes { display: flex; flex-direction: column; gap: var(--space-4); & .info-box { margin-bottom: 0; } }
	& .key-stat-row { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-1) 0; }
	& .estimate-period { padding-top: 3px; }

	/* Layout */
	& .chart-row { margin-top: var(--space-6); }

	/* Methodology */
	& .method-section { margin-top: var(--space-7); }
	& .comparison-chart { max-width: var(--width-md); margin: var(--space-6) auto; }
	& .step-cards { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
	& .step-card { display: flex; gap: var(--space-3); padding: var(--space-3); }
	& .step-number {
		flex-shrink: 0; width: 28px; height: 28px;
		background: var(--color-card-red); color: white; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		font-size: var(--text-sm); font-weight: 600;
	}
	& .step-content h4 { margin: 0 0 var(--space-1); }
	& .step-content p { margin: 0; font-size: var(--text-sm); line-height: 1.4; }

	/* Desktop */
	@media (min-width: 761px) {
		& .chart-row { justify-content: center; }
		& .chart-row > .card { margin: 0; flex: 1; }
		& .info-boxes { flex: 0 0 240px; }
	}

}

/* ----- Data Calendar ----- */

.page-calendar {
	/* Centered prose-width column for all calendar elements */
	& .cal-toolbar, & .cal-grid, & .cal-week-summary, & .cal-mobile { max-width: var(--width-lg); margin-left: auto; margin-right: auto; padding-left: var(--space-3); padding-right: var(--space-3); }

	/* Toolbar */
	& .cal-toolbar { margin-bottom: var(--space-4); }
	& .cal-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1; }

	/* Month nav */
	& .cal-month-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
	& .cal-month-label { font-weight: 600; min-width: 120px; text-align: center; }

	/* Grid */
	& .cal-grid {
		border-collapse: collapse; table-layout: fixed;
		& th { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); padding: 0 0 var(--space-1); border-bottom: 2px solid var(--color-card-brown); }
		& td { width: 20%; vertical-align: top; padding: 3px var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border-light); border-right: 1px solid var(--color-border-light); }
		& td:last-child { border-right: none; }
		& td.cal-outside { background: color-mix(in srgb, var(--color-border-light) 30%, transparent); }
		& td.cal-today { background: color-mix(in srgb, var(--color-card-brown) 8%, transparent); box-shadow: inset 0 2px 0 var(--color-card-brown); }
		& td.cal-past { opacity: 0.35; }
	}
	& .cal-day-num { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: 1px; }
	& .cal-today .cal-day-num { color: var(--color-card-brown); }
	& .cal-rel { display: block; font-size: var(--text-xs); line-height: 1.3; padding: 1px 0; color: var(--color-text); &.major { font-weight: 600; } }
	& .cal-rel .cal-t { color: var(--color-text-muted); font-size: 10px; }
	& .cal-today .cal-t { color: var(--color-card-brown); font-weight: 600; }

	/* Agency badges */
	/* Agency badge colors — uses shared .badge-solid base */
	& .badge-solid { margin-right: 2px; }
	& .cal-agency-bls { --accent: #2563eb; }
	& .cal-agency-bea { --accent: #15803d; }
	& .cal-agency-fed { --accent: #0f766e; }
	& .cal-agency-census { --accent: #c2410c; }
	& .cal-agency-treasury { --accent: #6d28d9; }

	/* Week view */
	& .cal-grid.cal-week-view td { padding: var(--space-2) var(--space-2) var(--space-3); min-height: 120px; }
	& .cal-grid.cal-week-view .cal-day-num { font-size: var(--text-sm); margin-bottom: var(--space-1); }
	& .cal-grid.cal-week-view .cal-rel { font-size: var(--text-xs); line-height: 1.45; padding: var(--space-1) 0; }
	& .cal-grid.cal-week-view .cal-t { font-size: var(--text-xs); }

	/* Week summary */
	& .cal-week-summary {
		margin-bottom: var(--space-4); font-size: var(--text-sm);
		& .badge-solid { font-size: 7px; }
	}

	/* Misc */
	& .cal-empty { text-align: center; padding: var(--space-7) var(--space-3); color: var(--color-text-muted); }
	& .cal-mobile { display: none; list-style: none; }
	& .cal-m-releases { list-style: none; padding: 0; margin: 0; }

	/* Mobile */
	@media (max-width: 760px) {
		& .cal-grid { display: none; }
		& .cal-mobile { display: block; }
		& .cal-toolbar { justify-content: center; }
		& .cal-filters { justify-content: center; }
		& .cal-month-nav { margin-left: 0; width: 100%; justify-content: center; }
		& .cal-m-day { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light); align-items: baseline; &.cal-past { opacity: 0.35; } }
		& .cal-m-date { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); min-width: 68px; flex-shrink: 0; }
		& .cal-m-day.cal-today .cal-m-date { color: var(--color-card-brown); }
		& .cal-m-releases { flex: 1; min-width: 0; }
		& .cal-m-rel { font-size: var(--text-sm); line-height: 1.45; &.major { font-weight: 600; } }
		& .cal-m-rel .cal-t { color: var(--color-text-muted); font-size: var(--text-xs); }
		& .cal-m-divider { color: var(--color-card-brown); padding: var(--space-3) 0 var(--space-1); border-bottom: 2px solid var(--color-card-brown); margin-top: var(--space-1); }
		& .cal-week-summary { font-size: var(--text-xs); }
	}
	@media (max-width: 480px) {
		& .cal-toolbar, & .cal-grid, & .cal-week-summary, & .cal-mobile { padding-left: var(--space-2); padding-right: var(--space-2); }
		& .cal-m-date { min-width: 58px; }
	}
}


/* ===== Print ===== */
@media print {
	header, footer, .skip-link, .announcement, .subfooter, .theme-toggle,
	.page-strip, .card-banner, .trail-badge, .tutorial-share { display: none !important; }
	body { background: #fff; color: #000; font-size: 12pt; }
	main { padding: 0; }
	a { color: #000; text-decoration: underline; }
	.prose { max-width: 100%; }
	.card { border: 1px solid #ccc; break-inside: avoid; }
	.card-header { background: #eee !important; color: #000 !important; }
	h1, h2, h3, h4 { color: #000; break-after: avoid; }
	img { max-width: 100%; }
}

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