/**
 * Extreme Access Gate — access terminal (login + registration), FROSTED CLINICAL
 * LIGHT theme.
 *
 * Design system: bright, lab-grade clinical. A frosted white-glass panel floats
 * on a soft daylight scrim; the page stays present in the DOM for crawlers,
 * softly veiled beneath a near-opaque scrim (see .eag-backdrop for the
 * performance rationale). Instrument-readout monospaced micro-labels, a
 * segmented toggle with an elevated white pill, and a modern hairline grid in
 * the brand blue. Namespaced under `#eag-overlay`; brand colours arrive as CSS
 * custom properties (--eag-primary / --eag-accent). Dependency-free: system
 * fonts only — no web-font fetch, no layout-shift, no third-party requests.
 */

html.eag-has-overlay { overflow: hidden !important; }

#eag-overlay {
	--eag-ink:    #0f2740;
	--eag-ink-2:  #45566d;
	--eag-ink-3:  #64748b;
	--eag-line:   rgba(15, 40, 70, 0.12);
	--eag-line-soft: rgba(15, 40, 70, 0.07);
	--eag-glow:   color-mix(in srgb, var(--eag-accent, #2d89ef) 82%, #0f2740);
	--eag-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
	--eag-mono:   ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vh, 40px) clamp(12px, 4vw, 40px);
	box-sizing: border-box;
	font-family: var(--eag-sans);
	color: var(--eag-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.5;
}
#eag-overlay *, #eag-overlay *::before, #eag-overlay *::after { box-sizing: border-box; }

/* ── Scene: bright, and the page behind is frosted ─────────────────────── */
.eag-backdrop {
	position: absolute;
	inset: 0;
	/* Clean, near-white scrim with a single whisper of brand tint at the top, so
	   it sits comfortably on a white theme.
	   PERFORMANCE: this full-viewport layer intentionally carries NO
	   backdrop-filter. A viewport-sized Gaussian blur is the most expensive paint
	   an overlay can trigger — the compositor must snapshot and blur the entire
	   page on every frame the layer participates in, which janks scroll/enter on
	   low-end and high-DPI devices. A near-opaque veil obscures the page just as
	   well for an age gate at a fraction of the cost; the bounded, tasteful
	   frosting is kept on the panel alone (a ~520px region), where it's cheap. */
	background-color: rgba(247, 250, 252, 0.86);
	background-image:
		radial-gradient(100% 66% at 50% -8%, color-mix(in srgb, var(--eag-accent, #2d89ef) 9%, transparent), transparent 55%),
		linear-gradient(180deg, rgba(251, 252, 254, 0.86), rgba(240, 244, 249, 0.90));
}
/* Modern hairline grid, softly masked toward the edges. */
.eag-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(15, 40, 70, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15, 40, 70, 0.05) 1px, transparent 1px);
	background-size: 52px 52px;
	-webkit-mask-image: radial-gradient(130% 95% at 50% 38%, #000 22%, transparent 74%);
	mask-image: radial-gradient(130% 95% at 50% 38%, #000 22%, transparent 74%);
	opacity: 0.8;
}

/* ── Panel: frosted white glass ────────────────────────────────────────── */
.eag-panel {
	position: relative;
	z-index: 1;
	width: min(520px, 100%);
	max-height: calc(100dvh - clamp(24px, 8vh, 80px));
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 3.4vw, 30px) clamp(20px, 3.4vw, 30px) clamp(18px, 3vw, 24px);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
	/* Frosting kept only here, on the bounded panel. Radius trimmed 30px -> 18px:
	   blur cost scales with radius, and 18px is visually indistinguishable as
	   "glass" while roughly halving the per-frame blur work. Gracefully degrades
	   to the solid gradient above on browsers without backdrop-filter. */
	-webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(1.03);
	backdrop-filter: blur(18px) saturate(1.4) brightness(1.03);
	box-shadow:
		0 34px 90px -34px rgba(15, 40, 70, 0.38),
		0 2px 10px rgba(15, 40, 70, 0.05),
		0 0 0 1px rgba(15, 40, 70, 0.06) inset,   /* crisp hairline */
		0 1px 0 rgba(255, 255, 255, 0.95) inset;  /* top highlight */
	overflow: hidden;
	animation: eag-enter 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes eag-enter { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Calibration seam — a soft blue line that sweeps the panel's top edge. */
.eag-panel::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--eag-accent) 85%, #fff), transparent);
	opacity: 0.85;
	animation: eag-scan 5.5s ease-in-out infinite;
}
@keyframes eag-scan {
	0%, 100% { transform: translateX(-30%); opacity: 0.25; }
	50% { transform: translateX(30%); opacity: 0.9; }
}

/* ── Header row ────────────────────────────────────────────────────────── */
.eag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eag-kicker { font-family: var(--eag-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eag-ink-3); }
.eag-serial { font-family: var(--eag-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--eag-ink-3); display: inline-flex; align-items: center; gap: 7px; }
.eag-serial::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--eag-accent, #2d89ef); box-shadow: 0 0 8px color-mix(in srgb, var(--eag-accent) 60%, transparent); }

/* Brand row: logo/wordmark left, credential chip pushed far right. */
.eag-brandrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 12px; }

.eag-wordmark { font-size: clamp(22px, 3.6vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; color: #15191f; }

/* Logo lockup (icon + typography), mirrors the site header pattern. */
.eag-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eag-logo-icon { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.eag-logo-type { height: 22px; width: auto; max-width: 100%; display: block; }

.eag-chip {
	margin-left: auto; /* stays right-aligned even when it wraps to its own line */
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 11px;
	border: 1px solid color-mix(in srgb, var(--eag-accent, #2d89ef) 28%, var(--eag-line));
	border-radius: 999px;
	background: color-mix(in srgb, var(--eag-accent, #2d89ef) 9%, #fff);
	font-family: var(--eag-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: color-mix(in srgb, var(--eag-accent) 72%, var(--eag-ink));
}
.eag-chip .eag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eag-accent, #2d89ef); box-shadow: 0 0 7px color-mix(in srgb, var(--eag-accent) 55%, transparent); }

/* ── Segmented toggle (elevated white pill) ────────────────────────────── */
.eag-toggle {
	position: relative;
	display: grid; grid-template-columns: 1fr 1fr;
	margin: 18px 0 16px;
	padding: 4px;
	border: 1px solid var(--eag-line-soft);
	border-radius: 12px;
	background: rgba(15, 40, 70, 0.05);
}
.eag-toggle__pill {
	position: absolute; top: 4px; left: 4px;
	width: calc(50% - 4px); height: calc(100% - 8px);
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(15, 40, 70, 0.14), 0 0 0 1px rgba(15, 40, 70, 0.05);
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.eag-toggle[data-active="register"] .eag-toggle__pill { transform: translateX(100%); }
/* When JS hides the toggle (the focused "forgot password" sub-view), the [hidden]
   attribute must beat the display:grid above — otherwise it stays visible. */
.eag-toggle[hidden] { display: none !important; }
.eag-toggle__btn {
	position: relative; z-index: 1;
	appearance: none; border: 0; background: transparent;
	padding: 9px 8px;
	font-family: var(--eag-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
	color: var(--eag-ink-2); cursor: pointer;
	transition: color 200ms ease;
}
.eag-toggle__btn[data-active="true"] { color: var(--eag-primary, #1970b7); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.eag-forms { position: relative; min-height: 0; }
.eag-form { display: none; }
.eag-form.eag-form--active { display: block; animation: eag-fade 320ms ease both; }
@keyframes eag-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 12px; }
.eag-col-2 { grid-column: 1 / -1; }

.eag-field { display: block; }
.eag-label { display: block; margin: 0 0 6px; font-family: var(--eag-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eag-ink-3); transition: color 180ms ease; }
.eag-req { color: var(--eag-accent, #2d89ef); }
.eag-input {
	width: 100%; height: 46px; padding: 0 13px;
	border: 1px solid var(--eag-line);
	border-radius: 11px;
	background: #fff;
	color: var(--eag-ink);
	font-family: var(--eag-sans); font-size: 16px; /* >=16px prevents iOS zoom */
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.eag-input::placeholder { color: #9aa8bd; }
.eag-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--eag-accent) 75%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--eag-accent) 16%, transparent);
}
.eag-field:focus-within .eag-label { color: var(--eag-primary, #1970b7); }
.eag-input[type="date"] { color-scheme: light; }

.eag-terms {
	grid-column: 1 / -1;
	display: flex; align-items: flex-start; gap: 11px;
	margin: 3px 0 2px;
	font-size: 11.5px; line-height: 1.5; color: var(--eag-ink-2);
	cursor: pointer;
}
.eag-terms input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eag-check {
	flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
	border: 1px solid var(--eag-line);
	border-radius: 6px; background: #fff; position: relative;
	transition: border-color 160ms ease, background 160ms ease;
}
.eag-check::after {
	content: ""; position: absolute; left: 6px; top: 2.5px;
	width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0); transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.eag-terms input:checked + .eag-check { background: linear-gradient(180deg, color-mix(in srgb, var(--eag-accent) 92%, #fff), var(--eag-primary, #1970b7)); border-color: transparent; }
.eag-terms input:checked + .eag-check::after { transform: rotate(45deg) scale(1); }
.eag-terms input:focus-visible + .eag-check { box-shadow: 0 0 0 3px color-mix(in srgb, var(--eag-accent) 25%, transparent); }
.eag-terms a { color: var(--eag-primary, #1970b7); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--eag-accent) 40%, transparent); }

.eag-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.eag-error {
	grid-column: 1 / -1; display: none; align-items: center; gap: 8px;
	margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: #d6455a;
}
.eag-error::before { content: "!"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; font-size: 10px; }
.eag-error--visible { display: flex; }

/* Positive confirmation (e.g. "reset link sent"). Green, calm, with a tick. */
.eag-note {
	grid-column: 1 / -1; display: none; align-items: flex-start; gap: 8px;
	margin: 2px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #0f7a55;
}
.eag-note::before { content: "✓"; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, #12b886 18%, #fff); color: #0f7a55; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; }
.eag-note--visible { display: flex; }

/* Short intro line above the reset-email field. */
.eag-forgot-intro { grid-column: 1 / -1; margin: 0 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--eag-ink-2); }

.eag-actions { grid-column: 1 / -1; margin-top: 4px; }
.eag-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 52px; padding: 0 18px;
	border: 0; border-radius: 10px;
	font-family: var(--eag-sans); font-size: 15px; font-weight: 650; letter-spacing: 0.01em;
	color: #fff; cursor: pointer; overflow: hidden;
	/* Tall gradient we can slide for a smooth deepen (no snapping). */
	background-color: var(--eag-primary, #1970b7);
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--eag-accent) 88%, #fff 12%) 0%, var(--eag-primary, #1970b7) 55%, color-mix(in srgb, var(--eag-primary, #1970b7) 82%, #071f38) 100%);
	background-size: 100% 210%;
	background-position: 0% 0%;
	/* Rests lifted; the shadow collapses as it presses down. */
	box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--eag-accent) 55%, transparent), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	transition: transform 150ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 150ms ease, background-position 360ms ease;
}
.eag-btn:hover {
	transform: translateY(2px);
	background-position: 0% 100%;
	box-shadow: 0 3px 9px -5px color-mix(in srgb, var(--eag-accent) 50%, transparent), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.eag-btn:active {
	transform: translateY(3px);
	box-shadow: 0 1px 4px -3px color-mix(in srgb, var(--eag-accent) 45%, transparent), 0 1px 0 rgba(255, 255, 255, 0.16) inset;
}
.eag-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--eag-accent) 40%, transparent); outline-offset: 2px; }
.eag-btn--busy { pointer-events: none; color: transparent; }
.eag-btn--busy::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: eag-spin 0.7s linear infinite; }
@keyframes eag-spin { to { transform: rotate(360deg); } }

.eag-sublink { grid-column: 1 / -1; margin: 12px 0 0; text-align: center; font-size: 12.5px; }
.eag-sublink a { color: var(--eag-ink-2); text-decoration: none; }
.eag-sublink a:hover { color: var(--eag-primary, #1970b7); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.eag-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--eag-line-soft);
	font-family: var(--eag-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--eag-ink-3);
}
.eag-foot .eag-secure { display: inline-flex; align-items: center; gap: 7px; }
.eag-foot .eag-secure::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12b886;
	animation: eag-heartbeat 2.6s ease-in-out infinite;
}
/* Live "secure connection" heartbeat: a constant soft glow plus an expanding
   ring that fades out. */
@keyframes eag-heartbeat {
	0%   { box-shadow: 0 0 6px rgba(18, 184, 134, 0.6), 0 0 0 0 rgba(18, 184, 134, 0.45); }
	70%  { box-shadow: 0 0 6px rgba(18, 184, 134, 0.6), 0 0 0 6px rgba(18, 184, 134, 0); }
	100% { box-shadow: 0 0 6px rgba(18, 184, 134, 0.6), 0 0 0 0 rgba(18, 184, 134, 0); }
}
.eag-exit { color: var(--eag-ink-3); text-decoration: none; }
.eag-exit:hover { color: var(--eag-ink-2); }

/* Error shake */
.eag-shake { animation: eag-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes eag-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

/* ── Responsive / short viewports ──────────────────────────────────────── */
/* On phones, stack the chip under the logo (left-aligned) instead of floating
   right — the logo typography stays visible. */
@media (max-width: 560px) {
	.eag-brandrow { flex-direction: column; align-items: flex-start; gap: 10px; }
	.eag-chip { margin-left: 0; }
}
@media (max-width: 400px) { .eag-grid { gap: 10px; } .eag-input { height: 44px; } }
@media (max-height: 640px) { .eag-forms { overflow-y: auto; -webkit-overflow-scrolling: touch; } }
@media (prefers-reduced-motion: reduce) {
	.eag-panel, .eag-form.eag-form--active { animation: none; }
	.eag-panel::before, .eag-foot .eag-secure::before { animation: none; }
}

/* ── Theme hardening ───────────────────────────────────────────────────────
 * The overlay is a self-contained modal that must render identically on any
 * theme. Some themes ship aggressive resets (e.g. input { border-radius: 0 },
 * img { height: auto }) with equal-or-higher specificity or !important. These
 * ID-scoped rules re-assert only the structural visuals so the panel, inputs,
 * buttons and logo can't be flattened or restyled by the active theme. */
#eag-overlay input,
#eag-overlay button,
#eag-overlay textarea {
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
#eag-overlay .eag-panel { border-radius: 22px !important; }
#eag-overlay .eag-input {
	height: 46px !important;
	border: 1px solid var(--eag-line) !important;
	border-radius: 11px !important;
	background: #fff !important;
	box-shadow: none !important;
}
#eag-overlay .eag-input:focus {
	border-color: color-mix(in srgb, var(--eag-accent) 75%, transparent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--eag-accent) 16%, transparent) !important;
}
#eag-overlay .eag-btn {
	border: 0 !important;
	border-radius: 10px !important;
	color: #fff !important;
	background-color: var(--eag-primary, #1970b7) !important;
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--eag-accent) 88%, #fff 12%) 0%, var(--eag-primary, #1970b7) 55%, color-mix(in srgb, var(--eag-primary, #1970b7) 82%, #071f38) 100%) !important;
	background-size: 100% 210% !important;
}
#eag-overlay .eag-toggle { border-radius: 12px !important; }
#eag-overlay .eag-toggle__pill { border-radius: 9px !important; background: #fff !important; }
#eag-overlay .eag-check { border: 1px solid var(--eag-line) !important; border-radius: 6px !important; background: #fff !important; }
/* The CHECKED state must out-weigh the white "!important" fill above, or the box
   never fills and its white tick stays invisible — which reads as "the box won't
   tick". Re-assert the filled background, the transparent border, and the tick at
   the same weight so the hardening can't flatten the checked look. */
#eag-overlay .eag-terms input:checked + .eag-check {
	background: linear-gradient(180deg, color-mix(in srgb, var(--eag-accent) 92%, #fff), var(--eag-primary, #1970b7)) !important;
	border-color: transparent !important;
}
#eag-overlay .eag-terms input:checked + .eag-check::after { transform: rotate(45deg) scale(1) !important; }
#eag-overlay .eag-chip { border: 1px solid color-mix(in srgb, var(--eag-accent, #2d89ef) 28%, var(--eag-line)) !important; border-radius: 999px !important; }
#eag-overlay .eag-logo-icon { height: 34px !important; width: auto !important; max-width: none !important; }
#eag-overlay .eag-logo-type { height: 22px !important; width: auto !important; max-width: 100% !important; }