/**
 * Celsyn 360 Liquid — site-entry Research Use / 21+ acknowledgement.
 * Original design — dark/navy premium glass card, Celsyn blue accent.
 */
.celsyn-entry-gate {
	position: fixed;
	inset: 0;
	z-index: var( --z-entry-gate );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --space-5 );
}
.celsyn-entry-gate[hidden] { display: none; }

.celsyn-entry-gate__scrim {
	position: absolute;
	inset: 0;
	background: rgb( var( --celsyn-ink-rgb ) / 0.72 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}

.celsyn-entry-gate__dialog {
	position: relative;
	z-index: 1;
	width: min( 100%, 480px );
	max-height: 90vh;
	overflow-y: auto;
	padding: var( --space-7 ) var( --space-6 );
	border-radius: var( --radius-lg );
	background: rgb( 20 22 28 / 0.94 );
	border: 1px solid rgb( var( --celsyn-cyan-rgb, 59 183 214 ) / 0.35 );
	box-shadow:
		0 0 0 1px rgb( var( --celsyn-blue-rgb ) / 0.12 ) inset,
		0 24px 64px rgb( 0 0 0 / 0.5 );
	color: var( --celsyn-paper );
	text-align: center;
}

/* Specificity note: .celsyn-entry-gate__logo is a <p>, so the generic
   ".celsyn-entry-gate__dialog p{text-align:left}" rule below (class+type)
   otherwise outranks a bare ".celsyn-entry-gate__logo{text-align:center}"
   (class only) and silently wins regardless of source order — that's the
   actual cause of the left-aligned logo this fixes. Scoping to the dialog
   ancestor here (class+class) beats it without touching the shared p rule
   other paragraphs in the dialog still rely on. */
.celsyn-entry-gate__dialog .celsyn-entry-gate__logo {
	display: block;
	text-align: center;
	font-family: var( --font-display );
	font-weight: 700;
	font-size: var( --text-lg );
	letter-spacing: -0.01em;
	margin: 0 0 var( --space-6 );
}
.celsyn-entry-gate__logo span { color: var( --celsyn-cyan ); margin-left: 0.3em; }

.celsyn-entry-gate__eyebrow {
	display: inline-block;
	font-size: var( --text-xs );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --celsyn-cyan );
	margin: 0 0 var( --space-3 );
}
.celsyn-entry-gate__title {
	font-size: var( --text-2xl );
	margin: 0 0 var( --space-5 );
	color: var( --celsyn-paper );
}
.celsyn-entry-gate__dialog p { color: rgb( var( --celsyn-paper-rgb ) / 0.82 ); font-size: var( --text-sm ); line-height: 1.6; margin: 0 0 var( --space-4 ); text-align: left; }

.celsyn-entry-gate__actions {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	margin: var( --space-6 ) 0 var( --space-5 );
}
.celsyn-entry-gate__actions .celsyn-button--primary { width: 100%; }
.celsyn-entry-gate__actions .celsyn-button--ghost {
	width: 100%;
	border-color: rgb( var( --celsyn-paper-rgb ) / 0.25 );
	color: rgb( var( --celsyn-paper-rgb ) / 0.75 );
	background: transparent;
}
.celsyn-entry-gate__actions .celsyn-button--ghost:hover { background: rgb( var( --celsyn-paper-rgb ) / 0.06 ); }
.celsyn-entry-gate__actions .celsyn-button:focus-visible { outline: 2px solid var( --celsyn-cyan ); outline-offset: 2px; }

.celsyn-entry-gate__footnote {
	font-size: var( --text-xs );
	color: rgb( var( --celsyn-paper-rgb ) / 0.55 );
	margin: 0;
	text-align: center;
}
.celsyn-entry-gate__links {
	margin: var( --space-3 ) 0 0;
	text-align: center;
	font-size: var( --text-xs );
}
.celsyn-entry-gate__links a { color: rgb( var( --celsyn-paper-rgb ) / 0.6 ); text-decoration: underline; }
.celsyn-entry-gate__links span { color: rgb( var( --celsyn-paper-rgb ) / 0.35 ); margin: 0 var( --space-2 ); }

@media ( max-width: 480px ) {
	.celsyn-entry-gate { padding: var( --space-4 ); }
	.celsyn-entry-gate__dialog { padding: var( --space-6 ) var( --space-5 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.celsyn-entry-gate__scrim { backdrop-filter: none; background: rgb( var( --celsyn-ink-rgb ) / 0.9 ); }
}