/*
 * VAIDIKX — the studio invitation, and the inquiry dialog it opens.
 *
 * Every colour here is a design token from style.css, never a new literal: the accent FILL
 * (--mh-color-accent) is used for the button and the focus ring, the lifted accent
 * (--mh-color-accent-text) only ever for text, and the warm pair (--mh-color-beige /
 * --mh-color-bronze) for the kicker and its rule. That split is not cosmetic — the brand red
 * and blue fills sit below AA as text on this ground, which is why the text tokens exist.
 *
 * The surfaces are the system's own near-black steps with hairline borders. There is one
 * translucent panel and one blurred backdrop; no gradients, no glows, no neon.
 */

/* ------------------------------------------------------------------ section --- */

.mh-invite {
	padding-block: clamp( 3.5rem, 8vw, 7rem );
	background: var( --mh-color-bg, #050505 );
	border-top: var( --mh-hairline );
}

.mh-invite__inner {
	display: grid;
	gap: clamp( 2rem, 5vw, 3.25rem );
}

/* One column until there is genuinely room for two — the capability panel beside the
   lede reads as a caption at narrow widths rather than a second column. */
@media ( min-width: 900px ) {
	.mh-invite__inner {
		grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
		align-items: start;
	}
	.mh-invite__cta {
		grid-column: 1 / -1;
	}
}

.mh-invite__kicker {
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta, 0.75rem );
	font-weight: 600;
	letter-spacing: var( --mh-track-meta, 0.08em );
	text-transform: uppercase;
	color: var( --mh-color-beige );
	margin: 0 0 0.9rem;
	display: flex;
	align-items: center;
	gap: var( --mh-space-sm );
}

/* The one warm mark on the section: a short bronze rule after the kicker. */
.mh-invite__kicker::after {
	content: '';
	flex: 0 0 auto;
	width: clamp( 24px, 5vw, 56px );
	height: 1px;
	background: var( --mh-color-bronze );
}

.mh-invite__title {
	font-family: var( --mh-font-display );
	font-size: clamp( 2rem, 1.2rem + 3.4vw, 3.5rem );
	line-height: 1.04;
	letter-spacing: var( --mh-track-display, -0.01em );
	color: var( --mh-color-heading );
	margin: 0 0 0.5em;
	text-wrap: balance;
}

.mh-invite__dek {
	font-size: clamp( 1rem, 0.95rem + 0.3vw, 1.1875rem );
	line-height: 1.55;
	color: var( --mh-color-muted );
	margin: 0;
	max-width: 46ch;
}

/* --- the capability panel: the one glass surface ---------------------------- */

.mh-invite__panel {
	border: var( --mh-hairline );
	border-radius: var( --mh-radius-lg );
	padding: clamp( 1.25rem, 3vw, 1.75rem );
	/* A single translucent step above the page, not a gradient. */
	background: color-mix( in srgb, var( --mh-surface-raised ) 72%, transparent );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

/* color-mix is recent; without it the panel simply uses the solid raised surface. */
@supports not ( background: color-mix( in srgb, red 50%, transparent ) ) {
	.mh-invite__panel { background: var( --mh-surface-raised ); }
}

.mh-invite__panel-label {
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta, 0.75rem );
	font-weight: 600;
	letter-spacing: var( --mh-track-meta, 0.08em );
	text-transform: uppercase;
	color: var( --mh-color-faint, #8a8a8a );
	margin: 0 0 var( --mh-space-sm );
}

.mh-invite__caps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.mh-invite__cap {
	font-family: var( --mh-font-ui );
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var( --mh-color-heading );
	padding-block: 0.72rem;
	border-bottom: var( --mh-hairline );
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
}

.mh-invite__cap:last-child { border-bottom: none; padding-bottom: 0; }
.mh-invite__cap:first-child { padding-top: 0; }

/* A small electric-blue marker rather than an icon. */
.mh-invite__cap::before {
	content: '';
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --mh-color-accent );
	transform: translateY( -2px );
}

/* --- the call ---------------------------------------------------------------- */

.mh-invite__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --mh-space-md );
	padding-top: clamp( 1.5rem, 4vw, 2.25rem );
	border-top: var( --mh-hairline );
}

.mh-invite__ask {
	font-family: var( --mh-font-display );
	font-size: clamp( 1.125rem, 1rem + 0.7vw, 1.5rem );
	line-height: 1.2;
	color: var( --mh-color-heading );
	margin: 0;
	margin-right: auto;
}

.mh-invite__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Comfortably past the 44px touch-target floor at every width. */
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var( --mh-radius );
	background: var( --mh-color-accent );
	color: #fff;
	font-family: var( --mh-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.mh-invite__button:hover {
	background: var( --mh-color-accent-deep, #1b44b8 );
	transform: translateY( -1px );
}

.mh-invite__button:focus-visible {
	outline: 2px solid var( --mh-color-accent-text );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mh-invite__button { transition: none; }
	.mh-invite__button:hover { transform: none; }
}

/* ------------------------------------------------------------------- dialog --- */

.mh-invite-dlg {
	width: min( 660px, calc( 100vw - 2rem ) );
	max-height: min( 88vh, 900px );
	padding: 0;
	border: var( --mh-hairline );
	border-radius: var( --mh-radius-lg );
	background: var( --mh-color-paper, #111 );
	color: var( --mh-color-ink, #e8e8e8 );
	box-shadow: 0 40px 100px -30px rgba( 0, 0, 0, 0.8 );
	overflow: hidden;
}

.mh-invite-dlg::backdrop {
	background: rgba( 5, 5, 6, 0.76 );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
}

.mh-invite-dlg__scroll {
	position: relative;
	max-height: min( 88vh, 900px );
	overflow-y: auto;
	padding: clamp( 1.35rem, 4vw, 2.25rem );
	overscroll-behavior: contain;
}

.mh-invite-dlg__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	/* 44px, not 40: the responsive pass measured this as the one control in the dialog
	   below the comfortable touch-target floor. */
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: var( --mh-radius );
	color: var( --mh-color-muted );
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.mh-invite-dlg__close:hover { color: var( --mh-color-heading ); background: var( --mh-surface-raised ); }
.mh-invite-dlg__close:focus-visible { outline: 2px solid var( --mh-color-accent-text ); outline-offset: 2px; }

.mh-invite-dlg__kicker {
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta, 0.75rem );
	font-weight: 600;
	letter-spacing: var( --mh-track-meta, 0.08em );
	text-transform: uppercase;
	color: var( --mh-color-beige );
	margin: 0 0 0.5rem;
}

.mh-invite-dlg__title {
	font-family: var( --mh-font-display );
	font-size: clamp( 1.35rem, 1.1rem + 1.1vw, 1.9rem );
	line-height: 1.12;
	color: var( --mh-color-heading );
	margin: 0 0 1.35rem;
	padding-right: 2.5rem; /* clear of the close button */
}

.mh-invite-dlg__dek {
	color: var( --mh-color-muted );
	line-height: 1.55;
	margin: 0 0 1.35rem;
}

/* --- fields ------------------------------------------------------------------ */

.mh-invite-dlg__grid {
	display: grid;
	gap: 0 var( --mh-space-md );
}

@media ( min-width: 600px ) {
	.mh-invite-dlg__grid { grid-template-columns: 1fr 1fr; }
}

.mh-invite-dlg__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 1.05rem;
	min-width: 0;
}

.mh-invite-dlg__field label {
	font-family: var( --mh-font-ui );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var( --mh-color-heading );
}

.mh-invite-dlg__req { color: var( --mh-color-accent-text ); }
.mh-invite-dlg__opt { font-weight: 400; color: var( --mh-color-faint, #8a8a8a ); }

.mh-invite-dlg__field input,
.mh-invite-dlg__field select,
.mh-invite-dlg__field textarea {
	width: 100%;
	/* Without this a long value or a wide select stretches the grid track and the
	   dialog leaks horizontally at 320px. */
	min-width: 0;
	box-sizing: border-box;
	/* 16px: anything smaller makes iOS Safari zoom the viewport on focus, which reads
	   as the layout breaking. */
	font-size: 16px;
	font-family: var( --mh-font-ui );
	line-height: 1.4;
	color: var( --mh-color-heading );
	background: var( --mh-color-bg-alt, #0a0a0a );
	border: 1px solid var( --mh-color-rule );
	border-radius: var( --mh-radius );
	padding: 0.7rem 0.8rem;
	min-height: 48px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mh-invite-dlg__field textarea {
	resize: vertical;
	min-height: 132px;
}

.mh-invite-dlg__field input:focus,
.mh-invite-dlg__field select:focus,
.mh-invite-dlg__field textarea:focus {
	outline: none;
	border-color: var( --mh-color-accent-text );
	box-shadow: 0 0 0 3px rgba( 48, 110, 255, 0.22 );
}

.mh-invite-dlg__field input[aria-invalid='true'],
.mh-invite-dlg__field select[aria-invalid='true'],
.mh-invite-dlg__field textarea[aria-invalid='true'] {
	border-color: var( --mh-color-danger, #c8553d );
}

.mh-invite-dlg__error,
.mh-invite-dlg__formerror {
	font-family: var( --mh-font-ui );
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var( --mh-color-danger, #c8553d );
	min-height: 0;
}

.mh-invite-dlg__error:empty,
.mh-invite-dlg__formerror:empty { display: none; }

.mh-invite-dlg__formerror { margin: 0 0 1rem; }

/* --- actions ----------------------------------------------------------------- */

.mh-invite-dlg__actions {
	display: flex;
	gap: var( --mh-space-sm );
	margin-top: 0.35rem;
}

.mh-invite-dlg__submit {
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var( --mh-radius );
	background: var( --mh-color-accent );
	color: #fff;
	font-family: var( --mh-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease;
}

.mh-invite-dlg__submit:hover:not( [disabled] ) { background: var( --mh-color-accent-deep, #1b44b8 ); }
.mh-invite-dlg__submit:focus-visible { outline: 2px solid var( --mh-color-accent-text ); outline-offset: 3px; }
.mh-invite-dlg__submit[disabled] { opacity: 0.6; cursor: progress; }

.mh-invite-dlg__privacy {
	font-family: var( --mh-font-ui );
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --mh-color-faint, #8a8a8a );
	margin: 0.9rem 0 0;
}

/* The honeypot: out of sight, out of the keyboard order, and never announced. */
.mh-invite-dlg__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mh-invite-dlg__submit,
	.mh-invite-dlg__field input,
	.mh-invite-dlg__field select,
	.mh-invite-dlg__field textarea { transition: none; }
}

/* ==================================================== the confirmation state ===== */

/*
 * Shown in place of the form once an inquiry is stored. Deliberately quiet: the moment is a
 * reassurance, not a celebration, so there is a hairline mark and a sentence rather than a
 * green banner. Same tokens as the rest of the dialog — no new colour vocabulary.
 */

.mh-invite-done {
	padding-block: clamp( 0.5rem, 2vw, 1.5rem );
}

/*
 * The mark: an electric-blue tick in a thin ring. Small on purpose — it confirms, it does not
 * announce. It is aria-hidden, because the panel's own text already says what happened and a
 * screen reader should hear that rather than "image".
 */
.mh-invite-done__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: clamp( 0.75rem, 2vw, 1.1rem );
	border-radius: 50%;
	border: 1px solid color-mix( in srgb, var( --mh-color-accent-text, #306eff ) 45%, transparent );
	background: color-mix( in srgb, var( --mh-color-accent-text, #306eff ) 10%, transparent );
	color: var( --mh-color-accent-text, #306eff );
	/* Restrained, not a bloom. */
	box-shadow: 0 0 22px -10px color-mix( in srgb, var( --mh-color-accent-text, #306eff ) 80%, transparent );
}

.mh-invite-done__mark svg {
	width: 20px;
	height: 20px;
}

/* The warm accent appears once, on the kicker, exactly as it does on the Studio card. */
.mh-invite-done__kicker {
	color: var( --mh-studio-gold, #e8b04b );
}

.mh-invite-done__title {
	text-wrap: balance;
}

/* The closing line: quiet, and set apart by a hairline rather than a box. */
.mh-invite-done__sign {
	margin: clamp( 0.9rem, 2.2vw, 1.35rem ) 0 0;
	padding-top: clamp( 0.9rem, 2.2vw, 1.35rem );
	border-top: 1px solid var( --mh-color-border, #16181a );
	font-family: var( --mh-font-display );
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	color: var( --mh-color-muted, #96989b );
}

/*
 * The panel is revealed by removing [hidden], so the fade is the only motion — and it is the
 * kind that carries no meaning, which is why removing it changes nothing about whether the
 * message is understood.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.mh-invite-done:not( [hidden] ) {
		animation: mh-invite-done-in 260ms cubic-bezier( 0.16, 1, 0.3, 1 ) both;
	}
}

@keyframes mh-invite-done-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: none; }
}