/* access.css — the full-screen access screen (auth#34): /app/auth and the sign-in flow's other pages
 * (sent, gone, other-browser, wrong-link, terms-needed, continue, passkey enroll) under layout.access.
 * Built on the kit: /static/kit/tokens.css + /static/kit/fonts/fonts.css are linked before this file. Kit tokens only.
 *
 * Composition (rebuilt 2026-09-30): the page reserves an ART REGION (.access-art) for the umbrella — the left column on
 * a wide screen, a band above the card on a tall phone, none on a short viewport — so the card never sits on top of the
 * artwork. access-bg.js draws the umbrella into that region (or the widest free gap around the card). Without WebGL2
 * (html.hj-nogl) or without script, the region shows the same umbrella as a static SVG (web/access/umbrella-*.svg).
 *
 * Themes: dark by default; light under :root[data-kind="light"] (the kit's opt-in switch, stamped by web/access/theme.js
 * from the saved Appearance or the OS scheme). Without script, prefers-color-scheme decides.
 * Mobile per ADR-033: 44px+ targets, no horizontal overflow at 360, the field stays above the keyboard
 * (viewport interactive-widget=resizes-content + auth.js scrolling the focused field into the visual viewport). */

:root {
	--ax-bg: var(--hj-semantic-bg-page);
	--ax-surface: var(--hj-semantic-bg-surface);
	--ax-ink: var(--hj-semantic-text-primary);
	--ax-soft: color-mix(in srgb, var(--ax-ink) 78%, transparent);
	--ax-muted: color-mix(in srgb, var(--ax-ink) 64%, transparent);
	--ax-jade: var(--hj-semantic-brand-bright);
	--ax-mint: var(--hj-semantic-brand-accent);
	--ax-line: color-mix(in srgb, var(--hj-semantic-brand-primary) 46%, transparent);
	--ax-danger: color-mix(in srgb, var(--hj-semantic-danger) 55%, var(--ax-ink));
	--ax-caution: var(--hj-semantic-caution);
	--ax-btn: var(--hj-semantic-brand-bright);
	--ax-btn-hover: var(--hj-semantic-brand-accent);
	--ax-btn-ink: var(--hj-primitive-ground-deepest);
	--ax-card: color-mix(in srgb, var(--ax-surface) 90%, transparent);
	--ax-shadow: color-mix(in srgb, var(--hj-primitive-ground-deepest) 55%, transparent);
	--ax-glow: color-mix(in srgb, var(--hj-primitive-jade-deep) 30%, var(--ax-bg));
	--ax-glow-at: 50% 30%;
	--ax-art: url("/static/access/umbrella-dark.svg");
	--ax-r: var(--hj-radius-xl);
	--ax-r-sm: var(--hj-radius-md);
	--ax-head: var(--hj-font-family-heading, "Space Grotesk", system-ui, sans-serif);
	--ax-body: var(--hj-font-family-body, Inter, system-ui, sans-serif);
	color-scheme: dark;
}
/* the light theme: pale-jade paper, deep-jade ink (the kit's hj-ui.css light block, re-pointed for this screen) */
:root[data-kind="light"] {
	--ax-bg: color-mix(in srgb, white 92%, var(--hj-primitive-jade) 8%);
	--ax-surface: color-mix(in srgb, white 97%, var(--hj-primitive-jade) 3%);
	--ax-ink: var(--hj-primitive-ground-deepest);
	--ax-soft: color-mix(in srgb, var(--ax-ink) 80%, transparent);
	--ax-muted: color-mix(in srgb, var(--ax-ink) 68%, transparent);
	--ax-jade: var(--hj-primitive-jade-deep);
	--ax-mint: var(--hj-primitive-jade);
	--ax-line: color-mix(in srgb, var(--hj-primitive-jade-deep) 30%, transparent);
	--ax-danger: color-mix(in srgb, var(--hj-semantic-danger) 60%, var(--ax-ink));
	--ax-btn: var(--hj-primitive-jade-deep);
	--ax-btn-hover: color-mix(in srgb, var(--hj-primitive-jade-deep) 82%, var(--hj-primitive-ground-deepest));
	--ax-btn-ink: white;
	--ax-card: color-mix(in srgb, var(--ax-surface) 92%, transparent);
	--ax-shadow: color-mix(in srgb, var(--hj-primitive-jade-deep) 18%, transparent);
	--ax-glow: color-mix(in srgb, white 70%, var(--hj-primitive-mint) 30%);
	--ax-art: url("/static/access/umbrella-light.svg");
	color-scheme: light;
}
/* no script: the OS scheme decides (theme.js always stamps data-kind, so this only applies without it) */
@media (prefers-color-scheme: light) {
	:root:not([data-kind]) {
		--ax-bg: color-mix(in srgb, white 92%, var(--hj-primitive-jade) 8%);
		--ax-surface: color-mix(in srgb, white 97%, var(--hj-primitive-jade) 3%);
		--ax-ink: var(--hj-primitive-ground-deepest);
		--ax-soft: color-mix(in srgb, var(--ax-ink) 80%, transparent);
		--ax-muted: color-mix(in srgb, var(--ax-ink) 68%, transparent);
		--ax-jade: var(--hj-primitive-jade-deep);
		--ax-mint: var(--hj-primitive-jade);
		--ax-line: color-mix(in srgb, var(--hj-primitive-jade-deep) 30%, transparent);
		--ax-btn: var(--hj-primitive-jade-deep);
		--ax-btn-hover: color-mix(in srgb, var(--hj-primitive-jade-deep) 82%, var(--hj-primitive-ground-deepest));
		--ax-btn-ink: white;
		--ax-card: color-mix(in srgb, var(--ax-surface) 92%, transparent);
		--ax-shadow: color-mix(in srgb, var(--hj-primitive-jade-deep) 18%, transparent);
		--ax-glow: color-mix(in srgb, white 70%, var(--hj-primitive-mint) 30%);
		--ax-art: url("/static/access/umbrella-light.svg");
		color-scheme: light;
	}
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body.layout-access {
	background-color: var(--ax-bg);
	background-image: radial-gradient(75% 65% at var(--ax-glow-at), var(--ax-glow) 0%, transparent 70%);
	background-attachment: fixed;
	color: var(--ax-ink);
	font: 16px/1.55 var(--ax-body);
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

/* the WebGL2 layer: transparent, premultiplied, drawn only inside the art region (access-bg.js scissors to it) */
#access-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }

.access-main {
	position: relative; z-index: 1;
	min-height: 100vh; min-height: 100dvh;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.access-col { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---- the art region ---------------------------------------------------------------------------------------------- */
.access-art { display: none; position: relative; pointer-events: none; }
.access-art::before {
	content: ""; position: absolute; inset: 4%;
	background: var(--ax-art) center / contain no-repeat;
	opacity: 0;
}
/* the static umbrella: no script at all, or no WebGL2 / a context lost for good */
html:not(.js) .access-art::before, html.hj-nogl .access-art::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	html.hj-nogl .access-art::before { animation: ax-in var(--hj-duration-risefade) var(--hj-easing-ease-out-cubic) both; }
}
@keyframes ax-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* wide: artwork left, the card right */
@media (min-width: 960px) and (min-height: 560px) {
	.access-main {
		display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
		column-gap: clamp(24px, 4vw, 72px); max-width: 1480px; margin: 0 auto;
		padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right));
	}
	.access-art { display: block; align-self: stretch; min-height: 420px; }
	.access-col { justify-self: center; }
	:root { --ax-glow-at: 30% 48%; }
}
/* tall phone / tablet portrait: the umbrella in a band above the card */
@media (max-width: 959.98px) and (min-height: 740px) and (orientation: portrait) {
	.access-art { display: block; width: min(440px, 100%); height: clamp(150px, 22dvh, 240px); flex: none; }
	:root { --ax-glow-at: 50% 16%; }
}

/* ---- the card ----------------------------------------------------------------------------------------------------- */
.access-card {
	width: 100%;
	background: var(--ax-card);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	backdrop-filter: blur(16px) saturate(120%);
	border: 1px solid var(--ax-line);
	border-radius: var(--ax-r);
	box-shadow: 0 24px 70px var(--ax-shadow);
	padding: 28px 28px 22px;
}
/* the watermark mode (no free space anywhere): the card goes nearly opaque over the faint umbrella */
html.hj-art-behind .access-card { background: color-mix(in srgb, var(--ax-surface) 96%, transparent); }

.access-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ax-ink); text-decoration: none; margin: -6px 0 14px; }
.access-brand img { width: 36px; height: 36px; display: block; }
.access-brand .wm { font: 700 22px/1 var(--ax-head); letter-spacing: -.02em; }
.access-brand .wm b { font-weight: 700; color: var(--ax-ink); }
.access-brand .wm span { color: var(--ax-jade); }
.access-brand:focus-visible { outline: 2px solid var(--ax-mint); outline-offset: 3px; border-radius: 8px; }

.access-card h1 { margin: 0 0 8px; font: 700 clamp(1.55rem, 5.2vw, 1.9rem)/1.15 var(--ax-head); letter-spacing: -.02em; overflow-wrap: anywhere; }
.access-card h1:focus { outline: none; }
.access-card .lede { margin: 0 0 20px; color: var(--ax-soft); font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.access-card .lede b, .access-done b { color: var(--ax-ink); font-weight: 600; overflow-wrap: anywhere; }

.access-card form { display: grid; gap: 12px; margin: 0; }
.access-card label[for="email"] { font-size: 14px; font-weight: 600; color: var(--ax-soft); margin-bottom: -4px; }
.access-card input[type="email"] {
	font: inherit; font-size: 16px; /* 16px: iOS never zooms the page on focus */
	width: 100%; min-height: 50px; padding: 12px 14px;
	border-radius: var(--ax-r-sm); border: 1px solid var(--ax-line);
	background: color-mix(in srgb, var(--ax-bg) 70%, transparent); color: var(--ax-ink);
	scroll-margin: 96px 0;
}
.access-card input[type="email"]::placeholder { color: var(--ax-muted); }
.access-card input[type="email"]:focus-visible { outline: 2px solid var(--ax-mint); outline-offset: 1px; border-color: var(--ax-mint); }
.access-card input[type="email"][readonly] { color: var(--ax-soft); background: transparent; border-style: dashed; }

.access-card button, .access-card a.cta {
	font: inherit; font-weight: 600; font-size: 1rem;
	min-height: 50px; width: 100%; padding: 12px 18px;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
	border-radius: var(--ax-r-sm); cursor: pointer; text-decoration: none;
	border: 1px solid var(--ax-btn); background: var(--ax-btn); color: var(--ax-btn-ink);
	transition: background var(--hj-duration-cut-in), transform var(--hj-duration-cut-in), border-color var(--hj-duration-cut-in), color var(--hj-duration-cut-in);
}
.access-card button:hover, .access-card a.cta:hover { background: var(--ax-btn-hover); border-color: var(--ax-btn-hover); }
.access-card button:active { transform: translateY(1px); }
.access-card button:focus-visible, .access-card a.cta:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.access-card button[disabled], .access-card button[aria-disabled="true"], .access-card a.cta[aria-disabled="true"] { opacity: .6; cursor: progress; }
.access-card button.ghost, .access-card #passkey-btn { background: transparent; color: var(--ax-ink); border-color: var(--ax-line); }
.access-card button.ghost:hover, .access-card #passkey-btn:hover { border-color: var(--ax-jade); color: var(--ax-jade); background: color-mix(in srgb, var(--ax-jade) 8%, transparent); }
.access-card button.linkish {
	width: auto; min-height: 44px; padding: 8px 4px; background: none; border: 0; color: var(--ax-jade);
	font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.access-card button.linkish:hover { background: none; color: var(--ax-mint); }

.access-card .pk-icon { width: 20px; height: 20px; flex: none; }

.access-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--ax-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.access-or::before, .access-or::after { content: ""; flex: 1; height: 1px; background: var(--ax-line); }

/* the terms checkbox — a 44px target around a 20px box (ADR-033), drawn with a mask so the color is a token */
.access-card .legal-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0; font-size: 15px; line-height: 1.45; color: var(--ax-ink); cursor: pointer; border-radius: 10px; }
.access-card .legal-check input[type=checkbox] {
	appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 44px; margin: -11px -6px -11px -12px; padding: 0; border: 0; cursor: pointer;
	background: var(--ax-mint);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.access-card .legal-check input[type=checkbox]:checked {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='20' height='20' rx='5' mask='url(%23m)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='20' height='20' rx='5' mask='url(%23m)'/%3E%3C/svg%3E");
}
/* the mask would clip an outline on the box itself, so focus rings the whole row */
.access-card .legal-check:has(input:focus-visible) { outline: 2px solid var(--ax-mint); outline-offset: 2px; }
.access-card .legal-check a { color: var(--ax-jade); text-decoration: underline; text-underline-offset: 2px; }
.access-card .legal-check a:focus-visible { outline: 2px solid var(--ax-mint); outline-offset: 2px; }
/* with script, the checkbox shows only once the address turns out to be new (auth.js adds .show) */
.js .auth[data-mode="signin"] .legal-check:not(.show) { display: none; }
.access-card .legal-check.invalid span { color: var(--ax-caution); }

.access-card .status { min-height: 1.4em; margin: 12px 0 0; color: var(--ax-soft); font-size: 14.5px; overflow-wrap: anywhere; }
.access-card .status:empty { margin: 0; min-height: 0; }
.access-card .status.err { color: var(--ax-danger); }
/* the email check's suggested fix under the status line ("Use you@gmail.com instead") */
.access-card .access-suggest { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 0; padding: 0 12px; font: inherit; font-size: 14.5px; color: var(--ax-ink); background: transparent; border: 1px solid var(--ax-line); border-radius: var(--ax-r-sm); cursor: pointer; }
.access-card .access-suggest[hidden] { display: none; }
.access-card .access-suggest:focus-visible { outline: 2px solid var(--ax-mint); outline-offset: 2px; }

/* a notice inside the card (replaced session, rate limit) */
.access-card .notice { border: 1px solid var(--ax-line); border-radius: var(--ax-r-sm); background: color-mix(in srgb, var(--ax-bg) 55%, transparent); padding: 12px 14px; margin: 0 0 18px; }
.access-card .notice p { margin: 0 0 6px; overflow-wrap: anywhere; }
.access-card .notice p:last-child { margin-bottom: 0; }
.access-card .notice-title { font-weight: 600; }
.access-card .notice.warn { border-color: color-mix(in srgb, var(--ax-caution) 70%, transparent); }
.access-card .notice .cta { margin-top: 10px; }

/* the "we sent it" panel */
.access-done { display: grid; gap: 12px; }
.access-done:focus { outline: none; }
.access-done .sent-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--ax-jade) 16%, transparent); border: 1px solid var(--ax-line); color: var(--ax-jade); }
.access-done .sent-icon svg { width: 26px; height: 26px; }
.access-done p { margin: 0; color: var(--ax-soft); overflow-wrap: anywhere; }
.access-done .row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between; }
.access-done .hint { font-size: 14px; color: var(--ax-muted); }

/* shell blocks (sent, gone, other-browser, wrong-link, terms-needed, continue) inside the card */
.access-card .shell { margin: 0; }
.access-card .shell .actions { margin: 4px 0 0; }

.access-legal { margin: 0; font-size: 13px; color: var(--ax-muted); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--ax-bg) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.access-legal a { color: var(--ax-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.access-legal a:hover { color: var(--ax-jade); text-decoration: underline; }
.access-legal a:focus-visible { outline: 2px solid var(--ax-mint); outline-offset: -2px; border-radius: 8px; }

@media (max-width: 480px) {
	.access-card { padding: 22px 18px 16px; border-radius: 14px; }
	.access-main { justify-content: flex-start; padding-top: max(20px, env(safe-area-inset-top)); }
}
/* short viewports (phone landscape, or a keyboard open under resizes-content): start at the top and scroll */
@media (max-height: 620px) {
	.access-main { justify-content: flex-start; }
	.access-brand { margin-bottom: 6px; }
	.access-card .lede { margin-bottom: 14px; }
}
.access-card .lede:empty { display: none; }
/* enroll: creating the passkey is the page's one action */
.access-card .auth[data-mode="enroll"] #passkey-btn { background: var(--ax-btn); border-color: var(--ax-btn); color: var(--ax-btn-ink); }
.access-card .auth[data-mode="enroll"] #passkey-btn:hover { background: var(--ax-btn-hover); color: var(--ax-btn-ink); }

/* ---- user preferences -------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.access-card button, .access-card a.cta { transition: none; }
}
/* reduced transparency (Chromium 118+): solid surfaces, no glass */
@media (prefers-reduced-transparency: reduce) {
	.access-card, html.hj-art-behind .access-card { background: var(--ax-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.access-legal { background: var(--ax-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* more contrast: solid card, stronger edges and secondary text; access-bg.js drops the glow and the sweep */
@media (prefers-contrast: more) {
	:root, :root[data-kind] { --ax-soft: var(--ax-ink); --ax-muted: color-mix(in srgb, var(--ax-ink) 84%, transparent); --ax-line: color-mix(in srgb, var(--ax-ink) 60%, transparent); }
	.access-card, html.hj-art-behind .access-card { background: var(--ax-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
	body.layout-access { background-image: none; }
}
/* forced colors: the system palette owns the page; the artwork steps aside */
@media (forced-colors: active) {
	#access-bg, .access-art { display: none; }
	.access-card { background: Canvas; backdrop-filter: none; }
}

/* setup#18: "We're already reading acme.com…" — the site the homepage carried in */
.access-card .access-site { margin: -12px 0 20px; color: var(--ax-soft); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.access-card .access-site::before { content: ""; display: inline-block; vertical-align: middle; margin-right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ax-jade); box-shadow: 0 0 0 0 var(--ax-jade); animation: access-site-pulse 1.8s ease-out infinite; }
.access-card .access-site b { color: var(--ax-ink); font-weight: 600; }
.access-card .access-site[hidden] { display: none; }
@keyframes access-site-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ax-jade) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (max-width: 480px) { .access-card .access-site { margin: -6px 0 14px; } }
/* the sent screen empties the lede (display:none): the line then sits under the heading, not pulled up into it (prod
   verification 2026-10-08, "Check your email") */
.access-card .lede:empty + .access-site { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .access-card .access-site::before { animation: none; } }