/**
 * Opt-in UI toolkit. Public API: docs/ui-styling-guide.md.
 * Independent of legacy component/plugin CSS. Intentionally unlayered:
 * WordPress's generated element rules are unlayered too.
 * Consumers own markup, accessible names, data and state transitions.
 */
@scope (.tdun-ui) to (.tdun-ui-island) {
	:scope {
		--tdun-ui-radius: 0;
		--tdun-ui-pill-radius: 0;
		color: var(--wp--custom--ui--ink);
		font-family: var(--wp--custom--ui--font-ui);
		font-size: var(--wp--preset--font-size--body-medium);
		line-height: var(--wp--custom--line-height--body-medium);
		overflow-wrap: anywhere;
		@supports (corner-shape: squircle) {
			--tdun-ui-radius: var(--wp--custom--ui--radius--default);
			--tdun-ui-pill-radius: var(--wp--custom--ui--radius--pill);
		}
	}

	/* An island stops selectors, not inheritance or outside styles entering. */
	:scope, :where([class^="tdun-ui-"], [class*=" tdun-ui-"]) { box-sizing: border-box; }
	:where(.tdun-ui-heading, .tdun-ui-kicker, .tdun-ui-text, .tdun-ui-meta) { margin: 0; }
	.tdun-ui-heading {
		font: 400 var(--wp--preset--font-size--display-medium) / var(--wp--custom--ui--card-heading-line-height) var(--wp--custom--ui--font-editorial);
		text-wrap: balance;
		&.tdun-ui-heading--large { font-size: var(--wp--preset--font-size--display-large); }
	}
	.tdun-ui-kicker {
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 600;
		letter-spacing: var(--wp--custom--ui--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--wp--custom--ui--action);
	}
	.tdun-ui-text { text-wrap: pretty; }
	.tdun-ui-meta { font-size: var(--wp--preset--font-size--caption); color: var(--wp--custom--ui--muted); }
	.tdun-ui-link { color: var(--wp--custom--ui--action); text-decoration: underline; }
	.tdun-ui-icon { inline-size: 1em; block-size: 1em; flex-shrink: 0; vertical-align: middle; }

	/* Layout: source order is reading order; no content-dependent reordering. */
	.tdun-ui-stack { display: grid; gap: var(--wp--preset--spacing--md); min-inline-size: 0; }
	.tdun-ui-cluster, .tdun-ui-actions, .tdun-ui-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
		padding: 0;
		margin: 0;
		border: 0;
		min-inline-size: 0;
	}
	.tdun-ui-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wp--custom--ui--column-min-width)), 1fr));
		gap: var(--wp--preset--spacing--lg);
		padding: 0;
		margin: 0;
		list-style: none;
		& > * { min-inline-size: 0; }
	}
	.tdun-ui-reel {
		display: flex;
		gap: var(--wp--preset--spacing--md);
		overflow-x: auto;
		scroll-snap-type: inline mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--xs);
		scrollbar-color: var(--wp--custom--ui--muted) var(--wp--custom--ui--surface-muted);
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
		margin: 0;
		list-style: none;
	}
	.tdun-ui-reel__item { display: grid; flex: 0 0 min(var(--wp--custom--ui--carousel-card-width), 88%); min-inline-size: 0; scroll-snap-align: start; }
	.tdun-ui-scroll { max-inline-size: 100%; overflow-x: auto; padding: var(--wp--preset--spacing--xs); }

	/* Actions: map/save/share/outbound/reset/dismiss use one recipe. */
	.tdun-ui-action, .tdun-ui-choice {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: var(--wp--preset--spacing--sm);
		min-block-size: var(--wp--custom--ui--control-min-size);
		border: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule);
		padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
		background: var(--wp--custom--ui--surface);
		color: var(--wp--custom--ui--ink);
		font: 500 var(--wp--preset--font-size--body-small) / var(--wp--custom--line-height--body-medium) var(--wp--custom--ui--font-ui);
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		box-shadow: none;
		&:hover:where(:not(:disabled, [aria-disabled="true"], :has(input:disabled))) { background: var(--wp--custom--ui--surface-muted); border-color: var(--wp--custom--ui--action); }
	}
	.tdun-ui-action {
		&.tdun-ui-action--primary {
			background: var(--wp--custom--ui--action);
			border-color: var(--wp--custom--ui--action);
			color: var(--wp--custom--ui--on-action);
			&:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--wp--custom--ui--action-hover); }
		}
		&.tdun-ui-action--quiet {
			background: transparent;
			border-color: transparent;
			color: var(--wp--custom--ui--action);
			padding-inline: 0;
			font-weight: 400;
			&:hover:where(:not(:disabled, [aria-disabled="true"])) { text-decoration: underline; }
		}
		&.tdun-ui-action--danger { color: var(--wp--custom--ui--danger); border-color: var(--wp--custom--ui--danger); }
		&[aria-expanded="true"] { border-color: var(--wp--custom--ui--action); }
		&[aria-pressed="true"], &[aria-current="page"] {
			background: var(--wp--custom--ui--action);
			border-color: var(--wp--custom--ui--action);
			color: var(--wp--custom--ui--on-action);
			&:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--wp--custom--ui--action-hover); }
		}
		&.tdun-ui-action--icon { min-inline-size: var(--wp--custom--ui--control-min-size); flex-shrink: 0; }
		&.tdun-ui-action--full { inline-size: 100%; }
	}
	.tdun-ui-choice {
		& > input { accent-color: var(--wp--custom--ui--action); margin: 0; flex-shrink: 0; }
		&:has(input:checked), &[aria-pressed="true"] { background: var(--wp--custom--ui--accent-surface); border-color: var(--wp--custom--ui--action); }
	}
	.tdun-ui-action, .tdun-ui-choice {
		&[aria-busy="true"] { cursor: progress; }
		/* Disabled wins over selected/primary/hover. ARIA still needs JS enforcement. */
		&:is(:disabled, [aria-disabled="true"], :has(input:disabled)) {
			background: var(--wp--custom--ui--disabled-surface);
			border-color: var(--wp--custom--ui--rule);
			color: var(--wp--custom--ui--disabled-ink);
			text-decoration: none;
			cursor: not-allowed;
		}
	}

	/* Native fields; labels, descriptions and validation semantics live in HTML. */
	.tdun-ui-field { display: grid; gap: var(--wp--preset--spacing--sm); min-inline-size: 0; }
	.tdun-ui-field__label { font-size: var(--wp--preset--font-size--body-small); font-weight: 600; }
	.tdun-ui-field__help, .tdun-ui-field__error { margin: 0; font-size: var(--wp--preset--font-size--caption); }
	.tdun-ui-field__help { color: var(--wp--custom--ui--muted); }
	.tdun-ui-field__error { color: var(--wp--custom--ui--danger); }
	.tdun-ui-input {
		inline-size: 100%;
		min-inline-size: 0;
		min-block-size: var(--wp--custom--ui--control-min-size);
		padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
		border: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule);
		background: var(--wp--custom--ui--surface);
		color: var(--wp--custom--ui--ink);
		font: inherit;
		box-shadow: none;
		&::placeholder { color: var(--wp--custom--ui--muted); opacity: 1; }
		&:is(textarea) { resize: vertical; }
		&[aria-invalid="true"] { border-color: var(--wp--custom--ui--danger); }
		&[readonly] { background: var(--wp--custom--ui--surface-muted); }
		&:disabled { background: var(--wp--custom--ui--disabled-surface); color: var(--wp--custom--ui--disabled-ink); cursor: not-allowed; }
	}

	/* Informational facts/badges never pretend to be interactive controls. */
	.tdun-ui-facts, .tdun-ui-tags {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
		list-style: none;
		padding: 0;
		margin: 0;
		font-size: var(--wp--preset--font-size--caption);
	}
	.tdun-ui-facts { font-weight: 600; & > li + li::before { content: "·"; margin-inline-end: var(--wp--preset--spacing--sm); } }
	.tdun-ui-badge {
		display: inline-block;
		border: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule);
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
		font-size: var(--wp--preset--font-size--caption);
		color: var(--wp--custom--ui--muted);
		&.tdun-ui-badge--accent { color: var(--wp--custom--ui--ink); background: var(--wp--custom--ui--accent-surface); }
	}
	.tdun-ui-panel, .tdun-ui-notice { padding: var(--wp--preset--spacing--lg); border: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule); background: var(--wp--custom--ui--surface); }
	.tdun-ui-placeholder { min-block-size: var(--wp--custom--ui--control-min-size); background: var(--wp--custom--ui--surface-muted); }
	.tdun-ui-notice {
		background: var(--wp--custom--ui--surface-muted);
		border-inline-start: var(--wp--custom--focus--width) solid var(--wp--custom--ui--action);
		&.tdun-ui-notice--success { border-inline-start-color: var(--wp--custom--ui--success); }
		&.tdun-ui-notice--warning { border-inline-start-color: var(--wp--custom--ui--warning); }
		&.tdun-ui-notice--error { border-inline-start-color: var(--wp--custom--ui--danger); }
	}
	.tdun-ui-disclosure {
		border-block: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule);
		& > summary { cursor: pointer; padding-block: var(--wp--preset--spacing--md); color: var(--wp--custom--ui--action); }
		& > .tdun-ui-stack { padding-block-end: var(--wp--preset--spacing--md); }
	}
	/* A portalled native dialog can carry its own tdun-ui root. No display override. */
	.tdun-ui-dialog, :where(:scope).tdun-ui-dialog {
		inline-size: min(calc(100% - var(--wp--preset--spacing--xl)), var(--wp--custom--ui--dialog-max-width));
		max-block-size: calc(100dvb - var(--wp--preset--spacing--xl));
		padding: var(--wp--preset--spacing--lg);
		border: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule);
		background: var(--wp--custom--ui--surface);
		color: var(--wp--custom--ui--ink);
		overflow: auto;
		&::backdrop { background: var(--wp--custom--ui--backdrop); }
	}
	.tdun-ui-table {
		inline-size: 100%;
		border-collapse: collapse;
		font-size: var(--wp--preset--font-size--body-small);
		& :is(th, td) { padding: var(--wp--preset--spacing--sm); text-align: start; border-block-end: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule); }
		& caption { text-align: start; font-weight: 600; padding-block-end: var(--wp--preset--spacing--sm); }
	}

	/* Approved card recipe: omit media entirely when there is no photograph. */
	.tdun-ui-card {
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
		block-size: 100%;
		border: var(--wp--custom--ui--border-width) solid var(--wp--custom--ui--rule);
		background: var(--wp--custom--ui--surface);
		&:not(:has(> .tdun-ui-card__media)) {
			background: var(--wp--custom--ui--canvas);
			& > .tdun-ui-card__body > .tdun-ui-card__title { font-size: var(--wp--preset--font-size--display-large); }
			& > .tdun-ui-card__body > .tdun-ui-card__description { font-size: var(--wp--preset--font-size--body-medium); }
		}
	}
	.tdun-ui-card__media {
		position: relative;
		aspect-ratio: 4 / 3;
		flex-shrink: 0;
		margin: 0;
		border-start-start-radius: inherit;
		border-start-end-radius: inherit;
		corner-shape: inherit;
		overflow: hidden;
		& img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
	}
	.tdun-ui-card__credit {
		position: absolute;
		inset-block-end: var(--wp--preset--spacing--sm);
		inset-inline-start: var(--wp--preset--spacing--sm);
		max-inline-size: calc(100% - var(--wp--preset--spacing--md));
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
		background: var(--wp--custom--ui--surface);
		color: var(--wp--custom--ui--muted);
		font-size: var(--wp--preset--font-size--caption);
	}
	.tdun-ui-card__body { flex: 1; display: flex; flex-direction: column; align-items: start; padding: var(--wp--preset--spacing--lg); }
	.tdun-ui-card__eyebrow { display: flex; justify-content: space-between; align-items: baseline; inline-size: 100%; }
	.tdun-ui-card__title {
		margin: var(--wp--preset--spacing--sm) 0;
		font: 400 var(--wp--preset--font-size--display-medium) / var(--wp--custom--ui--card-heading-line-height) var(--wp--custom--ui--font-editorial);
		text-wrap: balance;
		& a { color: inherit; text-decoration: none; }
		& a:hover { text-decoration: underline; }
	}
	.tdun-ui-card__description { margin: var(--wp--preset--spacing--md) 0; font-size: var(--wp--preset--font-size--body-small); line-height: var(--wp--custom--line-height--body-large); text-wrap: pretty; }
	.tdun-ui-card__body > .tdun-ui-tags { margin-block-start: var(--wp--preset--spacing--sm); }
	.tdun-ui-card__body > .tdun-ui-actions { inline-size: 100%; margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--lg); }
	.tdun-ui-card__links { margin-block-start: var(--wp--preset--spacing--md); font-size: var(--wp--preset--font-size--body-small); }

	/* Shared shapes/focus. No transitions: reduced motion is the default. */
	.tdun-ui-card, .tdun-ui-action, .tdun-ui-input, .tdun-ui-panel,
	.tdun-ui-notice, .tdun-ui-placeholder, .tdun-ui-dialog, :where(:scope).tdun-ui-dialog { corner-shape: squircle; border-radius: var(--tdun-ui-radius); }
	.tdun-ui-choice, .tdun-ui-badge { corner-shape: squircle; border-radius: var(--tdun-ui-pill-radius); }
	:is(.tdun-ui-action, .tdun-ui-choice, .tdun-ui-input, .tdun-ui-link, .tdun-ui-reel, .tdun-ui-scroll):focus-visible,
	.tdun-ui-card__title a:focus-visible, .tdun-ui-disclosure > summary:focus-visible, .tdun-ui-choice:has(input:focus-visible) {
		outline: var(--wp--custom--focus--width) solid var(--wp--custom--ui--action);
		outline-offset: var(--wp--custom--focus--offset);
	}
	/* Display rules must not revive hidden controls/panels. Preserve until-found. */
	[hidden]:not([hidden="until-found"]) { display: none; }
}