@layer base, components, utilities;

@layer base {
	:root {
		--bg: #0a0e14;
		--surface: #111820;
		--surface-2: #161f2b;
		--surface-3: #1a2435;
		--border: #253040;
		--border-soft: #1c2533;
		--border-glow: #2a3a50;
		--text: #e2e8f0;
		--text-dim: #94a3b8;
		--muted: #64748b;
		--dim: #475569;

		--c-tui: #8b5cf6;
		--c-tui-dim: #06b6d4;
		--c-harness: #22d3ee;
		--c-harness-dim: #0369a1;
		--c-cap: #06b6d4;
		--c-cap-dim: #6d28d9;
		--c-code: #34d399;
		--c-code-dim: #047857;
		--c-mem: #22d3ee;
		--c-mem-dim: #6d28d9;
		--c-ext: #64748b;
		--c-ext-dim: #334155;

		--mono:
			ui-monospace, "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo,
			Consolas, monospace;
		--sans:
			-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

		--chrome-h: 52px;
		--radius: 12px;
		--radius-lg: 16px;
		--transition-fast: 0.15s;
		--transition-med: 0.25s;
		--transition-slow: 0.4s;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html,
	body {
		height: 100%;
	}

	body {
		margin: 0;
		background: var(--bg);
		color: var(--text);
		font-family: var(--sans);
		overflow: hidden;
		-webkit-font-smoothing: antialiased;
		scrollbar-gutter: stable;
	}

	::-webkit-scrollbar {
		width: 10px;
	}
	::-webkit-scrollbar-thumb {
		background: var(--border);
		border-radius: 6px;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
}

@layer components {
	/* ===================== AMBIENT BACKGROUND ===================== */
	#bgfx {
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 0;
		background-color: var(--bg);
		background-image: radial-gradient(
			circle at 1px 1px,
			rgba(255, 255, 255, 0.03) 1px,
			transparent 1px
		);
		background-size: 32px 32px;
	}

	#bgfx::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(
				ellipse 60% 40% at 50% 0%,
				color-mix(in srgb, var(--c-harness) 6%, transparent),
				transparent
			),
			radial-gradient(
				ellipse 40% 30% at 80% 80%,
				color-mix(in srgb, var(--c-mem) 4%, transparent),
				transparent
			),
			radial-gradient(
				ellipse 40% 30% at 20% 90%,
				color-mix(in srgb, var(--c-tui) 3%, transparent),
				transparent
			);
		animation: ambientShift 20s ease-in-out infinite alternate;
	}

	@keyframes ambientShift {
		0% {
			opacity: 0.7;
			transform: scale(1);
		}
		50% {
			opacity: 1;
			transform: scale(1.03);
		}
		100% {
			opacity: 0.8;
			transform: scale(1);
		}
	}

	/* ===================== CHROME ===================== */
	#chrome {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		height: var(--chrome-h);
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 0 18px;
		background: color-mix(in srgb, var(--bg) 85%, transparent);
		border-bottom: 1px solid var(--border-soft);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	#chrome::after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			color-mix(in srgb, var(--c-harness) 30%, transparent),
			color-mix(in srgb, var(--c-mem) 20%, transparent),
			color-mix(in srgb, var(--c-tui) 15%, transparent),
			transparent
		);
		animation: chromeGlow 8s ease-in-out infinite alternate;
	}

	@keyframes chromeGlow {
		0% {
			opacity: 0.5;
		}
		100% {
			opacity: 1;
		}
	}

	.dots {
		display: flex;
		gap: 7px;

		span {
			width: 11px;
			height: 11px;
			border-radius: 50%;
			display: inline-block;
			transition: box-shadow var(--transition-fast);

			&:nth-child(1) {
				background: #f472b6;
			}
			&:nth-child(2) {
				background: var(--c-cap);
			}
			&:nth-child(3) {
				background: var(--c-code);
			}
		}
	}

	#chrome:hover .dots span:nth-child(1) {
		box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
	}
	#chrome:hover .dots span:nth-child(2) {
		box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
	}
	#chrome:hover .dots span:nth-child(3) {
		box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
	}

	#breadcrumb {
		font-family: var(--mono);
		font-size: 14px;
		color: var(--muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;

		.seg {
			cursor: pointer;
			color: var(--muted);
			transition: color var(--transition-fast);

			&:hover,
			&:focus-visible {
				color: var(--text);
			}
			&.current {
				color: var(--text);
				font-weight: 600;
				cursor: default;
			}
		}

		.sep {
			color: var(--dim);
			margin: 0 2px;
		}

		.cursor {
			display: inline-block;
			width: 8px;
			height: 16px;
			background: var(--c-harness);
			vertical-align: -3px;
			margin-left: 2px;
			animation: blink 1.1s steps(1) infinite;
			box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
		}
	}

	@keyframes blink {
		50% {
			opacity: 0;
		}
	}

	#hints {
		font-family: var(--mono);
		font-size: 11.5px;
		color: var(--dim);
		white-space: nowrap;

		kbd {
			font-family: var(--mono);
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 4px;
			padding: 1px 5px;
			color: var(--muted);
			font-size: 11px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		}
	}

	/* ===================== STAGE / VIEW ===================== */
	#stage {
		position: absolute;
		top: var(--chrome-h);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		overflow: hidden;
	}

	#view {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		padding: clamp(36px, 5vh, 48px) clamp(20px, 5vw, 64px) 90px;
	}

	/* ===================== TYPOGRAPHY ===================== */
	.eyebrow {
		font-family: var(--mono);
		font-size: 12.5px;
		letter-spacing: 0.04em;
		margin-bottom: 10px;
		opacity: 0.85;
	}

	h1.title {
		font-family: var(--mono);
		font-weight: 700;
		font-size: clamp(28px, 4vw, 44px);
		margin: 0 0 14px;
		letter-spacing: -0.02em;
		line-height: 1.15;
	}

	p.summary {
		font-family: var(--sans);
		font-size: 16px;
		line-height: 1.65;
		color: var(--text-dim);
		max-width: 760px;
		margin: 0 0 40px;
	}

	/* ===================== CARD GRID ===================== */
	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
		gap: 18px;
		max-width: 1180px;
	}

	.card {
		position: relative;
		text-align: left;
		background: var(--surface);
		border: 1.5px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 20px 20px 18px;
		cursor: pointer;
		font-family: var(--sans);
		color: var(--text);
		transition:
			border-color var(--transition-fast),
			transform var(--transition-fast),
			background var(--transition-fast),
			box-shadow var(--transition-fast);
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-height: 150px;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: var(--radius-lg);
			opacity: 0;
			transition: opacity var(--transition-fast);
			pointer-events: none;
		}

		&:hover,
		&:focus-visible {
			transform: translateY(-3px);
			background: var(--surface-2);
			box-shadow:
				0 8px 32px rgba(0, 0, 0, 0.3),
				0 0 0 1px color-mix(in srgb, var(--border-glow) 60%, transparent);
		}

		&:focus-visible {
			outline: 2px solid var(--text);
			outline-offset: 3px;
		}

		.kicker {
			font-family: var(--mono);
			font-size: 11.5px;
			font-weight: 600;
			opacity: 0.8;
		}

		.name {
			font-family: var(--mono);
			font-size: 19px;
			font-weight: 700;
			color: var(--text);
		}

		.desc {
			font-size: 13.5px;
			color: var(--muted);
			line-height: 1.5;
			flex: 1;
		}

		.enter {
			font-family: var(--mono);
			font-size: 11.5px;
			font-weight: 600;
			opacity: 0;
			transform: translateX(-4px);
			transition:
				opacity var(--transition-fast),
				transform var(--transition-fast);
		}

		&:hover .enter,
		&:focus-visible .enter {
			opacity: 1;
			transform: translateX(0);
		}

		.kbd-num {
			position: absolute;
			top: 14px;
			right: 14px;
			font-family: var(--mono);
			font-size: 11px;
			color: var(--dim);
			border: 1px solid var(--border);
			border-radius: 4px;
			padding: 1px 6px;
		}
	}

	/* ===================== HOME SVG DIAGRAM ===================== */
	#diagram-wrap {
		max-width: min(1400px, 100%);
	}

	#home-svg {
		width: 100%;
		height: auto;
		display: block;
		overflow: visible;

		.home-node,
		.home-node-sub {
			cursor: pointer;
		}

		.home-node .node-bg {
			transition:
				fill-opacity var(--transition-fast),
				stroke-width var(--transition-fast),
				filter var(--transition-fast);
		}

		.home-node:hover > .node-bg {
			stroke-width: 2.8;
			filter: drop-shadow(
				0 0 12px color-mix(in srgb, currentColor 30%, transparent)
			);
		}

		.home-node-sub .node-bg {
			transition: fill-opacity var(--transition-fast);
		}

		.home-node-sub:hover .node-bg {
			fill-opacity: 0.18;
		}
		.home-node-sub:hover circle {
			r: 4;
		}

		[data-nav]:focus-visible {
			outline: none;
		}
		[data-nav]:focus-visible > .node-bg {
			stroke-width: 3;
		}
	}

	/* ===================== SUB-ARCHITECTURE HUB + SPOKE ===================== */
	.subarch-wrap {
		position: relative;
		max-width: min(1300px, 100%);
		padding-top: 58px;
		container-type: inline-size;
	}

	.subarch-hub {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 7px;
		font-family: var(--mono);
		font-size: 11.5px;
		font-weight: 600;
		white-space: nowrap;

		.dot {
			width: 9px;
			height: 9px;
			border-radius: 50%;
			flex: none;
			box-shadow: 0 0 8px currentColor;
		}
	}

	.subarch-row {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
		justify-content: center;
		position: relative;
		z-index: 1;
		margin-top: 30px;
	}

	.subnode {
		flex: 1 1 min(190px, 100%);
		max-width: 230px;
		min-height: 112px;
		background: var(--surface);
		border: 1.6px solid;
		border-radius: 11px;
		padding: 16px 16px 14px;
		text-align: left;
		cursor: pointer;
		font-family: var(--sans);
		color: var(--text);
		transition:
			transform var(--transition-fast),
			background var(--transition-fast),
			box-shadow var(--transition-fast);
		display: flex;
		flex-direction: column;
		gap: 7px;

		&:hover,
		&:focus-visible {
			transform: translateY(-3px);
			background: var(--surface-2);
			box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
		}

		&:focus-visible {
			outline: 2px solid var(--text);
			outline-offset: 2px;
		}

		.sn-title {
			font-family: var(--mono);
			font-weight: 700;
			font-size: 14.5px;
		}

		.sn-desc {
			font-size: 11.5px;
			color: var(--muted);
			line-height: 1.45;
			flex: 1;
		}

		.sn-hint {
			font-family: var(--mono);
			font-size: 10px;
			opacity: 0;
			transition: opacity var(--transition-fast);
		}

		&:hover .sn-hint,
		&:focus-visible .sn-hint {
			opacity: 1;
		}
	}

	.connector-svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: visible;
		z-index: 0;
	}

	.connector-svg line {
		stroke-linecap: round;
		filter: drop-shadow(0 0 3px currentColor);
	}

	/* ===================== PIPELINE VIEW ===================== */
	.pipeline {
		max-width: 640px;
		position: relative;
	}

	.prow {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 16px;
		cursor: pointer;
		padding: 14px 16px;
		border: 1.5px solid var(--border);
		border-radius: 10px;
		background: var(--surface);
		margin-bottom: 14px;
		transition:
			border-color var(--transition-fast),
			background var(--transition-fast),
			transform var(--transition-fast),
			box-shadow var(--transition-fast);

		&:hover,
		&:focus-visible {
			background: var(--surface-2);
			transform: translateX(4px);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
		}

		&:focus-visible {
			outline: 2px solid var(--text);
			outline-offset: 2px;
		}

		.badge {
			flex: 0 0 auto;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 2px solid;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: var(--mono);
			font-weight: 700;
			font-size: 13px;
			background: var(--bg);
			transition:
				box-shadow var(--transition-fast),
				transform var(--transition-fast);
		}

		&:hover .badge {
			box-shadow: 0 0 10px currentColor;
			transform: scale(1.1);
		}
	}

	.prow .connector {
		position: absolute;
		left: 31px;
		top: 100%;
		width: 2px;
		height: 14px;
	}

	.diamond-shape {
		border-radius: 6px;
		transform: rotate(0deg);
	}

	.loop-note {
		font-family: var(--mono);
		font-size: 12px;
		color: var(--dim);
		font-style: italic;
		margin: 6px 0 18px 46px;
	}

	.loop-back-note {
		margin-top: -4px;
		margin-bottom: 22px;
		margin-left: 46px;
		font-family: var(--mono);
		font-size: 12px;
		color: var(--c-tui);
		font-style: italic;
		border-left: 2px dashed var(--c-tui);
		padding-left: 10px;
	}

	/* ===================== TOOLTIP ===================== */
	#tooltip {
		position: fixed;
		z-index: 60;
		width: min(340px, calc(100vw - 24px));
		background: var(--surface);
		border: 1.6px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 16px 18px 14px;
		box-shadow:
			0 16px 48px rgba(0, 0, 0, 0.6),
			0 0 0 1px color-mix(in srgb, var(--border-glow) 40%, transparent);
		visibility: hidden;
		opacity: 0;
		transform: scale(0.94) translateY(4px);
		transition:
			opacity 0.15s,
			transform 0.15s;

		&.show {
			opacity: 1;
			transform: scale(1) translateY(0);
		}

		.tt-kicker {
			font-family: var(--mono);
			font-size: 10px;
			font-weight: 600;
			color: color-mix(
				in srgb,
				var(--c-harness) 100%,
				var(--tt-accent, #22d3ee) 0%
			);
			margin-bottom: 5px;
		}

		.tt-title {
			font-family: var(--mono);
			font-size: 16.5px;
			font-weight: 700;
			color: var(--text);
			margin-bottom: 6px;
		}

		.tt-summary {
			font-size: 12px;
			color: var(--muted);
			line-height: 1.5;
			margin-bottom: 8px;
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			font-size: 11.8px;
			color: var(--text);
			line-height: 1.55;
			padding: 7px 0 7px 15px;
			position: relative;
			border-top: 1px solid var(--border-soft);

			&:before {
				content: "\203A";
				position: absolute;
				left: 0;
				top: 6px;
				color: color-mix(
					in srgb,
					var(--c-harness) 100%,
					var(--tt-accent, #22d3ee) 0%
				);
				font-weight: 700;
			}
		}

		.tt-related {
			margin-top: 10px;
			display: flex;
			gap: 6px;
			flex-wrap: wrap;
		}

		.tt-nav {
			margin-top: 12px;
			padding-top: 10px;
			border-top: 1px solid var(--border-soft);
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: var(--mono);
			font-size: 10px;
			color: var(--dim);

			.tt-dots {
				display: flex;
				gap: 4px;

				span {
					width: 5px;
					height: 5px;
					border-radius: 50%;
					background: var(--border);
					transition:
						background var(--transition-fast),
						box-shadow var(--transition-fast);
				}

				span.active {
					background: color-mix(
						in srgb,
						var(--c-harness) 100%,
						var(--tt-accent, #22d3ee) 0%
					);
					box-shadow: 0 0 4px currentColor;
				}
			}
		}
	}

	/* ===================== DETAIL (LEAF) VIEW ===================== */
	.detail {
		max-width: 720px;

		.bullets {
			margin: 22px 0 0;
			padding: 0;
			list-style: none;

			li {
				font-size: 14.5px;
				color: var(--text);
				line-height: 1.6;
				padding: 10px 0 10px 22px;
				position: relative;
				border-top: 1px solid var(--border-soft);

				&:before {
					content: "\203A";
					position: absolute;
					left: 0;
					top: 9px;
					color: color-mix(
						in srgb,
						var(--c-harness) 100%,
						var(--accent, transparent) 0%
					);
					font-weight: 700;
				}
			}
		}
	}

	.related {
		margin-top: 26px;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.chip {
		font-family: var(--mono);
		font-size: 11.5px;
		font-weight: 600;
		padding: 5px 11px;
		border-radius: 999px;
		border: 1px solid;
		background: transparent;
		transition:
			background var(--transition-fast),
			box-shadow var(--transition-fast);
		cursor: default;

		&:hover {
			background: color-mix(in srgb, currentColor 8%, transparent);
			box-shadow: 0 0 8px color-mix(in srgb, currentColor 20%, transparent);
		}
	}

	.dead-end {
		margin-top: 34px;
		font-family: var(--mono);
		font-size: 12px;
		color: var(--dim);
	}

	/* ===================== TRANSITION OVERLAY ===================== */
	#flip {
		position: fixed;
		z-index: 50;
		pointer-events: none;
		border-radius: var(--radius);
		border: 1.5px solid;
		opacity: 0;
		@starting-style {
			opacity: 0;
		}
	}

	/* ===================== BOOT SCREEN ===================== */
	#boot {
		position: fixed;
		inset: 0;
		z-index: 100;
		background: var(--bg);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--mono);
		color: var(--c-harness);
		font-size: 18px;
		cursor: pointer;

		@starting-style {
			opacity: 0;
		}

		.line {
			white-space: pre;
		}

		.skip {
			position: absolute;
			bottom: 34px;
			font-size: 12px;
			color: var(--dim);
		}
	}

	/* ===================== SEARCH OVERLAY ===================== */
	#search-overlay.show {
		display: flex;
		animation: searchFadeIn 0.15s ease-out;
	}

	@keyframes searchFadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	#search-overlay {
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(10, 14, 20, 0.85);
		display: none;
		align-items: flex-start;
		justify-content: center;
		padding-top: 18vh;
		backdrop-filter: blur(4px);
		opacity: 0;
		transition: opacity 0.15s ease-out;

		& > div {
			width: min(560px, 90vw);
			background: var(--surface);
			border: 1.5px solid var(--border);
			border-radius: 14px;
			overflow: hidden;
			box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
		}

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

		.search-icon {
			color: var(--muted);
			font-size: 16px;
		}

		.search-header kbd {
			font-family: var(--mono);
			background: var(--bg);
			border: 1px solid var(--border);
			border-radius: 4px;
			padding: 1px 6px;
			color: var(--dim);
			font-size: 10px;
		}

		#search-input {
			flex: 1;
			background: none;
			border: none;
			color: var(--text);
			font-family: var(--mono);
			font-size: 14px;
			outline: none;
			padding: 4px 0;

			&::placeholder {
				color: var(--dim);
			}
		}

		#search-results {
			max-height: 320px;
			overflow-y: auto;
			padding: 6px;

			.search-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 10px 14px;
				border-radius: 8px;
				cursor: pointer;
				transition: background var(--transition-fast);

				&:hover {
					background: var(--surface-2);
				}

				span {
					width: 8px;
					height: 8px;
					border-radius: 50%;
					flex: none;
				}

				.search-path {
					font-size: 11px;
					color: var(--dim);
					margin-top: 2px;
				}
			}
		}
	}

	/* ===================== HELP OVERLAY ===================== */
	#help {
		position: fixed;
		inset: 0;
		z-index: 80;
		background: color-mix(in srgb, var(--bg) 88%, transparent);
		display: none;
		align-items: center;
		justify-content: center;

		&.show {
			display: flex;
		}

		.panel {
			background: var(--surface);
			border: 1.5px solid var(--border);
			border-radius: 14px;
			padding: 28px 32px;
			font-family: var(--mono);
			font-size: 13.5px;
			line-height: 2;
			min-width: min(340px, calc(100vw - 40px));
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

			b {
				color: var(--text);
			}

			.row {
				display: flex;
				justify-content: space-between;
				gap: 30px;
				color: var(--muted);
			}

			kbd {
				background: var(--bg);
				border: 1px solid var(--border);
				border-radius: 4px;
				padding: 1px 7px;
				color: var(--text);
				font-family: var(--mono);
			}
		}
	}
}

@layer utilities {
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.001ms;
			transition-duration: 0.001ms;
		}
	}

	@container (max-width: 720px) {
		#view {
			padding: 36px 20px 80px;
		}
		#hints {
			display: none;
		}
	}

	@media (max-width: 720px) {
		#view {
			padding: 36px 20px 80px;
		}
		#hints {
			display: none;
		}
	}
}