/* ==========================================================================
   gate.css — MERIT LABS Research Access
   Full presentation for the /research-access/ gate page.

   Two layers:
     1. Page chrome owned by template-research-access.php (.ml-gate-*).
     2. Re-skin of the PRISM plugin's own .prg-* markup. Every rule is
        namespaced under body.merit-labs-research-access so it outranks the
        plugin's inline <style> defaults (0,3,0 beats 0,2,0) without
        !important. The plugin keeps its exact form, options, affirmations,
        legal links, errors, POST, nonce, and field names — this sheet only
        styles what the plugin already renders.

   Brand: light mode · Sora headings · DM Sans body
   navy #152C6B · cyan #00B4E4 · ink #101C3A · muted #4A5B6E · deep #0A1420
   boot surface #EAF2F7 (shared with the React homepage)
   ========================================================================== */

body.merit-labs-research-access {
	--ml-navy: #152C6B;
	--ml-cyan: #00B4E4;
	--ml-ink: #101C3A;
	--ml-muted: #4A5B6E;
	--ml-deep: #0A1420;
	--ml-boot: #EAF2F7;
	--ml-card: #FFFFFF;
	--ml-line: #D7E2EC;
	--ml-error: #B4232D;
	--ml-focus: rgba(0, 180, 228, 0.55);

	overflow-x: hidden; /* belt-and-braces: nothing on this page may scroll sideways */
}

/* --------------------------------------------------------------------------
   Page chrome — layout shell, scientific background detail, brand lockup
   -------------------------------------------------------------------------- */

body.merit-labs-research-access .ml-gate-page {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(24px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px))
		calc(24px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	isolation: isolate;
}

/* Subtle laboratory backdrop: faint grid + a cool cyan ambient glow at the
   top and a deep-navy settling glow at the base. Fixed, inert, decorative. */
body.merit-labs-research-access .ml-gate-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		linear-gradient(rgba(21, 44, 107, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(21, 44, 107, 0.045) 1px, transparent 1px);
	background-size: 44px 44px;
}

body.merit-labs-research-access .ml-gate-page::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(52% 38% at 50% -6%, rgba(0, 180, 228, 0.14), rgba(0, 180, 228, 0) 70%),
		radial-gradient(60% 34% at 50% 108%, rgba(21, 44, 107, 0.10), rgba(21, 44, 107, 0) 72%);
}

body.merit-labs-research-access .ml-gate-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 4px;
	user-select: none;
}

body.merit-labs-research-access .ml-gate-brand__mark {
	display: block;
	width: 44px;
	height: 44px;
}

/* The lockup must look finished on its own — when the packaged mark is
   absent this text IS the logo, so it carries the full polish. */
body.merit-labs-research-access .ml-gate-brand__lockup {
	font-family: "Sora", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1;
	color: var(--ml-ink);
}

body.merit-labs-research-access .ml-gate-brand__word--accent {
	color: var(--ml-navy);
	font-weight: 500;
}

body.merit-labs-research-access .ml-gate-main {
	display: flex;
	flex-direction: column;
	justify-content: center; /* centers on tall screens; container grows and scrolls on short ones */
	width: 100%;
	max-width: 640px;
	flex: 1 0 auto;
}

body.merit-labs-research-access .ml-gate-foot {
	flex-shrink: 0;
	margin-top: 28px;
	text-align: center;
}

body.merit-labs-research-access .ml-gate-foot__line {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--ml-muted);
}

/* --------------------------------------------------------------------------
   PRISM plugin re-skin — namespaced overrides of the .prg-* markup
   -------------------------------------------------------------------------- */

/* Adopt brand colors through the plugin's own custom properties, then take
   over layout. Same element as the plugin's rule, one class higher. */
body.merit-labs-research-access .prg-wrap {
	--prg-accent: var(--ml-navy);
	--prg-ink: var(--ml-ink);
	--prg-body: var(--ml-muted);
	--prg-muted: var(--ml-muted);
	--prg-card: var(--ml-card);
	--prg-line: var(--ml-line);
	--prg-radius: 18px;

	width: 100%;
	max-width: 580px;
	margin: 28px auto 8px;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	box-sizing: border-box;
}

/* RUO banner: deep laboratory plate with a cyan-measured edge. */
body.merit-labs-research-access .prg-wrap .prg-banner {
	background: var(--ml-deep);
	color: #DCEEF7;
	border: 1px solid rgba(0, 180, 228, 0.22);
	border-left: 3px solid var(--ml-cyan);
	border-radius: 10px;
	padding: 14px 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.75;
	margin-bottom: 26px;
	box-shadow: 0 10px 28px rgba(10, 20, 32, 0.16);
}

/* The attestation card. */
body.merit-labs-research-access .prg-wrap .prg-card {
	position: relative;
	background: var(--ml-card);
	border: 1px solid var(--ml-line);
	border-radius: 20px;
	padding: clamp(28px, 6vw, 48px) clamp(22px, 5.5vw, 44px);
	box-shadow:
		0 1px 2px rgba(16, 28, 58, 0.05),
		0 18px 44px rgba(16, 28, 58, 0.10),
		0 42px 90px rgba(21, 44, 107, 0.10);
	text-align: center;
}

/* Precision hairline across the card top — navy bleeding into cyan. */
body.merit-labs-research-access .prg-wrap .prg-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--ml-navy) 0%, var(--ml-cyan) 55%, rgba(0, 180, 228, 0.25) 100%);
}

body.merit-labs-research-access .prg-wrap .prg-logo {
	max-height: 56px;
	width: auto;
	margin: 0 auto 18px;
}

body.merit-labs-research-access .prg-wrap .prg-badge {
	background: rgba(0, 180, 228, 0.10);
	color: var(--ml-navy);
	border: 1px solid rgba(0, 180, 228, 0.30);
	border-radius: 999px;
	padding: 6px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 20px;
}

body.merit-labs-research-access .prg-wrap .prg-title {
	font-family: "Sora", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(23px, 5.4vw, 28px);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ml-ink);
	margin: 0 0 12px;
	line-height: 1.3;
}

body.merit-labs-research-access .prg-wrap .prg-sub {
	font-size: 15px;
	color: var(--ml-muted);
	line-height: 1.65;
	margin: 0 0 26px;
}

/* Field + select */
body.merit-labs-research-access .prg-wrap .prg-field {
	margin-bottom: 18px;
	text-align: left;
}

body.merit-labs-research-access .prg-wrap .prg-lab {
	font-family: "Sora", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ml-ink);
	margin-bottom: 8px;
}

body.merit-labs-research-access .prg-wrap .prg-field select {
	border: 1px solid #B9C9D8;
	border-radius: 10px;
	background-color: #FBFDFF;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.merit-labs-research-access .prg-wrap .prg-field select:hover {
	border-color: var(--ml-navy);
}

body.merit-labs-research-access .prg-wrap .prg-field select:focus,
body.merit-labs-research-access .prg-wrap .prg-field select:focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 1px;
	border-color: var(--ml-navy);
}

/* Affirmation rows */
body.merit-labs-research-access .prg-wrap .prg-check {
	gap: 12px;
	padding: 11px 14px;
	margin-bottom: 10px;
	border: 1px solid var(--ml-line);
	border-radius: 10px;
	background: #F7FAFC;
	transition: border-color 160ms ease, background-color 160ms ease;
}

body.merit-labs-research-access .prg-wrap .prg-check:hover {
	border-color: #AEC4D6;
	background: #F2F7FB;
}

body.merit-labs-research-access .prg-wrap .prg-check input {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin-top: 2px;
	accent-color: var(--ml-navy);
	cursor: pointer;
}

body.merit-labs-research-access .prg-wrap .prg-check input:focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 2px;
}

body.merit-labs-research-access .prg-wrap .prg-check span {
	font-size: 14px;
	color: #33465C;
	line-height: 1.55;
}

body.merit-labs-research-access .prg-wrap .prg-check a {
	color: var(--ml-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.merit-labs-research-access .prg-wrap .prg-check a:hover {
	color: var(--ml-cyan);
}

/* Server-side validation — must be unmistakable. */
body.merit-labs-research-access .prg-wrap .prg-error {
	color: var(--ml-error);
	background: rgba(180, 35, 45, 0.07);
	border: 1px solid rgba(180, 35, 45, 0.30);
	border-left: 3px solid var(--ml-error);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	margin: 8px 0 14px;
	padding: 10px 14px;
	text-align: left;
}

/* Remember row (checked by default — the plugin's own state, kept). */
body.merit-labs-research-access .prg-wrap .prg-remember {
	margin: 4px 0 22px;
}

body.merit-labs-research-access .prg-wrap .prg-remember input {
	accent-color: var(--ml-navy);
}

body.merit-labs-research-access .prg-wrap .prg-remember input:focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 2px;
}

body.merit-labs-research-access .prg-wrap .prg-remember span {
	font-size: 13px;
	color: var(--ml-muted);
}

/* Primary action */
body.merit-labs-research-access .prg-wrap .prg-enter {
	background: var(--ml-navy);
	color: #FFFFFF;
	border: 1px solid var(--ml-navy);
	border-radius: 10px;
	padding: 16px 24px;
	font-family: "Sora", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	box-shadow: 0 10px 24px rgba(21, 44, 107, 0.28);
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.merit-labs-research-access .prg-wrap .prg-enter:hover {
	background: #0F2050;
	filter: none; /* replaces the plugin's brightness() hover */
	box-shadow: 0 14px 30px rgba(21, 44, 107, 0.34);
	transform: translateY(-1px);
}

body.merit-labs-research-access .prg-wrap .prg-enter:active {
	transform: translateY(0);
	box-shadow: 0 6px 16px rgba(21, 44, 107, 0.26);
}

body.merit-labs-research-access .prg-wrap .prg-enter:focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 2px;
}

/* Leave link */
body.merit-labs-research-access .prg-wrap .prg-leave {
	margin-top: 18px;
	font-size: 13.5px;
	color: var(--ml-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.merit-labs-research-access .prg-wrap .prg-leave:hover {
	color: var(--ml-navy);
}

body.merit-labs-research-access .prg-wrap .prg-leave:focus-visible,
body.merit-labs-research-access .prg-wrap .prg-check a:focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

body.merit-labs-research-access .prg-wrap .prg-foot {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--ml-line);
	font-size: 12px;
	color: var(--ml-muted);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Small viewports (down to 320px) — fluid paddings above; tighten rhythm
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
	body.merit-labs-research-access .ml-gate-brand__lockup {
		font-size: 18px;
		letter-spacing: 0.2em;
	}

	body.merit-labs-research-access .prg-wrap {
		margin-top: 20px;
	}

	body.merit-labs-research-access .prg-wrap .prg-banner {
		font-size: 10.5px;
		letter-spacing: 0.11em;
		padding: 12px 14px;
	}

	body.merit-labs-research-access .prg-wrap .prg-check {
		padding: 10px 12px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — no entrance animation exists on this page; collapse the
   remaining hover/focus transitions so nothing moves for sensitive users.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.merit-labs-research-access .prg-wrap .prg-enter,
	body.merit-labs-research-access .prg-wrap .prg-check,
	body.merit-labs-research-access .prg-wrap .prg-field select {
		transition: none;
	}

	body.merit-labs-research-access .prg-wrap .prg-enter:hover {
		transform: none;
	}
}