/**
 * SignalMind — Request access
 *
 * Capability list on the left, glass form panel on the right. Loaded on the
 * front page only.
 *
 * Form controls come from the component library; only the panel, the grid and
 * the states are added here.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Section
   ========================================================================== */

.sm-access {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	scroll-margin-top: calc(var(--sm-header-height) + var(--sm-space-6));
}

.sm-access__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
}

.sm-access__orb {
	position: absolute;
	border-radius: var(--sm-radius-circle);
}

.sm-access__orb--a {
	top: -20%;
	right: -8%;
	width: 44vw;
	height: 44vw;
	max-width: 660px;
	max-height: 660px;
	background: radial-gradient(circle at center, rgba(0, 229, 168, 0.15) 0%, transparent 66%);
}

.sm-access__orb--b {
	bottom: -26%;
	left: -12%;
	width: 46vw;
	height: 46vw;
	max-width: 700px;
	max-height: 700px;
	background: radial-gradient(circle at center, rgba(0, 194, 255, 0.12) 0%, transparent 68%);
}

.sm-access__head {
	margin-bottom: var(--sm-space-12);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.sm-access__layout {
	display: grid;
	gap: var(--sm-grid-gap-lg);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1024px) {
	.sm-access__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--sm-space-12);
	}
}

/* ==========================================================================
   Left: what access includes
   ========================================================================== */

.sm-access__intro {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-6);
}

.sm-access__support {
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
	max-width: var(--sm-measure);
}

.sm-access__list {
	display: grid;
	gap: var(--sm-space-3) var(--sm-space-6);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.sm-access__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sm-access__list li + li {
	margin-top: 0;
}

.sm-access__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sm-space-2-5);
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-secondary);
}

.sm-access__check {
	display: grid;
	place-items: center;
	flex: none;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	box-shadow: inset 0 0 0 1px var(--sm-alpha-primary-24);
}

.sm-access__kicker {
	padding-top: var(--sm-space-5);
	border-top: var(--sm-border-width) solid var(--sm-color-divider);
	font-size: var(--sm-text-md);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

/* ==========================================================================
   Right: the panel
   ========================================================================== */

.sm-access__panel {
	position: relative;
	padding: var(--sm-space-8);
	border-radius: var(--sm-radius-2xl);
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-lg));
	-webkit-backdrop-filter: blur(var(--sm-blur-lg));
	box-shadow: var(--sm-shadow-2xl);
}

.sm-access__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--sm-alpha-white-24), var(--sm-alpha-white-6) 40%, transparent 62%, var(--sm-alpha-primary-40));
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none;
}

.sm-access__form-title {
	margin-bottom: var(--sm-space-6);
	font-size: var(--sm-text-h3);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-access__panel .sm-inline-notice {
	margin-bottom: var(--sm-space-5);
}

/* Off-screen but still submitted: bots fill it, humans never see it. */
.sm-access__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Form
   ========================================================================== */

.sm-access__grid {
	display: grid;
	gap: var(--sm-space-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.sm-access__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sm-access__wide {
		grid-column: 1 / -1;
	}
}

/* Controls sit on the panel, which is already glass; a flat wash reads better
   here than the translucent field background used on solid surfaces. */
.sm-access__panel .sm-input {
	min-height: var(--sm-control-height-lg);
	background-color: var(--sm-color-surface-sunken);
	border-color: var(--sm-alpha-white-12);
	font-size: var(--sm-text-base);
}

.sm-access__panel textarea.sm-input {
	min-height: 7rem;
}

.sm-access__panel .sm-input:hover {
	border-color: var(--sm-alpha-white-24);
}

.sm-access__panel .sm-input:focus {
	background-color: var(--sm-color-surface);
	border-color: var(--sm-color-primary);
	box-shadow: var(--sm-shadow-ring);
}

/* Native select with the theme's own chevron. `appearance: none` from the base
   layer removes the platform arrow; this puts one back that matches the icon
   set instead of the OS. */
.sm-select {
	padding-right: var(--sm-space-10);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--sm-color-text-muted) 50%),
		linear-gradient(135deg, var(--sm-color-text-muted) 50%, transparent 50%);
	background-position: right var(--sm-space-5) center, right var(--sm-space-4) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.sm-access__panel .sm-select {
	color: var(--sm-color-text);
}

/* An unchosen optional select should read as a prompt, not as an answer. */
.sm-access__panel .sm-select:invalid,
.sm-access__panel .sm-select option[value=""] {
	color: var(--sm-color-field-placeholder);
}

.sm-access__panel .sm-select option {
	background-color: var(--sm-color-surface-overlay);
	color: var(--sm-color-text);
}

.sm-access__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	margin-top: var(--sm-space-6);
}

.sm-access__note {
	font-size: var(--sm-text-xs);
	text-align: center;
	color: var(--sm-color-text-subtle);
}

/* Submitting state, applied by access-form.js on the first submit. */
.sm-access__submit.is-busy {
	pointer-events: none;
	opacity: 0.72;
}

/* ==========================================================================
   Success state
   ========================================================================== */

.sm-access__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sm-space-4);
	padding-block: var(--sm-space-8);
	text-align: center;
}

.sm-access__done-mark {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: var(--sm-radius-circle);
	background-image: var(--sm-gradient-brand-soft);
	border: var(--sm-border-width) solid var(--sm-color-border-brand);
	color: var(--sm-color-primary);
	box-shadow: var(--sm-glow-soft);
}

.sm-access__done-title {
	font-size: var(--sm-text-h2);
	font-weight: var(--sm-weight-extrabold);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-access__done-text {
	max-width: 30rem;
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-access__done-text + .sm-access__done-text {
	margin-top: calc(-1 * var(--sm-space-2));
}

.sm-access__done .sm-access__note {
	margin-top: var(--sm-space-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.sm-access__head {
		margin-bottom: var(--sm-space-10);
	}
}

@media (max-width: 599px) {
	.sm-access__panel {
		padding: var(--sm-space-5);
	}

	.sm-access__done {
		padding-block: var(--sm-space-5);
	}
}