/**
 * CAP 1.0 — Flagship Dark portal.
 * Prefix: dxp-cap- · semantic DSI tokens only.
 */

.dxp-cap {
	color: var(--dxp-color-text-primary, #f5f7fb);
	background: var(--dxp-color-background-canvas, #070b14);
	overflow-x: clip;
	max-width: 100%;
}

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

.dxp-cap-stage {
	padding: 1rem 0 1.5rem;
}

.dxp-cap-hero {
	padding: clamp(1.25rem, 3vw, 2.5rem) 0 0.75rem;
}

.dxp-cap-title {
	margin: 0.35rem 0 0.55rem;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 750;
}

.dxp-cap-lede,
.dxp-cap-section-head p,
.dxp-cap-empty,
.dxp-cap-sync-note {
	color: var(--dxp-color-text-secondary, #c7d0e0);
	max-width: 42rem;
}

.dxp-cap-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 1rem;
}

.dxp-cap-tab {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--dxp-color-border-subtle, #243047);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	background: color-mix(in srgb, var(--dxp-color-background-elevated, #15233b) 70%, transparent);
}

.dxp-cap-tab.is-active,
.dxp-cap-tab:focus-visible {
	border-color: var(--dxp-color-accent-warm, #ffc437);
	outline: 2px solid var(--dxp-color-focus-ring, #e8bb3f);
	outline-offset: 2px;
}

.dxp-cap-stat-grid,
.dxp-cap-card-grid,
.dxp-cap-auth-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0.85rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.dxp-cap-stat-grid li,
.dxp-cap-card,
.dxp-cap-mini-list li {
	padding: 0.95rem 1rem;
	border: 1px solid var(--dxp-color-border-subtle, #243047);
	border-radius: var(--dxp-radius-lg, 18px);
	background: color-mix(in srgb, var(--dxp-color-background-elevated, #15233b) 82%, transparent);
	backdrop-filter: blur(8px);
}

.dxp-cap-stat-grid span {
	display: block;
	color: var(--dxp-color-text-secondary, #c7d0e0);
	font-size: 0.85rem;
}

.dxp-cap-stat-grid strong {
	display: block;
	margin-top: 0.3rem;
	font-size: 1.1rem;
}

.dxp-cap-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 0.85rem;
}

.dxp-cap-form,
.dxp-cap-card form,
.dxp-cap-card {
	display: grid;
	gap: 0.75rem;
}

.dxp-cap-card label {
	display: grid;
	gap: 0.3rem;
}

.dxp-cap-card input,
.dxp-cap-card textarea,
.dxp-cap-form input,
.dxp-cap-form textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--dxp-color-border-default, #334155);
	border-radius: 12px;
	background: var(--dxp-color-background-elevated, #0f172a);
	color: inherit;
}

.dxp-cap-check {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
}

.dxp-cap-check input {
	width: auto;
	min-height: auto;
}

.dxp-cap-mini-list {
	display: grid;
	gap: 0.65rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.dxp-cap-mini-list strong {
	display: block;
	margin-bottom: 0.2rem;
}

.dxp-cap-mini-list span,
.dxp-cap-mini-list small {
	color: var(--dxp-color-text-secondary, #c7d0e0);
	font-size: 0.92rem;
}

.dxp-cap-form-msg {
	color: var(--dxp-color-accent-warm, #ffc437);
}

.dxp-cap-form-msg.is-error {
	color: var(--dxp-color-action-primary, #c1121f);
}

.dxp-cap-sync.is-pending .dxp-cap-sync-note::before {
	content: 'Pending · ';
}

.dxp-cap-sync.is-synced .dxp-cap-sync-note::before {
	content: 'Synced · ';
}

.dxp-cap-sync.is-conflict .dxp-cap-sync-note::before {
	content: 'Conflict · ';
}

@media (max-width: 640px) {
	.dxp-cap-stat-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dxp-cap * {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}