/*
 * Elegant Matter Tools UI foundation.
 * Scoped to tool pages/components so editorial pages are not restyled globally.
 */

.em-tool-page,
.em-tools-ui {
	--em-tools-bg: var(--wp--preset--color--background, #0a192f);
	--em-tools-surface: var(--wp--preset--color--tertiary, #172a45);
	--em-tools-accent: var(--wp--preset--color--primary, #06a6b7);
	--em-tools-secondary: var(--wp--preset--color--secondary, #818cf8);
	--em-tools-text: var(--wp--preset--color--foreground, #f8fafc);
	--em-tools-muted: var(--wp--preset--color--foreground-alt, #94a3b8);
	--em-tools-border: color-mix(in srgb, var(--em-tools-text) 18%, transparent);
	--em-tools-border-strong: color-mix(in srgb, var(--em-tools-text) 30%, transparent);
	--em-tools-radius: 8px;
	--em-tools-control-height: 44px;
}

.em-tool-page-header > * {
	width: 100%;
	max-width: 54rem;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.em-tool-back-link {
	margin-bottom: .25rem;
	font-size: .9rem;
	font-weight: 600;
}

.em-tool-back-link a {
	color: var(--em-tools-accent);
	text-decoration: none;
}

.em-tool-back-link a:hover {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.em-tool-page-summary {
	color: var(--em-tools-muted);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.6;
}

.em-tool-page-content {
	margin-top: clamp(2rem, 5vw, 4rem);
}

.em-tools-ui {
	color: var(--em-tools-text);
}

.em-tool-panel,
.em-tool-result-card,
.em-tool-notice {
	box-sizing: border-box;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: var(--em-tools-surface);
}

.em-tool-panel {
	padding: clamp(1rem, 2.5vw, 2rem);
}

.em-tool-result-card {
	padding: 1rem;
}

.em-tool-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	vertical-align: -.2em;
}

.em-tool-badges,
.em-tool-status,
.em-tool-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}

.em-tool-badge,
.em-tool-status-item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 32px;
	padding: .28rem .65rem;
	border: 1px solid var(--em-tools-border);
	border-radius: 999px;
	color: var(--em-tools-muted);
	font-size: .875rem;
	line-height: 1.2;
}

.em-tool-status-item[data-state="active"],
.em-tool-status-item[data-state="success"] {
	border-color: color-mix(in srgb, var(--em-tools-accent) 65%, transparent);
	color: var(--em-tools-text);
}

.em-tool-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--em-tools-control-height);
	padding: .7rem 1rem;
	border: 1px solid var(--em-tools-accent);
	border-radius: 0;
	background: var(--em-tools-accent);
	color: var(--em-tools-bg);
	font: inherit;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
}

.em-tool-button:hover {
	border-color: var(--em-tools-secondary);
	background: var(--em-tools-secondary);
	color: var(--em-tools-bg);
}

.em-tool-button--secondary {
	border-color: var(--em-tools-border-strong);
	background: transparent;
	color: var(--em-tools-text);
}

.em-tool-button--secondary:hover {
	border-color: var(--em-tools-accent);
	background: transparent;
	color: var(--em-tools-accent);
}

.em-tool-button:disabled,
.em-tool-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .55;
}

.em-tool-button:focus-visible,
.em-tool-field:focus-visible,
.em-tool-select:focus-visible,
.em-tool-range:focus-visible,
.em-tool-disclosure > summary:focus-visible {
	outline: 2px solid var(--em-tools-accent);
	outline-offset: 3px;
}

.em-tool-field,
.em-tool-select {
	box-sizing: border-box;
	min-height: var(--em-tools-control-height);
	max-width: 100%;
	border: 1px solid var(--em-tools-border-strong);
	border-radius: 0;
	background: var(--em-tools-bg);
	color: var(--em-tools-text);
	font: inherit;
}

.em-tool-field {
	padding: .65rem .75rem;
}

.em-tool-label {
	display: block;
	margin-bottom: .4rem;
	font-size: .9rem;
	font-weight: 600;
}

.em-tool-help,
.em-tool-meta {
	color: var(--em-tools-muted);
	font-size: .9rem;
	line-height: 1.5;
}

.em-tool-notice {
	padding: 1rem;
}

.em-tool-notice__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .35rem;
	font-weight: 600;
}

.em-tool-disclosure {
	border-top: 1px solid var(--em-tools-border);
}

.em-tool-disclosure > summary {
	padding: .9rem 0;
	font-weight: 600;
	cursor: pointer;
}

.em-tool-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 700px) {
	.em-tool-panel {
		padding: 1rem;
	}

	.em-tool-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.em-tool-actions .em-tool-button {
		width: 100%;
	}
}

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