:root {
	--brand-carbon: #101616;
	--brand-carbon-soft: #202a29;
	--brand-signal: #c73525;
	--brand-signal-hover: #a92a1d;
	--brand-tide: #136e75;
	--brand-ember: #8e3d22;
	--brand-page: #f4f7f5;
	--brand-surface: #ffffff;
	--brand-surface-alt: #eaefeb;
	--brand-border-soft: #d4dcd8;
	--brand-border-strong: #7f8b86;
	--brand-text-muted: #5f6a67;

	/* Semantic color roles. */
	--color-text-primary: var(--brand-carbon);
	--color-text-secondary: var(--brand-text-muted);
	--color-text-inverse: var(--brand-surface);
	--color-text-link: var(--brand-tide);
	--color-page: var(--brand-page);
	--color-surface: var(--brand-surface);
	--color-surface-subtle: var(--brand-surface-alt);
	--color-surface-inverse: var(--brand-carbon);
	--color-border: var(--brand-border-soft);
	--color-border-strong: var(--brand-border-strong);
	--color-action-primary: var(--brand-signal);
	--color-action-primary-hover: var(--brand-signal-hover);
	--color-action-secondary: var(--brand-carbon);
	--color-action-tertiary: var(--brand-tide);
	--color-action-destructive: var(--brand-signal-hover);
	--color-focus: var(--brand-tide);
	--color-selected: rgba(19, 110, 117, 0.1);
	--color-disabled-bg: var(--brand-surface-alt);
	--color-disabled-text: var(--brand-text-muted);
	--color-status-success: var(--brand-tide);
	--color-status-success-bg: rgba(19, 110, 117, 0.08);
	--color-status-warning: var(--brand-ember);
	--color-status-warning-bg: rgba(142, 61, 34, 0.09);
	--color-status-error: var(--brand-signal-hover);
	--color-status-error-bg: rgba(169, 42, 29, 0.08);
	--color-status-info: var(--brand-tide);
	--color-status-info-bg: rgba(19, 110, 117, 0.08);

	/* Spacing and shape. */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 18px;
	--radius-round: 999px;
	--shadow-none: none;
	--shadow-sm: 0 1px 2px rgba(16, 22, 22, 0.08);
	--shadow-md: 0 12px 34px rgba(16, 22, 22, 0.1);
	--shadow-lg: 0 24px 70px rgba(16, 22, 22, 0.16);

	/* Type. */
	--font-display: 'Manrope', 'Avenir Next', Arial, sans-serif;
	--font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
	--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
	--type-display-xl: clamp(3.25rem, 7vw, 7.25rem);
	--type-display-lg: clamp(2.75rem, 5vw, 5.25rem);
	--type-display-md: clamp(2.25rem, 3.5vw, 3.75rem);
	--type-h1: clamp(2.25rem, 4vw, 3.5rem);
	--type-h2: clamp(1.75rem, 3vw, 2.75rem);
	--type-h3: clamp(1.25rem, 2vw, 1.625rem);
	--type-body-lg: 1.125rem;
	--type-body: 1rem;
	--type-body-sm: 0.875rem;
	--type-label: 0.8125rem;
	--type-caption: 0.75rem;
	--type-metadata: 0.6875rem;
	--leading-display: 0.98;
	--leading-heading: 1.12;
	--leading-body: 1.55;
	--leading-reading: 1.7;
	--tracking-display: -0.04em;
	--tracking-heading: -0.025em;
	--tracking-label: 0;
	--tracking-metadata: 0.1em;

	/* Layout. Breakpoints are documented tokens; CSS media queries use their literal values. */
	--container-reading: 720px;
	--container-default: 1160px;
	--container-wide: 1320px;
	--gutter: clamp(16px, 4vw, 48px);
	--section-space: clamp(72px, 10vw, 136px);
	--product-space: clamp(24px, 4vw, 54px);
	--breakpoint-mobile: 480px;
	--breakpoint-tablet: 768px;
	--breakpoint-laptop: 1024px;
	--breakpoint-wide: 1440px;

	/* Layers and motion. */
	--layer-base: 0;
	--layer-raised: 10;
	--layer-sticky: 20;
	--layer-overlay: 40;
	--layer-dialog: 60;
	--duration-fast: 120ms;
	--duration-standard: 180ms;
	--duration-slow: 420ms;
	--duration-trajectory: 900ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Compatibility aliases for the current application surfaces. */
	--ogh-ink: var(--brand-carbon);
	--ogh-ink-soft: var(--brand-carbon-soft);
	--ogh-paper: var(--brand-page);
	--ogh-surface: var(--brand-surface);
	--ogh-surface-alt: var(--brand-surface-alt);
	--ogh-line: var(--brand-border-soft);
	--ogh-line-strong: var(--brand-border-strong);
	--ogh-muted: var(--brand-text-muted);
	--ogh-signal: var(--brand-signal);
	--ogh-signal-dark: var(--brand-signal-hover);
	--ogh-teal: var(--brand-tide);
	--ogh-cobalt: var(--brand-tide);
	--ogh-success: var(--brand-tide);
	--ogh-warning: var(--brand-ember);
	--ogh-danger: var(--brand-signal-hover);
	--ogh-radius-sm: var(--radius-sm);
	--ogh-radius-md: var(--radius-md);
	--ogh-radius-lg: var(--radius-lg);
	--ogh-shadow-sm: var(--shadow-sm);
	--ogh-shadow-md: var(--shadow-md);
	--ogh-shadow-lg: var(--shadow-lg);
	--ogh-display: var(--font-display);
	--ogh-ui: var(--font-body);
	--ogh-body: var(--font-body);
	--ogh-mono: var(--font-mono);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--brand-page);
	color: var(--brand-carbon);
	font-family: var(--ogh-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid rgba(19, 110, 117, 0.3);
	outline-offset: 3px;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled,
[aria-disabled='true'] {
	opacity: 0.58;
	cursor: not-allowed;
}

a {
	color: inherit;
}

svg,
img {
	display: block;
	max-width: 100%;
}

.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	font-family: var(--ogh-display);
	font-size: 17px;
	font-weight: 560;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
}

.brand-lockup strong {
	font-weight: 780;
}

.brand-lockup img {
	width: 35px;
	height: 35px;
}

.brand-lockup.compact img {
	width: 29px;
	height: 29px;
}

.eyebrow {
	margin: 0 0 12px;
	color: var(--brand-tide);
	font-family: var(--ogh-ui);
	font-size: 12px;
	font-weight: 720;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.button,
.btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--ogh-radius-md);
	padding: 10px 16px;
	background: var(--brand-signal);
	color: #fff;
	font-family: var(--ogh-ui);
	font-size: 14px;
	font-weight: 720;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.button:hover,
.btn:hover {
	background: var(--brand-signal-hover);
}

.button:active,
.btn:active {
	transform: translateY(1px);
}

.button.secondary,
.btn.ghost {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.button.secondary:hover,
.btn.ghost:hover {
	border-color: var(--brand-carbon);
	background: rgba(16, 22, 22, 0.06);
}

.button.dark {
	background: var(--brand-carbon);
	color: #fff;
}

.button.dark:hover {
	background: var(--brand-carbon-soft);
}

.button.tertiary,
.btn.tertiary {
	border-color: transparent;
	background: transparent;
	color: var(--color-action-tertiary);
}

.button.tertiary:hover,
.btn.tertiary:hover {
	background: var(--color-selected);
}

.button.destructive,
.btn.destructive {
	background: var(--color-action-destructive);
	color: var(--color-text-inverse);
}

.button:disabled,
.btn:disabled,
.button[aria-disabled='true'],
.btn[aria-disabled='true'] {
	border-color: var(--color-border);
	background: var(--color-disabled-bg);
	color: var(--color-disabled-text);
	transform: none;
}

.button svg,
.btn svg {
	width: 17px;
	height: 17px;
	stroke-width: 2;
}

.icon-button {
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 1px solid var(--brand-border-soft);
	border-radius: var(--ogh-radius-md);
	background: var(--brand-surface);
	color: var(--brand-carbon);
	cursor: pointer;
}

.icon-button svg {
	width: 18px;
	height: 18px;
}

.text-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--color-text-link);
	font-family: var(--font-body);
	font-weight: 700;
	text-underline-offset: 3px;
	cursor: pointer;
}

.text-link:hover { text-decoration-thickness: 2px; }

.card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	background: var(--color-surface);
}

.card.raised { box-shadow: var(--shadow-sm); }
.card.selected { border-color: var(--color-focus); background: var(--color-selected); }

.field-label {
	display: block;
	margin: 0 0 var(--space-2);
	font: 700 var(--type-label)/1.3 var(--font-body);
}

.field-hint {
	margin-top: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--type-caption);
	line-height: var(--leading-body);
}

.field-control {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 12px;
	background: var(--color-surface-subtle);
	color: var(--color-text-primary);
	font-family: var(--font-body);
}

.field-control:hover { border-color: var(--color-border-strong); }
.field-control:focus { border-color: var(--color-focus); }
.field-control[aria-invalid='true'] { border-color: var(--color-status-error); }

.field-error {
	margin-top: var(--space-2);
	color: var(--color-status-error);
	font-size: var(--type-caption);
	font-weight: 650;
}

.checkbox-control {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

.checkbox-control input[type='checkbox'] {
	width: 24px;
	height: 24px;
	accent-color: var(--color-status-info);
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.tab {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 8px 12px;
	background: var(--color-surface);
	color: var(--color-text-secondary);
	font-weight: 700;
	cursor: pointer;
}

.tab:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.tab.active,
.tab[aria-selected='true'] { border-color: var(--color-focus); background: var(--color-selected); color: var(--color-text-primary); }

.badge,
.status-label {
	display: inline-flex;
	min-height: 24px;
	align-items: center;
	gap: var(--space-1);
	border-radius: var(--radius-sm);
	padding: 3px 8px;
	background: var(--color-surface-subtle);
	color: var(--color-text-secondary);
	font: 700 var(--type-caption)/1.3 var(--font-body);
}

.status-label.success { background: var(--color-status-success-bg); color: var(--color-status-success); }
.status-label.warning { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.status-label.error { background: var(--color-status-error-bg); color: var(--color-status-error); }
.status-label.info { background: var(--color-status-info-bg); color: var(--color-status-info); }

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--type-body-sm);
}

.data-table th,
.data-table td {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3);
	text-align: left;
	vertical-align: top;
}

.data-table th {
	color: var(--color-text-secondary);
	font: 700 var(--type-metadata)/1.4 var(--font-mono);
	letter-spacing: var(--tracking-metadata);
	text-transform: uppercase;
}

.candidate-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-4) 0;
}

.evidence-block {
	border-left: 3px solid var(--color-status-info);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface-subtle);
}

.alert {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	font-size: var(--type-body-sm);
	line-height: var(--leading-body);
}

.alert.info { border-color: rgba(19, 110, 117, 0.28); background: var(--color-status-info-bg); }
.alert.success { border-color: rgba(19, 110, 117, 0.28); background: var(--color-status-success-bg); }
.alert.warning { border-color: rgba(142, 61, 34, 0.3); background: var(--color-status-warning-bg); }
.alert.error { border-color: rgba(169, 42, 29, 0.3); background: var(--color-status-error-bg); color: var(--color-status-error); }

.empty-state {
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-8);
	background: var(--color-surface-subtle);
	color: var(--color-text-secondary);
	text-align: center;
}

.loading-inline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ogh-spin 700ms linear infinite;
}

dialog {
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--color-text-primary);
}

dialog::backdrop { background: rgba(16, 22, 22, 0.72); }

.dialog-card {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100svh - 32px);
	overflow: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	background: var(--color-surface);
	box-shadow: var(--shadow-lg);
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
}

.pagination-status {
	color: var(--color-text-secondary);
	font: 700 var(--type-caption)/1.4 var(--font-body);
}

@keyframes ogh-spin { to { transform: rotate(360deg); } }

.container,
.container-wide,
.container-reading {
	width: calc(100% - (2 * var(--gutter)));
	margin-inline: auto;
}

.container { max-width: var(--container-default); }
.container-wide { max-width: var(--container-wide); }
.container-reading { max-width: var(--container-reading); }

.type-display-xl,
.type-display-lg,
.type-display-md,
.type-h1,
.type-h2,
.type-h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 740;
	letter-spacing: var(--tracking-heading);
	line-height: var(--leading-heading);
}

.type-display-xl { font-size: var(--type-display-xl); letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
.type-display-lg { font-size: var(--type-display-lg); letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
.type-display-md { font-size: var(--type-display-md); }
.type-h1 { font-size: var(--type-h1); }
.type-h2 { font-size: var(--type-h2); }
.type-h3 { font-size: var(--type-h3); }
.type-body-lg { font-size: var(--type-body-lg); line-height: var(--leading-body); }
.type-body { font-size: var(--type-body); line-height: var(--leading-body); }
.type-body-sm { font-size: var(--type-body-sm); line-height: var(--leading-body); }
.type-caption { font-size: var(--type-caption); line-height: var(--leading-body); }
.type-metadata { font: 700 var(--type-metadata)/1.4 var(--font-mono); letter-spacing: var(--tracking-metadata); text-transform: uppercase; }

.trajectory-motion path {
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	animation: ogh-curve-draw var(--duration-trajectory) var(--ease-emphasized) forwards;
}

.trajectory-motion circle {
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
	animation: ogh-signal-in var(--duration-slow) var(--ease-emphasized) 620ms forwards;
}

.motion-enter {
	animation: ogh-enter var(--duration-slow) var(--ease-standard) both;
}

.motion-success {
	animation: ogh-signal-in var(--duration-standard) var(--ease-emphasized) both;
}

@keyframes ogh-curve-draw { to { stroke-dashoffset: 0; } }
@keyframes ogh-signal-in { 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ogh-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
	.candidate-row { grid-template-columns: 1fr; }
	.dialog-card { padding: var(--space-6); }
	.tabs > * { flex: 1 1 auto; justify-content: center; }
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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