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;
  /* Native form-control tint matches the brand red used for primary actions
     (nav active state, blog tag). One line — browsers handle the rest. */
  accent-color: #E04040;

  --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;
  --space-9: 96px;

  /* Type Scale — fluid from 320px to 1080px viewport */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 18px;
  --text-lg: 19px;
  --text-xl: clamp(18px, 0.5vw + 16.5px, 20px);
  --text-2xl: clamp(19px, 0.5vw + 17.5px, 21px);
  --text-3xl: clamp(21px, 0.7vw + 18px, 25px);
  --text-4xl: clamp(25px, 1vw + 21px, 30px);
  /* Display: H1s for hero areas. Middle ground between the old 56px (too loud)
     and the briefly-tried 36px (too tame). 44px max reads as a proper hero. */
  --text-display: clamp(30px, 2vw + 16px, 44px);

  /* Width Tiers — all content snaps to one of these */
  --width-page: 1080px;
  --width-xl: 1030px;
  --width-content: 880px;  /* inset content (feature pages: blog, reports, python, about) — leaves visible page-side margin */
  --width-lg: 720px;
  --width-md: 600px;
  --width-chart: 480px;
  --width-sm: 360px;

  /* 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: #1f6822;     /* was #2e7d32 — slightly darker so it passes 4.5:1 on the 12%-tinted bg used by .trail-intro */
  --color-trail-beginner: #1565c0;
  --color-trail-other: #555;

  /* Syntax highlighting */
  --syn-base: #333;
  --syn-comment: #6b6b6b;     /* was #8d8d8d — darker so it passes 4.5:1 on the #efefef code bg */
  --syn-keyword: #713bc5;
  --syn-number: #a04600;     /* was #c95b00 (which was ~3.7:1 on #efefef) — now ~5.3:1 AA-safe. Also used by .hljs-literal / .hljs-variable. */
  --syn-string: #056d2a;     /* was #009e07 — darker so it passes 4.5:1 on the #efefef code bg */
  --syn-title: #900;
  --syn-function: #a31257;    /* was #e22978 — darker so it passes 4.5:1 on the #efefef code bg (also used by .hljs-built_in) */
  --syn-type: #458;
  --syn-tag: #000080;
  --syn-symbol: #990073;
  --syn-deletion-bg: #fdd;
  --syn-addition-bg: #dfd;

  /* Card Header / Accent Colors
     Tuned 2026-05 for distinguishability: spread on hue + lightness so
     dots remain readable at small sizes against the gray surface.
     Used for card accent dots, section accents, AND chart line colors
     on indicators.html (via CATEGORY_CSS_VARS in scripts/indicators.js
     and the homepage sparkline). Changing these values changes those
     chart colors too. */
  --color-card-blue:   #2c4a85;  /* Monetary  — deep navy */
  --color-card-green:  #3d8550;  /* Government */
  --color-card-red:    #d63b3b;  /* Prices */
  --color-card-orange: #d97f2c;  /* Labor     — true orange */
  --color-card-purple: #7e4ea7;  /* Trade     — saturated violet */
  --color-card-ltblue: #5497c4;  /* Output    — clearly lighter than blue */
  --color-card-teal:   #2e9aa0;  /* Businesses — bright cyan, distinct from green */
  --color-card-brown:  #a89043;  /* (was muddy; now olive / mustard) */

  /* Strong (darker) variants for use BEHIND white text or AS text on
     white background — only for the four accents that fail WCAG-AA
     contrast against white at the standard tone above. The strong
     variants ensure ≥4.5:1 contrast for normal text. */
  --color-card-orange-strong: #a05d20;
  --color-card-ltblue-strong: #2e6c95;
  --color-card-teal-strong:   #1a6e72;
  --color-card-brown-strong:  #6e5e2a;
  /* Darker variants for accents that fail WCAG AA at body-text-size when
     placed directly on white. Used by accent-{green,red} via the accent-X
     classes below so accent-text-on-surface meets 4.5:1. */
  --color-card-green-strong:  #2a6038;
  --color-card-red-strong:    #b62a2a;
}

/* 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;

  /* Body text bumped from #c8c8c8 → #dcdcdc for prose readability.
     Muted bumped from #999 → #a8a8a8 to keep secondary text legible.
     Both still under pure white so we don't get the "shimmer" effect. */
  --color-text-strong: #f0f0f0;
  --color-text: #dcdcdc;
  --color-text-muted: #a8a8a8;

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

  /* Links: softer red aligned with brand (was pink #ff6b8a + orange hover). */
  --color-link: #ec7878;
  --color-link-visited: #d06262;
  --color-link-hover: #f49a9a;

  /* Borders bumped #444 → #565656 so card edges read clearly against
     #282828 cards on #1a1a1a body. Also see card top-highlight rule. */
  --color-border: #565656;
  --color-border-light: #6a6a6a;

  --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;

  /* Dark-mode accents — lighter variants so they read on dark surfaces. */
  --color-card-blue:   #6e90c8;
  --color-card-green:  #5fa872;
  --color-card-red:    #ec5d5d;
  --color-card-orange: #f0a05c;
  --color-card-purple: #a578d0;
  --color-card-ltblue: #7fb5dc;
  --color-card-teal:   #4dbcc4;
  --color-card-brown:  #c8b06b;

  /* In dark mode, the base accent is already light enough — strong
     variants alias to the base. Without these definitions the
     -strong vars would inherit the light-mode (darker) values which
     would be hard to read on the dark surface. */
  --color-card-orange-strong: var(--color-card-orange);
  --color-card-ltblue-strong: var(--color-card-ltblue);
  --color-card-teal-strong:   var(--color-card-teal);
  --color-card-brown-strong:  var(--color-card-brown);
  --color-card-green-strong:  var(--color-card-green);
  --color-card-red-strong:    var(--color-card-red);
}
/* ===== Accent Colors =====
   Each class sets --accent (used for borders, dots, and decorative
   accents) and --accent-strong (used for white-on-accent fills like
   info-box-tab, .btn.active, etc.). For 4 accents the strong variant
   is identical to the base (they already meet WCAG-AA on white); for
   the lighter 4, --accent-strong is a darker variant defined above. */
.accent-blue   { --accent: var(--color-card-blue);   --accent-strong: var(--color-card-blue);   }
.accent-green  { --accent: var(--color-card-green);  --accent-strong: var(--color-card-green-strong);  }
.accent-red    { --accent: var(--color-card-red);    --accent-strong: var(--color-card-red-strong);    }
.accent-orange { --accent: var(--color-card-orange); --accent-strong: var(--color-card-orange-strong); }
.accent-purple { --accent: var(--color-card-purple); --accent-strong: var(--color-card-purple); }
.accent-teal   { --accent: var(--color-card-teal);   --accent-strong: var(--color-card-teal-strong);   }
.accent-ltblue { --accent: var(--color-card-ltblue); --accent-strong: var(--color-card-ltblue-strong); }
.accent-brown  { --accent: var(--color-card-brown);  --accent-strong: var(--color-card-brown-strong);  }

/* Dark-mode "deep" accent variants — darker than -strong, chosen so white
   text passes 4.5:1 contrast on them. Components that paint white text on
   accent-colored backgrounds (subfooter .current, .info-box-tab, .btn.active)
   prefer var(--accent-deep, --accent-strong, --accent) so they pick the
   deep variant in dark mode and fall back to -strong in light mode. */
[data-theme="dark"] {
	& .accent-blue   { --accent-deep: #1f3a72; }
	& .accent-green  { --accent-deep: #1f5230; }
	& .accent-red    { --accent-deep: #8e1f1f; }
	& .accent-orange { --accent-deep: #6e4014; }
	& .accent-purple { --accent-deep: #4a2e6a; }
	& .accent-teal   { --accent-deep: #154852; }
	& .accent-ltblue { --accent-deep: #20567a; }
	& .accent-brown  { --accent-deep: #524320; }
}

/* ===== 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-path: inset(50%);
	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.65; text-wrap: pretty; }
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 — typography for long-form report body.
   Also applies to .report-split-text (break-out text alongside a chart or image). */
.prose-report > p:not(.callout),
.report-split-text > p {
	font-size: var(--text-lg);
	line-height: 1.75;
	margin-bottom: 30px;
}
.report-split-text > p:first-child { margin-top: 0; }

/* 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;
	position: relative;       /* anchor for .code-copy button */
	& .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; }
}

/* Code copy button — JS appends one to each <pre> that contains a <code>.
   Invisible until the pre is hovered or the button receives focus. */
.code-copy {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px 6px;
	background: var(--color-bg-input);
	border: 1px solid var(--color-border-light);
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--text-xs);
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	&:hover { color: var(--color-text-strong); border-color: var(--color-text); }
	&:focus-visible { opacity: 1; outline: 2px solid var(--accent, var(--color-text-strong)); outline-offset: 2px; }
	&.is-copied { color: var(--color-card-green-strong, var(--color-card-green)); border-color: var(--color-card-green-strong, var(--color-card-green)); }
}
pre:hover .code-copy { opacity: 1; }
/* Visually hidden span for screen reader feedback */
.code-copy-feedback {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

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

/* Top Navigation Bar */
/* Site nav header (top-level <header> child of <body>). Use direct-child
   selector so inner <header> elements (e.g., .post-header) don't inherit
   the fixed positioning. */
body > header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--z-nav);
}
body > 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: #b62a2a; color: #fff; font-weight: 700; }   /* fixed dark red — passes AA white-on-bg in both themes */
	& 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; } }
}

/* Feature page-title — just text, no box. Lives inside main, sits on main's
   white background. Optional kicker above, big h1, optional deck below.
   max-width matches the page's main content so the heading aligns with cards
   below (not flush to the panel edge while content sits inset). */
.page-title-feature {
	max-width: var(--width-content);
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-6) var(--space-6) var(--space-5);
	text-align: left;
	background: none;
	border: none;
	/* Pages whose body is wrapped in .prose (720px) — match it so the header
	   aligns with the body text/cards rather than sitting wider or narrower. */
	.page-about &,
	.page-indicators &,
	.page-gdpm &,
	.page-weo &,
	.page-calendar &,
	.page-chartbook &,
	.page-blsapi &, .page-beaapi &, .page-censusapi &, .page-censusapi2 &,
	.page-cps &, .page-getstarted &, .page-treasuryapi &,
	.page-imfapi1 &, .page-imfapi2 &, .page-imfapi3 & { max-width: var(--width-lg); }
	& .page-title-kicker {
		margin: 0 0 var(--space-2);
		font-family: var(--font-accent);
		font-weight: 700;
		font-size: var(--text-xs);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--accent-strong, var(--accent));
		/* In dark mode the kicker sits on the #424242 page-title bar; the
		   light-mode accent colors don't pass 4.5:1 there. Brighten by mixing
		   with white so all accents read clearly. */
		[data-theme="dark"] & { color: color-mix(in srgb, var(--accent) 55%, white); }
	}
	& h1 {
		margin: 0;
		font-size: clamp(28px, 1.5vw + 16px, 38px);   /* middle ground between 44 (too loud) and 33 (too tame) */
		font-weight: 800;
		letter-spacing: -0.02em;
		text-transform: none;
		max-width: none;
		line-height: 1.1;
		text-align: left;
		color: var(--color-text-strong);
	}
	& .page-title-deck {
		max-width: var(--width-lg);
		margin: var(--space-3) 0 0;
		padding: 0;
		font-size: var(--text-base);
		color: var(--color-text);
		line-height: 1.5;
	}
}

/* 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);
	/* Footer column titles use <h2> (was <h4>) for heading-order a11y.
	   Visual styling stays small + uppercase to fit the footer compact pattern. */
	& h2 {
		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-deep, var(--accent-strong, var(--accent, var(--color-card-blue)))); border-color: var(--accent-deep, var(--accent-strong, var(--accent, 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; }
}
/* Two .report-figure charts in a .split-row: both fixed at --width-sm, right one spills past prose. */
.split-row > .report-figure { flex: 0 0 var(--width-sm); margin: var(--space-6) 0 var(--space-7); }

/* ===== Report page components =====
   Long-form report patterns used on pages with <article class="prose prose-report">.
   Color accent comes from an ancestor .accent-{color} class (e.g. accent-teal on body). */

/* Report H2: magazine section heading with "Section NN" eyebrow + hairline top rule. */
.prose-report { counter-reset: h2-counter; }
.prose-report > h2 {
	margin: var(--space-8) 0 var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border-light);
	font-size: clamp(28px, 2vw + 14px, 40px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.prose-report > h2::before {
	content: 'Section ' counter(h2-counter, decimal-leading-zero);
	counter-increment: h2-counter;
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-accent);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent, var(--color-text-muted));
}
/* Report H3: closer in scale to H2, with short accent underline. */
.prose-report > h3 {
	margin: var(--space-6) 0 var(--space-3);
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--color-text-strong);
}
.prose-report > h3::after {
	content: '';
	display: block;
	width: 32px; height: 2px;
	background: var(--accent, var(--color-text-muted));
	margin-top: var(--space-2);
}

/* Report hero — full-width photo with overlay title, kicker, byline, meta. */
.report-hero {
	position: relative;
	margin: 0 auto;
	max-width: var(--width-page);
	overflow: hidden;
}
.report-hero-photo { margin: 0; max-width: none; }
.report-hero-photo img { display: block; width: 100%; height: auto; }
.report-hero::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 80px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}
.report-hero::after {
	content: '';
	position: absolute; bottom: 0; left: 0; right: 0; height: 70%;
	background: linear-gradient(to top,
		rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.74) 10%,
		rgba(0,0,0,0.60) 22%, rgba(0,0,0,0.44) 36%,
		rgba(0,0,0,0.28) 52%, rgba(0,0,0,0.15) 70%,
		rgba(0,0,0,0.06) 85%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}
.report-hero-kicker {
	position: absolute; top: var(--space-4); left: var(--space-5);
	margin: 0;
	padding: 6px 12px;
	font-family: var(--font-accent);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent, var(--color-text-muted));
	line-height: 1;
	z-index: 1;
}
.report-hero-title {
	position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-4);
	color: #fff;
	z-index: 1;
	& h1 {
		margin: 0;
		font-size: clamp(38px, 5.4vw + 4px, 76px);
		font-weight: 800;
		letter-spacing: -0.01em;
		line-height: 1.0;
		color: #fff;
		max-width: var(--width-lg);
	}
	& .report-hero-deck {
		margin: var(--space-4) 0 0;
		font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
		font-size: clamp(18px, 1vw + 11px, 24px);
		font-style: italic;
		font-weight: 400;
		line-height: 1.35;
		color: rgba(255,255,255,0.94);
		max-width: 600px;
	}
	& .report-hero-byline {
		margin: var(--space-4) 0 0;
		font-family: var(--font-accent);
		font-size: var(--text-sm);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.78);
	}
}
.report-hero-meta {
	position: absolute; top: var(--space-4); right: var(--space-5);
	margin: 0;
	font-family: var(--font-accent);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	z-index: 1;
}
@media (max-width: 600px) {
	.report-hero-meta { display: none; }
}
@media (max-width: 480px) {
	.report-hero-kicker { left: var(--space-3); letter-spacing: 0.12em; padding: 5px 9px; }
	.report-hero-title { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
}

/* Report abstract — italic serif lede paragraph. */
.report-abstract {
	font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	font-size: clamp(19px, 0.6vw + 16px, 23px);
	line-height: 1.5;
	color: var(--color-text);
	margin: var(--space-7) 0 var(--space-6);
	font-style: italic;
}

/* Report TOC — accent-bordered card, column-first ordered list. */
.report-toc {
	/* height: auto overrides site-wide mobile `nav { height: 50px }` rule */
	height: auto;
	margin: var(--space-6) 0 var(--space-7);
	padding: var(--space-4) var(--space-5);
	background: var(--color-bg-highlight);
	border-left: 4px solid var(--accent, var(--color-text-muted));
	& .report-toc-label {
		margin: 0 0 var(--space-3);
		font-family: var(--font-accent);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: 0.20em;
		text-transform: uppercase;
		color: var(--accent, var(--color-text-muted));
	}
	& ol {
		list-style: none; padding: 0; margin: 0;
		counter-reset: toc;
		display: grid;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		gap: var(--space-2) var(--space-5);
	}
	@media (max-width: 600px) {
		& ol { grid-auto-flow: row; grid-template-rows: auto; grid-template-columns: 1fr; }
	}
	& li { counter-increment: toc; margin: 0; }
	& li a {
		display: block;
		padding: var(--space-1) 0;
		font-size: var(--text-base);
		text-decoration: none;
		color: var(--color-text);
		border-bottom: 1px solid transparent;
		&:hover { color: var(--accent, var(--color-text-muted)); border-bottom-color: var(--accent, var(--color-text-muted)); }
	}
	& li a::before {
		content: counter(toc, decimal-leading-zero);
		display: inline-block;
		width: 36px;
		font-family: var(--font-accent);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: 0.08em;
		color: var(--accent, var(--color-text-muted));
	}
}

/* Report figure — chart or photo wrapped in a .card with figcaption. */
.report-figure {
	max-width: var(--width-sm);
	margin: var(--space-6) auto var(--space-7);
	& .card { margin: 0; }
	& .card-body h3 { font-size: var(--text-2xl); margin-bottom: 4px; }
	& .card-body .chart-subtitle { font-size: var(--text-base); margin-bottom: 4px; }
	& .chart-source { font-size: var(--text-sm); }
	& figcaption { font-size: var(--text-sm); }
	& img { height: auto; }
}
/* Tight footer inside report-figure — beats .card-compact.card-chart .card-footer (0,3,0). */
.report-figure .card.card-compact .card-footer { padding-bottom: 6px; }
/* Photo figure modifier — image fills card edge to edge.
   Extra class selector beats .card-compact.card-chart .card-body (specificity 0,3,0). */
.report-figure-photo .card.card-compact .card-body { padding: 0; }
.report-figure-photo .card.card-compact .card-body img { width: 100%; display: block; }
/* Width modifiers for wider chart figures (default is --width-sm). */
.report-figure-md { max-width: var(--width-md); }
.report-figure-lg { max-width: var(--width-lg); }

/* Report-scoped break-out: narrow text column paired with a side figure (chart or image).
   Escapes the .prose max-width so the pair can breathe wider than the article column.
   Place OUTSIDE <article class="prose">; wraps text in .report-split-text + a <figure>. */
.report-split {
	max-width: var(--width-xl);
	margin: var(--space-6) auto var(--space-7);
	padding: 0 var(--space-3) 0 calc((var(--width-xl) - var(--width-lg)) / 2 + var(--space-3));
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	justify-content: flex-start;
	align-items: center;
	& .report-split-text { flex: 0 1 340px; max-width: 340px; min-width: 0; }
	& > figure, & .report-figure { margin: 0; }
	@media (max-width: 760px) {
		flex-direction: column;
		align-items: stretch;
		padding: 0 var(--space-3);
		& .report-split-text { flex-basis: auto; max-width: none; }
	}
}

/* Comparison table — small 2- or 3-column side-by-side comparison.
   Use <caption> for the title. Pair with .flag-img for flag-image headers. */
.compare-table {
	width: auto;
	margin: 0 auto var(--space-7);
	& caption {
		caption-side: top;
		text-align: center;
		margin: var(--space-6) 0 var(--space-3);
		font-size: var(--text-2xl);
		font-weight: 600;
		color: var(--color-text-strong);
	}
	& th, & td { text-align: center; padding: var(--space-2) var(--space-3); }
	& th { vertical-align: top; }
	& th:first-child, & td:first-child { text-align: right; }
	& td:first-child { color: var(--color-text-muted); font-weight: 500; }
	& th .flag-img { margin-top: var(--space-1); }
}

/* Flag image — small inline flag for headers, prose, table cells. */
.flag-img {
	width: 21px; height: 14px;
	vertical-align: -2px;
	display: inline-block;
	object-fit: contain;
	border: 0.5px solid color-mix(in srgb, black 15%, transparent);
}
.flag-img--lg {
	width: 32px; height: 20px;
	vertical-align: -4px;
	margin-right: var(--space-1);
	border-color: var(--color-border-light);
}
/* Row of flags side-by-side (e.g. a group label like "Nordics" with 4 flags). */
.flag-row { display: inline-flex; gap: 3px; margin-top: var(--space-1); }

/* Methodology entry — collapsible <details> for a report's methodology /
   sources section. Quiet by default, accent on hover. */
.methodology-entry > summary {
	font-family: var(--font);
	font-size: var(--text-base);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text-strong);
	margin-bottom: 0;
	cursor: pointer;
}
.methodology-entry > summary:hover { color: var(--accent); }
.methodology-entry[open] > summary { margin-bottom: var(--space-3); }

/* Drill-in primitive — "box of boxes" overview → detail interaction.
   Use case: dashboard sectors, chartbook sections, drill-down explorers.
   JS toggles [hidden] on .drill-overview and .drill-detail.

   Markup shape:
     <div class="drill-view">
       <div class="drill-overview">
         <button class="drill-tile">…</button>     (one per item)
         …
       </div>
       <div class="drill-detail" hidden>
         <button class="drill-back">← Overview</button>
         <!-- expanded content; may itself contain another drill-view -->
       </div>
     </div>
*/
.drill-view { margin: var(--space-5) 0; }
.drill-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-3);
}
.drill-tile {
	display: block;
	width: 100%;
	padding: var(--space-3);
	background: var(--color-bg-input);
	border: 2px solid var(--color-border-light);
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: inherit;
	transition: border-color var(--transition-fast);
	&:hover { border-color: var(--accent, var(--color-text-strong)); }
	&:focus-visible { outline: 2px solid var(--accent, var(--color-text-strong)); outline-offset: 2px; }
}
.drill-detail {
	padding: var(--space-4);
	border: 2px solid var(--color-border-light);
}
.drill-back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	background: transparent;
	border: 1px solid var(--color-border-light);
	font: inherit;
	font-size: var(--text-sm);
	color: var(--color-text);
	cursor: pointer;
	&:hover {
		color: var(--accent, var(--color-text-strong));
		border-color: var(--accent, var(--color-text-strong));
	}
}
@media (max-width: 760px) {
	.drill-overview { grid-template-columns: 1fr; }
}

/* Keep with next — print pagination marker. Wrap a heading + its first
   body element in <div class="keep-with-next"> so they don't get
   separated by a page break in printed/PDF builds. */
@media print {
	.keep-with-next { break-inside: avoid; page-break-inside: avoid; }
}

/* 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; }

/* Page head — accent rule + big H1 + deck (V5 pattern, currently only gdpm.html) */
/* Lives as first child inside <main>; bleeds to main's edges so the 6px accent rule
   becomes the top edge of the page card. */
/* header.page-head specificity bumps over global `header { position: fixed }` site nav rule. */
header.page-head {
	position: static;
	width: auto;
	border-top: 6px solid var(--accent);
	background: var(--color-surface);
	padding: var(--space-5) 0 var(--space-4);
	margin: 0 calc(var(--space-5) * -1) var(--space-3);
}
/* Remove main's top border when a page-head is its first child — the page-head's
   accent rule replaces it. */
main:has(> header.page-head:first-child) { border-top: none; padding-top: 0; }

/* Page-title-feature lives INSIDE main (for a11y landmark coverage). When
   it's the first child, drop main's top padding so the title meets main's
   top edge with no gap. Same for the section immediately after. */
.page-title-feature { border-bottom: none; }
main:has(> .page-title-feature:first-child) { padding-top: 0; }
main > .page-title-feature + section { padding-top: 0; }
.page-head-inner {
	max-width: var(--width-lg);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
.page-head h1 {
	font-size: clamp(28px, 3vw + 16px, 40px);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-1);
	color: var(--color-text);
}
.page-head-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-strong, var(--accent));
	margin: 0 0 var(--space-2);
}
.page-head-deck {
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 620px;
	margin: 0;
}
@media (max-width: 760px) {
	.page-head { padding: var(--space-4) 0 var(--space-3); }
}

/* Card grid */
.card-grid {
	display: grid;
	/* Flexible columns: at 948px wide, fits 3 cards (~300px) OR 4 cards (~210px).
	   200px floor keeps the 4-up Dashboards row on one line at 948px container. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4); padding: var(--space-3) 0; width: 100%;
	& a { text-decoration: none; }
	& > h2, & > h3 { grid-column: 1 / -1; margin: var(--space-2) 0 var(--space-1); justify-self: start; }
	/* Match the section-h2 size used everywhere else (--text-4xl, weight 800) so
	   "Dashboards" / "Tutorials" headings don't render smaller than "References"
	   or "Browse by topic" on sibling pages. */
	& > h2 { font-size: var(--text-4xl); font-weight: 800; }
	/* 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; }
}

/* ===== Reports section: featured hero + list of past reports ===== */

.reports-section {
	max-width: var(--width-content);        /* match card-grid: 3 × 300 + 2 × space-5 */
	margin: 0 auto var(--space-9);   /* matches gap before References */
	padding: var(--space-3) 0;
}

/* Reports page Dashboards card-grid: align to the same 948px max-width as
   the surrounding sections so widths stack cleanly. */
.page-reports .reports-section + .card-grid {
	max-width: var(--width-content);
	margin-left: auto;
	margin-right: auto;
}

/* References section — Chartbook hero (now alone after Calendar moved
   to Dashboards). Same max-width as Dashboards so it visually aligns. */
.reports-references {
	max-width: var(--width-content);
	margin: var(--space-9) auto var(--space-6);
	padding: 0;
	& > h2 { margin: 0 0 var(--space-5); }
	& .featured-report { margin-bottom: var(--space-5); }
	& .reports-references-secondary {
		justify-content: center;
		padding: 0;
	}
}

/* Featured report — split panel: photo on the left, text on the right */
.featured-report,
.featured-report:link,
.featured-report:visited,
.featured-report:hover {
	color: inherit;
	text-decoration: none;
}
.featured-report {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: var(--elevation-border);
	border-top: 4px solid var(--accent);
	background: var(--color-card-bg);
	overflow: hidden;
	transition: none;
	& .featured-report-photo {
		margin: 0;
		min-height: 320px;
		overflow: hidden;
		background: #000;
		& img { width: 100%; height: 100%; object-fit: cover; display: block; }
	}
	& .featured-report-text {
		padding: var(--space-5) var(--space-6);
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-3);
	}
	& .featured-report-kicker {
		margin: 0;
		font-size: var(--text-xs);
		font-weight: 700;
		color: var(--accent-strong, var(--accent));
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	& .featured-report-title {
		margin: 0;
		font-size: var(--text-3xl);
		font-weight: 800;
		color: var(--color-text-strong);
		line-height: 1.15;
	}
	& .featured-report-deck {
		margin: 0;
		font-size: var(--text-base);
		line-height: 1.55;
		color: var(--color-text);
	}
	& .featured-report-cta {
		font-weight: 700;
		color: var(--accent-strong, var(--accent));
		margin-top: var(--space-2);
	}
	&:hover {
		background: color-mix(in srgb, var(--accent) 4%, var(--color-card-bg));
	}
}
@media (max-width: 760px) {
	.featured-report { grid-template-columns: 1fr; }
	.featured-report .featured-report-photo { min-height: 200px; }
	.featured-report .featured-report-text { padding: var(--space-4); }
}

/* List of past reports — date | title+deck | meta. Used for any reports
   beyond the featured one. Currently empty until a second report ships. */
.reports-list {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
}
.reports-list-item {
	border-top: 1px solid var(--color-border-light);
	&:last-child { border-bottom: 1px solid var(--color-border-light); }
	& a,
	& a:link,
	& a:visited,
	& a:hover {
		color: inherit;
		text-decoration: none;
	}
	& a {
		display: grid;
		grid-template-columns: 130px 1fr auto;
		gap: var(--space-4);
		align-items: baseline;
		padding: var(--space-4) var(--space-3);
	}
	& a:hover {
		background: color-mix(in srgb, var(--color-text-muted) 6%, transparent);
	}
}
.reports-list-date {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.reports-list-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.reports-list-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-text-strong);
}
.reports-list-deck {
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.5;
}
.reports-list-meta {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}
@media (max-width: 760px) {
	.reports-list-item a {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

/* Trail difficulty badges */
.trail-badge {
	display: inline-flex;
	align-self: flex-start;       /* don't stretch in card-body flex column */
	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);
	border-top: 4px solid var(--accent, var(--color-border));
	background: var(--color-card-bg);
	transition: none;
	/* Dark mode: subtle top-edge highlight so cards lift off the surface.
	   Replaces the bottom-shadow technique that's invisible on dark. */
	[data-theme="dark"] & { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

/* Dark mode: dim PDF previews / sample-page images so they don't read as
   bright white rectangles against the dark UI. Applies to the chartbook
   feature panel preview and any image used as a document thumbnail. */
[data-theme="dark"] .cb-feature-photo img,
[data-theme="dark"] .cb-previews img {
	opacity: 0.85;
	filter: brightness(0.92);
}
.info-box {
	--card-ph: var(--space-4);
	position: relative;
	border: var(--elevation-border);
	border-top: 4px solid var(--accent, var(--color-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);
		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: var(--text-xs);   /* was 11px — bumped to 13px for legibility */
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding: 2px var(--space-3);
		background: var(--accent-deep, var(--accent-strong, 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);
	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. The CARD's own
   top border is the accent color (matches blog-card pattern); side+bottom
   borders stay neutral gray. Hover deepens to --accent-strong. Title
   typography matches blog/category cards: Title Case Albert Sans bold,
   left-aligned (not uppercase + tracked) for cross-page consistency. */
.card-nav {
	text-align: left;
	text-decoration: none;
	min-height: 180px;
	border-top: 4px solid var(--accent, var(--color-border));
	transition: border-color var(--transition-fast);
	&:hover {
		border-color: var(--color-text-strong);
		border-top-color: var(--accent-strong, var(--accent));
	}
	& .card-banner { border-top: none; }
	& .card-header {
		border-top: none;
		justify-content: flex-start;
		align-items: center; gap: var(--space-2);
		padding: var(--space-3) var(--space-4);
		& h3 { font-size: var(--text-xl); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
	}
	& .card-body {
		padding: var(--space-2) var(--space-4) var(--space-4); min-height: 125px;
		& p { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--text-base); line-height: 1.5;
			@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 banners keep the accent tint (multiply blend) — gives each nav card
   a tinted top stripe matching its accent color. */
.card-banner 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; }
}
/* Page-strip banner images render plain — no accent tint multiplied in. */
.page-strip-img {
	width: 100%;
	object-fit: cover;
	display: block;
	[data-theme="dark"] & { opacity: 0.92; }
}
.card-banner img { height: 30px; }
[data-theme="dark"] :is(.page-reports, .page-python) {
	& .page-strip { background-color: white; }
	& .page-strip-img { opacity: 0.8; mix-blend-mode: multiply; }
}

/* ===== 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-deep, var(--accent-strong, var(--accent, var(--color-text-muted)))); border-color: var(--accent-deep, var(--accent-strong, 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);
}
/* When .step-label is used on an <h3> (for semantic heading structure inside
   a tutorial subsection), keep the small-marker visual rhythm by overriding
   the prose h3 size/margin. */
.prose h3.step-label, .prose-report h3.step-label {
	font-size: var(--text-sm);
	margin: var(--space-5) 0 var(--space-2);
}

/* "What you'll learn" callout — labeled list at the top of a tutorial.
   Uses .info-box for the framed look; replaces the h3 inside with a
   non-heading <p class="learn-list-label"> so the callout doesn't break
   the page's heading outline (h1 → h2 → h3) before the first section. */
.learn-list .learn-list-label {
	margin: 0 0 var(--space-2);
	font-family: var(--font-accent);
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-strong);
}
.learn-list ul { margin: 0; padding-left: 1.25em; }
.learn-list li { font-size: var(--text-base); margin-bottom: var(--space-1); }
.learn-list li:last-child { margin-bottom: 0; }

/* Accent heading — underlined heading, line is text-width */
/* Section heading underline. Always neutral dark gray — section headings
   are wayfinding, not brand emphasis. Used on /blog/, /reports.html,
   /python.html, etc. */
.heading-accent { display: table; padding-bottom: var(--space-1); border-bottom: 3px solid var(--color-text-strong); }

/* 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));
	/* Dark mode: when the badge sits on a medium-gray surface (e.g. card-header
	   bg #383838), the base accent text doesn't pass AA. Brighten with white. */
	[data-theme="dark"] & { color: color-mix(in srgb, var(--accent, var(--color-text-muted)) 55%, white); }
}
.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 {
		max-width: var(--width-content);   /* align with featured-report-hero + home-intro */
		margin-left: auto;
		margin-right: auto;
		padding-top: var(--space-6);
		/* 3 fixed columns — auto-fit was creating a phantom 4th track and
		   leaving the 3 cards crammed in the left ~75% of the container. */
		grid-template-columns: repeat(3, 1fr);
	}
	/* Featured-report hero — magazine-cover treatment of the latest
	   report. Same structure as the .featured-report on reports.html
	   but with a bigger title and a larger photo panel. */
	& .featured-report-hero {
		max-width: var(--width-content);        /* align with .home-intro and card-grid */
		margin: var(--space-3) auto var(--space-6);
	}
	& .featured-report-hero .featured-report-photo { min-height: 380px; }
	& .featured-report-hero .featured-report-title {
		font-size: clamp(30px, 2vw + 16px, 42px);   /* magazine-cover hero, slightly bigger than page-title-feature */
		font-weight: 800;
		letter-spacing: -0.015em;
		line-height: 1.1;
	}
	& .featured-report-hero .featured-report-deck { font-size: var(--text-base); }

	& .home-intro {
		max-width: var(--width-content);        /* match card-grid: 3 × 300 + 2 × space-5 */
		margin: 0 auto;
		align-items: stretch;
	}
	/* Asymmetric 2:3 — blog (right, more content) gets 60%, BD intro
	   (left, description + sparkline) gets 40%. */
	& .home-intro > * { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
	& .home-intro > *:first-child  { flex: 2 1 0; }
	& .home-intro > *:last-child   { flex: 3 1 0; }
	& .home-sparkline {
		padding-top: var(--space-5);
		& a, & a:link, & a:visited { text-decoration: none; color: inherit; }
		& a:hover { text-decoration: underline; }
		& a.info-box-tab, & a.info-box-tab:link, & a.info-box-tab:visited { color: #fff; }
		/* "See all →" reverts to muted gray instead of inheriting the
		   indicator's category color. Some category colors (orange, teal,
		   ltblue, brown) fail WCAG-AA contrast against the light bg here. */
		& .sparkline-nav .note,
		& .sparkline-nav .note:link,
		& .sparkline-nav .note:visited { color: var(--color-text-muted); }
		& #sparkline-title { color: var(--color-text-strong); cursor: pointer; font-weight: 700; letter-spacing: 0.02em; }
		& .sparkline-nav .note { color: var(--accent, var(--color-text-muted)); }
		& .sparkline-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; }
		& .sparkline-stat { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); flex-wrap: wrap; }
		& .sparkline-stat .label { font-size: var(--text-sm); color: var(--color-text-muted); }
		& .sparkline-stat .sparkline-period::before { content: '· '; color: var(--color-text-muted); margin-right: 2px; }
		& .sparkline-stat .key-stat { font-size: var(--text-2xl); margin: 0; line-height: 1.1; }
		/* Delta chip — colored ▲/▼ + signed magnitude, indicates direction
		   of change since previous reading. Uses semantic up/down colors,
		   not the chart color, since direction (good/bad) ≠ category. */
		& .sparkline-delta { font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
			&[data-dir="up"]   { color: var(--color-card-red); }
			&[data-dir="down"] { color: var(--color-card-green); }
		}
		& .sparkline-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; }
		& .sparkline-label .label { margin: 0; color: var(--color-text-strong); font-size: var(--text-base); }
		& .sparkline-icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
		& .sparkline-nav { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
		/* Indicator tabs — plain text, no pill, no border. Active gets accent
		   color + underline; inactive is muted. Compact so "See all →" stays
		   on the same line at typical widths. */
		& .sparkline-nav .btn {
			background: transparent; border: none; padding: 0;
			font-size: var(--text-sm); font-weight: 600;
			color: var(--color-text-muted); white-space: nowrap;
			border-bottom: 2px solid transparent;
			padding-bottom: 2px; line-height: 1.2;
			&:hover { background: transparent; color: var(--color-text-strong); }
			&.active {
				background: transparent; color: var(--color-text-strong);
				border-bottom-color: var(--accent-strong, var(--accent));
			}
		}
		& .sparkline-nav .note { margin-left: auto; white-space: nowrap; }
		& .sparkline-wrap { position: relative; height: 168px; margin-top: var(--space-2); }
		& canvas { display: block; }
		/* Min/max labels — JS positions these next to the actual min/max
		   points on the chart. Pill-style backdrop so the text stays
		   readable when it sits near the line. */
		& .sparkline-minmax {
			position: absolute; font-size: var(--text-xs); color: var(--color-text-muted);
			pointer-events: none; line-height: 1; white-space: nowrap;
			background: color-mix(in srgb, var(--color-bg-alt) 80%, transparent);
			padding: 2px 6px; border-radius: 3px;
			transition: opacity var(--transition-fast);
		}
		/* Hide min/max labels while user hovers the chart — Chart.js draws its
		   tooltip on the canvas, which would otherwise sit behind these. */
		& .sparkline-wrap.is-hovered .sparkline-minmax { opacity: 0; }
	}
	/* Blog list: dividers + room to breathe; titles read as colored
	   text rather than a wall of underlines (hover restores underline). */
	& .home-blog {
		list-style: none; padding: 0; margin: 0;
		& li { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-light); }
		& li:first-child { border-top: none; }
		& a { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-strong); text-decoration: none; }
		& a:hover { text-decoration: underline; }
		& .note { display: inline; margin-left: var(--space-2); white-space: nowrap; font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
	}
	& .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: 220px; 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-4); }
		[data-theme="dark"] & > a:first-child img { mix-blend-mode: normal; opacity: 0.9; }
		& > a:not(:first-child) { font-size: var(--text-2xl); font-weight: 700; line-height: 1.25; }
	}
	/* (was overriding .blog-featured + li padding-top to var(--space-2),
	   which made the second link tighter than the rest. Removed.) */

	/* Blog card "All posts →" link picks up the card's red accent so it
	   reads as a link instead of muted auxiliary text. Scoped to home so
	   download-icon links etc. on other pages stay neutral. */
	& .card-header a { color: var(--accent-strong, var(--accent, var(--color-link))); font-weight: 600; }
	& .card-header a:hover { color: var(--accent-strong, var(--accent)); text-decoration: underline; }
	/* Dark mode: card-header has a medium-gray bg (#383838) where the accent
	   colors don't pass 4.5:1. Brighten by mixing with white. */
	[data-theme="dark"] & .card-header a { color: color-mix(in srgb, var(--accent) 50%, white); }
	[data-theme="dark"] & .card-header a:hover { color: color-mix(in srgb, var(--accent) 65%, white); }

	/* Mobile reorder: hero → intro card → blog → curated grid → sparkline.
	   Flatten .home-intro and its wrappers via display:contents so all
	   leaf cards become direct flex children of <section>, then assign order. */
	@media (max-width: 760px) {
		& main > section { display: flex; flex-direction: column; gap: var(--space-5); }
		& .home-intro { display: contents; }
		& .home-intro > * { display: contents; }
		& .featured-report-hero { order: 1; }
		& .home-intro > *:first-child > .card { order: 2; }
		& .home-intro > *:last-child > .card { order: 3; }
		& .card-grid { order: 4; }
		& .home-sparkline { order: 5; }
	}
}

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

.page-python {
	/* Force all top-level sections to share a single content width so the
	   page-title-feature, "Start here", "Tutorials" h2s, and content rows
	   all align at the same left edge — no zig-zag indents. */
	& main > section { max-width: var(--width-content); margin-left: auto; margin-right: auto; }
	/* Start here split-row uses .prose (720px) — widen it to match the page width. */
	& .py-row { align-items: center; max-width: none; }
	& .py-intro { flex: 1; min-width: 0; }
	/* The wrapping <a> around the Setup card has no text — its text-decoration
	   doesn't matter visually. But text links INSIDE the prose intro need to
	   keep their underline for accessibility. Scope this to direct children. */
	& .py-row > a { text-decoration: none; flex: 0 0 300px; }
	& .py-row .card-nav .card-body { display: flex; flex-direction: column; }
	& .py-row .card-nav .trail-badge { margin-top: auto; }
	& .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 ----- */

/* Live freshness status dot. Reusable across pages — used wherever a
   "Updated X ago" / "Latest data X ago" signal is shown. JS sets the
   [data-status] attribute (fresh / stale / old) based on age. */
.status-dot, .cb-status-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--color-text-muted);
	margin-right: 6px;
	vertical-align: 1px;
}
.status-dot[data-status="fresh"], .cb-status-dot[data-status="fresh"] { background: #2eaa6c; }
.status-dot[data-status="stale"], .cb-status-dot[data-status="stale"] { background: #d9a02c; }
.status-dot[data-status="old"],   .cb-status-dot[data-status="old"]   { background: #b04a4a; }
[data-theme="dark"] .status-dot[data-status="fresh"],
[data-theme="dark"] .cb-status-dot[data-status="fresh"] { background: #4dc78a; }

.page-chartbook {
	& .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; }
	}

	/* Download feature panel — split layout (preview image + text + CTA).
	   Uses .featured-report (defined under "Reports section" above) plus
	   chartbook-specific overrides here. */
	& .cb-feature { margin: var(--space-5) 0 var(--space-6); }
	& .cb-feature .featured-report-photo { background: var(--color-bg-highlight); padding: var(--space-3); }
	& .cb-feature .featured-report-photo img {
		object-fit: contain;        /* preview pages are tall portraits — don't crop */
		object-position: center top;
		max-height: 420px;
		box-shadow: 0 1px 8px color-mix(in srgb, black 12%, transparent);
	}
	& .cb-feature .featured-report-cta {
		display: inline-flex; align-items: center; gap: 6px;
	}
	& .cb-feature .featured-report-cta .icon { width: 18px; height: 18px; }
	& .cb-feature-meta {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		margin: 0;
	}
	& .cb-source-link {
		text-align: center;
		margin: calc(-1 * var(--space-3)) 0 var(--space-5);
		font-size: var(--text-sm);
	}

	/* .status-dot rules are global (defined below the .page-chartbook
	   block). The .cb-status-dot class on existing chartbook markup gets
	   the same styles via that global rule. */

	/* Data sources card — own row below the feature panel. */
	& .cb-sources {
		max-width: var(--width-xl);
		margin: 0 auto var(--space-5);
		& th { color: var(--color-text-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
		& th.cb-src-updated, & td.cb-src-updated { text-align: right; white-space: nowrap; }
		& td.cb-src-updated { color: var(--color-text-muted); }
		& td.cb-src-updated .cb-status-dot { margin-right: 6px; }
		& td:nth-child(2) { text-align: right; color: var(--color-text-muted); white-space: nowrap; }  /* Latest data */
		& .cb-st { margin: var(--space-3) 0 0; }
		& .cb-more td { color: var(--color-text-muted); border: none; padding-top: 2px; }
	}

	/* "What's Inside" + "Related" — open prose sections (formerly <details>). */
	& .cb-inside, & .cb-related { max-width: var(--width-lg); margin: var(--space-5) auto; }
	& .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-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); }

	/* Edition info pinned to right side of the feature header */
	& .weo-title-edition {
		display: flex; align-items: baseline;
		gap: var(--space-5); font-size: var(--text-sm);
		margin-top: var(--space-3);
		color: var(--color-text);
		& > div > .label { display: block; font-size: var(--text-xs); margin-bottom: 2px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
	}

	/* 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-chart); 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-chart); 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-chart); & .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 { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text-muted) 5%, transparent); }
	}
	& .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-strong); }
	& .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); font-size: 10px; }
	& .cal-today .cal-t { color: var(--color-card-brown-strong); 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; }
	& .cal-agency-other { --accent: #555; }    /* fixed dark gray — passes AA white-on-bg in both themes; fallback for agencies not in the explicit list (e.g. S&P) */

	/* 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 { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text-muted) 5%, transparent); } }
		& .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; }
	}
}

/* ----- CPS Zones map (/cps-zones.html) — D3 choropleth of the 70 CPS labor
   zones. First D3 page on the site (others are Chart.js). --accent set locally
   to brand cyan for the hover/selection outline. ----- */
.page-cps-zones {
  --accent: #00a1de;          /* brand cyan — hover + callout highlight */
  --map-w: 900px;

  & .page-title-feature { max-width: var(--map-w); }
  & .zone-figure { max-width: var(--map-w); margin: var(--space-4) auto var(--space-6); }

  /* View tabs (Map / Scatter / Table) */
  & .view-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--color-border-light); margin: 0 0 var(--space-3); }
  & .view-tab { font-family: var(--font-accent); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: var(--space-2) var(--space-3); cursor: pointer; }
  & .view-tab:hover { color: var(--color-text-strong); }
  & .view-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  & .view-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Metric selector — each control is a label+select group that wraps as a unit
     (so a label never gets stranded from its dropdown on a new line). */
  & .metric-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
  & .ctrl { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
  & .ctrl[hidden] { display: none; }  /* the "vs" group is map/table-hidden; .ctrl display must not defeat [hidden] */
  & .ctrl label { font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
  & #metric-select, & #y-select, & #period-select {
    font-family: var(--font); font-size: var(--text-base); font-weight: 600;
    color: var(--color-text-strong); background: var(--color-surface);
    border: 1px solid var(--color-border-light); border-radius: var(--radius);
    padding: var(--space-1) var(--space-5) var(--space-1) var(--space-2);
    cursor: pointer; min-width: 0;
  }
  & #metric-select, & #y-select { flex: 1 1 150px; max-width: 240px; }
  & #period-select { max-width: 140px; }
  & #metric-select:focus-visible, & #y-select:focus-visible, & #period-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* Download CSV — quiet link-button in the card footer, right of the source. */
  & .card-footer { gap: var(--space-3); }
  & .dl-btn {
    flex: 0 0 auto; align-self: center; white-space: nowrap;
    font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.04em; color: var(--color-text-muted);
    background: none; border: none; padding: var(--space-1) 0; cursor: pointer;
  }
  & .dl-btn:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  & .dl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Choropleth */
  & #zone-map { background: transparent; }
  & .zone { cursor: pointer; }
  /* Interior zone borders as one mesh path — surface-colored so they read
     white in light mode and dark in dark mode (no per-shape strokes → no
     AlbersUsa inset clip boxes). */
  & .zone-borders { fill: none; stroke: var(--color-surface); stroke-width: 0.6; stroke-linejoin: round; pointer-events: none; vector-effect: non-scaling-stroke; }

  /* State boundaries (faint) — orientation under zoom; coincide with zone borders
     where a zone is a whole state. Non-scaling so they stay thin when zoomed. */
  & .state-borders { fill: none; stroke: var(--color-text-strong); stroke-opacity: 0.22; stroke-width: 0.7; stroke-linejoin: round; pointer-events: none; vector-effect: non-scaling-stroke; }

  /* Hover outline: accent line over a surface-colored casing → reads on every
     fill, in both themes. */
  & .zone-highlight { pointer-events: none; transition: opacity 90ms ease; }
  & .hl-casing { fill: none; stroke: var(--color-surface); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  & .hl-line { fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

  /* Persistent outline for the selected (clicked) zone — thicker than hover. */
  & .zone-selected { pointer-events: none; }
  & .sel-casing { fill: none; stroke: var(--color-surface); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  & .sel-line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

  /* Direct labels (zone name + value) shown when zoomed in. Screen-space layer
     (outside the zoom transform), so text stays crisp + constant size. */
  & .map-labels { pointer-events: none; }
  & .zlabel-name { font-family: var(--font-accent); font-weight: 700; font-size: 12px; fill: var(--color-text-strong);
    paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
  & .zlabel-val { font-family: var(--font); font-weight: 700; font-size: 13px; fill: var(--color-text-strong);
    paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
  & .zlabel-sel .zlabel-name, & .zlabel-sel .zlabel-val { fill: var(--accent); font-size: 14px; }

  /* Zoom controls — small button cluster over the map's top-left (NW ocean). */
  & .map-wrap { position: relative; }
  & .zoom-controls { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 2; }
  & .zoom-controls button { width: 28px; height: 28px; font-size: 17px; line-height: 1; font-weight: 700;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--color-text-strong); background: var(--color-surface);
    border: 1px solid var(--color-border-light); border-radius: var(--radius); }
  & .zoom-controls button:hover { border-color: var(--accent); color: var(--accent); }

  /* NYC region inset — zoomed, framed tristate box (NYC is too small nationally) */
  & .inset-frame { fill: var(--color-surface); stroke: var(--color-border-light); stroke-width: 1; }
  & .inset-title { font-family: var(--font-accent); font-size: 15px; font-weight: 700; fill: var(--color-text-strong); }
  & .inset-leader { stroke: var(--color-text-muted); stroke-width: 0.7; }
  & .inset-marker { fill: var(--accent); stroke: var(--color-surface); stroke-width: 0.8; }
  & .inset-zone { stroke: var(--color-surface); stroke-width: 0.5; stroke-linejoin: round; cursor: pointer; }
  & .inset-zone.hl { stroke: var(--accent); stroke-width: 1.6; }
  & .inset-zone.sel { stroke: var(--accent); stroke-width: 2.4; }

  /* Legend */
  & #zone-legend { display: block; width: 320px; max-width: 100%; margin: var(--space-2) 0 0; }
  & .legend-end { font-family: var(--font-accent); font-size: 12px; font-weight: 700; fill: var(--color-text-strong); }
  & .legend-mid { font-size: 11px; fill: var(--color-text-muted); }
  & .hist-bar { stroke: none; }
  & .hist-base { stroke: var(--color-border-light); stroke-width: 0.75; }
  & .sel-rule { stroke: var(--accent); stroke-width: 1.3; }
  & .sel-marker { fill: var(--accent); }
  & .us-rule { stroke: var(--color-text-strong); stroke-width: 1; stroke-dasharray: 2 1.6; opacity: 0.65; }
  & .us-mark { font-family: var(--font-accent); font-size: 8px; font-weight: 700; fill: var(--color-text-strong); }

  & #map-status { font-size: var(--text-sm); color: var(--color-link); min-height: 1.2em; margin: var(--space-2) 0 0; }

  /* Zone detail panel (appears on click) */
  & .zone-detail { margin-top: var(--space-4); border-top: 2px solid var(--color-border-light); padding-top: var(--space-3); }
  & .zone-detail[hidden] { display: none; }
  & .zd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
  & .zd-title { font-family: var(--font-accent); font-weight: 800; font-size: var(--text-xl); margin: 0; letter-spacing: -0.01em; }
  & .zd-type { display: block; font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-top: 2px; }
  & .zd-desc { font-size: var(--text-sm); color: var(--color-text); margin: var(--space-1) 0 0; max-width: 62ch; line-height: 1.45; }
  & .zd-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
  & .zd-zoom { font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-text-strong); background: var(--color-surface); border: 1px solid var(--color-border-light);
    border-radius: var(--radius); padding: var(--space-1) var(--space-2); cursor: pointer; white-space: nowrap; }
  & .zd-zoom:hover { border-color: var(--accent); color: var(--accent); }
  & .zd-close { font: inherit; font-size: var(--text-lg); line-height: 1; color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: var(--space-1); }
  & .zd-close:hover { color: var(--color-text-strong); }
  & .zd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-5); }
  & .zd-item { display: block; text-align: left; background: none; border: none; padding: var(--space-1) 0; cursor: pointer; font: inherit; border-bottom: 2px solid transparent; }
  & .zd-item:hover { border-bottom-color: var(--color-border-light); }
  & .zd-item.active { border-bottom-color: var(--accent); }
  & .zd-item.active .zd-label { color: var(--accent); font-weight: 700; }
  & .zd-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  & .zd-label { font-size: var(--text-sm); color: var(--color-text); }
  & .zd-val { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
  & .zd-spark { display: block; width: 110px; max-width: 100%; height: 22px; margin: 5px 0 2px; }
  & .spark-us { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 2.2 1.8; opacity: 0.5; }
  & .zd-rank { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  & .zd-key { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
  & .zd-key strong { color: var(--color-text); font-weight: 700; }
  @media (max-width: 760px) { & .zd-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { & .zd-grid { grid-template-columns: 1fr; } }

  /* Subtitle: the report default (16px) is too shouty under the title — step it
     down, and again on mobile so it doesn't dominate the small screen. */
  & #map-subtitle { font-size: var(--text-sm); }
  @media (max-width: 760px) { & #map-subtitle { font-size: var(--text-xs); } }

  /* Mobile: stack the indicator/period controls full-width (the fixed-width
     selects otherwise overflow the viewport ≤~340px), trim the deck so the map
     appears sooner, and hide the inset's label (it renders ~4px — unreadable). */
  @media (max-width: 600px) {
    /* Align the feature title with the card edge (its desktop side padding over-indents on phones). */
    & .page-title-feature { padding-left: 0; padding-right: 0; }
    & .page-title-deck { font-size: var(--text-sm); line-height: 1.45; }
    & .deck-cta { display: none; }   /* instructional sentence — controls are right there on mobile */
    & .metric-control { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-bottom: var(--space-3); }
    & .ctrl { flex-direction: column; align-items: stretch; gap: 2px; }
    & #metric-select, & #y-select, & #period-select { width: 100%; max-width: 100%; box-sizing: border-box; flex: none; }
    & .inset-title { display: none; }
  }

  /* Scatter view */
  & .sc-controls { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
  & .sc-controls label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
  & .sc-controls label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
  & #zone-scatter { background: transparent; }
  & .sc-axis path, & .sc-axis line { stroke: var(--color-border-light); }
  & .sc-axis text { fill: var(--color-text-muted); font-family: var(--font); font-size: 11px; }
  & .sc-axtitle { font-family: var(--font-accent); font-size: 13px; font-weight: 700; fill: var(--color-text-strong); }
  & .sc-pt { opacity: 0.78; stroke: var(--color-surface); stroke-width: 0.6; cursor: pointer; }
  & .sc-pt:hover { opacity: 1; }
  & .sc-pt.sel { stroke: var(--accent); stroke-width: 2; opacity: 1; }
  & #scatter-subtitle .sc-key { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--space-2); white-space: nowrap; }
  & #scatter-subtitle .sc-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

  /* Table view */
  & .zone-table-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--color-border-light); }
  & .zone-table { border-collapse: separate; border-spacing: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
  & .zone-table th, & .zone-table td { padding: 4px var(--space-2); text-align: right; border-bottom: 1px solid var(--color-border-light); }
  & .zone-table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface); cursor: pointer; font-family: var(--font-accent); font-weight: 700; color: var(--color-text); border-bottom: 2px solid var(--color-border-light); }
  & .zone-table thead th:not(.tcol-name):not(.tcol-type) { white-space: normal; vertical-align: bottom; min-width: 60px; max-width: 108px; line-height: 1.22; }
  & .zone-table thead th:hover { color: var(--accent); }
  & .zone-table .tcol-name { position: sticky; left: 0; z-index: 1; background: var(--color-surface); text-align: left; font-family: var(--font-accent); font-weight: 700; color: var(--color-text-strong); }
  & .zone-table thead .tcol-name { z-index: 3; }
  & .zone-table .tcol-type { text-align: left; color: var(--color-text-muted); }
  & .zone-table .tcol-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  & .zone-table tbody tr { cursor: pointer; }
  & .zone-table tbody tr:hover td, & .zone-table tbody tr:hover .tcol-name { background: var(--color-bg-highlight); }
  & .zone-table tr.trsel td, & .zone-table tr.trsel .tcol-name { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}

/* Map tooltip — appended to <body> (position:fixed); inherits --accent from
   body.page-cps-zones. Uses the site tooltip-bg token. */
#map-tooltip {
  position: fixed; pointer-events: none; opacity: 0; z-index: 50;
  background: var(--color-tooltip-bg); color: #fff;
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm);
  font-family: var(--font); line-height: 1.4; max-width: 240px;
  border: 1px solid color-mix(in srgb, white 14%, transparent);
  transition: opacity 100ms ease;
  & strong { display: block; font-family: var(--font-accent); font-weight: 700; }
  & .tip-sub { display: block; font-size: var(--text-xs); color: color-mix(in srgb, white 62%, transparent); }
  & .tip-val { display: block; margin-top: 2px; color: var(--accent, #00a1de); font-weight: 700; }
  & .tip-rank { display: block; margin-top: 2px; font-size: var(--text-xs); color: color-mix(in srgb, white 55%, transparent); }
}

/* ----- Blog (/blog/, /blog/YYYY/MM/DD/<slug>/) ----- */
/* Posts don't have a .page-title bar (the title is inside .post-header in the
   prose container). Add top padding so the post-header clears the fixed nav. */
.page-blog-post main { padding-top: var(--space-5); }

/* For banner-style posts the banner IS the top of the page — flush against
   the fixed nav. Zero out main's top padding AND the section's top padding,
   and drop the main top border so the banner is the visual edge. */
.page-blog-post main:has(.post-hero--banner) { padding-top: 0; border-top: none; }
.page-blog-post main:has(.post-hero--banner) > section { padding-top: 0; }

/* Blog index intro paragraph (above the featured hero). */
.page-blog .blog-intro {
	max-width: var(--width-lg);
	margin: 0 auto var(--space-5);
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	line-height: 1.5;
	text-align: center;
}
.page-blog .blog-intro a { color: var(--color-text-strong); }

/* Constrain blog page content to the same width as reports.html
   (948px = 3 × 300px cards + 2 × 24px gap). Without this the page
   stretches to the full 1028px inner width and feels wider than
   sibling pages. */
.page-blog main > section { max-width: var(--width-content); margin-left: auto; margin-right: auto; }

/* Blog "latest" hero — reuses .featured-report pattern from reports.html. */
.page-blog .blog-latest { margin: 0 auto var(--space-9); }

/* "All posts" section heading. */
.page-blog .blog-grid-section { margin-top: var(--space-9); }
.page-blog .blog-grid-section > h2 { margin-bottom: var(--space-5); }

/* Card grid for posts. Three-up on wide, two-up on narrow, one-up on phone. */
.page-blog .blog-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-5) var(--space-4);
}
.page-blog .blog-card-item { margin: 0; }
.page-blog .blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-top: 3px solid var(--accent, var(--color-border));
	overflow: hidden;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.page-blog .blog-card:hover { border-color: var(--color-text-strong); border-top-color: var(--accent, var(--color-text-strong)); }
.page-blog .blog-card .post-category { color: var(--accent-strong, var(--accent, var(--color-text-muted))); }
.page-blog .blog-card-banner {
	overflow: hidden;
	background: var(--color-bg-highlight);
	border-bottom: 1px solid var(--color-border-light);
}
.page-blog .blog-card-banner img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}
/* Auto-generated OG card fallback (1200x630). Show the card whole at its
   natural aspect ratio instead of cropping — the title text is the point. */
.page-blog .blog-card-banner--og img {
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: contain;
}
.page-blog .blog-card-body {
	padding: var(--space-3) var(--space-4) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}
.page-blog .blog-card-meta {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.page-blog .blog-card-meta .meta-sep { margin: 0 var(--space-1); opacity: 0.6; }
.page-blog .blog-card-title {
	margin: 0;
	font-family: var(--font-accent);
	font-size: var(--text-base);   /* was --text-lg (19px) — down a hair to 18 */
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--color-text-strong);
	text-transform: none;
}
.page-blog .blog-card-excerpt {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text);
}

/* Single-post layout — featured image hero. Two flavors:
   .post-hero--banner: photo/illustration. Full-width edge-to-edge, cover-mode,
                       tall — sets the mood, pulls reader in.
   .post-hero--chart:  chart used as featured image. Contained (no cropping),
                       narrower, smaller — usually also appears in body so we
                       don't want it dominating the page. */
.post-hero { margin: 0 auto var(--space-6); overflow: hidden; }
.post-hero img { display: block; width: 100%; height: auto; }

.post-hero--banner {
	margin-left: calc(-1 * var(--space-5));  /* extend past main's padding */
	margin-right: calc(-1 * var(--space-5));
	max-height: 420px;
	background: var(--color-bg-highlight);
}
.post-hero--banner img {
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center;
}

.post-hero--chart {
	max-width: var(--width-md);
	padding: 0 var(--space-3);
}
.post-hero--chart img {
	max-height: 320px;
	object-fit: contain;
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
}

/* Blog post header + body — narrower prose column (--width-md = 600px) and
   larger body type for readable long-form reading. Mirrors the typography
   pattern from .prose-report but without the magazine section counters. */
.page-blog-post .prose,
.page-blog-post .post-header,
.page-blog-post .post-footer-nav {
	max-width: var(--width-md);
	margin-left: auto;
	margin-right: auto;
}

.post-header { margin: 0 auto var(--space-6); }
.post-header h1 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-display); letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.post-categories { margin: 0 0 var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-category {
	font-family: var(--font-accent);
	font-size: var(--text-xs);   /* was 11px — bumped to 13px (xs token) for legibility */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.post-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.post-meta .meta-sep { margin: 0 var(--space-1); opacity: 0.6; }
.post-meta .post-byline a { color: inherit; }

/* Blog-post prose typography — 17px body, looser line-height, more paragraph
   spacing. Don't override .prose itself (which other pages use) — target only
   .page-blog-post. */
.page-blog-post .prose > p,
.page-blog-post .prose > ul,
.page-blog-post .prose > ol,
.page-blog-post .prose > blockquote {
	font-size: var(--text-lg);
	line-height: 1.7;
}
.page-blog-post .prose > p { margin-bottom: var(--space-5); }
.page-blog-post .prose > h2 { margin-top: var(--space-7); font-size: var(--text-3xl); letter-spacing: -0.01em; line-height: 1.25; }
.page-blog-post .prose > h3 { margin-top: var(--space-6); font-size: var(--text-2xl); }

/* Article content: keep figures from blowing out the prose column.
   Charts wider than 600px scale down to fit, preserving aspect. */
.page-blog-post .prose figure { margin: var(--space-6) auto; max-width: 100%; text-align: center; }
/* All images in post prose — constrains oversize charts (e.g. legacy 7000-px Jupyter exports)
   regardless of whether they're wrapped in <figure>. */
.page-blog-post .prose img { max-width: 100%; height: auto; }
.page-blog-post .prose figure img { display: block; margin: 0 auto; }
.page-blog-post .prose figcaption {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-style: italic;
}

/* Report-style side-by-side: text keeps its prose-column left alignment;
   the image bumps out past the prose right edge into the right margin.
   Source order: text first, figure second.

       <div class="post-split">
         <p>body paragraph(s)</p>
         <figure><img …><figcaption>…</figcaption></figure>
       </div>

   Stacks on mobile. */
.page-blog-post .prose .post-split {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: var(--space-6);
	align-items: center;
	width: var(--width-lg);    /* 720px — wider than the 600px prose column */
	max-width: 100%;
	margin: var(--space-7) 0;  /* anchor LEFT edge to prose-left; spill RIGHT */
}
.page-blog-post .prose .post-split > * { margin: 0; }
.page-blog-post .prose .post-split > figure img { width: 100%; height: auto; }
@media (max-width: 880px) {
	.page-blog-post .prose .post-split {
		grid-template-columns: 1fr;
		width: auto;
		gap: var(--space-4);
	}
}

/* Pull-quote — distinctive treatment for any <blockquote> in the post body.
   Larger italic text, accent left border, generous spacing. Stands out. */
.page-blog-post .prose > blockquote {
	margin: var(--space-7) 0;
	padding: var(--space-2) var(--space-5);
	border-left: 4px solid var(--color-text-strong);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: 1.45;
	color: var(--color-text-strong);
}
.page-blog-post .prose > blockquote p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 var(--space-3);
}
.page-blog-post .prose > blockquote p:last-child { margin-bottom: 0; }

/* Tables in blog posts — keep base table styling but with a touch more
   breathing room and stronger header treatment for readability. */
.page-blog-post .prose table {
	margin: var(--space-6) auto;
	font-size: var(--text-base);
}
.page-blog-post .prose th {
	font-family: var(--font-accent);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: left;
	border-bottom: 2px solid var(--color-text-strong);
}
.page-blog-post .prose td,
.page-blog-post .prose th { padding: var(--space-2) var(--space-3); }

.post-footer-nav { margin-top: var(--space-5); padding-top: var(--space-4); font-size: var(--text-sm); max-width: var(--width-md); margin-left: auto; margin-right: auto; }

/* Author bio block at the end of a post body. */
.page-blog-post .post-author-bio {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	margin: var(--space-7) 0 0;
	padding: var(--space-4) 0 0;
	border-top: 3px solid var(--accent, var(--color-border-light));
}
.page-blog-post .post-author-bio img {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.page-blog-post .post-author-bio > div { flex: 1; min-width: 0; }
.page-blog-post .post-author-name {
	margin: 0 0 var(--space-1);
	font-family: var(--font-accent);
	font-size: var(--text-base);
	font-weight: 700;
}
.page-blog-post .post-author-text {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* Related posts block (post footer, before "All posts" link). */
.page-blog-post .post-related {
	max-width: var(--width-md);   /* match blog-post prose width (600px) so the cards align with the article body */
	margin: var(--space-7) auto 0;
	padding: 0 var(--space-3);
}
.page-blog-post .post-related > h2 { margin: 0 0 var(--space-4); }
.page-blog-post .post-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4);
}
.page-blog-post .post-related-item { margin: 0; }
.page-blog-post .post-related a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-top: 3px solid var(--accent, var(--color-border));
	overflow: hidden;
	transition: border-color var(--transition-fast);
}
.page-blog-post .post-related a:hover {
	border-color: var(--color-text-strong);
	border-top-color: var(--accent-strong, var(--accent));
}
.page-blog-post .post-related-thumb { overflow: hidden; background: var(--color-bg-highlight); }
.page-blog-post .post-related-thumb img { display: block; width: 100%; height: 100px; object-fit: cover; }
.page-blog-post .post-related-text { padding: var(--space-3); }
.page-blog-post .post-related-meta {
	margin: 0 0 var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.page-blog-post .post-related-title {
	margin: 0;
	font-family: var(--font-accent);
	font-size: var(--text-lg);   /* match blog-card-title (19px) — same role: post link card */
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-text-strong);
}

/* Category color injection: the .post-category labels gain the page accent
   color when inside the accent-X wrapper from post.html. */
.page-blog-post section[class*="accent-"] .post-category { color: var(--accent-strong, var(--accent, var(--color-text-muted))); }

/* "Browse by topic" — full card grid on /blog/, one per category. Each card
   links to /blog/category/<slug>/ generated by scripts/generate_category_pages.py. */
.page-blog .blog-categories { margin: var(--space-9) 0; }
.page-blog .blog-categories > h2 { margin-bottom: var(--space-5); }
.page-blog .blog-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}
.page-blog .blog-category-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}
.page-blog .blog-category-card:hover {
	background: var(--color-bg-highlight);
	border-color: var(--color-text-strong);
}
.page-blog .blog-category-card:hover h3 {
	color: var(--accent-strong, var(--accent));
}
.page-blog .blog-category-card-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.page-blog .blog-category-card-head h3 {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: var(--text-lg);
	letter-spacing: -0.01em;
	color: var(--color-text-strong);
	transition: color var(--transition-fast);
}
.page-blog .blog-category-card-count {
	font-family: var(--font);
	font-weight: 400;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1;
}
.page-blog .blog-category-card-desc {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.5;
}

/* Compact topic-nav strip — appears on /blog/page2+ and on category archive
   pages so a reader can jump topics without going back to /blog/ first. */
.blog-topic-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border-light);
}
.blog-topic-chip {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-accent);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-bottom: 2px solid var(--accent, var(--color-border));
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.blog-topic-chip:hover {
	background: var(--color-bg-highlight);
	color: var(--color-text-strong);
}
.blog-topic-chip.is-current {
	background: var(--accent-strong, var(--accent, var(--color-text-strong)));
	color: #fff;
	border-color: var(--accent-strong, var(--accent, var(--color-text-strong)));
}
.blog-topic-chip-count {
	font-family: var(--font);
	font-weight: 400;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.blog-topic-chip.is-current .blog-topic-chip-count {
	color: rgba(255, 255, 255, 0.7);
}

/* Pagination controls — bottom of /blog/ and /blog/category/<slug>/ pages. */
.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-7) auto 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-light);
}
.blog-pagination a,
.blog-pagination .blog-pagination-current,
.blog-pagination-disabled {
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-accent);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--color-text-strong);
	border: 1px solid var(--color-border);
}
.blog-pagination a:hover { border-color: var(--color-text-strong); }
.blog-pagination .blog-pagination-current {
	background: var(--color-text-strong);
	color: var(--color-surface);
}
.blog-pagination-disabled { color: var(--color-text-muted); }   /* dropped opacity 0.5 — disabled state communicated by muted color alone, opacity was making it fail AA */
.blog-pagination-pages { display: flex; align-items: center; gap: var(--space-1); }
.blog-pagination-ellipsis {
	color: var(--color-text-muted);
	padding: 0 var(--space-1);
	user-select: none;
}

/* ----- Notebook exports (nbs/) ----- */
/* Jupyter HTML exports live at /nbs/. Constrain to prose width so the
   cell text reads like an article rather than spanning full page width.
   Cells that contain wide outputs (tables, images) cap at this width;
   add overflow handling per-cell if needed. */
.page-notebook {
	& main > section { max-width: var(--width-lg); margin: 0 auto; padding: 0 var(--space-3); }
}


/* ===== Unlisted preview banner =====
   Shown at the top of a blog post when page.unlisted is true. The post
   itself is live at its real URL but hidden from blog index/feed/sitemap.
   Yellow strip so it's impossible to miss when previewing. */
.unlisted-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
	max-width: var(--width-page);
	margin: 0 auto var(--space-5);
	padding: var(--space-3) var(--space-4);
	background: #fff9d9;
	border: 2px solid #d4a300;
	color: #443300;
	font-family: var(--font);
	font-size: var(--text-sm);
	line-height: 1.5;
}
.unlisted-banner-label {
	font-family: var(--font-accent);
	font-weight: 700;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b4f00;
	padding: 2px 8px;
	background: #ffe98a;
	border: 1.5px solid #d4a300;
	flex-shrink: 0;
}
.unlisted-banner code {
	font-family: inherit;
	background: #fff;
	border: 1px solid #d4a300;
	padding: 1px 6px;
	font-size: 0.95em;
	color: #443300;
}
[data-theme="dark"] .unlisted-banner {
	background: #3a3000;
	border-color: #d4a300;
	color: #fff9d9;
}
[data-theme="dark"] .unlisted-banner-label {
	background: #6b4f00;
	color: #fff9d9;
}
[data-theme="dark"] .unlisted-banner code {
	background: #2a2400;
	color: #fff9d9;
}


/* ===== Post share row =====
   Sits between post content and author bio. Three buttons: X, LinkedIn,
   copy-link. Buttons reuse .tutorial-share class so the existing
   copy-link JS handler in nav.js picks up the new button automatically. */
.page-blog-post .post-share {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-6) 0 var(--space-5);
	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-muted);
	flex-wrap: wrap;
}
.page-blog-post .post-share-label {
	font-family: var(--font-accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--text-xs);
}
.page-blog-post .post-share .tutorial-share {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.page-blog-post .post-share .tutorial-share:hover { color: var(--color-text-strong); }
.page-blog-post .post-share .tutorial-share svg { width: 14px; height: 14px; }

/* ===== Newsletter signup =====
   Reusable subscribe form (Buttondown-backed). Two variants:
   - "default": panel with heading + deck + form + RSS alt link
   - "compact": single heading + inline form (post footer, sidebars) */
.newsletter-signup {
	background: var(--color-bg-highlight);
	border: 1px solid var(--color-border-light);
	border-top: 4px solid var(--color-card-red);
	padding: var(--space-5) var(--space-5);
	margin: var(--space-7) 0;
	color: var(--color-text);
}
.newsletter-signup--compact {
	padding: var(--space-4) var(--space-4);
	margin: var(--space-6) 0;
	border-top-width: 3px;
}
.newsletter-signup-heading {
	margin: 0 0 var(--space-2);
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: var(--text-3xl);   /* aligns with featured-report-title (26px) — both are "panel title" role */
	letter-spacing: -0.01em;
	color: var(--color-text-strong);
}
.newsletter-signup--compact .newsletter-signup-heading {
	font-size: var(--text-lg);   /* compact variant = card-title scale (19px) */
	margin-bottom: var(--space-3);
}
.newsletter-signup-deck {
	margin: 0 0 var(--space-4);
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text);
	max-width: 60ch;
}
.newsletter-form {
	display: flex;
	gap: var(--space-2);
	max-width: 480px;
	flex-wrap: wrap;
}
.newsletter-form-input {
	flex: 1 1 240px;
	min-width: 0;
	font-family: var(--font);
	font-size: var(--text-base);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-strong);
	transition: border-color var(--transition-fast);
}
.newsletter-form-input:focus {
	outline: none;
	border-color: var(--color-text-strong);
}
.newsletter-form-submit {
	font-family: var(--font);
	font-size: var(--text-base);
	font-weight: 700;
	padding: var(--space-2) var(--space-4);
	border: 1px solid #b62a2a;   /* fixed dark red — AA-safe with white text in both themes */
	background: #b62a2a;
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}
.newsletter-form-submit:hover {
	background: #8e1f1f;
	border-color: #8e1f1f;
}
.newsletter-signup-alt {
	margin: var(--space-3) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.newsletter-signup-alt a { color: var(--color-text); }

/* ===== Site Search ===== */
/* Nav icon button — uses the same styling as the theme toggle. */
.nav-search {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-1) var(--space-2);
	color: var(--color-nav-text);
}
.nav-search:hover { color: var(--color-link-hover); }

/* Modal dialog containing the Pagefind UI. Sharp corners + 2px border to
   match the design system. Pagefind's own styles get scoped overrides
   via --pagefind-ui-* custom properties below. */
.search-dialog {
	width: min(640px, 92vw);
	max-height: 80vh;
	margin: 8vh auto auto;
	padding: var(--space-5);
	border: 2px solid var(--color-text-strong);
	border-radius: 0;
	background: var(--color-surface);
	color: var(--color-text);
	overflow: auto;
}
.search-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}
.search-close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-3);
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: var(--space-1) var(--space-2);
}
.search-close:hover { color: var(--color-text-strong); }

/* Theme the Pagefind UI to match site tokens. Pagefind UI exposes a
   small set of CSS custom properties — overriding here keeps the lib
   files untouched and respects dark mode automatically. */
#search-ui {
	--pagefind-ui-scale: 0.9;
	--pagefind-ui-primary: var(--color-text-strong);
	--pagefind-ui-text: var(--color-text-strong);
	--pagefind-ui-background: var(--color-surface);
	--pagefind-ui-border: var(--color-border);
	--pagefind-ui-tag: var(--color-bg-highlight);
	--pagefind-ui-border-width: 2px;
	--pagefind-ui-border-radius: 0;
	--pagefind-ui-font: var(--font);
}
/* Belt + suspenders: make sure the input text itself is the strong color
   (some browsers apply default `color: #555` to inputs that wins over
   the Pagefind --pagefind-ui-text variable). */
#search-ui .pagefind-ui__search-input { color: var(--color-text-strong); }

/* ===== Print ===== */
@media print {
	header, footer, .skip-link, .announcement, .subfooter, .theme-toggle, .nav-search, .search-dialog,
	.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; }
}

/* ===== Dark-mode polish =====
   Slightly dim images so photos and charts read against the dark background
   instead of glaring out. Excluded: SVG icons + the brand logo. */
[data-theme="dark"] img:not([src$=".svg"]):not([data-no-dim]) {
  filter: brightness(0.92) contrast(0.96);
}

/* ===== View transitions =====
   Smooth fade between page navigations in supporting browsers
   (Chrome 126+, Safari 18.2+). Falls back to instant navigation elsewhere.
   Respects prefers-reduced-motion via the rule above. */
@view-transition {
  navigation: auto;
}