style.css

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

/* ===== Font Face ===== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }

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

  /* Fonts */
  --font: 'Inter', sans-serif;
  --radius: 0;

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

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s 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 */
  --color-text-gray: #555555;
  --color-text-dark: #1e1e1e;
  --color-heading-gray: #696969;
  --color-text-muted: #666;
  --color-text-subtle: #888;

  /* Backgrounds */
  --color-canvas: #f5f5f5;
  --color-bg-white: #fff;
  --color-surface: #fff;
  --color-bg-header: #939393;
  --color-bg-alt: #f2f2f2;
  --color-bg-highlight: #F5F5F5;

  /* 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 — borders in both modes */
  --elevation-shadow: none;
  --elevation-border: 1.5px 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 tail */
  --color-card-tail-bg: #fff;

  /* Table */
  --color-table-hover: #f5f5f5;

  /* Component appearance */
  --accent-hr-opacity: 1;
  --blockquote-bg: transparent;
  --blockquote-padding: 8px 0 8px 16px;
  --blockquote-radius: 0;
  --banner-blend: multiply;
  --banner-opacity: 0.8;

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

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

  /* Card Header Colors */
  --color-card-blue: #3450B2;
  --color-card-green: #229a54;
  --color-card-red: #E04040;
  --color-card-orange: #ca5c00;
  --color-card-purple: #553581;
  --color-card-ltblue: #4A90C4;
  --color-card-teal: #2A8A8A;
  --color-card-brown: #8B6914;
}

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

  --color-text-gray: #c8c8c8;
  --color-text-dark: #efefef;
  --color-heading-gray: #b8b8b8;
  --color-text-muted: #bbb;
  --color-text-subtle: #999;

  --color-canvas: #121212;
  --color-bg-white: #121212;
  --color-surface: #1e1e1e;
  --color-bg-header: #424242;
  --color-bg-alt: #1a1a1a;
  --color-bg-highlight: #2e2e2e;

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

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

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

  --color-shadow: color-mix(in srgb, black 30%, transparent);
  --color-shadow-strong: color-mix(in srgb, black 40%, transparent);

  --elevation-shadow: none;
  --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-tail-bg: #282828;

  --color-table-hover: #222222;

  --accent-hr-opacity: 0.6;
  --blockquote-bg: var(--color-surface);
  --blockquote-padding: 12px 16px;
  --blockquote-radius: 0 var(--radius) var(--radius) 0;
  --banner-blend: screen;
  --banner-opacity: 0.5;

  --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-regexp: #4ade80;
  --syn-symbol: #f472b6;
  --syn-built-in: #f472b6;
  --syn-meta: #9ca3af;
  --syn-deletion-bg: none;
  --syn-addition-bg: none;
  --syn-deletion-color: #f87171;
  --syn-addition-color: #4ade80;

  --color-card-blue: #4e64e0;
  --color-card-green: #2fbf6a;
  --color-card-red: #e85a5a;
  --color-card-orange: #e87a20;
  --color-card-purple: #7a50b0;
  --color-card-ltblue: #6AAAD4;
  --color-card-teal: #3aadad;
  --color-card-brown: #a88030;
}
/* ===== Accent Colors ===== */
.accent-blue   { --accent: var(--color-card-blue); }
.accent-green  { --accent: var(--color-card-green); }
.accent-red    { --accent: var(--color-card-red); }
.accent-orange { --accent: var(--color-card-orange); }
.accent-purple { --accent: var(--color-card-purple); }
.accent-teal   { --accent: var(--color-card-teal); }
.accent-ltblue { --accent: var(--color-card-ltblue); }
.accent-brown  { --accent: var(--color-card-brown); }
/* ===== Base & Typography ===== */

/* Focus styles for keyboard navigation */
:is(a, button, select, input):focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}
.ul_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: 8px 16px;
  z-index: var(--z-dropdown);
  font-size: var(--text-sm);
  text-decoration: none;
  &:focus { top: 0; color: #fff; }
}

/* General document styling */
html{
	margin: 0 auto;
	max-width: 1080px;
	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-dark);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	}

main {
	margin: 0;
	padding: 8px 20px 20px;
	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-gray); line-height: 1.6; }
p { margin-bottom: 1.5em; }

hr {
	border: none;
	border-top: 1px dotted var(--color-text-subtle);
	margin: 24px auto;
	width: 90%;
}
/* Prose content wrapper — standard readable width */
.prose {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 12px;
	box-sizing: border-box;
	& h2 { font-size: var(--text-3xl); margin: 2.5rem 0 10px; }
	& h3 { font-size: var(--text-2xl); }
	& h4 { font-size: var(--text-lg); color: var(--color-heading-gray); margin: 32px 0 10px 0; }
	& ul, & ol { padding-left: 1.5em; margin: 0.5em 0 1.5em; }
	& li { margin-bottom: 0.4em; }
	& p code { font-weight: bold; }
	& img { max-width: 100%; }
}

/* Noscript fallback warning */
.noscript-warning { background: var(--color-bg-highlight); color: var(--color-text-gray); padding: 10px; border-radius: var(--radius); font-size: var(--text-sm); border: var(--elevation-border); }
:is(h1, h2, h3, h4) { font-family: var(--font); line-height: 1.25; text-wrap: balance; letter-spacing: -0.01em; }
h1 { margin: 10px 0; }
h2 { margin: 20px 0 10px; font-size: var(--text-4xl); }
h3 { margin: 2.5rem 0 10px; font-size: var(--text-3xl); }
h4 { margin: 32px 0 10px 0; font-size: var(--text-lg); color: var(--color-heading-gray); }

/* Nav card titles — h3 inside card headers styled at 32px */
.nav-card-head h3 {
	font-size: var(--text-4xl);
	font-weight: bold;
	margin: 0 0 10px;
	color: inherit;
}

.cb_update{font-family: var(--font); font-weight: bold;}

/* Styling for links */
a {
	&:link { text-decoration: none; color: var(--color-link); }
	&:visited { text-decoration: none; color: var(--color-link-visited); }
	&:hover { text-decoration: underline; color: var(--color-link-hover); }
}

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

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

/* Top Navigation Bar */
nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	background-color: var(--color-nav-bg);
	padding: 0;
	z-index: var(--z-nav);
	}
.ul_nav {
	list-style: none;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	z-index: var(--z-nav);
	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;
		color: var(--color-nav-text);
		text-align: center;
		padding: 14px 24px;
		text-decoration: none;
		transition: var(--transition-slow);
		font-family: var(--font);
		font-size: var(--text-lg);
		font-weight: 400;
		line-height: 22px;
	}
	& .icon-external { width: 0.7em; height: 0.7em; }
	& li a:hover { background-color: var(--color-nav-hover); }
	& li a.active { background-color: var(--color-accent-red); font-weight: 700; }
	& li.icon { display: none; }
	& .icon button {
		background: none;
		border: none;
		color: inherit;
		cursor: pointer;
		padding: 14px 16px;
		font-family: inherit;
		font-size: var(--text-base);
	}
	/* Dropdown */
	& ul {
		display: none;
		position: fixed;
		background: var(--color-nav-bg);
		border-radius: 0 0 var(--radius) var(--radius);
		padding: 0;
		overflow: hidden;
		& li { display: block; }
		& li a {
			display: block;
			padding: 10px 20px;
			color: var(--color-nav-text);
			text-align: left;
			font-size: var(--text-md);
			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; }
.nav-logo {
	fill: var(--color-nav-text);
	vertical-align: middle;
	margin-right: 5px;
	position: relative;
	top: -1px;
}
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/* Top Navigation - Responsive */
@media screen and (max-width:760px) {
	.ul_nav li:not(:first-child) {display: none;}
	.ul_nav li.icon {display: inline-block;}
	.ul_nav li:has(.theme-toggle) {
		display: inline-block !important;
		position: absolute;
		right: 42px;
		top: 13px;
	}
	.ul_nav li:has(.theme-toggle) .theme-toggle {
		padding: 6px 20px;
		font-size: var(--text-lg);
		line-height: 1;
	}
	.ul_nav li a {min-width: 0; }
	.ul_nav {width: 100%; background-color: var(--color-nav-bg); }
	.ul_nav .icon button {
		color: white;
		font-size: var(--text-3xl);
		padding: 4px 18px;
		line-height: 1;
	}
	/* --- Menu open: right-side panel --- */
	.ul_nav.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);
		box-shadow: var(--elevation-shadow);
		border-left: var(--elevation-border);
		z-index: var(--z-dropdown);
	}
	.ul_nav.responsive li:first-child {
		position: fixed;
		top: 0;
		left: 10px;
		z-index: var(--z-overlay);
		margin-right: 0;
		order: 0;
		& a { border-bottom: none; }
	}
	.ul_nav.responsive li.icon {
		position: fixed;
		right: 0;
		top: 7px;
		z-index: var(--z-overlay);
	}
	.ul_nav.responsive li:has(.theme-toggle) {
		display: inline-block !important;
		position: fixed;
		right: 42px;
		top: 13px;
		z-index: var(--z-overlay);
	}
	.ul_nav.responsive li {display: block;}
	.ul_nav.responsive li:nth-child(5) { order: 1; }
	.ul_nav.responsive li:nth-child(4) { order: 2; }
	.ul_nav.responsive li:nth-child(3) { order: 3; }
	.ul_nav.responsive li:nth-child(2) { order: 4; }
	.ul_nav.responsive 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);
	}
	.ul_nav.responsive li a:hover {
		background-color: var(--color-nav-hover);
	}
	.ul_nav.responsive li a.active {
		background-color: transparent;
		border-left: 3px solid var(--color-accent-red);
		padding-left: 17px;
		font-weight: 700;
	}
	.ul_nav.responsive ul.hidden {
		display: none !important;
	}
	.ul_nav.responsive .nav-arrow {
		display: none;
	}
	nav {
		height: 50px;
		padding: 0;
	}
	.nav-card-body {
		height: auto;
		min-height: 80px;
		overflow: visible;
	}
	.nav-card-body p {
		margin-bottom: 8px;
		font-size: var(--text-sm);
	}
	:is(.nav-card, .nav-card-muted) {
		min-height: auto;
	}
	main {
		padding: 6px 10px 12px;
	}
	footer {
		padding: 1em 10px 6px;
	}
}

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

/* Header styling */
header {
	margin: 0;
	padding: 14px 0;
	clear: left;
	text-align: center;
	background-color: var(--color-bg-header);
	color: white;
	& h1, & h3 { margin: 0; font-weight: 700; font-size: clamp(22px, 2vw + 16px, 30px); }
}

/* Footer styling */
footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	padding: 1.5em 20px 8px;
	position: relative;
	background: var(--color-surface);
	border: var(--elevation-border);
	border-top: none;
	&::before {
		content: ''; position: absolute; top: 0; left: 5%; width: 90%;
		border-top: 1px dotted var(--color-text-subtle);
	}
}
.footer_left {
	font-family: var(--font);
	font-style: italic; font-weight: 400; color: var(--color-text-gray);
	& p { font-size: var(--text-sm); }
}
.footer_right { text-align: right; }
/* Section formatting */
section{margin: 0; padding: 20px 0 0 0;}
article:not(.prose) > :first-child { margin-top: 0; }
/* Dataframe tables */
.dataframe {
	max-width: 600px; table-layout: fixed;
	&.wide { max-width: 100%; }
	& th, & td { text-align: right; padding: 4px 8px; }
	& th { border-bottom: 1px solid var(--color-border); }
	& tbody tr:hover { background-color: var(--color-table-hover); }
}
/* Card grid */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, 300px);
	gap: 24px; justify-content: center; padding: 12px 0; width: 100%;
	& a { text-decoration: none; }
	& > h2, & > h3 {
		grid-column: 1 / -1; display: table;
		margin: 10px auto 5px auto; padding-bottom: 8px;
		border-bottom: 3px solid var(--color-accent-red);
	}
	& > h2 { font-size: var(--text-3xl); font-weight: 700; }
	/* Flex layout — cards stretch to equal height with badges pinned to bottom */
	& :is(.nav-card, .nav-card-muted) { display: flex; flex-direction: column; }
	& .nav-card-body { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 125px; }
	& .trail-badge { margin-top: auto; }
	@media (max-width: 680px) { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}

/* Trail difficulty badges */
.trail-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-family: var(--font);
	padding: 2px 8px;
	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);
}

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

/* Nav cards */
:is(.nav-card, .nav-card-muted) {
	box-shadow: var(--elevation-shadow);
	border: var(--elevation-border);
	text-align: center;
	text-decoration: none;
	min-height: 180px;
	transition: border-color var(--transition-normal);
	background-color: var(--color-card-tail-bg);
}
.nav-card-muted { opacity: 0.5; &:hover { opacity: 1; } }
.nav-card:hover {
	border-color: var(--color-text-subtle);
}
.nav-card-head { color: white; padding: 6px 6px 2px 6px; background-color: var(--accent); }
.nav-card-body {
	padding: 2px 10px 10px 10px; background-color: var(--color-card-tail-bg); height: 125px;
	& p { margin-top: 10px; margin-bottom: 0; font-size: var(--text-sm); }
}
.nav-card-banner {
	height: 30px; overflow: hidden;
	background-color: color-mix(in srgb, var(--accent) 25%, var(--color-bg-white));
}
.nav-card-banner img,
.page-strip-img {
	width: 100%;
	object-fit: cover;
	display: block;
	opacity: var(--banner-opacity);
	mix-blend-mode: var(--banner-blend);
}
.nav-card-banner img { height: 30px; }

.subfooter {
	max-width: 760px; margin: 36px auto 0 auto; padding: 20px 12px 0 12px;
	box-sizing: border-box; border-top: 1px solid var(--color-border-light);
	font-family: var(--font);
}
.subfooter-hub {
	font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 10px 0;
	& a { text-decoration: none; color: var(--color-text-muted); &:hover { text-decoration: underline; } }
}
.subfooter-siblings {
	display: flex; flex-wrap: wrap; gap: 6px;
	& a {
		display: inline-block; padding: 5px 12px;
		border: 1px solid var(--color-border-light); border-radius: var(--radius);
		font-size: var(--text-sm); text-decoration: none; color: var(--color-text-dark);
		transition: border-color var(--transition-fast), color var(--transition-fast);
		&:hover { border-color: var(--color-link); color: var(--color-link); }
		&.current {
			background: var(--accent-color, var(--color-card-blue));
			border-color: var(--accent-color, var(--color-card-blue));
			color: white; font-weight: 600; pointer-events: none;
		}
	}
}
.footer_right a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; min-height: 36px; padding: 6px; margin: 1px;
	text-decoration: none; font-size: var(--text-2xl); transition: var(--transition-slow);
	background-color: transparent; color: var(--color-accent-red); border-radius: var(--radius);
	&:hover { background-color: var(--color-accent-red); color: #fff; }
}

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

table {
	border-collapse: collapse;
	width: 100%;
	& th, & td { text-align: center; padding: 8px; font-size: var(--text-sm); }
	& td:first-child { font-weight: bold; text-align: left; }
	& tr:nth-child(even) { background-color: var(--color-bg-alt); }
	@media (max-width: 760px) {
		& th, & td { padding: 5px; font-size: var(--text-xs); }
	}
}

/* Chart Components */
.chart-container {
	--chart-ph: 14px;
	position: relative;
	width: 100%;
	margin: 1rem auto;
	background: var(--color-card-tail-bg);
	box-shadow: var(--elevation-shadow);
	border: var(--elevation-border);
}
.chart-header {
	color: white;
	padding: 8px var(--chart-ph) 7px;
	background-color: var(--accent);
	display: flex;
	justify-content: space-between;
	align-items: center;
	& .chart-title { margin: 0; font-size: var(--text-xl); font-weight: 600; font-family: var(--font); color: inherit; }
	& a, & button:not(.toggle-btn) { color: inherit; opacity: 0.7; font-size: var(--text-sm); }
	& a { text-decoration: none; }
	& button:not(.toggle-btn) { background: none; border: none; cursor: pointer; padding: 0; }
	& a:hover, & button:not(.toggle-btn):hover { opacity: 1; }
}
.chart-header-indicator {
	display: block;
	font-size: var(--text-xs);
	font-weight: 400;
	color: color-mix(in srgb, white 80%, transparent);
	margin: 1px 0 0 0;
	& strong { font-weight: 600; color: #fff; }
}
.chart-body {
	padding: 8px var(--chart-ph);
}
.chart-subtitle {
	display: block;
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-text-gray);
	margin: 0 8px 4px 0;
	flex: 1;
	min-width: 0;
}
.chart-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px var(--chart-ph) 9px;
}
.chart-filter {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
	& button {
		background: none;
		border: none;
		padding: 0;
		font: inherit;
		color: var(--color-link);
		cursor: pointer;
	}
	& button:hover { text-decoration: underline; }
}
.chart-legend {
	font-size: var(--text-xs);
	font-family: var(--font);
}
.chart-legend-item {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	color: var(--color-text-dark);
	&:hover { opacity: 0.8; }
	&.legend-off { opacity: 0.35; }
}
.chart-source {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-gray);
	text-align: right;
	margin: 0;
	font-style: italic;
}

.chart-compact { --chart-ph: 12px; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-logo {
	fill: var(--color-text-gray);
	opacity: 0.5;
}
.chart-footer-col { flex-direction: column; align-items: flex-start; }
.chart-download-link {
	display: inline-block;
	margin: 0;
	font-size: var(--text-xs);
	font-family: var(--font);
	color: var(--color-link);
	text-decoration: none;
	&:hover { text-decoration: underline; }
	&:visited { color: var(--color-link-visited); }
}
.chart-nav-btn {
	background: none;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 6px 10px;
	font-size: var(--text-xs);
	line-height: 1;
	transition: border-color var(--transition-normal), color var(--transition-normal);
	&:hover {
		border-color: var(--color-card-blue);
		color: var(--color-card-blue);
	}
}

/* Collapsible Details */
.details-section {
	margin: 0.75rem auto;
	& summary {
		font-size: var(--text-md); font-weight: 600; cursor: pointer;
		padding: 6px 0; color: var(--color-text-dark);
		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: 8px; transition: transform var(--transition-fast);
		}
		&.section-summary { font-size: 21px; }
	}
	&[open] summary::before { transform: rotate(90deg); }
	&[open] summary { margin-bottom: 8px; }
	& p, & li { line-height: 1.5; }
	& h3 { margin: 24px 0 12px; }
	& ol, & ul { margin-bottom: 0; }
}

/* Toggle button group — segmented pill control */
.toggle-group { display: flex; }
.toggle-btn {
	padding: 3px 10px;
	border: 1px solid var(--color-border-light);
	font-family: var(--font);
	background: var(--color-bg-white);
	cursor: pointer;
	color: var(--color-text-muted);
	transition: all var(--transition-fast);
	font-size: var(--text-xs);
	font-weight: 600;
	&:first-child { border-radius: var(--radius) 0 0 var(--radius); }
	&:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
	&:not(:first-child) { border-left: none; }
	&:hover { background: var(--color-bg-highlight); }
	&.active { color: white; }
}
/* Accent rules — decorative page-colored HRs */
.hr-accent, .section-bar {
	border: none;
	background-color: var(--accent);
	opacity: var(--accent-hr-opacity);
}
.hr-accent { width: 120px; height: 5px; margin: 2rem auto; }

/* Callout — border-left accent block for intros, notes, emphasis */
/* Tutorial metadata bar */
.tutorial-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--text-xs);
	font-family: var(--font);
	color: var(--color-text-subtle);
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.tutorial-meta span { white-space: nowrap; }
.tutorial-meta .meta-sep { color: var(--color-border-light); }
.tutorial-meta button {
	background: none;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	padding: 2px 8px;
	cursor: pointer;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-family: var(--font);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: var(--transition-fast);
}
.tutorial-meta button:hover {
	color: var(--color-text-dark);
	border-color: var(--color-text-muted);
}
.tutorial-meta button svg { width: 12px; height: 12px; }

.callout {
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--color-text-dark);
	max-width: 760px;
	margin: 0 auto 1.5rem auto;
	padding: 6px 12px 6px 14px;
	box-sizing: border-box;
	border-left: 5px solid var(--accent);
}

/* Accent blockquote */
.blockquote-accent {
	margin: 1.5rem 0;
	padding: var(--blockquote-padding);
	font-size: var(--text-base);
	font-style: italic;
	color: var(--color-text-dark);
	line-height: 1.55;
	border-left: 5px solid var(--accent);
	background: var(--blockquote-bg);
	border-radius: var(--blockquote-radius);
	& cite { display: block; font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; }
}

/* Inline accent highlight */
.highlight-accent {
	color: #fff;
	padding: 1px 6px;
	border-radius: var(--radius);
	font-weight: 600;
	white-space: nowrap;
	background: var(--accent);
}
/* Info box — lightweight highlighted container for metadata, notes, stats */
.info-box {
	background: var(--color-bg-highlight);
	padding: 12px 16px;
	border-radius: var(--radius);
	border: var(--elevation-border);
}

/* ===== 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-regexp); }
.hljs-symbol, .hljs-bullet { color: var(--syn-symbol); }
.hljs-built_in { color: var(--syn-built-in); }
.hljs-meta { color: var(--syn-meta); font-weight: bold; }
.hljs-deletion { color: var(--syn-deletion-color); background: var(--syn-deletion-bg); }
.hljs-addition { color: var(--syn-addition-color); background: var(--syn-addition-bg); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

/* Theme toggle button */
.theme-toggle {
  background: none; border: none; color: var(--color-nav-text);
  cursor: pointer; padding: 14px 10px; margin-right: 16px;
  font-size: var(--text-md); line-height: 1; opacity: 0.7; transition: opacity var(--transition-normal);
  &:hover { opacity: 1; }
}
/* ===== Color Variants ===== */

.section-bar { width: 90%; height: 5px; margin: 30px auto 10px auto; }

/* Step labels — lightweight code step markers with colored underline */
.step-label {
	font-family: var(--font);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-heading-gray);
	margin: 24px 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--accent);
}

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

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