/* ==========================================================================
   "Assess with us" popup: assess.css
   Styles for src/components/AssessDialog.astro, used anywhere on the site.
   A separate file so a frozen article can link it from inside its lead-gen
   markers, and so pages without the popup never load it.
   Site tokens only (tokens.css :root). No hex values. Mobile first.
   ========================================================================== */

/* The page behind an open popup does not scroll. */
html.assess-is-open {
	overflow: hidden;
}

.assess-dialog {
	width: calc(100% - var(--space-20));
	max-width: 34em;
	max-height: calc(100dvh - var(--space-20));
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--radius-xl);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body-wide);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	box-shadow: var(--shadow-glass);
}
.assess-dialog::backdrop {
	background: color-mix(in srgb, var(--black) 60%, transparent);
}
.assess-dialog__panel {
	position: relative;
	padding: var(--space-50) var(--space-20) var(--space-30);
}
.assess-dialog__close {
	position: absolute;
	top: var(--space-10);
	right: var(--space-10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--fg);
	cursor: pointer;
}
.assess-dialog__close:hover {
	background: var(--bg-muted);
}
/* Two classes, so a host page's bare h2 and p rules (a Lab article's h2 is
   display size) never reach the popup. */
.assess-dialog .assess-dialog__title {
	margin: 0 0 var(--space-10);
	padding-right: var(--space-30);
	font-family: var(--font-body);
	font-size: 1.6em;
	font-weight: var(--w-extrabold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.05;
}
.assess-dialog .assess-dialog__text {
	margin: 0 0 var(--space-30);
	color: var(--fg-muted);
}

/* ---------- FORM ---------- */
.assess-form__pair {
	display: grid;
	gap: 0 var(--space-20);
}
.assess-form__field {
	margin-bottom: var(--space-20);
}
.assess-form__label {
	display: block;
	margin-bottom: var(--space-10);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--w-semibold);
	line-height: var(--leading-tight);
}
.assess-form__input {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: var(--space-10) var(--space-20);
	border: 1px solid var(--fg-subtle);
	border-radius: var(--radius-md);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body-wide);
	font-size: var(--fs-body);
	line-height: var(--leading-base);
}
.assess-form__textarea {
	min-height: 6em;
	resize: vertical;
}
.assess-form__input[aria-invalid='true'] {
	border: 2px solid var(--fg);
}
.assess-form__error {
	margin: 0 0 var(--space-20);
	font-size: var(--fs-sm);
	font-weight: var(--w-bold);
}
.assess-form__error[hidden],
.assess-form__stub[hidden],
.assess-dialog__success[hidden],
.assess-form[hidden] {
	display: none;
}
.assess-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	padding: 0 var(--space-30);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--accent-fg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--w-semibold);
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease-soft);
}
.assess-form__submit:hover {
	background: var(--accent-interactive);
	color: var(--accent-interactive-fg);
}
.assess-form__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}
.assess-form__stub {
	margin: var(--space-20) 0 0;
	font-size: var(--fs-xs);
	color: var(--fg-muted);
}
.assess-dialog__success {
	padding-block: var(--space-20);
	border-block: 1px solid var(--rule-on-light-strong);
	outline: none;
}
.assess-dialog__success-text {
	margin: 0;
	font-size: var(--fs-subhead);
	font-weight: var(--w-semibold);
}
.assess-dialog__close:focus-visible,
.assess-form__input:focus-visible,
.assess-form__submit:focus-visible {
	outline: 2px solid var(--accent-interactive);
	outline-offset: 2px;
}
.assess-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 577px) {
	.assess-dialog {
		width: calc(100% - var(--space-100));
	}
	.assess-dialog__panel {
		padding: var(--space-50);
	}
	.assess-form__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.assess-form__submit {
		width: auto;
	}
}