/* ============================================================
   Design tokens
   ============================================================ */
:root {
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--accent: #4f46e5;
	--accent-contrast: #ffffff;
	--accent-soft: #eef2ff;

	--step-1: #2563eb;
	--step-2: #0f766e;
	--step-3: #c2410c;
	--step-4: #7c3aed;
	--step-ink: #ffffff;

	/* Description levels (Theoretical framework page): pigment tones, one per kind
	   of information, so a level keeps its colour across every framework. */
	--lvl-form: #3e5a7a;
	--lvl-generic: #5a7a4e;
	--lvl-specific: #a0731c;
	--lvl-abstract: #9e3b3b;
	--lvl-catalogue: #6e5a48;

	--bg: #ffffff;
	--bg-raised: #ffffff;
	--bg-sunken: #f8f9fb;
	--border: #e5e7eb;
	--border-strong: #d1d5db;

	--text: #111827;
	--text-muted: #6b7280;
	--text-faint: #9ca3af;

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;

	--topbar-h: 60px;
	--sidebar-w: 272px;
	--sidebar-w-narrow: 200px;
	--toc-w: 220px;
	--content-max: 760px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--accent: #818cf8;
		--accent-contrast: #111827;
		--accent-soft: rgba(129, 140, 248, 0.14);

		--step-1: #60a5fa;
		--step-2: #2dd4bf;
		--step-3: #fb923c;
		--step-4: #a78bfa;
		--step-ink: #0f1115;

		--lvl-form: #93acc9;
		--lvl-generic: #9dbb8e;
		--lvl-specific: #d8ae5e;
		--lvl-abstract: #d98b84;
		--lvl-catalogue: #b8a48f;

		--bg: #0f1115;
		--bg-raised: #15171d;
		--bg-sunken: #0b0c10;
		--border: #262932;
		--border-strong: #343842;

		--text: #e5e7eb;
		--text-muted: #9aa0ab;
		--text-faint: #6b7280;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
	}
}

:root[data-theme="dark"] {
	--accent: #818cf8;
	--accent-contrast: #111827;
	--accent-soft: rgba(129, 140, 248, 0.14);

	--step-1: #60a5fa;
	--step-2: #2dd4bf;
	--step-3: #fb923c;
	--step-4: #a78bfa;
	--step-ink: #0f1115;

	--lvl-form: #93acc9;
	--lvl-generic: #9dbb8e;
	--lvl-specific: #d8ae5e;
	--lvl-abstract: #d98b84;
	--lvl-catalogue: #b8a48f;

	--bg: #0f1115;
	--bg-raised: #15171d;
	--bg-sunken: #0b0c10;
	--border: #262932;
	--border-strong: #343842;

	--text: #e5e7eb;
	--text-muted: #9aa0ab;
	--text-faint: #6b7280;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Reset & base
   ============================================================ */
* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word; /* long words (e.g. headings) wrap instead of overflowing narrow columns */
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

kbd {
	font-family: var(--font-mono);
	font-size: 11px;
	border: 1px solid var(--border-strong);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--text-muted);
	background: var(--bg-sunken);
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	background: var(--bg-raised);
	border-bottom: 1px solid var(--border);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 1;
	min-width: 0;
}

.brand-mark {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--accent), var(--accent) 60%, transparent);
	background-color: var(--accent);
	flex-shrink: 0;
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.brand-text strong,
.brand-text small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brand-text strong {
	font-size: 14px;
	font-weight: 600;
}

.brand-text small {
	font-size: 11.5px;
	color: var(--text-muted);
}

@media (max-width: 640px) {
	.brand-text small {
		display: none;
	}
}

.search-trigger {
	flex: 1;
	min-width: 0;
	max-width: 420px;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-sunken);
	color: var(--text-muted);
	font-size: 13.5px;
}

.search-trigger:hover {
	border-color: var(--border-strong);
}

.search-label {
	flex: 1;
	text-align: left;
}

.icon-btn {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.icon-btn:hover {
	background: var(--bg-sunken);
}

/* Minimal inline icon glyphs (no external icon dependency for chrome UI) */
.search-icon::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
}
.search-icon::after {
	content: "";
	position: absolute;
}
#theme-btn::before {
	content: "◐";
	font-size: 16px;
}

/* ============================================================
   Layout
   ============================================================ */
.layout {
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
}

@media (max-width: 1200px) {
	.layout {
		grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	}
	.toc {
		display: none;
	}
}

@media (max-width: 860px) {
	.layout {
		grid-template-columns: var(--sidebar-w-narrow) minmax(0, 1fr);
	}
	.search-label {
		display: none;
	}
	.search-trigger kbd {
		display: none;
	}
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
	background: var(--bg-sunken);
	border-right: 1px solid var(--border);
	height: calc(100vh - var(--topbar-h));
	position: sticky;
	top: var(--topbar-h);
	overflow-y: auto;
}

.sidebar-inner {
	padding: 20px 12px 40px;
}

@media (max-width: 860px) {
	.sidebar-inner {
		padding: 16px 8px 32px;
	}
	.nav-link {
		font-size: 13px;
		padding: 7px 8px;
	}
}

.nav-group {
	margin-bottom: 4px;
}

.nav-group-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding: 14px 10px 6px;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.4;
}

.nav-link:hover {
	background: var(--bg-raised);
	color: var(--text);
}

.nav-link.active {
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}

a.nav-group-label {
	border-radius: var(--radius-sm);
}

a.nav-group-label:hover,
a.nav-group-label.active {
	color: var(--accent);
}

.step-badge {
	flex-shrink: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-contrast);
	background: var(--step-color, var(--text-faint));
}

.step-1 { --step-color: var(--accent); }
.step-2 { --step-color: var(--accent); }
.step-3 { --step-color: var(--accent); }
.step-4 { --step-color: var(--accent); }

.nav-children {
	margin-left: 14px;
	padding-left: 10px;
	border-left: 1px solid var(--border);
}

.nav-toggle {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--text-faint);
	transition: transform 0.15s ease;
}

.nav-toggle.collapsed {
	transform: rotate(-90deg);
}

.nav-children.collapsed {
	display: none;
}

/* ============================================================
   Main
   ============================================================ */
.main {
	min-width: 0;
	padding: 28px 40px 80px;
}

@media (max-width: 600px) {
	.main {
		padding: 20px 16px 60px;
	}
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--text-muted);
	margin-bottom: 18px;
}

.breadcrumbs a:hover {
	color: var(--text);
}

.breadcrumbs .sep {
	color: var(--text-faint);
}

.breadcrumbs .current {
	color: var(--text);
}

.page-head {
	max-width: var(--content-max);
	margin-bottom: 24px;
}

.page-head .step-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--step-color, var(--accent));
	background: color-mix(in srgb, var(--step-color, var(--accent)) 14%, transparent);
	padding: 3px 9px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.page-head h1 {
	margin: 0 0 8px;
	font-size: 28px;
	letter-spacing: -0.01em;
}

.page-head .summary {
	margin: 0;
	color: var(--text-muted);
	font-size: 15px;
}

.page-head .chips {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.chip {
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--text-muted);
}

.content {
	max-width: var(--content-max);
	overflow-x: auto; /* wide elements (e.g. tables) scroll here instead of the whole page */
}

/* ============================================================
   Section card grid (overview pages)
   ============================================================ */
.children {
	max-width: var(--content-max);
	margin-top: 8px;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 14px;
	margin-top: 16px;
}

.card {
	display: block;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-raised);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.card-icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent);
	margin-bottom: 10px;
	font-size: 15px;
}

.card h3 {
	margin: 0 0 4px;
	font-size: 14.5px;
}

.card p {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
}

/* Stepper for Part II overview */
.stepper {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 20px;
	max-width: var(--content-max);
}

.step {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}

.step:last-child {
	border-bottom: none;
}

.step-index {
	flex-shrink: 0;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	color: var(--text-muted);
}

.step-index[class*="step-"] {
	background: var(--step-color);
	border-color: var(--step-color);
	color: var(--accent-contrast);
}

.step-body {
	min-width: 0;
}

.step-body h3 {
	margin: 0 0 2px;
	font-size: 14.5px;
}

.step-body p {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
}

.step-body a {
	color: var(--accent);
	font-weight: 600;
	font-size: 13px;
}

/* ============================================================
   Pager (prev/next)
   ============================================================ */
.pager {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	max-width: var(--content-max);
}

.pager-link {
	flex: 1;
	min-width: 0;
	max-width: 48%;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.pager-link:hover {
	border-color: var(--border-strong);
	background: var(--bg-sunken);
}

.pager-link.next {
	text-align: right;
	margin-left: auto;
}

.pager-direction {
	display: block;
	font-size: 11.5px;
	color: var(--text-faint);
	margin-bottom: 2px;
}

.pager-title {
	font-size: 13.5px;
	font-weight: 600;
	overflow-wrap: break-word;
}

/* ============================================================
   Table of contents (right rail)
   ============================================================ */
.toc {
	padding: 28px 20px;
	position: sticky;
	top: var(--topbar-h);
	height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
	font-size: 12.5px;
}

.toc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 10px;
}

.toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--border);
}

.toc li a {
	display: block;
	padding: 5px 0 5px 14px;
	color: var(--text-muted);
	border-left: 2px solid transparent;
	margin-left: -1px;
}

.toc li.toc-h3 a {
	padding-left: 24px;
}

.toc li a:hover {
	color: var(--text);
}

.toc li a.active {
	color: var(--accent);
	border-left-color: var(--accent);
	font-weight: 600;
}

/* ============================================================
   Search dialog
   ============================================================ */
.search-dialog {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(15, 17, 21, 0.35);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 12vh;
}

.search-dialog[hidden] {
	display: none;
}

.search-panel {
	width: min(560px, 90vw);
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.search-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}

.search-field input {
	flex: 1;
	border: none;
	outline: none;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: 15px;
}

.search-results {
	list-style: none;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
}

.search-results li a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
}

.search-results li a:hover,
.search-results li a.active {
	background: var(--bg-sunken);
}

.search-result-title {
	font-size: 13.5px;
	font-weight: 600;
}

.search-result-path {
	font-size: 11.5px;
	color: var(--text-faint);
}

.search-result-excerpt {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 2px;
}

.search-empty {
	padding: 24px 16px;
	text-align: center;
	color: var(--text-muted);
	font-size: 13.5px;
}

/* ============================================================
   Not found
   ============================================================ */
.not-found {
	max-width: var(--content-max);
	padding: 40px 0;
}

.not-found a {
	color: var(--accent);
	font-weight: 600;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	border-top: 1px solid var(--border);
	background: var(--bg-sunken);
}

.footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px 40px;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 12.5px;
	color: var(--text-muted);
}

.footer-title {
	font-weight: 600;
	color: var(--text);
}

.footer-links {
	display: flex;
	gap: 16px;
	margin-right: auto;
}

.footer-links a:hover,
.footer-top:hover {
	color: var(--text);
}

.footer-top {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.footer-inner {
		padding: 16px;
		flex-wrap: wrap;
	}
	.footer-links {
		order: 3;
		width: 100%;
		margin-right: 0;
	}
}