/* Access Gate: request, status, enter and sign-in pages. */
:root {
	--ag-bg: #f6f5f2;
	--ag-card: #ffffff;
	--ag-text: #1d1c1a;
	--ag-muted: #6b675f;
	--ag-border: #e2dfd8;
	--ag-accent: #2f5d50;
	--ag-accent-hover: #264c41;
	--ag-accent-text: #ffffff;
	--ag-notice-bg: #eef4f1;
	--ag-notice-border: #c9dcd3;
	--ag-error-bg: #fbeeec;
	--ag-error-border: #ecc4bd;
	--ag-error-text: #8a2b1d;
	--ag-input-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
	:root {
		--ag-bg: #161816;
		--ag-card: #1f2220;
		--ag-text: #ecebe7;
		--ag-muted: #a5a29a;
		--ag-border: #343833;
		--ag-accent: #6fb39d;
		--ag-accent-hover: #86c4af;
		--ag-accent-text: #0f1a16;
		--ag-notice-bg: #1d2b26;
		--ag-notice-border: #2f4a40;
		--ag-error-bg: #33201d;
		--ag-error-border: #5a302a;
		--ag-error-text: #f2b3a7;
		--ag-input-bg: #171917;
	}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.agate-page {
	margin: 0;
	min-height: 100vh;
	background: var(--ag-bg);
	color: var(--ag-text);
	font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.agate-main {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}
.agate-card {
	width: 100%;
	max-width: 440px;
	background: var(--ag-card);
	border: 1px solid var(--ag-border);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .05);
}
.agate-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ag-muted);
}
h1 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; }
h2 { margin: 0 0 8px; font-size: 17px; }
p { margin: 0 0 14px; }
a { color: var(--ag-accent); text-underline-offset: 2px; }
.agate-muted { color: var(--ag-muted); }
.agate-small { font-size: 14px; }
.agate-stack { display: flex; flex-direction: column; gap: 14px; margin: 0 0 14px; }
.agate-gap-top { margin-top: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
label .agate-muted { font-weight: 400; }
input, textarea {
	font: inherit;
	font-weight: 400;
	color: var(--ag-text);
	background: var(--ag-input-bg);
	border: 1px solid var(--ag-border);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus { outline: 2px solid var(--ag-accent); outline-offset: 1px; border-color: transparent; }
.agate-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 18px; }
.agate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid var(--ag-border);
	background: transparent;
	color: var(--ag-text);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.agate-btn:hover { border-color: var(--ag-muted); }
.agate-btn-primary { background: var(--ag-accent); border-color: var(--ag-accent); color: var(--ag-accent-text); }
.agate-btn-primary:hover { background: var(--ag-accent-hover); border-color: var(--ag-accent-hover); }
.agate-btn:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; }
.agate-notice, .agate-error { padding: 10px 12px; border-radius: 8px; border: 1px solid; font-size: 15px; }
.agate-notice { background: var(--ag-notice-bg); border-color: var(--ag-notice-border); }
.agate-error { background: var(--ag-error-bg); border-color: var(--ag-error-border); color: var(--ag-error-text); }
.agate-rule { border: 0; border-top: 1px solid var(--ag-border); margin: 22px 0; }
.agate-alt { margin-top: 4px; }
.agate-privacy { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ag-border); font-size: 13px; }
.agate-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.agate-pulse {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ag-accent);
	animation: agate-pulse 1.6s ease-in-out infinite;
}
@keyframes agate-pulse { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .agate-pulse { animation: none; opacity: .7; } }
@media (max-width: 480px) { .agate-card { padding: 22px 18px; } }

/* PDF viewer */
body.agate-viewer-page { margin: 0; min-height: 100vh; background: #3b3d3c; color: #f2f1ee; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.agate-viewer-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1f2120; border-bottom: 1px solid #000; }
.agate-viewer-bar .agate-btn { min-height: 36px; padding: 6px 14px; color: #f2f1ee; border-color: #555; }
.agate-viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.agate-viewer-count { color: #b9b6ae; white-space: nowrap; }
.agate-viewer-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 8px 90px; }
.agate-viewer-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); max-width: 100%; min-height: 200px; }
.agate-viewer-status { color: #d6d3cc; }

/* ---------- Designs (Access Gate → Appearance) ---------- */
body.agate-page { background: var(--ag-page-bg, var(--ag-bg)); }
.agate-main { position: relative; z-index: 1; }
.agate-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.agate-grid { display: grid; grid-template-columns: repeat(var(--ag-grid-cols, 3), 1fr); grid-template-rows: repeat(var(--ag-grid-rows, 3), 1fr); gap: var(--ag-grid-gap, 0); width: 100%; height: 100%; opacity: var(--ag-grid-opacity, 1); }
.agate-tile { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.agate-tile-media, .agate-split-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--ag-media-filter, none); }
.agate-split-img { opacity: var(--ag-image-opacity, 1); }
.agate-tint { position: absolute; inset: 0; background: var(--ag-tint, transparent); opacity: var(--ag-tint-strength, 0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { video.agate-tile-media, video.agate-split-img { display: none; } }

/* Split screen: media on one half, the form on the other. */
body.agate-tpl-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.agate-tpl-split .agate-split-media { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.agate-tpl-split .agate-split-media .agate-grid { position: absolute; inset: 0; }
.agate-tpl-split.agate-side-right .agate-split-media { order: 2; }
.agate-tpl-split .agate-main { min-height: 100vh; }
@media (max-width: 800px) {
	body.agate-tpl-split { grid-template-columns: 1fr; }
	.agate-tpl-split .agate-split-media { position: relative; height: 34vh; order: 0 !important; }
	.agate-tpl-split .agate-main { min-height: auto; }
}

/* Side panel: the form in a full-height column, media filling the rest. */
.agate-tpl-panel .agate-main { width: min(500px, 100%); min-height: 100vh; background: var(--ag-page-bg, var(--ag-bg)); box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
.agate-tpl-panel.agate-side-right .agate-main { margin-left: auto; }
.agate-tpl-panel .agate-card { box-shadow: none; }

/* Banner: media across the top, the form overlapping below it. */
.agate-tpl-banner .agate-backdrop { position: relative; height: 44vh; min-height: 220px; }
.agate-tpl-banner .agate-main { min-height: auto; align-items: flex-start; margin-top: -110px; padding-top: 0; }
.agate-tpl-banner:not(.agate-has-grid) .agate-main { margin-top: 0; padding-top: 12vh; }
@media (max-width: 600px) {
	/* On phones the panel sits below a strip of the background. */
	.agate-tpl-panel.agate-has-grid .agate-main { margin-top: 28vh; min-height: auto; }
}

/* "I'm not a robot" checkbox */
.agate-captcha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--ag-border); border-radius: 8px; background: var(--ag-input-bg); }
.agate-captcha-box { flex-direction: row; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.agate-captcha-check { width: 22px; height: 22px; margin: 0; accent-color: var(--ag-accent); cursor: pointer; }
.agate-captcha-status { font-size: 13px; color: var(--ag-muted); }
.agate-captcha.is-checking .agate-captcha-status::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--ag-border); border-top-color: var(--ag-accent); border-radius: 50%; animation: agate-spin .8s linear infinite; }
.agate-captcha.is-done .agate-captcha-status { color: var(--ag-accent); font-weight: 600; }
@keyframes agate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agate-captcha.is-checking .agate-captcha-status::before { animation: none; } }
.agate-captcha-ext { min-height: 65px; }
