/**
 * TDS Button Framework
 * Version: 3.2.2 (Hardened Preservationist Refactor)
 * Restores ALL Sections (1-14) from original v3.1.0
 */

/* =========================================================
   1. Global button tokens (Corrected for 18px shift)
   ========================================================= */


/* =========================================================
   2. Primitive button object
   ========================================================= */

.btn,
a.btn,
button.btn {
	--tds-btn-bg: transparent;
	--tds-btn-border: var(--tds-border);
	--tds-btn-text: var(--tds-text-main);

	--tds-btn-bg-hover: var(--tds-btn-bg);
	--tds-btn-border-hover: var(--tds-btn-border);
	--tds-btn-text-hover: var(--tds-btn-text);

	--tds-btn-bg-active: var(--tds-btn-bg-hover);
	--tds-btn-border-active: var(--tds-btn-border-hover);
	--tds-btn-text-active: var(--tds-btn-text-hover);

	--tds-btn-shadow-current: none;
	--tds-btn-shadow-hover-current: var(--tds-btn-shadow-current);
	--tds-btn-shadow-active-current: none;

	--tds-btn-spinner-track: rgba(0, 0, 0, 0.18);
	--tds-btn-spinner-head: currentColor;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tds-btn-gap);
	min-height: var(--tds-btn-min-height);
	padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
	border: var(--tds-btn-border-width) solid var(--tds-btn-border);
	border-radius: var(--tds-radius-control);
	background-color: var(--tds-btn-bg);
	color: var(--tds-btn-text);
	box-shadow: var(--tds-btn-shadow-current);
	font-family: var(--tds-btn-font-family);
	font-size: var(--tds-btn-font-size);
	font-weight: var(--tds-weight-medium);
	line-height: var(--tds-btn-line-height);
	letter-spacing: var(--tds-btn-letter-spacing);
	text-decoration: var(--tds-btn-text-decoration);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	transition: var(--tds-btn-transition);
}

.btn:visited,
a.btn:visited,
button.btn:visited {
	color: var(--tds-btn-text);
	text-decoration: var(--tds-btn-text-decoration);
}

.btn:hover,
a.btn:hover,
button.btn:hover {
	background-color: var(--tds-btn-bg-hover);
	border-color: var(--tds-btn-border-hover);
	color: var(--tds-btn-text-hover);
	box-shadow: var(--tds-btn-shadow-hover-current);
	text-decoration: none;
	transform: translateY(var(--tds-btn-translate-hover));
}

/* ---------------------------------------------------------
   Hardened active-state handling
   Covers:
   - :active
   - .active
   - aria-pressed
   - Bootstrap btn-check adjacency
   - Bootstrap dropdown-toggle active state
   --------------------------------------------------------- */

.btn:active,
a.btn:active,
button.btn:active,
.btn.active,
a.btn.active,
button.btn.active,
.btn[aria-pressed="true"],
a.btn[aria-pressed="true"],
button.btn[aria-pressed="true"],
.btn-check:checked + .btn,
.btn-check:active + .btn,
.show > .btn.dropdown-toggle {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
	box-shadow: var(--tds-btn-shadow-active-current);
	transform: translateY(var(--tds-btn-translate-active));
}

.btn:active:hover,
a.btn:active:hover,
button.btn:active:hover,
.btn.active:hover,
a.btn.active:hover,
button.btn.active:hover,
.btn[aria-pressed="true"]:hover,
a.btn[aria-pressed="true"]:hover,
button.btn[aria-pressed="true"]:hover,
.btn-check:checked + .btn:hover,
.btn-check:active + .btn:hover,
.show > .btn.dropdown-toggle:hover {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
}

.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
	outline: var(--tds-focus-outline);
	outline-offset: var(--tds-focus-offset);
	box-shadow: var(--tds-btn-shadow-hover-current);
}

.uh-hero--deep-space .btn:focus-visible,
.uh-insights-hero .btn:focus-visible,
.uh-insights-single__header .btn:focus-visible,
.uh-media-video-stage .btn:focus-visible,
.uh-motif-structure-figure .btn:focus-visible {
	outline: var(--tds-focus-outline-inverse);
}

.btn:disabled,
a.btn[aria-disabled="true"],
button.btn:disabled,
button.btn[aria-disabled="true"] {
	opacity: var(--tds-btn-disabled-opacity);
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

.btn__label {
	display: inline-block;
	min-width: 0;
}

.btn__icon,
.btn svg {
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.btn__icon--leading {
	order: -1;
}

.btn__icon--trailing {
	order: 1;
}

/* =========================================================
   3. Width and shape utilities
   ========================================================= */

.btn--block,
a.btn--block,
button.btn--block {
	display: inline-flex;
	width: 100%;
}

.btn--pill,
a.btn--pill,
button.btn--pill {
	border-radius: var(--tds-radius-pill);
}

.btn--square,
a.btn--square,
button.btn--square {
	padding-inline: var(--tds-btn-padding-y);
	aspect-ratio: 1 / 1;
}

/* =========================================================
   4. Size modifiers
   ========================================================= */

.btn--sm,
a.btn--sm,
button.btn--sm {
	min-height: var(--tds-btn-min-height-sm);
	padding: var(--tds-btn-padding-y-sm) var(--tds-btn-padding-x-sm);
	font-size: var(--tds-btn-font-size-sm);
}

.btn--lg,
a.btn--lg,
button.btn--lg {
	min-height: var(--tds-btn-min-height-lg);
	padding: var(--tds-btn-padding-y-lg) var(--tds-btn-padding-x-lg);
	font-size: var(--tds-btn-font-size-lg);
}

/* =========================================================
   5. Primary variant
   ========================================================= */

.btn--primary,
a.btn--primary,
button.btn--primary,
.btn--primary:visited,
a.btn--primary:visited,
button.btn--primary:visited {
	--tds-btn-bg: var(--tds-brand-action);
	--tds-btn-border: var(--tds-brand-action);
	--tds-btn-text: #ffffff;

	--tds-btn-bg-hover: var(--tds-brand-action-hover);
	--tds-btn-border-hover: var(--tds-brand-action-hover);
	--tds-btn-text-hover: #ffffff;

	--tds-btn-bg-active: var(--tds-brand-action-active);
	--tds-btn-border-active: var(--tds-brand-action-active);
	--tds-btn-text-active: #ffffff;

	--tds-btn-shadow-current: none;
	--tds-btn-shadow-hover-current: none;
	--tds-btn-shadow-active-current: inset 0 1px 2px rgba(16, 24, 40, 0.12);

	--tds-btn-spinner-track: rgba(255, 255, 255, 0.28);
	--tds-btn-spinner-head: #ffffff;
}

/* =========================================================
   6. Secondary outline variant
   ========================================================= */

.btn--secondary-outline,
a.btn--secondary-outline,
button.btn--secondary-outline,
.btn--secondary-outline:visited,
a.btn--secondary-outline:visited,
button.btn--secondary-outline:visited {
	--tds-btn-bg: transparent;
	--tds-btn-border: var(--tds-border-strong);
	--tds-btn-text: var(--tds-text-main);

	--tds-btn-bg-hover: rgba(16, 24, 40, 0.04);
	--tds-btn-border-hover: var(--tds-border-strong);
	--tds-btn-text-hover: var(--tds-text-main);

	--tds-btn-bg-active: rgba(16, 24, 40, 0.06);
	--tds-btn-border-active: var(--tds-border-strong);
	--tds-btn-text-active: var(--tds-text-main);

	--tds-btn-shadow-current: none;
	--tds-btn-shadow-hover-current: none;
	--tds-btn-shadow-active-current: inset 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* =========================================================
   7. Secondary soft variant
   ========================================================= */

.btn--secondary-soft,
a.btn--secondary-soft,
button.btn--secondary-soft,
.btn--secondary-soft:visited,
a.btn--secondary-soft:visited,
button.btn--secondary-soft:visited {
	--tds-btn-bg: rgba(16, 24, 40, 0.05);
	--tds-btn-border: rgba(16, 24, 40, 0.06);
	--tds-btn-text: var(--tds-text-main);

	--tds-btn-bg-hover: rgba(16, 24, 40, 0.08);
	--tds-btn-border-hover: rgba(16, 24, 40, 0.08);
	--tds-btn-text-hover: var(--tds-text-main);

	--tds-btn-bg-active: rgba(16, 24, 40, 0.1);
	--tds-btn-border-active: rgba(16, 24, 40, 0.1);
	--tds-btn-text-active: var(--tds-text-main);

	--tds-btn-shadow-current: none;
	--tds-btn-shadow-hover-current: none;
	--tds-btn-shadow-active-current: inset 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* =========================================================
   8. Ghost variant
   ========================================================= */

.btn--ghost,
a.btn--ghost,
button.btn--ghost,
.btn--ghost:visited,
a.btn--ghost:visited,
button.btn--ghost:visited {
	--tds-btn-bg: transparent;
	--tds-btn-border: transparent;
	--tds-btn-text: var(--tds-text-main);

	--tds-btn-bg-hover: rgba(16, 24, 40, 0.04);
	--tds-btn-border-hover: transparent;
	--tds-btn-text-hover: var(--tds-text-main);

	--tds-btn-bg-active: rgba(16, 24, 40, 0.06);
	--tds-btn-border-active: transparent;
	--tds-btn-text-active: var(--tds-text-main);

	--tds-btn-shadow-current: none;
	--tds-btn-shadow-hover-current: none;
	--tds-btn-shadow-active-current: none;
}

/* =========================================================
   9. Link-style button
   ========================================================= */

.btn--link,
a.btn--link,
button.btn--link,
.btn--link:visited,
a.btn--link:visited,
button.btn--link:visited {
	--tds-btn-bg: transparent;
	--tds-btn-border: transparent;
	--tds-btn-text: var(--tds-brand-strong);

	--tds-btn-bg-hover: transparent;
	--tds-btn-border-hover: transparent;
	--tds-btn-text-hover: var(--tds-brand-strong);

	--tds-btn-bg-active: transparent;
	--tds-btn-border-active: transparent;
	--tds-btn-text-active: var(--tds-brand-strong);

	--tds-btn-shadow-current: none;
	--tds-btn-shadow-hover-current: none;
	--tds-btn-shadow-active-current: none;

	min-height: auto;
	padding: 0;
	border-radius: 0;
	letter-spacing: var(--tds-type-track-ui);
}

/* =========================================================
   10. Text-action links
   Stateless inline CTAs separate from button objects.
   ========================================================= */

.uh-action-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--tds-brand-strong);
	font-family: var(--tds-font-system);
	font-size: var(--tds-type-size-meta);
	font-weight: var(--tds-weight-semibold);
	line-height: var(--tds-type-line-meta);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--tds-motion-duration-snappy) ease;
}

.uh-action-link:hover,
.uh-action-link:focus {
	color: var(--tds-brand-action-hover);
	text-decoration: underline;
}

.uh-action-link--arrow svg,
.uh-action-link--arrow .btn__icon {
	transition: transform var(--tds-motion-duration-snappy) ease;
}

.uh-action-link--arrow:hover svg,
.uh-action-link--arrow:focus svg,
.uh-action-link--arrow:hover .btn__icon,
.uh-action-link--arrow:focus .btn__icon {
	transform: translateX(0.12rem);
}

/* =========================================================
   11. Dark-surface support
   ========================================================= */

.uh-surface--dark .btn--secondary-outline,
.uh-hero--deep-space .btn--secondary-outline {
	--tds-btn-bg: transparent;
	--tds-btn-border: rgba(255, 255, 255, 0.24);
	--tds-btn-text: #ffffff;

	--tds-btn-bg-hover: rgba(255, 255, 255, 0.06);
	--tds-btn-border-hover: rgba(255, 255, 255, 0.32);
	--tds-btn-text-hover: #ffffff;

	--tds-btn-bg-active: rgba(255, 255, 255, 0.1);
	--tds-btn-border-active: rgba(255, 255, 255, 0.36);
	--tds-btn-text-active: #ffffff;
}

.uh-surface--dark .btn--ghost,
.uh-hero--deep-space .btn--ghost {
	--tds-btn-bg: transparent;
	--tds-btn-border: transparent;
	--tds-btn-text: rgba(255, 255, 255, 0.92);

	--tds-btn-bg-hover: rgba(255, 255, 255, 0.06);
	--tds-btn-border-hover: transparent;
	--tds-btn-text-hover: #ffffff;

	--tds-btn-bg-active: rgba(255, 255, 255, 0.1);
	--tds-btn-border-active: transparent;
	--tds-btn-text-active: #ffffff;
}

.uh-surface--dark .btn--link,
.uh-hero--deep-space .btn--link {
	--tds-btn-text: #ffffff;
	--tds-btn-text-hover: rgba(255, 255, 255, 0.9);
	--tds-btn-text-active: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   12. Loading state
   ========================================================= */

.btn.is-loading,
a.btn.is-loading,
button.btn.is-loading,
.btn[aria-busy="true"],
a.btn[aria-busy="true"],
button.btn[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.btn.is-loading .btn__label,
a.btn.is-loading .btn__label,
button.btn.is-loading .btn__label,
.btn[aria-busy="true"] .btn__label,
a.btn[aria-busy="true"] .btn__label,
button.btn[aria-busy="true"] .btn__label {
	opacity: 0.82;
}

.btn.is-loading::after,
a.btn.is-loading::after,
button.btn.is-loading::after,
.btn[aria-busy="true"]::after,
a.btn[aria-busy="true"]::after,
button.btn[aria-busy="true"]::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: var(--tds-btn-spinner-size);
	height: var(--tds-btn-spinner-size);
	margin-inline-start: 0.25rem;
	border-radius: 999px;
	border: var(--tds-btn-spinner-stroke) solid var(--tds-btn-spinner-track);
	border-top-color: var(--tds-btn-spinner-head);
	animation: tds-btn-spin 0.7s linear infinite;
}

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

/* =========================================================
   13. Action groups
   Layout helpers, separate from button primitives.
   ========================================================= */

.uh-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.uh-actions--single {
	justify-content: flex-start;
}

.uh-actions--single > .btn,
.uh-actions--single > a.btn,
.uh-actions--single > button.btn {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

.uh-actions--stack {
	flex-direction: column;
	align-items: stretch;
}

.uh-actions--stack > .btn,
.uh-actions--stack > a.btn,
.uh-actions--stack > button.btn {
	width: 100%;
}

/* ---------------------------------------------------------
   Split action group
   Mobile: stacked, full-width, natural height
   Desktop: side-by-side, flexible width
   --------------------------------------------------------- */
.uh-actions--split-2 {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.uh-actions--split-2 > .btn,
.uh-actions--split-2 > a.btn,
.uh-actions--split-2 > button.btn {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}

@media (min-width: 992px) {
	.uh-actions--split-2 {
		flex-direction: row;
		align-items: center;
		width: auto;
	}

	.uh-actions--split-2 > .btn,
	.uh-actions--split-2 > a.btn,
	.uh-actions--split-2 > button.btn {
		flex: 1 1 14rem;
		width: auto;
		min-width: min(100%, 14rem);
	}
}
.uh-actions--end {
	justify-content: flex-end;
}

.uh-actions--center {
	justify-content: center;
}

/* =========================================================
   13. Collision hardening against external .btn systems
   Put late in cascade.
   ========================================================= */

.btn.btn--primary:active,
.btn.btn--primary.active,
.btn-check:checked + .btn.btn--primary,
.btn-check:active + .btn.btn--primary,
.show > .btn.btn--primary.dropdown-toggle,
a.btn.btn--primary:active,
a.btn.btn--primary.active,
button.btn.btn--primary:active,
button.btn.btn--primary.active {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
	box-shadow: var(--tds-btn-shadow-active-current);
}

.btn.btn--secondary-outline:active,
.btn.btn--secondary-outline.active,
.btn-check:checked + .btn.btn--secondary-outline,
.btn-check:active + .btn.btn--secondary-outline,
.show > .btn.btn--secondary-outline.dropdown-toggle,
a.btn.btn--secondary-outline:active,
a.btn.btn--secondary-outline.active,
button.btn.btn--secondary-outline:active,
button.btn.btn--secondary-outline.active {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
	box-shadow: var(--tds-btn-shadow-active-current);
}

.btn.btn--secondary-soft:active,
.btn.btn--secondary-soft.active,
.btn-check:checked + .btn.btn--secondary-soft,
.btn-check:active + .btn.btn--secondary-soft,
.show > .btn.btn--secondary-soft.dropdown-toggle,
a.btn.btn--secondary-soft:active,
a.btn.btn--secondary-soft.active,
button.btn.btn--secondary-soft:active,
button.btn.btn--secondary-soft.active {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
	box-shadow: var(--tds-btn-shadow-active-current);
}

.btn.btn--ghost:active,
.btn.btn--ghost.active,
.btn-check:checked + .btn.btn--ghost,
.btn-check:active + .btn.btn--ghost,
.show > .btn.btn--ghost.dropdown-toggle,
a.btn.btn--ghost:active,
a.btn.btn--ghost.active,
button.btn.btn--ghost:active,
button.btn.btn--ghost.active {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
	box-shadow: var(--tds-btn-shadow-active-current);
}

.btn.btn--link:active,
.btn.btn--link.active,
.btn-check:checked + .btn.btn--link,
.btn-check:active + .btn.btn--link,
.show > .btn.btn--link.dropdown-toggle,
a.btn.btn--link:active,
a.btn.btn--link.active,
button.btn.btn--link:active,
button.btn.btn--link.active {
	background-color: var(--tds-btn-bg-active);
	border-color: var(--tds-btn-border-active);
	color: var(--tds-btn-text-active);
	box-shadow: none;
}

/* =========================================================
   14. Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.btn,
	a.btn,
	button.btn {
		transition:
			background-color 0.01ms linear,
			border-color 0.01ms linear,
			color 0.01ms linear,
			box-shadow 0.01ms linear;
	}

	.btn:hover,
	a.btn:hover,
	button.btn:hover,
	.btn:active,
	a.btn:active,
	button.btn:active,
	.btn.active,
	a.btn.active,
	button.btn.active,
	.btn[aria-pressed="true"],
	a.btn[aria-pressed="true"],
	button.btn[aria-pressed="true"],
	.btn-check:checked + .btn,
	.btn-check:active + .btn,
	.show > .btn.dropdown-toggle {
		transform: none;
	}

	.btn.is-loading::after,
	a.btn.is-loading::after,
	button.btn.is-loading::after,
	.btn[aria-busy="true"]::after,
	a.btn[aria-busy="true"]::after,
	button.btn[aria-busy="true"]::after {
		animation-duration: 1.2s;
	}
}