/* ============================================================
   Digital Rust Spec Page — Normalized to Design System
   Uses the canonical token system from style.css
   ============================================================ */


/* ---- Reset & Base ---- */

*,
*::before,
*::after {
	box-sizing: border-box;
	font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual;
	font-variant-numeric: oldstyle-nums tabular-nums;
	hyphens: auto;
	font-kerning: normal;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--dr-font-body);
	font-weight: 500;
	color: var(--dr-text-primary);
	background-color: var(--dr-surface-base);
	line-height: 1.6;
}

/* ---- Non-Negotiable Atmospheric Overlays ---- */

.noise-overlay {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	opacity: 0.02;
	pointer-events: none;
	z-index: var(--dr-z-noise);
}

.scanline-overlay {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		var(--dr-scanline) 2px,
		var(--dr-scanline) 4px
	);
	pointer-events: none;
	z-index: calc(var(--dr-z-noise) - 1);
}

/* ---- Links — Design System Token Compliant ---- */

a {
	color: var(--dr-text-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--dr-transition-fast),
		text-decoration-thickness var(--dr-transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--dr-text-link-hover);
	text-decoration-thickness: 2px;
}

a:visited {
	color: var(--dr-text-link-visited);
}

a:active {
	color: var(--digital-rust);
}

::selection {
	background: var(--digital-rust);
	color: var(--dr-text-on-accent);
}

:focus-visible {
	outline: 2px solid var(--stack-overglow);
	outline-offset: 2px;
}

/* ---- Layout Shell ---- */

.site-shell {
	position: relative;
	z-index: var(--dr-z-content);
	display: grid;
	grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	padding: clamp(1.25rem, 3vw, 3.5rem);
	max-width: 1600px;
	margin: 0 auto;
}

/* ---- TOC Toggle (Mobile) ---- */

.toc-toggle {
	display: none;
	position: sticky;
	top: 0;
	z-index: 3;
	width: 100%;
	border: var(--dr-border);
	background: var(--dr-surface-elevated);
	color: var(--dr-text-primary);
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--dr-space-md) var(--dr-space-lg);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
	cursor: pointer;
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
}

.toc-toggle:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-glow-sm);
}

.toc-toggle:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

/* ---- TOC Panel ---- */

.toc-panel {
	position: sticky;
	top: clamp(1rem, 3vw, 2rem);
	align-self: start;
	height: fit-content;
}

.toc-panel__inner {
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius-lg);
	padding: var(--dr-space-lg);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
}

.toc-eyebrow {
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-size: var(--dr-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--corrupted-cache);
	margin: 0 0 var(--dr-space-xs);
}

.toc-panel__hint {
	font-size: var(--dr-text-sm);
	color: var(--corrupted-cache);
	margin-bottom: var(--dr-space-md);
}

#TOC {
	font-size: var(--dr-text-sm);
	max-height: calc(100vh - 6rem);
	overflow: auto;
	padding-right: var(--dr-space-sm);
}

#TOC ul {
	list-style: none;
	margin: 0;
	padding-left: 0.95rem;
}

#TOC>ul {
	padding-left: 0;
}

#TOC li {
	margin: 0.2rem 0;
}

#TOC a {
	display: inline-flex;
	width: 100%;
	gap: var(--dr-space-sm);
	align-items: center;
	padding: 0.2rem 0.25rem;
	border-left: 2px solid transparent;
	color: var(--dr-text-secondary);
	text-decoration: none;
	transition: color var(--dr-transition-fast),
		border-color var(--dr-transition-fast);
}

#TOC a:hover {
	color: var(--dr-text-primary);
	border-color: var(--dr-surface-highlight);
}

#TOC a.is-active {
	color: var(--dr-text-primary);
	border-color: var(--digital-rust);
}

/* ---- Main Spec Document ---- */

.spec-main {
	min-width: 0;
}

.spec-document {
	background: var(--dr-surface-base);
	border-radius: var(--dr-radius-lg);
	padding: clamp(var(--dr-space-lg), 3vw, var(--dr-space-xl));
	border: var(--dr-border);
	box-shadow: var(--dr-shadow-offset-lg),
		var(--dr-shadow-inner-highlight);
}

/* ---- Headings — Rajdhani, Design System Tokenized ---- */

.spec-document h1,
.spec-document h2,
.spec-document h3,
.spec-document h4,
.spec-document h5,
.spec-document h6 {
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.spec-document h1 {
	color: var(--fatal-error);
	font-size: clamp(var(--dr-text-2xl), 5vw, var(--dr-text-3xl));
	margin-top: 0;
	margin-bottom: var(--dr-space-sm);
}

.spec-document h2 {
	color: var(--fatal-error);
	font-size: var(--dr-text-xl);
	margin-top: var(--dr-space-xl);
	margin-bottom: var(--dr-space-md);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-left: var(--dr-border-thick);
	border-left-color: var(--digital-rust);
	padding-left: var(--dr-space-md);
}

.spec-document h3 {
	color: var(--copper-trace);
	font-size: var(--dr-text-lg);
	margin-top: var(--dr-space-xl);
	margin-bottom: var(--dr-space-sm);
}

.spec-document h4 {
	color: var(--copper-trace);
	font-size: var(--dr-text-lg);
	font-weight: 600;
	margin-top: var(--dr-space-lg);
	margin-bottom: var(--dr-space-sm);
}

.spec-document h5 {
	color: var(--dr-text-primary);
	font-size: var(--dr-text-lg);
	font-weight: 600;
	margin-top: var(--dr-space-lg);
	margin-bottom: var(--dr-space-sm);
}

.spec-document h6 {
	color: var(--dr-text-secondary);
	font-size: var(--dr-text-base);
	font-weight: 600;
	margin-top: var(--dr-space-md);
	margin-bottom: var(--dr-space-sm);
}

/* ---- Spec Lede ---- */

.spec-lede {
	font-size: var(--dr-text-lg);
	color: var(--copper-trace);
	max-width: 60ch;
	line-height: 1.45;
}

/* ---- Meta Bar ---- */

.spec-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dr-space-md);
	margin: var(--dr-space-lg) 0 var(--dr-space-xl);
	padding: var(--dr-space-md) var(--dr-space-lg);
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
}

.spec-meta__item {
	flex: 1 1 200px;
}

.spec-meta__label {
	display: block;
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-size: var(--dr-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--dr-text-primary);
	margin-bottom: var(--dr-space-xs);
}

.spec-meta__value {
	font-size: var(--dr-text-base);
	font-weight: 600;
}

.status-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--dr-space-sm);
	padding: var(--dr-space-xs) var(--dr-space-md);
	border-radius: var(--dr-radius);
	background: var(--dr-surface-secondary);
	border: var(--dr-border-subtle);
}

.status-chip::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--digital-rust);
	box-shadow: 0 0 12px var(--digital-rust);
}

/* ---- Buttons — Offset Shadow Pattern ---- */

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dr-space-sm);
	margin-left: auto;
}

.btn {
	border: 2px solid var(--dark-packet);
	border-radius: var(--dr-radius);
	padding: var(--dr-space-sm) var(--dr-space-lg);
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-weight: 600;
	font-size: var(--dr-text-sm);
	cursor: pointer;
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast),
		background-color var(--dr-transition-fast),
		border-color var(--dr-transition-fast),
		color var(--dr-transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--dr-space-sm);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
}

.btn-primary {
	background: var(--digital-rust);
	border-color: var(--digital-rust);
	color: var(--dr-text-on-accent);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
}

.btn-primary:hover {
	background: var(--amber-alert);
	border-color: var(--amber-alert);
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-glow-sm),
		var(--dr-shadow-inner-highlight);
}

.btn-primary:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

.btn-secondary {
	border-color: var(--dark-packet);
	color: var(--dr-text-secondary);
	background: transparent;
}

.btn-secondary:hover {
	border-color: var(--digital-rust);
	color: var(--dr-text-primary);
	background: var(--dr-surface-elevated);
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-inner-highlight);
}

.btn-secondary:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

/* ---- Live Demo ---- */

.live-demo {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--dr-space-lg);
	margin: var(--dr-space-xl) 0 var(--dr-space-2xl);
	padding: var(--dr-space-lg);
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
	border-radius: var(--dr-radius-lg);
	box-shadow: var(--dr-shadow-offset-md),
		var(--dr-shadow-inner-highlight);
}

.live-demo>div {
	min-width: 0;
}

.demo-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--dr-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--dr-text-secondary);
	margin-bottom: var(--dr-space-sm);
}

.demo-status {
	display: inline-flex;
	align-items: center;
	gap: var(--dr-space-sm);
}

.demo-status::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--memory-leek);
	box-shadow: 0 0 12px var(--memory-leek);
}

pre {
	margin: 0;
	padding: var(--dr-space-lg);
	background: var(--dr-surface-base);
	color: var(--memory-leek);
	border-radius: var(--dr-radius);
	overflow: auto;
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-sm);
	line-height: 1.5;
	border: var(--dr-border);
	border-left: var(--dr-border-thick);
	border-left-color: var(--stack-overglow);
	hyphens: none;
}

code {
	font-family: inherit;
	white-space: pre;
}

.demo-legend {
	display: flex;
	flex-direction: column;
	gap: var(--dr-space-sm);
}

.legend-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--dr-space-sm) var(--dr-space-md);
	font-size: var(--dr-text-sm);
	border: var(--dr-border-subtle);
	background: var(--dr-surface-secondary);
	border-radius: var(--dr-radius);
}

.legend-chip {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: var(--dr-radius-sm);
}

/* ---- Token Colors — Same as Main Site ---- */

.token-keyword {
	color: var(--fatal-error);
	font-weight: bold;
}

.token-function {
	color: var(--stack-overglow);
}

.token-type {
	color: var(--dead-thread);
}

.token-string {
	color: var(--memory-leek);
}

.token-constant {
	color: var(--bright-stack-overglow);
}

.token-number {
	color: var(--thermal-throttle);
}

.token-comment {
	color: var(--dim-thermal-throttle);
	font-style: italic;
}

.token-operator {
	color: var(--copper-trace);
}

/* ---- Tables — Design System Tokenized ---- */

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	background: var(--dr-surface-elevated);
	border: var(--dr-border);
}

th,
td {
	padding: var(--dr-space-sm) var(--dr-space-md);
	text-align: center;
	border-bottom: var(--dr-border-subtle);
}

th {
	background: var(--dr-surface-elevated);
	font-family: var(--dr-font-heading);
	font-variation-settings: "slnt" 0;
	font-weight: 700;
	font-size: var(--dr-text-xs);
	color: var(--copper-trace);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

tbody tr:last-child td {
	border-bottom: none;
}

/* ---- Color Lab (Palette Grids) ---- */

.table-scroll {
	overflow-x: auto;
	margin-top: var(--dr-space-md);
}

.color-lab {
	margin-bottom: var(--dr-space-xl);
}

.color-grid,
.ansi-grid {
	display: grid;
	gap: var(--dr-space-sm);
	margin: var(--dr-space-lg) 0 var(--dr-space-sm);
}

.color-grid {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.color-card {
	padding: var(--dr-space-sm);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	background: var(--dr-surface-secondary);
	display: flex;
	flex-direction: column;
	gap: var(--dr-space-sm);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
	cursor: pointer;
}

.color-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-glow-sm);
}

.color-card:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

.color-card__swatch {
	border-radius: var(--dr-radius);
	height: 80px;
	border: var(--dr-border-subtle);
}

.color-card__code {
	font-family: var(--dr-font-mono);
	font-size: var(--dr-text-xs);
	letter-spacing: 0.05em;
}

.ansi-grid {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ansi-chip {
	display: flex;
	align-items: center;
	gap: var(--dr-space-sm);
	padding: var(--dr-space-sm) var(--dr-space-md);
	background: var(--dr-surface-secondary);
	border: var(--dr-border);
	border-radius: var(--dr-radius);
	box-shadow: var(--dr-shadow-offset-sm),
		var(--dr-shadow-inner-highlight);
	transition: transform var(--dr-transition-fast),
		box-shadow var(--dr-transition-fast);
	cursor: pointer;
}

.ansi-chip:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--dr-shadow-hover-md),
		var(--dr-shadow-glow-sm);
}

.ansi-chip:active {
	transform: translate(2px, 2px);
	box-shadow: var(--dr-shadow-active);
}

.ansi-chip span {
	font-size: var(--dr-text-sm);
}

.ansi-chip .legend-chip {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--dr-radius-sm);
}

/* ---- Blockquotes — Left Border Accent ---- */

blockquote {
	margin: var(--dr-space-lg) 0;
	padding: var(--dr-space-sm) var(--dr-space-md);
	background: var(--core-meltdown-40);
	color: var(--dr-text-secondary);
	font-style: italic;
}

/* ---- Horizontal Rules — Dark Packet Lines ---- */

hr {
	border: none;
	border-top: var(--dr-border);
	margin: var(--dr-space-xl) auto;
	width: 50%;
}

/* ---- Lists ---- */

ul,
ol {
	padding-left: 1.5rem;
}

li {
	margin: 0.35rem 0;
}

/* ---- Scrollbar — Matches Main Site ---- */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--dark-packet);
	border-radius: 4px;
	border: 2px solid var(--dr-surface-secondary);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--digital-rust);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--dark-packet) transparent;
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
	.site-shell {
		grid-template-columns: 1fr;
	}

	.toc-toggle {
		display: block;
	}

	.toc-panel {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 320px;
		transform: translateX(-100%);
		transition: transform var(--dr-duration-normal) var(--dr-ease-out-expo);
		z-index: 4;
	}

	.toc-panel.is-open {
		transform: translateX(0);
	}

	.toc-panel__inner {
		height: 100%;
		border-radius: 0;
	}

	.live-demo {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.spec-meta {
		flex-direction: column;
	}

	.hero-actions {
		width: 100%;
		justify-content: flex-start;
	}

	pre {
		font-size: var(--dr-text-xs);
	}
}

/* ---- Reduced Motion ---- */

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

	.btn:hover,
	.btn:active,
	.color-card:hover,
	.color-card:active,
	.ansi-chip:hover,
	.ansi-chip:active {
		transform: none;
	}
}

/* ---- Print ---- */

@media print {
	body {
		background: white;
		color: black;
	}

	.site-shell,
	.spec-document {
		padding: 0;
		background: none;
		box-shadow: none;
		border: none;
	}

	.toc-panel,
	.toc-toggle,
	.live-demo,
	.color-grid,
	.ansi-grid,
	.noise-overlay,
	.scanline-overlay {
		display: none;
	}
}