/**
 * Akel Tools Design System — Primitives
 * Reusable .at-* component classes.
 *
 * Prefix avoids collision with app-specific classes (st-, tp-, forge-, pt-).
 * Depends on tokens.css.
 */

/* ============================================================
   GLASS UTILITY — chrome only
   ============================================================ */
.at-glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: var(--glass-border);
	box-shadow: var(--glass-shadow);
}

.at-glass--strong {
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: var(--glass-border);
	box-shadow: var(--glass-shadow);
}

@supports not (backdrop-filter: blur(1px)) {
	.at-glass,
	.at-glass--strong {
		background: var(--surface-elevated);
	}
}

/* ============================================================
   SURFACES
   ============================================================ */
.at-surface {
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	color: var(--text-primary);
}

.at-surface--subtle  { background: var(--surface-subtle); }
.at-surface--sunken  { background: var(--surface-sunken); }
.at-surface--flat    { border: none; }
.at-surface--elevated { box-shadow: var(--shadow-md); border-color: transparent; }

.at-card {
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	padding: var(--space-5);
	color: var(--text-primary);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.at-eyebrow {
	display: inline-block;
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-tertiary);
}

/** Caps nav/badge label — prefer dedicated selectors + token fallback */
.at-caps {
	font-size: var(--text-caps, 11px);
	text-transform: uppercase;
}

.at-h1 {
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tighter);
	color: var(--text-primary);
	margin: 0;
}

.at-h2 {
	font-size: var(--text-3xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
	margin: 0;
}

.at-h3 {
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
	margin: 0;
}

.at-h4 {
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--text-primary);
	margin: 0;
}

.at-text-body   { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-primary); }
.at-text-sm     { font-size: var(--text-sm); line-height: var(--leading-snug); }
.at-text-muted  { color: var(--text-secondary); }
.at-text-dim    { color: var(--text-tertiary); }
.at-mono        { font-family: var(--font-mono); }

/* ============================================================
   BUTTONS
   Base: .at-btn (primary, navy fill)
   Variants compose: .at-btn .at-btn--ghost .at-btn--sm etc.
   ============================================================ */
.at-btn {
	--at-btn-bg: var(--brand-navy);
	--at-btn-bg-hover: #001a3a;
	--at-btn-bg-active: #001530;
	--at-btn-color: #ffffff;
	--at-btn-border: var(--brand-navy);
	--at-btn-ring: var(--brand-accent);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 36px;
	padding: 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: 0;
	color: var(--at-btn-color);
	background: var(--at-btn-bg);
	border: 1px solid var(--at-btn-border);
	border-radius: 0;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.at-btn:hover {
	background: var(--at-btn-bg-hover);
	border-color: var(--at-btn-bg-hover);
}

.at-btn:active {
	background: var(--at-btn-bg-active);
	border-color: var(--at-btn-bg-active);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.at-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.at-btn:disabled,
.at-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Variants --- */
.at-btn--accent {
	--at-btn-bg: var(--brand-accent);
	--at-btn-bg-hover: var(--brand-accent-hover);
	--at-btn-bg-active: #1d77b3;
	--at-btn-border: var(--brand-accent);
}

.at-btn--secondary {
	--at-btn-bg: var(--surface-elevated);
	--at-btn-bg-hover: var(--surface-subtle);
	--at-btn-bg-active: var(--surface-sunken);
	--at-btn-color: var(--text-primary);
	--at-btn-border: var(--border-strong);
}

.at-btn--ghost {
	--at-btn-bg: transparent;
	--at-btn-bg-hover: var(--brand-accent-soft);
	--at-btn-bg-active: var(--brand-accent-soft);
	--at-btn-color: var(--text-primary);
	--at-btn-border: transparent;
}
.at-btn--ghost:hover:not(.at-btn--danger):not(.at-btn--success):not(.at-btn--warning) {
	color: var(--brand-accent);
}

.at-btn--danger {
	--at-btn-bg: var(--brand-danger);
	--at-btn-bg-hover: #c23d52;
	--at-btn-bg-active: #a83245;
	--at-btn-border: var(--brand-danger);
	--at-btn-color: #ffffff;
}

.at-btn--danger:focus-visible {
	box-shadow: 0 0 0 3px var(--brand-danger-soft);
}

.at-btn--danger.at-btn--ghost {
	--at-btn-bg: var(--brand-danger-soft);
	--at-btn-bg-hover: rgba(212, 76, 98, 0.2);
	--at-btn-bg-active: rgba(212, 76, 98, 0.26);
	--at-btn-color: #9e2438;
	--at-btn-border: rgba(212, 76, 98, 0.45);
}

.at-btn--danger.at-btn--ghost:hover {
	color: #7a1c2d;
	border-color: rgba(212, 76, 98, 0.6);
	background: rgba(212, 76, 98, 0.2);
}

[data-theme="dark"] .at-btn--danger {
	--at-btn-bg: #d44c62;
	--at-btn-bg-hover: #e05a6f;
	--at-btn-bg-active: #b83d50;
}

[data-theme="dark"] .at-btn--danger.at-btn--ghost {
	--at-btn-bg: rgba(212, 76, 98, 0.18);
	--at-btn-bg-hover: rgba(212, 76, 98, 0.28);
	--at-btn-bg-active: rgba(212, 76, 98, 0.34);
	--at-btn-color: #f5b8c0;
	--at-btn-border: rgba(229, 139, 152, 0.5);
}

[data-theme="dark"] .at-btn--danger.at-btn--ghost:hover {
	color: #ffd4da;
	border-color: rgba(229, 139, 152, 0.75);
	background: rgba(212, 76, 98, 0.28);
}

.at-btn--success.at-btn--ghost {
	--at-btn-bg: var(--brand-success-soft);
	--at-btn-bg-hover: rgba(61, 139, 106, 0.2);
	--at-btn-bg-active: rgba(61, 139, 106, 0.26);
	--at-btn-color: var(--brand-success-text);
	--at-btn-border: rgba(61, 139, 106, 0.45);
}

.at-btn--success.at-btn--ghost:hover {
	border-color: rgba(61, 139, 106, 0.6);
	background: rgba(61, 139, 106, 0.2);
}

.at-btn--success.at-btn--ghost:focus-visible {
	box-shadow: 0 0 0 3px var(--brand-success-soft);
}

[data-theme="dark"] .at-btn--success.at-btn--ghost {
	--at-btn-bg: rgba(61, 139, 106, 0.18);
	--at-btn-bg-hover: rgba(61, 139, 106, 0.28);
	--at-btn-bg-active: rgba(61, 139, 106, 0.34);
	--at-btn-color: var(--brand-success-text);
	--at-btn-border: rgba(125, 190, 156, 0.5);
}

[data-theme="dark"] .at-btn--success.at-btn--ghost:hover {
	color: #a8dcc0;
	border-color: rgba(125, 190, 156, 0.75);
	background: rgba(61, 139, 106, 0.28);
}

.at-btn--warning.at-btn--ghost {
	--at-btn-bg: var(--brand-warning-soft);
	--at-btn-bg-hover: rgba(180, 83, 9, 0.18);
	--at-btn-bg-active: rgba(180, 83, 9, 0.24);
	--at-btn-color: var(--brand-warning);
	--at-btn-border: rgba(180, 83, 9, 0.45);
}

.at-btn--warning.at-btn--ghost:hover {
	border-color: rgba(180, 83, 9, 0.6);
	background: rgba(180, 83, 9, 0.18);
}

.at-btn--warning.at-btn--ghost:focus-visible {
	box-shadow: 0 0 0 3px var(--brand-warning-soft);
}

[data-theme="dark"] .at-btn--warning.at-btn--ghost {
	--at-btn-bg: rgba(180, 83, 9, 0.18);
	--at-btn-bg-hover: rgba(180, 83, 9, 0.28);
	--at-btn-bg-active: rgba(180, 83, 9, 0.34);
	--at-btn-color: #fbbf24;
	--at-btn-border: rgba(251, 191, 36, 0.45);
}

[data-theme="dark"] .at-btn--warning.at-btn--ghost:hover {
	color: #fcd34d;
	border-color: rgba(251, 191, 36, 0.65);
	background: rgba(180, 83, 9, 0.28);
}

.at-btn--accent.at-btn--ghost {
	--at-btn-bg: var(--brand-accent-soft);
	--at-btn-bg-hover: rgba(55, 155, 215, 0.2);
	--at-btn-bg-active: rgba(55, 155, 215, 0.26);
	--at-btn-color: var(--brand-accent);
	--at-btn-border: rgba(55, 155, 215, 0.45);
}

.at-btn--accent.at-btn--ghost:hover {
	border-color: rgba(55, 155, 215, 0.6);
	background: rgba(55, 155, 215, 0.2);
}

.at-btn--accent.at-btn--ghost:focus-visible {
	box-shadow: var(--focus-ring);
}

[data-theme="dark"] .at-btn--accent.at-btn--ghost {
	--at-btn-bg: rgba(55, 155, 215, 0.16);
	--at-btn-bg-hover: rgba(55, 155, 215, 0.26);
	--at-btn-bg-active: rgba(55, 155, 215, 0.32);
	--at-btn-color: #7ec8ef;
	--at-btn-border: rgba(126, 200, 239, 0.45);
}

[data-theme="dark"] .at-btn--accent.at-btn--ghost:hover {
	color: #a8daf4;
	border-color: rgba(126, 200, 239, 0.65);
	background: rgba(55, 155, 215, 0.26);
}

.at-btn--success.at-btn--ghost.is-active,
.at-btn--success.at-btn--ghost[aria-pressed="true"] {
	--at-btn-bg: var(--brand-success);
	--at-btn-bg-hover: #347659;
	--at-btn-bg-active: #2b6249;
	--at-btn-color: #fff;
	--at-btn-border: var(--brand-success);
}

.at-btn--warning.at-btn--ghost.is-active,
.at-btn--warning.at-btn--ghost[aria-pressed="true"] {
	--at-btn-bg: var(--brand-warning);
	--at-btn-bg-hover: #944608;
	--at-btn-bg-active: #7a3a07;
	--at-btn-color: #fff;
	--at-btn-border: var(--brand-warning);
}

.at-btn--danger.at-btn--ghost.is-active,
.at-btn--danger.at-btn--ghost[aria-pressed="true"] {
	--at-btn-bg: var(--brand-danger);
	--at-btn-bg-hover: #c23d52;
	--at-btn-bg-active: #a83245;
	--at-btn-color: #fff;
	--at-btn-border: var(--brand-danger);
}

.at-btn--accent.at-btn--ghost.is-active,
.at-btn--accent.at-btn--ghost[aria-pressed="true"] {
	--at-btn-bg: var(--brand-accent);
	--at-btn-bg-hover: var(--brand-accent-hover);
	--at-btn-bg-active: #1d77b3;
	--at-btn-color: #fff;
	--at-btn-border: var(--brand-accent);
}

[data-theme="dark"] .at-btn--danger.at-btn--ghost.is-active,
[data-theme="dark"] .at-btn--danger.at-btn--ghost[aria-pressed="true"] {
	--at-btn-bg: #d44c62;
	--at-btn-bg-hover: #e05a6f;
	--at-btn-bg-active: #b83d50;
}

.at-btn--success {
	--at-btn-bg: var(--brand-success);
	--at-btn-bg-hover: #347659;
	--at-btn-bg-active: #2b6249;
	--at-btn-border: var(--brand-success);
}

.at-btn--warning {
	--at-btn-bg: var(--brand-warning);
	--at-btn-bg-hover: #944608;
	--at-btn-bg-active: #7a3a07;
	--at-btn-border: var(--brand-warning);
}

/* Glass-bodied secondary — for use INSIDE glass chrome only */
.at-btn--secondary.at-glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .at-btn--secondary.at-glass {
	border-color: rgba(255, 255, 255, 0.12);
}

/* --- Sizes --- */
.at-btn--xs {
	height: 24px;
	padding: 0 var(--space-2);
	font-size: var(--text-xs);
	gap: var(--space-1);
}
.at-btn--sm {
	height: 30px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
}
.at-btn--lg {
	height: 44px;
	padding: 0 var(--space-5);
	font-size: var(--text-md);
}
.at-btn--block {
	display: flex;
	width: 100%;
}

/* --- Shapes --- */
.at-btn--icon {
	width: 36px;
	padding: 0;
}
.at-btn--icon.at-btn--xs { width: 24px; }
.at-btn--icon.at-btn--sm { width: 30px; }
.at-btn--icon.at-btn--lg { width: 44px; }

@media (max-width: 768px) {
	.at-btn,
	.at-btn--xs,
	.at-btn--sm {
		min-height: var(--touch-min);
	}

	.at-btn--xs {
		height: auto;
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}

	.at-btn--sm {
		height: auto;
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}

	.at-btn--icon,
	.at-btn--icon.at-btn--xs,
	.at-btn--icon.at-btn--sm {
		width: var(--touch-min);
		min-width: var(--touch-min);
		min-height: var(--touch-min);
		height: var(--touch-min);
		padding: 0;
	}
}

.at-btn svg,
.at-btn .at-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* --- Loading state --- */
.at-btn.is-loading {
	color: transparent !important;
	pointer-events: none;
}
.at-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50% !important;
	color: var(--at-btn-color);
	animation: at-spin 600ms linear infinite;
}
@keyframes at-spin {
	to { transform: rotate(360deg); }
}

/* --- Segmented group --- */
.at-btn-group {
	display: inline-flex;
}
.at-btn-group .at-btn {
	border-radius: 0;
	margin-left: -1px;
}
.at-btn-group .at-btn:first-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: 0;
}
.at-btn-group .at-btn:last-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.at-btn-group .at-btn.is-active,
.at-btn-group .at-btn[aria-pressed="true"] {
	background: var(--brand-accent-soft);
	color: var(--brand-accent);
	border-color: var(--brand-accent);
	z-index: 1;
}

/* --- Split button --- */
.at-btn-split {
	display: inline-flex;
}
.at-btn-split .at-btn:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}
.at-btn-split .at-btn:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 0 var(--space-2);
}

/* --- Collection-tinted button modifier (for filter contexts) --- */
.at-btn--coll {
	--at-btn-bg: transparent;
	--at-btn-bg-hover: var(--at-coll-tint, var(--surface-subtle));
	--at-btn-bg-active: var(--at-coll-tint, var(--surface-sunken));
	--at-btn-color: var(--at-coll-text, var(--text-primary));
	--at-btn-border: var(--at-coll-base, var(--border-strong));
	border-width: 1.5px;
	font-weight: var(--weight-semibold);
}
.at-btn--coll.is-active,
.at-btn--coll[aria-pressed="true"] {
	background: var(--at-coll-tint);
}
.at-btn--coll-gold     { --at-coll-base: var(--coll-gold);     --at-coll-text: var(--coll-gold-text);     --at-coll-tint: var(--coll-gold-tint); }
.at-btn--coll-emerald  { --at-coll-base: var(--coll-emerald);  --at-coll-text: var(--coll-emerald-text);  --at-coll-tint: var(--coll-emerald-tint); }
.at-btn--coll-ruby     { --at-coll-base: var(--coll-ruby);     --at-coll-text: var(--coll-ruby-text);     --at-coll-tint: var(--coll-ruby-tint); }
.at-btn--coll-sapphire { --at-coll-base: var(--coll-sapphire); --at-coll-text: var(--coll-sapphire-text); --at-coll-tint: var(--coll-sapphire-tint); }
.at-btn--coll-diamond  { --at-coll-base: var(--coll-diamond);  --at-coll-text: var(--coll-diamond-text);  --at-coll-tint: var(--coll-diamond-tint); }

/* ============================================================
   COLLECTION CHIPS — outlined, dark text, square corners
   ============================================================ */
.at-coll-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 24px;
	padding: 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--at-coll-text, var(--text-primary));
	background: transparent;
	border: 1.5px solid var(--at-coll-base, var(--border-strong));
	border-radius: 0;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

.at-coll-chip--sm { height: 20px; padding: 0 6px; font-size: var(--text-caps, 11px); }
.at-coll-chip--md { height: 28px; padding: 0 var(--space-3); font-size: var(--text-caps, 11px); }
.at-coll-chip--lg { height: 32px; padding: 0 var(--space-3); font-size: var(--text-caps, 11px); }

.at-coll-chip--filled {
	background: var(--at-coll-base);
	color: #fff;
	border-color: var(--at-coll-base);
}

.at-coll-chip--tinted {
	background: var(--at-coll-tint);
}

.at-coll-chip.is-active,
button.at-coll-chip[aria-pressed="true"] {
	background: var(--at-coll-tint);
	border-width: 2px;
	padding-inline: calc(var(--space-2) - 0.5px);
}

button.at-coll-chip {
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out);
}
button.at-coll-chip:hover {
	background: var(--at-coll-tint);
}
button.at-coll-chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.at-coll-chip--gold     { --at-coll-base: var(--coll-gold);     --at-coll-text: var(--coll-gold-text);     --at-coll-tint: var(--coll-gold-tint); }
.at-coll-chip--emerald  { --at-coll-base: var(--coll-emerald);  --at-coll-text: var(--coll-emerald-text);  --at-coll-tint: var(--coll-emerald-tint); }
.at-coll-chip--ruby     { --at-coll-base: var(--coll-ruby);     --at-coll-text: var(--coll-ruby-text);     --at-coll-tint: var(--coll-ruby-tint); }
.at-coll-chip--sapphire { --at-coll-base: var(--coll-sapphire); --at-coll-text: var(--coll-sapphire-text); --at-coll-tint: var(--coll-sapphire-tint); }
.at-coll-chip--diamond  { --at-coll-base: var(--coll-diamond);  --at-coll-text: var(--coll-diamond-text);  --at-coll-tint: var(--coll-diamond-tint); }

/* Card accent bar — 3px left border keyed to collection */
.at-coll-bar {
	border-left: 3px solid var(--at-coll-base, var(--border-strong));
	padding-left: var(--space-4);
}
.at-coll-bar--gold     { --at-coll-base: var(--coll-gold); }
.at-coll-bar--emerald  { --at-coll-base: var(--coll-emerald); }
.at-coll-bar--ruby     { --at-coll-base: var(--coll-ruby); }
.at-coll-bar--sapphire { --at-coll-base: var(--coll-sapphire); }
.at-coll-bar--diamond  { --at-coll-base: var(--coll-diamond); }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.at-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.at-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}
.at-help {
	font-size: var(--text-xs);
	color: var(--text-tertiary);
}
.at-help--error {
	color: var(--brand-danger);
	font-weight: var(--weight-medium);
}

.at-input,
.at-select,
.at-textarea {
	display: block;
	width: 100%;
	height: 36px;
	padding: 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	transition:
		border-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

.at-input::placeholder,
.at-textarea::placeholder {
	font-weight: var(--weight-regular);
	color: var(--text-tertiary);
}

.at-textarea {
	height: auto;
	min-height: 88px;
	padding: var(--space-2) var(--space-3);
	line-height: var(--leading-snug);
	resize: vertical;
}

.at-input:hover,
.at-select:hover,
.at-textarea:hover {
	border-color: var(--border-strong);
}

.at-input:focus,
.at-select:focus,
.at-textarea:focus {
	outline: none;
	border-color: var(--brand-accent);
	box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.at-input:disabled,
.at-select:disabled,
.at-textarea:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--surface-subtle);
}

.at-input[aria-invalid="true"],
.at-select[aria-invalid="true"],
.at-textarea[aria-invalid="true"] {
	border-color: var(--brand-danger);
}
.at-input[aria-invalid="true"]:focus,
.at-select[aria-invalid="true"]:focus,
.at-textarea[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px var(--brand-danger-soft);
}

.at-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238295ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 32px;
}

/* Checkbox + radio */
.at-checkbox,
.at-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	user-select: none;
	font-size: var(--text-md);
	color: var(--text-primary);
}

.at-checkbox input[type="checkbox"],
.at-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.at-checkbox__box,
.at-radio__dot {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--surface-elevated);
	border: 1.5px solid var(--border-strong);
	border-radius: 0;
	transition: all var(--duration-fast) var(--ease-out);
}
.at-radio__dot { border-radius: 0; }

.at-checkbox input:checked ~ .at-checkbox__box {
	background: var(--brand-success);
	border-color: var(--brand-success);
}
.at-checkbox input:checked ~ .at-checkbox__box::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 9 7.5 12.5 14 6'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
}

.at-radio input:checked ~ .at-radio__dot {
	border-color: var(--brand-accent);
	border-width: 5px;
}

.at-checkbox input:focus-visible ~ .at-checkbox__box,
.at-radio input:focus-visible ~ .at-radio__dot {
	box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.at-checkbox input:disabled ~ .at-checkbox__box,
.at-radio input:disabled ~ .at-radio__dot {
	opacity: 0.45;
}

/* ============================================================
   TABLE — solid surface, hairline borders, zebra rows
   ============================================================ */
.at-table-wrap {
	background: var(--surface-elevated);
	border: 1px solid var(--border-default);
	border-radius: 0;
	overflow: hidden;
}

.at-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--text-base);
	color: var(--text-primary);
}

.at-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: var(--space-3) var(--space-4);
	text-align: left;
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-tertiary);
	background: var(--surface-subtle);
	border-bottom: 1px solid var(--border-default);
	white-space: nowrap;
}

.at-table tbody td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-default);
	vertical-align: middle;
	font-weight: var(--weight-medium);
}

.at-table tbody td strong,
.at-table tbody td b {
	font-weight: var(--weight-bold);
}

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

.at-table tbody tr:hover td {
	background: var(--surface-subtle);
}

.at-table--zebra tbody tr:nth-child(even) td {
	background: var(--surface-subtle);
}
.at-table--zebra tbody tr:nth-child(even):hover td {
	background: var(--surface-sunken);
}

.at-table td.is-num,
.at-table th.is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.at-table tbody td.is-num {
	font-weight: var(--weight-semibold);
	letter-spacing: -0.01em;
}

/* ============================================================
   BADGES (non-collection, generic status)
   ============================================================ */
.at-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 22px;
	padding: 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.02em;
	border-radius: 0;
	background: var(--surface-subtle);
	color: var(--text-secondary);
	border: 1px solid var(--border-default);
	line-height: 1;
}
.at-badge--success { color: var(--brand-success); background: var(--brand-success-soft); border-color: transparent; }
.at-badge--danger  { color: var(--brand-danger);  background: var(--brand-danger-soft);  border-color: transparent; }
.at-badge--warning { color: var(--brand-warning); background: var(--brand-warning-soft); border-color: transparent; }
.at-badge--info    { color: var(--brand-accent);  background: var(--brand-accent-soft);  border-color: transparent; }

/* ============================================================
   START GROUP BADGES — outlined ID in tables and boards
   ============================================================ */
.at-sg-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 24px;
	padding: 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	color: var(--at-sg-color, var(--sg-fallback));
	background: transparent;
	border: 1.5px solid var(--at-sg-color, var(--sg-fallback));
	border-radius: 0;
	box-sizing: border-box;
	vertical-align: middle;
}

.at-sg-badge--01 { --at-sg-color: var(--sg-01); }
.at-sg-badge--02 { --at-sg-color: var(--sg-02); }
.at-sg-badge--03 { --at-sg-color: var(--sg-03); }
.at-sg-badge--04 { --at-sg-color: var(--sg-04); }
.at-sg-badge--05 { --at-sg-color: var(--sg-05); }
.at-sg-badge--06 { --at-sg-color: var(--sg-06); }
.at-sg-badge--07 { --at-sg-color: var(--sg-07); }
.at-sg-badge--08 { --at-sg-color: var(--sg-08); }
.at-sg-badge--09 { --at-sg-color: var(--sg-09); }
.at-sg-badge--10 { --at-sg-color: var(--sg-10); }
.at-sg-badge--11 { --at-sg-color: var(--sg-11); }
.at-sg-badge--12 { --at-sg-color: var(--sg-12); }
.at-sg-badge--13 { --at-sg-color: var(--sg-13); }
.at-sg-badge--14 { --at-sg-color: var(--sg-14); }
.at-sg-badge--15 { --at-sg-color: var(--sg-15); }
.at-sg-badge--16 { --at-sg-color: var(--sg-16); }
.at-sg-badge--17 { --at-sg-color: var(--sg-17); }
.at-sg-badge--18 { --at-sg-color: var(--sg-18); }
.at-sg-badge--19 { --at-sg-color: var(--sg-19); }
.at-sg-badge--20 { --at-sg-color: var(--sg-20); }
.at-sg-badge--21 { --at-sg-color: var(--sg-21); }
.at-sg-badge--22 { --at-sg-color: var(--sg-22); }
.at-sg-badge--23 { --at-sg-color: var(--sg-23); }
.at-sg-badge--24 { --at-sg-color: var(--sg-24); }
.at-sg-badge--25 { --at-sg-color: var(--sg-25); }

button.at-sg-badge {
	cursor: pointer;
	font: inherit;
	transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

button.at-sg-badge:hover {
	background: color-mix(in srgb, var(--at-sg-color, var(--sg-fallback)) 10%, transparent);
}

button.at-sg-badge:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.at-sg-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 22px;
	padding: 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--at-sg-color, var(--sg-fallback));
	background: transparent;
	border: 1.5px solid var(--at-sg-color, var(--sg-fallback));
	border-radius: 0;
}

.at-sg-chip--01 { --at-sg-color: var(--sg-01); }
.at-sg-chip--02 { --at-sg-color: var(--sg-02); }
.at-sg-chip--03 { --at-sg-color: var(--sg-03); }
.at-sg-chip--04 { --at-sg-color: var(--sg-04); }
.at-sg-chip--05 { --at-sg-color: var(--sg-05); }
.at-sg-chip--06 { --at-sg-color: var(--sg-06); }
.at-sg-chip--07 { --at-sg-color: var(--sg-07); }
.at-sg-chip--08 { --at-sg-color: var(--sg-08); }
.at-sg-chip--09 { --at-sg-color: var(--sg-09); }
.at-sg-chip--10 { --at-sg-color: var(--sg-10); }
.at-sg-chip--11 { --at-sg-color: var(--sg-11); }
.at-sg-chip--12 { --at-sg-color: var(--sg-12); }
.at-sg-chip--13 { --at-sg-color: var(--sg-13); }
.at-sg-chip--14 { --at-sg-color: var(--sg-14); }
.at-sg-chip--15 { --at-sg-color: var(--sg-15); }
.at-sg-chip--16 { --at-sg-color: var(--sg-16); }
.at-sg-chip--17 { --at-sg-color: var(--sg-17); }
.at-sg-chip--18 { --at-sg-color: var(--sg-18); }
.at-sg-chip--19 { --at-sg-color: var(--sg-19); }
.at-sg-chip--20 { --at-sg-color: var(--sg-20); }
.at-sg-chip--21 { --at-sg-color: var(--sg-21); }
.at-sg-chip--22 { --at-sg-color: var(--sg-22); }
.at-sg-chip--23 { --at-sg-color: var(--sg-23); }
.at-sg-chip--24 { --at-sg-color: var(--sg-24); }
.at-sg-chip--25 { --at-sg-color: var(--sg-25); }

/* Construction schedule + Home progress stage pills (sequential → green) */
.at-cs-stage-pill {
	--at-stage-bg: var(--surface-subtle);
	--at-stage-fg: var(--text-secondary);
	--at-stage-accent: var(--border-strong);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 22px;
	padding: 0 var(--space-2) 0 calc(var(--space-2) + 2px);
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--at-stage-fg);
	background: var(--at-stage-bg);
	border-radius: 0;
	box-shadow: inset 2px 0 0 var(--at-stage-accent);
	white-space: nowrap;
	line-height: 1;
	border: none;
}

.at-cs-stage-pill--hp-color-selection,
.at-cs-stage-pill--color-selection {
	--at-stage-bg: var(--hp-stage-color-selection-bg);
	--at-stage-fg: var(--hp-stage-color-selection-fg);
	--at-stage-accent: var(--hp-stage-color-selection-accent);
}
.at-cs-stage-pill--pre-construction,
.at-cs-stage-pill--permitting {
	--at-stage-bg: var(--cs-stage-pre-construction-bg);
	--at-stage-fg: var(--cs-stage-pre-construction-fg);
	--at-stage-accent: var(--cs-stage-pre-construction-accent);
}
.at-cs-stage-pill--shell {
	--at-stage-bg: var(--cs-stage-shell-bg);
	--at-stage-fg: var(--cs-stage-shell-fg);
	--at-stage-accent: var(--cs-stage-shell-accent);
}
.at-cs-stage-pill--framing-rough,
.at-cs-stage-pill--framing {
	--at-stage-bg: var(--cs-stage-framing-rough-bg);
	--at-stage-fg: var(--cs-stage-framing-rough-fg);
	--at-stage-accent: var(--cs-stage-framing-rough-accent);
}
.at-cs-stage-pill--drywall {
	--at-stage-bg: var(--cs-stage-drywall-bg);
	--at-stage-fg: var(--cs-stage-drywall-fg);
	--at-stage-accent: var(--cs-stage-drywall-accent);
}
.at-cs-stage-pill--exterior-interior-finishes,
.at-cs-stage-pill--finishes {
	--at-stage-bg: var(--cs-stage-exterior-interior-finishes-bg);
	--at-stage-fg: var(--cs-stage-exterior-interior-finishes-fg);
	--at-stage-accent: var(--cs-stage-exterior-interior-finishes-accent);
}
.at-cs-stage-pill--final-inspections {
	--at-stage-bg: var(--cs-stage-final-inspections-bg);
	--at-stage-fg: var(--cs-stage-final-inspections-fg);
	--at-stage-accent: var(--cs-stage-final-inspections-accent);
}
.at-cs-stage-pill--completion,
.at-cs-stage-pill--closed {
	--at-stage-bg: var(--cs-stage-completion-bg);
	--at-stage-fg: var(--cs-stage-completion-fg);
	--at-stage-accent: var(--cs-stage-completion-accent);
}

/* ============================================================
   APP SHELL — for prototype mock + future reuse
   ============================================================ */
.at-shell {
	display: grid;
	grid-template-columns: 248px 1fr;
	min-height: 480px;
	background: var(--canvas-gradient);
	border-radius: 0;
	overflow: hidden;
	border: 1px solid var(--border-default);
}

/* Sidebar — solid navy in light, glass in dark.
   See docs/DESIGN.md → Sidebar for the full recipe and per-app token convention. */
.at-sidebar {
	background: var(--brand-navy);
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 2px 0 18px rgba(0, 31, 63, 0.22);
	color: #ffffff;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

[data-theme="dark"] .at-sidebar {
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-right: 1px solid var(--border-default);
	box-shadow: var(--glass-shadow);
	color: var(--text-primary);
}

.at-sidebar__top {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-5) var(--space-3) var(--space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .at-sidebar__top {
	border-bottom-color: var(--border-default);
}

.at-sidebar__logo {
	display: block;
	height: 32px;
	width: auto;
	max-width: 140px;
	margin: 0 auto;
}

.at-sidebar__title {
	margin: var(--space-2) 0 0;
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
}

[data-theme="dark"] .at-sidebar__title {
	color: var(--text-tertiary);
}

.at-sidebar__nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--space-2);
	display: flex;
	flex-direction: column;
}

.at-nav-group {
	display: flex;
	flex-direction: column;
	padding: var(--space-2) 0;
	gap: 2px;
}

.at-nav-group + .at-nav-group {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .at-nav-group + .at-nav-group {
	border-top-color: var(--border-default);
}

.at-nav-group-label {
	margin: 0;
	padding: var(--space-3) var(--space-3) var(--space-1);
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
	line-height: 1;
}

[data-theme="dark"] .at-nav-group-label {
	color: #ffffff;
}

.at-nav-label {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.at-sidebar__footer {
	flex-shrink: 0;
	padding: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .at-sidebar__footer {
	border-top-color: var(--border-default);
}

.at-sidebar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 32px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: #ffffff;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	transition:
		background var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out);
}

.at-sidebar__btn:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .at-sidebar__btn {
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--border-default);
}

[data-theme="dark"] .at-sidebar__btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--border-strong);
}

.at-sidebar__brand {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-4);
}

.at-sidebar__brand img {
	height: 28px;
	width: auto;
}

.at-sidebar__brand-text {
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: #ffffff;
	letter-spacing: var(--tracking-tight);
}

[data-theme="dark"] .at-sidebar__brand-text {
	color: var(--text-primary);
}

.at-nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: 34px;
	padding: 0 var(--space-3);
	margin: 1px var(--space-1);
	border-radius: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.at-nav-item:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
}
.at-nav-item.is-active {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .at-nav-item {
	color: var(--text-secondary);
}
[data-theme="dark"] .at-nav-item:hover {
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .at-nav-item.is-active {
	color: #93c5fd;
	background: var(--brand-accent-soft);
	box-shadow: inset 0 0 0 1px rgba(55, 155, 215, 0.18);
}

.at-nav-icon,
.at-nav-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: currentColor;
}

.at-nav-icon svg,
.at-nav-item__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.at-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--surface-subtle);
}

.at-topbar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: 56px;
	padding: 0 var(--space-5);
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--border-default);
}
.at-topbar__title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	margin: 0;
	letter-spacing: var(--tracking-tight);
}
.at-topbar__spacer { flex: 1; }

.at-content {
	flex: 1;
	padding: var(--space-6);
	min-width: 0;
	overflow: auto;
	background: transparent;
}