/**
 * TMO Global UI: shared opt-in components.
 *
 * Native plugin selectors live in conditionally loaded adapter files. None of
 * these selectors target the shared site shell.
 */

/* Buttons */
body.tmo-ui-active #content .tmo-ui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tmo-ui-touch-target);
	min-height: var(--tmo-ui-touch-target);
	margin: 0;
	padding: 0.625rem 1rem;
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-brand);
	border-radius: var(--tmo-ui-radius-button);
	background-color: var(--tmo-ui-brand);
	box-shadow: var(--tmo-ui-shadow-xs);
	color: var(--tmo-ui-on-brand);
	font-family: var(--tmo-ui-font-body);
	font-size: 0.9375rem;
	font-weight: var(--tmo-ui-font-weight-semibold);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	appearance: none;
	cursor: pointer;
	transition:
		background-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		border-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		box-shadow var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		transform var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard);
}

body.tmo-ui-active #content .tmo-ui-button:hover {
	border-color: var(--tmo-ui-brand-hover);
	background-color: var(--tmo-ui-brand-hover);
	box-shadow: var(--tmo-ui-shadow-sm);
	color: var(--tmo-ui-on-brand);
	text-decoration: none;
	transform: translateY(-1px);
}

body.tmo-ui-active #content .tmo-ui-button:active {
	border-color: var(--tmo-ui-brand-active);
	background-color: var(--tmo-ui-brand-active);
	box-shadow: var(--tmo-ui-shadow-xs);
	transform: translateY(0);
}

body.tmo-ui-active #content :where(.tmo-ui-button--secondary, .tmo-ui-button--ghost) {
	border-color: var(--tmo-ui-border-strong);
	background-color: var(--tmo-ui-surface);
	box-shadow: none;
	color: var(--tmo-ui-link);
}

body.tmo-ui-active #content .tmo-ui-button--secondary:hover {
	border-color: var(--tmo-ui-brand);
	background-color: var(--tmo-ui-brand-soft);
	box-shadow: var(--tmo-ui-shadow-xs);
	color: var(--tmo-ui-link-hover);
}

body.tmo-ui-active #content .tmo-ui-button--ghost {
	border-color: transparent;
	background-color: transparent;
}

body.tmo-ui-active #content .tmo-ui-button--ghost:hover {
	border-color: transparent;
	background-color: var(--tmo-ui-brand-soft);
	box-shadow: none;
	color: var(--tmo-ui-link-hover);
}

body.tmo-ui-active #content .tmo-ui-button--danger {
	border-color: var(--tmo-ui-error-solid);
	background-color: var(--tmo-ui-error-solid);
	color: var(--tmo-ui-text-inverse);
}

body.tmo-ui-active #content .tmo-ui-button--danger:not(:disabled):not([aria-disabled="true"]):hover {
	border-color: var(--tmo-ui-error-hover);
	background-color: var(--tmo-ui-error-hover);
	color: var(--tmo-ui-text-inverse);
}

body.tmo-ui-active #content .tmo-ui-button--danger:not(:disabled):not([aria-disabled="true"]):active {
	border-color: var(--tmo-ui-error-active);
	background-color: var(--tmo-ui-error-active);
	color: var(--tmo-ui-text-inverse);
}

body.tmo-ui-active #content .tmo-ui-button--large {
	min-height: var(--tmo-ui-control-height-large);
	padding-inline: var(--tmo-ui-space-6);
	font-size: var(--tmo-ui-font-size-md);
}

body.tmo-ui-active #content .tmo-ui-button:disabled,
body.tmo-ui-active #content .tmo-ui-button[aria-disabled="true"] {
	border-color: var(--tmo-ui-disabled-surface);
	background-color: var(--tmo-ui-disabled-surface);
	box-shadow: none;
	color: var(--tmo-ui-disabled-text);
	cursor: not-allowed;
	transform: none;
}

body.tmo-ui-active #content .tmo-ui-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tmo-ui-space-3);
}

/* Forms */
body.tmo-ui-active #content .tmo-ui-field {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--tmo-ui-control-height);
	padding: 0.625rem 0.75rem;
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-border-strong);
	border-radius: var(--tmo-ui-radius-input);
	background-color: var(--tmo-ui-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-md);
	font-weight: var(--tmo-ui-font-weight-regular);
	line-height: var(--tmo-ui-line-height-ui);
	transition:
		border-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		box-shadow var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		background-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard);
}

body.tmo-ui-active #content .tmo-ui-choice :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--tmo-ui-brand);
}

body.tmo-ui-active #content .tmo-ui-field:hover {
	border-color: var(--tmo-ui-text-secondary);
}

body.tmo-ui-active #content .tmo-ui-field:focus {
	border-color: var(--tmo-ui-focus);
	box-shadow: 0 0 0 var(--tmo-ui-focus-width) var(--tmo-ui-focus-ring);
}

body.tmo-ui-active #content :where(.tmo-ui-field, .tmo-ui-textarea)::placeholder {
	color: var(--tmo-ui-text-muted);
	opacity: 1;
}

body.tmo-ui-active #content :where(textarea.tmo-ui-field, .tmo-ui-textarea) {
	min-height: 8rem;
	resize: vertical;
}

body.tmo-ui-active #content .tmo-ui-field:is(:disabled, [readonly]) {
	border-color: var(--tmo-ui-border);
	background-color: var(--tmo-ui-disabled-surface);
	box-shadow: none;
	color: var(--tmo-ui-disabled-text);
	cursor: not-allowed;
}

body.tmo-ui-active #content .tmo-ui-field:is([aria-invalid="true"], .is-invalid) {
	border-color: var(--tmo-ui-error-solid);
	box-shadow: 0 0 0 var(--tmo-ui-focus-width) var(--tmo-ui-error-ring);
}

body.tmo-ui-active #content .tmo-ui-form-row {
	margin: 0 0 var(--tmo-ui-space-5);
}

body.tmo-ui-active #content .tmo-ui-label {
	display: inline-block;
	margin: 0 0 var(--tmo-ui-space-2);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-sm);
	font-weight: var(--tmo-ui-font-weight-semibold);
	line-height: var(--tmo-ui-line-height-ui);
}

body.tmo-ui-active #content :where(.tmo-ui-help, .tmo-ui-field-error) {
	display: block;
	margin: var(--tmo-ui-space-2) 0 0;
	color: var(--tmo-ui-text-muted);
	font-size: var(--tmo-ui-font-size-sm);
	font-weight: var(--tmo-ui-font-weight-regular);
	line-height: var(--tmo-ui-line-height-ui);
}

body.tmo-ui-active #content .tmo-ui-field-error {
	color: var(--tmo-ui-error-text);
	font-weight: var(--tmo-ui-font-weight-medium);
}

body.tmo-ui-active #content .tmo-ui-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--tmo-ui-space-2);
	min-height: var(--tmo-ui-touch-target);
	padding-block: var(--tmo-ui-space-2);
}

body.tmo-ui-active #content .tmo-ui-choice :where(input[type="checkbox"], input[type="radio"]) {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.1875rem;
	accent-color: var(--tmo-ui-brand);
}

/* Cards and panels */
body.tmo-ui-active #content :where(.tmo-ui-card, .tmo-ui-panel) {
	min-width: 0;
	padding: var(--tmo-ui-space-6);
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-border);
	border-radius: var(--tmo-ui-radius-card);
	background-color: var(--tmo-ui-surface);
	box-shadow: var(--tmo-ui-shadow-sm);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-md);
	font-weight: var(--tmo-ui-font-weight-regular);
	line-height: var(--tmo-ui-line-height-body);
}

body.tmo-ui-active #content .tmo-ui-card--subtle {
	background-color: var(--tmo-ui-surface-subtle);
	box-shadow: none;
}

body.tmo-ui-active #content :where(.tmo-ui-card, .tmo-ui-panel) > :first-child {
	margin-top: 0;
}

body.tmo-ui-active #content :where(.tmo-ui-card, .tmo-ui-panel) > :last-child {
	margin-bottom: 0;
}

/* Tables */
body.tmo-ui-active #content .tmo-ui-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-border);
	border-radius: var(--tmo-ui-radius-card);
	background-color: var(--tmo-ui-surface);
	-webkit-overflow-scrolling: touch;
}

body.tmo-ui-active #content .tmo-ui-table {
	width: 100%;
	margin: 0 0 var(--tmo-ui-space-6);
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--tmo-ui-radius-card);
	background-color: var(--tmo-ui-surface);
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-sm);
	line-height: var(--tmo-ui-line-height-ui);
	overflow: hidden;
}

body.tmo-ui-active #content .tmo-ui-table :where(th, td) {
	min-height: var(--tmo-ui-touch-target);
	padding: var(--tmo-ui-space-3) var(--tmo-ui-space-4);
	border: 0;
	border-bottom: var(--tmo-ui-border-width) solid var(--tmo-ui-border);
	color: var(--tmo-ui-text-secondary);
	text-align: start;
	vertical-align: middle;
}

body.tmo-ui-active #content .tmo-ui-table thead th {
	background-color: var(--tmo-ui-surface-subtle);
	color: var(--tmo-ui-text);
	font-size: 0.8125rem;
	font-weight: var(--tmo-ui-font-weight-semibold);
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

body.tmo-ui-active #content .tmo-ui-table tbody tr:last-child > :where(th, td) {
	border-bottom: 0;
}

body.tmo-ui-active #content .tmo-ui-table tbody tr {
	transition: background-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard);
}

body.tmo-ui-active #content .tmo-ui-table tbody tr:hover {
	background-color: var(--tmo-ui-surface-subtle);
}

/* Tabs */
body.tmo-ui-active #content .tmo-ui-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tmo-ui-space-2);
	margin: 0 0 var(--tmo-ui-space-6);
	padding: var(--tmo-ui-space-1);
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-border);
	border-radius: var(--tmo-ui-radius-card);
	background-color: var(--tmo-ui-surface-subtle);
}

body.tmo-ui-active #content .tmo-ui-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tmo-ui-touch-target);
	padding: var(--tmo-ui-space-2) var(--tmo-ui-space-4);
	border: var(--tmo-ui-border-width) solid transparent;
	border-radius: var(--tmo-ui-radius-button);
	background-color: transparent;
	color: var(--tmo-ui-text-secondary);
	font-size: var(--tmo-ui-font-size-sm);
	font-weight: var(--tmo-ui-font-weight-semibold);
	line-height: var(--tmo-ui-line-height-ui);
	text-decoration: none;
	transition:
		background-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		border-color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard),
		color var(--tmo-ui-duration-fast) var(--tmo-ui-ease-standard);
}

body.tmo-ui-active #content .tmo-ui-tab:hover {
	background-color: var(--tmo-ui-surface);
	color: var(--tmo-ui-link-hover);
}

body.tmo-ui-active #content .tmo-ui-tab:is(.is-active, [aria-current="page"], [aria-selected="true"]) {
	border-color: var(--tmo-ui-brand);
	background-color: var(--tmo-ui-surface);
	box-shadow: var(--tmo-ui-shadow-xs);
	color: var(--tmo-ui-link-hover);
}

/* Notices and validation summaries */
body.tmo-ui-active #content .tmo-ui-notice {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--tmo-ui-space-5);
	padding: var(--tmo-ui-space-4);
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-info-border);
	border-left-width: 4px;
	border-radius: var(--tmo-ui-radius-input);
	background-color: var(--tmo-ui-info-surface);
	box-shadow: none;
	color: var(--tmo-ui-info-text);
	font-family: var(--tmo-ui-font-body);
	font-size: var(--tmo-ui-font-size-sm);
	font-weight: var(--tmo-ui-font-weight-medium);
	line-height: var(--tmo-ui-line-height-ui);
}

body.tmo-ui-active #content .tmo-ui-notice--success {
	border-color: var(--tmo-ui-success-border);
	background-color: var(--tmo-ui-success-surface);
	color: var(--tmo-ui-success-text);
}

body.tmo-ui-active #content .tmo-ui-notice--warning {
	border-color: var(--tmo-ui-warning-border);
	background-color: var(--tmo-ui-warning-surface);
	color: var(--tmo-ui-warning-text);
}

body.tmo-ui-active #content .tmo-ui-notice--error {
	border-color: var(--tmo-ui-error-border);
	background-color: var(--tmo-ui-error-surface);
	color: var(--tmo-ui-error-text);
}

body.tmo-ui-active #content .tmo-ui-notice > :first-child {
	margin-top: 0;
}

body.tmo-ui-active #content .tmo-ui-notice > :last-child {
	margin-bottom: 0;
}

/* Pagination */
body.tmo-ui-active #content .tmo-ui-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tmo-ui-space-2);
	margin: var(--tmo-ui-space-6) 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.tmo-ui-active #content .tmo-ui-pagination :where(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tmo-ui-touch-target);
	min-height: var(--tmo-ui-touch-target);
	padding: var(--tmo-ui-space-2);
	border: var(--tmo-ui-border-width) solid var(--tmo-ui-border);
	border-radius: var(--tmo-ui-radius-input);
	background-color: var(--tmo-ui-surface);
	color: var(--tmo-ui-text-secondary);
	font-size: var(--tmo-ui-font-size-sm);
	font-weight: var(--tmo-ui-font-weight-semibold);
	line-height: 1;
	text-decoration: none;
}

body.tmo-ui-active #content .tmo-ui-pagination :where(a, span):is(:hover, .is-current, [aria-current="page"]) {
	border-color: var(--tmo-ui-brand);
	background-color: var(--tmo-ui-brand-soft);
	color: var(--tmo-ui-link-hover);
}

/* Empty and loading states */
body.tmo-ui-active #content .tmo-ui-empty-state {
	display: grid;
	justify-items: center;
	gap: var(--tmo-ui-space-3);
	padding: var(--tmo-ui-space-12) var(--tmo-ui-space-6);
	border: var(--tmo-ui-border-width) dashed var(--tmo-ui-border-strong);
	border-radius: var(--tmo-ui-radius-card);
	background-color: var(--tmo-ui-surface);
	color: var(--tmo-ui-text-secondary);
	text-align: center;
}

body.tmo-ui-active #content .tmo-ui-empty-state__title {
	margin: 0;
	color: var(--tmo-ui-text);
	font-family: var(--tmo-ui-font-heading);
	font-size: var(--tmo-ui-font-size-xl);
	font-weight: var(--tmo-ui-font-weight-bold);
	line-height: var(--tmo-ui-line-height-heading);
}

body.tmo-ui-active #content .tmo-ui-empty-state__body {
	max-width: 52ch;
	margin: 0;
}

body.tmo-ui-active #content .tmo-ui-skeleton {
	min-height: 1rem;
	border-radius: var(--tmo-ui-radius-editorial);
	background: linear-gradient(
		100deg,
		var(--tmo-ui-surface-subtle) 20%,
		var(--tmo-ui-border) 40%,
		var(--tmo-ui-surface-subtle) 60%
	);
	background-size: 220% 100%;
	color: transparent;
	animation: tmo-ui-skeleton-shimmer 1.5s var(--tmo-ui-ease-standard) infinite;
}

body.tmo-ui-active #content .tmo-ui-loading {
	display: inline-flex;
	align-items: center;
	gap: var(--tmo-ui-space-2);
	color: var(--tmo-ui-text-secondary);
	font-size: var(--tmo-ui-font-size-sm);
	font-weight: var(--tmo-ui-font-weight-medium);
}

body.tmo-ui-active #content .tmo-ui-spinner {
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--tmo-ui-border);
	border-top-color: var(--tmo-ui-brand);
	border-radius: 50%;
	animation: tmo-ui-spinner 720ms linear infinite;
}

body.tmo-ui-active #content [aria-busy="true"].tmo-ui-loading-target {
	pointer-events: none;
}

@keyframes tmo-ui-skeleton-shimmer {
	to {
		background-position-x: -220%;
	}
}

@keyframes tmo-ui-spinner {
	to {
		transform: rotate(360deg);
	}
}