/* ==========================================================================
   Ask about this piece — dialog
   Converted from design-reference/showroom-floor.css §11.

   A native <dialog>, so the scrim is ::backdrop and there is no separate scrim
   element to position. Two of the export's values had no token: the 560px
   width becomes the 62ch measure this build already uses for prose, and the
   88vh ceiling becomes theme.json's existing overlay height. The 3px top
   border becomes a hairline in ink, matching the Spec Ticket. Recorded in
   design-reference/README.md.
   ========================================================================== */

.tfs-enquiry {
	/* min() keeps it inside a 360px viewport, where 62ch would overflow. */
	width: 100%;
	max-width: min(62ch, calc(100% - var(--wp--preset--spacing--40)));
	max-height: var(--wp--custom--rail--drawer-max-height);
	margin: auto;
	padding: 0;
	overflow: auto;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule-strong);
	border-radius: var(--wp--custom--radius);
}

/* ::backdrop inherits custom properties from the root element in current
   browsers. Where it does not, the user agent's own dimmed backdrop stands in,
   which is a correct fallback and needs no hardcoded colour to express. */
.tfs-enquiry::backdrop {
	background-color: var(--wp--custom--scrim);
}

.tfs-enquiry__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--hairline);
}

.tfs-enquiry__eyebrow {
	margin: 0 0 var(--wp--custom--step--8);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-enquiry__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--tight);
}

.tfs-enquiry__sku {
	margin: var(--wp--custom--step--8) 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--utility);
	color: var(--wp--preset--color--muted);
}

.tfs-enquiry__close {
	flex: 0 0 var(--wp--custom--control--tap-target-minimum);
	width: var(--wp--custom--control--tap-target-minimum);
	height: var(--wp--custom--control--tap-target-minimum);
	padding: 0;
	font-size: var(--wp--preset--font-size--sub);
	line-height: 1;
	color: var(--wp--preset--color--muted);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
	transition:
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-enquiry__close:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.tfs-enquiry__close:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-enquiry__body {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}

.tfs-enquiry__foot {
	display: grid;
	gap: var(--wp--custom--step--12);
	padding: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--hairline);
}

.tfs-enquiry__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* Deliberately not hidden while empty. A live region has to be in the
   accessibility tree before its text changes, or the announcement is missed —
   an empty paragraph costs one grid row and buys a reliable one. */

.tfs-enquiry__status[data-done] {
	color: var(--wp--preset--color--accent);
}

.tfs-enquiry__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.tfs-enquiry .tfs-btn:disabled {
	background-color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--muted);
	cursor: default;
}