/*
 * Apex Kinetic — isolated design tokens + base component layer for the public
 * membership-preparation (self-registration) flow.
 *
 * D7 isolation: this stylesheet is linked ONLY by the standalone applicant-flow pages
 * under /lionfit/ (submit / verify / claim). It is never linked into the
 * admin SPA (app.html) and never inherits the Mitglieder/admin theme. All tokens are
 * `--ak-*`-prefixed so they can never collide with the homepage shell's unprefixed
 * `--accent`/`--surface-*` set even if a page ever links both.
 *
 * The look mirrors docs/design/stitch/inbox (Apex Kinetic): flat, strictly sharp (0px),
 * 2px solid borders, high-contrast near-black canvas with a single yellow accent driving
 * every call-to-action. Poppins for headings, labels, buttons and body. No shadows, no
 * gradients, no border-radius — strictly sharp throughout (the flow
 * pages carry no wizard/stepper; the homepage wizard is the only wizard, D7 Addendum
 * 980a0e41). Accent #f4e700 matches the Stitch code.html and the merged homepage shell
 * (visual continuity across the flow).
 */

:root {
	/* Surfaces — tonal layering, not shadow (Stitch "Elevation & Depth"). */
	--ak-bg: #0a0a0a;
	--ak-surface: #1a1a1a;
	--ak-surface-2: #242626;

	/* Lines — high-contrast outlines define every boundary. */
	--ak-line: #e2e2e2;
	--ak-line-dim: #4a4731;

	/* The sole accent — drives every CTA / active state. */
	--ak-accent: #f4e700;
	--ak-accent-dim: #d6ca00;
	--ak-on-accent: #000000;

	/* Text. */
	--ak-text: #ffffff;
	--ak-text-soft: #d7d3bd;
	--ak-text-muted: #a1a1aa;

	/* State. */
	--ak-danger: #ffb4ab;
	--ak-focus: #76f6f5;

	/* Geometry — strictly rectangular. */
	--ak-radius: 0;
	--ak-border-width: 2px;
	--ak-border: var(--ak-border-width) solid var(--ak-line);
	--ak-border-accent: var(--ak-border-width) solid var(--ak-accent);
	--ak-border-dim: var(--ak-border-width) solid var(--ak-line-dim);

	/* Type. */
	--ak-font-head: "Poppins", Arial, sans-serif;
	--ak-font-body: "Poppins", Arial, sans-serif;

	/* Rhythm — multiples of 4px. */
	--ak-space: 4px;
	--ak-gap: 16px;
	--ak-gutter: 24px;
	--ak-section-gap: 64px;
}

/*
 * The page opts in with `class="ak"` on <body> (or a container). Only rules under `.ak`
 * touch the DOM, so linking this file can never restyle a host that forgets the class.
 */
.ak {
	margin: 0;
	min-height: 100vh;
	background: var(--ak-bg);
	color: var(--ak-text);
	font-family: var(--ak-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.ak *,
.ak *::before,
.ak *::after {
	box-sizing: border-box;
	border-radius: var(--ak-radius);
}

/*
 * The `hidden` attribute must win over the component `display` rules below (e.g. `.ak-btn`'s
 * `display: inline-flex`, an author rule that would otherwise beat the UA `[hidden]{display:none}`).
 * Used by the submit pager to collapse the inactive sub-views + the swapped Zurück controls.
 */
.ak [hidden] { display: none; }

.ak h1,
.ak h2,
.ak h3 {
	margin: 0 0 var(--ak-gap);
	font-family: var(--ak-font-head);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ak h1 { font-size: clamp(2.25rem, 6vw, 3rem); }
.ak h2 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.ak h3 { font-size: 1.25rem; }

.ak p { margin: 0 0 var(--ak-gap); }

/* Plain text links get the accent underline; button-anchors (`.ak-btn`) keep their own
 * fill/outline styling instead of inheriting the link colour + underline. */
.ak a:not(.ak-btn) {
	color: var(--ak-accent);
	text-decoration: none;
	border-bottom: var(--ak-border-accent);
}

/* Layout container — centered fixed-max column with generous margins. */
.ak-shell {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: var(--ak-section-gap) clamp(var(--ak-gap), 5vw, var(--ak-gutter));
}

/* Labels — uppercase, above the field. */
.ak-label {
	display: block;
	margin-bottom: var(--ak-space);
	font-family: var(--ak-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ak-text-soft);
}

/* Input fields — full 2px rectangular outline, yellow on focus. */
.ak-field {
	width: 100%;
	padding: 12px 14px;
	background: var(--ak-bg);
	border: var(--ak-border-dim);
	color: var(--ak-text);
	font-family: var(--ak-font-body);
	font-size: 1rem;
}

.ak-field::placeholder { color: var(--ak-text-muted); }

.ak-field:focus,
.ak-field:focus-visible {
	outline: none;
	border-color: var(--ak-accent);
}

/* Native constraint-validation error paint (matches the admin :user-invalid convention). */
.ak-field:user-invalid { border-color: var(--ak-danger); }

/* Primary button — filled yellow; inverts to black-on-yellow-border on hover. */
.ak-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ak-space);
	padding: 14px 28px;
	background: var(--ak-accent);
	border: var(--ak-border-accent);
	color: var(--ak-on-accent);
	font-family: var(--ak-font-head);
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s linear, color 0.15s linear;
}

.ak-btn:hover:not([disabled]) {
	background: var(--ak-bg);
	color: var(--ak-accent);
}

.ak-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Secondary button — transparent, white outline. */
.ak-btn--secondary {
	background: transparent;
	border: var(--ak-border);
	color: var(--ak-text);
}

.ak-btn--secondary:hover:not([disabled]) {
	background: var(--ak-text);
	color: var(--ak-bg);
}

/* Prominent callout — a highlighted box that cannot be missed above a form field (the claim
 * page's on-card-code source, N7). Yellow accent outline with a heavy left bar, bold larger text. */
.ak-callout {
	margin: 0 0 var(--ak-gutter);
	padding: var(--ak-gap) var(--ak-gutter);
	background: var(--ak-surface-2);
	border: var(--ak-border-accent);
	border-left-width: 6px;
	color: var(--ak-text);
	font-family: var(--ak-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.4;
}

/* Promoted code input — the claim page's primary field: larger, bolder, accent outline so the
 * eye lands on it before the secondary navigation (N7). */
.ak-field--code {
	padding: 16px 18px;
	border: var(--ak-border-accent);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Demoted secondary navigation — a quiet, centred text link BELOW the primary action, never a
 * button sitting equal beside the submit CTA (claim page's "Zur Startseite", N7). */
.ak-form-footnote {
	margin: var(--ak-gap) 0 0;
	text-align: center;
}

.ak a.ak-backlink {
	color: var(--ak-text-muted);
	border-bottom: none;
	font-size: 0.9375rem;
}

.ak a.ak-backlink:hover {
	color: var(--ak-text-soft);
	border-bottom: 1px solid var(--ak-text-soft);
}

/* Chips / badges — black box, yellow outline, uppercase label. */
.ak-badge {
	display: inline-block;
	padding: 4px 8px;
	background: var(--ak-bg);
	border: var(--ak-border-accent);
	color: var(--ak-accent);
	font-family: var(--ak-font-body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*
 * Verify-page Boxcode badge (7.3) — the code the applicant enters at the studio keybox.
 * A scoped modifier over `.ak-badge` (never the shared claim chip): displayed large and
 * centred on its own line, with generous horizontal padding so the digits clear the border.
 */
.ak-boxcode {
	display: block;
	width: fit-content;
	margin-inline: auto;
	padding: var(--ak-gap) var(--ak-gutter);
	font-size: 3rem;
	line-height: 1.1;
}

/* Focus ring — cyan tertiary, consistent with the homepage shell. */
.ak :focus-visible {
	outline: 3px solid var(--ak-focus);
	outline-offset: 3px;
}

/*
 * Status panel — the shared success / pending / error surface every screen renders via
 * applicant-flow.js `renderStatus()`. A left accent bar carries the state colour.
 */
.ak-status {
	background: var(--ak-surface);
	border: var(--ak-border-dim);
	border-left: 4px solid var(--ak-accent);
	padding: var(--ak-gutter);
}

.ak-status--success { border-left-color: var(--ak-accent); }
.ak-status--pending { border-left-color: var(--ak-focus); }
.ak-status--error { border-left-color: var(--ak-danger); }

.ak-status-title {
	margin: 0 0 var(--ak-space);
	font-family: var(--ak-font-head);
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ak-status-message {
	margin: 0;
	color: var(--ak-text-soft);
}

/* The withdrawal receipt's declaration content (widerruf.js): one line per entry, set as text. */
.ak-receipt-content {
	margin: 0;
	white-space: pre-line;
}

/*
 * Submit pending overlay (E5) — laid over the flow-root while the submit round-trip is in flight so
 * the applicant sees a coherent "sending…" state; the completed 201 then replaces the whole flow-root
 * in one piece (never a receipt half-rendered behind a slow send). The form is disabled (its controls,
 * in JS) AND dimmed + click-blocked for the same beat.
 */
.ak-shell.is-submitting {
	position: relative;
}

.ak-shell.is-submitting [data-submit-form] {
	opacity: 0.5;
	pointer-events: none;
}

.ak-submit-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ak-gutter);
	background: rgba(10, 10, 10, 0.78);
}

.ak-submit-overlay-text {
	margin: 0;
	padding: var(--ak-gap) var(--ak-gutter);
	background: var(--ak-surface);
	border-left: 4px solid var(--ak-focus);
	color: var(--ak-text-soft);
	font-family: var(--ak-font-body);
}

/* Screen-reader-only utility (shared with the homepage shell's convention). */
.ak-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * Form layer — reusable `.ak`-scoped classes the applicant screens consume (the
 * submit form first; verify / claim reuse the checkbox / segment /
 * section primitives). Tokens above are untouched; these only compose them.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* Top bar — flat, hard 2px underline, uppercase wordmark. */
.ak-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-gap);
	padding: var(--ak-gap) clamp(var(--ak-gap), 5vw, var(--ak-gutter));
	background: var(--ak-surface);
	border-bottom: var(--ak-border);
}

/* Brand wordmark link — the LionFit PNG (768×432) scaled to header height, linking
 * home. Mirrors the homepage `.header-wordmark img` sizing (H8). */
.ak-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.ak-logo img {
	display: block;
	width: clamp(128px, 15vw, 170px);
	height: auto;
	max-height: 38px;
	object-fit: contain;
}

.ak-header-note {
	font-family: var(--ak-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ak-text-muted);
}

/* Form panel — the applicant form's container. Stitch delineates with dim (olive) outlines
 * and the accent section left-bars, not a bright-white box; so this uses the dim border on a
 * softly-elevated surface. */
.ak-form-panel {
	background: var(--ak-surface);
	border: var(--ak-border-dim);
	padding: var(--ak-gutter);
}

/* Section — a titled block; the heading carries the accent left-bar (Stitch optics). */
.ak-section { margin-bottom: 40px; }

.ak-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-gap);
	border-left: 4px solid var(--ak-accent);
	padding-left: var(--ak-gap);
	margin-bottom: var(--ak-gutter);
}

.ak-section-head h2 { margin: 0; }

/* Responsive field grid — one column on mobile, two from 640px. */
.ak-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ak-gap);
}

@media (min-width: 640px) {
	.ak-form-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--ak-gutter);
	}
}

/* A label + field stack; `.ak-col-2` spans the full grid width. */
.ak-field-group { display: flex; flex-direction: column; }
.ak-col-2 { grid-column: 1 / -1; }

/* Small muted helper line under a field. */
.ak-hint {
	margin: var(--ak-space) 0 0;
	font-size: 0.8rem;
	color: var(--ak-text-muted);
}

/* Discreet image-build stamp — `__BUILD__` is substituted with the short commit hash
   at deploy (scripts/deploy.sh); dev/`npm start` serves the literal placeholder. */
.build-stamp {
	margin: calc(var(--ak-space) / 2) 0 0;
	font-size: 0.7rem;
	color: var(--ak-text-muted);
	opacity: 0.7;
	letter-spacing: 0.02em;
}

/*
 * Segmented control — the booking-day toggle (Ab dem 1. / Ab dem 15.). The radio
 * overlays its button label (kept focusable, opacity 0); `:checked` lights the accent.
 */
.ak-segment {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ak-gap);
}

.ak-segment-option {
	position: relative;
	display: block;
}

.ak-segment-option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ak-segment-option span {
	display: block;
	padding: 14px;
	text-align: center;
	background: var(--ak-surface);
	border: var(--ak-border-dim);
	color: var(--ak-text-soft);
	font-family: var(--ak-font-head);
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ak-segment-option input:checked + span {
	background: var(--ak-surface-2);
	border-color: var(--ak-accent);
	color: var(--ak-accent);
}

.ak-segment-option input:focus-visible + span {
	outline: 3px solid var(--ak-focus);
	outline-offset: 3px;
}

.ak-bank-channel {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

/* Consent checkbox row — native checkbox tinted to the accent. */
.ak-check {
	display: flex;
	align-items: flex-start;
	gap: var(--ak-gap);
	cursor: pointer;
}

.ak-check + .ak-check { margin-top: var(--ak-gap); }

.ak-check input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	accent-color: var(--ak-accent);
}

.ak-check span {
	color: var(--ak-text-soft);
	user-select: none;
}

/* Consent links (Datenschutzbestimmungen / AGB) — the flow has no other inline
   anchors, and the dark surface would render a browser-default link near-invisibly,
   so give them the accent + underline the AGB page's own .legal a uses. */
.ak-check a {
	color: var(--ak-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Inline error banner — neutral, no-mechanism copy; hidden until a submit fails. */
.ak-form-error {
	display: none;
	margin-bottom: var(--ak-gutter);
	padding: 12px 14px;
	background: var(--ak-surface-2);
	border: var(--ak-border-width) solid var(--ak-danger);
	border-left-width: 4px;
	color: var(--ak-danger);
}

.ak-form-error.is-visible { display: block; }

/*
 * H3 e-mail pre-check notice — inline, danger-framed like `.ak-form-error`, shown under the
 * contact view's e-mail fields when the pre-check reports an existing request/membership. The
 * resend block (H5) appears only for an OPEN_REQUEST; its status line acknowledges the resend
 * neutrally (muted, not danger-red). Hidden via the `hidden` attribute until the JS shows it.
 */
.ak-precheck {
	padding: 12px 14px;
	background: var(--ak-surface-2);
	border: var(--ak-border-width) solid var(--ak-danger);
	border-left-width: 4px;
	color: var(--ak-danger);
}

.ak-precheck-message { margin: 0; }

.ak-precheck-resend {
	display: flex;
	flex-direction: column;
	gap: var(--ak-space);
	margin-top: var(--ak-gap);
}

/* D2 skipped-IBAN question — the two answers of an in-page `.ak-precheck` question panel. */
.ak-question-answers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-space);
	margin-top: var(--ak-gap);
}

.ak-precheck-resend-status {
	margin: 0;
	font-size: 0.8rem;
	color: var(--ak-text-muted);
}

/* Compact secondary button for an inline affordance (the pre-check resend). */
.ak-btn--small {
	align-self: flex-start;
	padding: 8px 16px;
	font-size: 0.95rem;
}

/* Action area — full-width primary CTA. */
.ak-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ak-gap);
	margin-top: var(--ak-gutter);
}

.ak-actions .ak-btn { width: 100%; }

/*
 * Next-step block — the claim hint / restart CTA appended inside a status panel
 * (`applicant-flow.js` renderVerified / renderInvalid). A dim rule separates it from the
 * status message; its CTA spans the panel width.
 */
.ak-next {
	margin-top: var(--ak-gutter);
	padding-top: var(--ak-gutter);
	border-top: var(--ak-border-dim);
}

.ak-next-title {
	margin: 0 0 var(--ak-space);
	font-family: var(--ak-font-head);
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ak-next p { color: var(--ak-text-soft); }

.ak-next .ak-btn {
	width: 100%;
	margin-top: var(--ak-gap);
}

/*
 * Resend-verification affordance (H5), reused by the post-submit receipt (button only — the e-mail
 * is known) and the verify pending / invalid panels (a small e-mail input, since the verify page
 * never learns the address). Both live in an `.ak-next` block; the neutral acknowledgement line is
 * muted (it leaks no existence oracle).
 */
.ak-resend-form {
	display: flex;
	flex-direction: column;
	gap: var(--ak-space);
	margin-top: var(--ak-gap);
}

.ak-resend-status {
	margin: var(--ak-gap) 0 0;
	font-size: 0.8rem;
	color: var(--ak-text-muted);
}

/* The correct-email affordance (E3) reuses `.ak-resend-status` for its outcome line; a dead-domain
 * block or a backend rejection turns it danger-red (the neutral resend ack stays muted). */
.ak-resend-status--error { color: var(--ak-danger); }

.ak-photo-preview {
	display: block;
	width: min(100%, 320px);
	aspect-ratio: 4 / 3;
	margin-top: var(--ak-gap);
	object-fit: cover;
	border: var(--ak-border-dim);
	border-radius: 8px;
	background: var(--ak-surface-muted);
}

.ak-photo-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ak-space);
	margin-top: var(--ak-gap);
}

.ak-photo-actions .ak-btn {
	width: 100%;
	margin-top: 0;
}

@media (max-width: 520px) {
	.ak-photo-actions {
		grid-template-columns: 1fr;
	}
}

/*
 * Dialog sub-view pager (submit.html, D7 Addendum 980a0e41). The data dialog walks the
 * applicant through four sub-views; the pager hint reads "Deine Daten · x/4 — <Name>" and
 * the order summary on the last view lists Standort / Abo / Beginn as plain text.
 */
.ak-pager-hint {
	margin: 0 0 var(--ak-gutter);
	font-family: var(--ak-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ak-text-muted);
}

.ak-pager-hint:empty { display: none; }

.ak-order-summary { margin-bottom: var(--ak-gutter); }

.ak-order-summary p {
	margin: 0 0 var(--ak-space);
	color: var(--ak-text-soft);
}

/*
 * The Rücktrittsbelehrung on its sub-view — the committed fragment as full text, framed as a
 * document on the surface. Its own headings step down so the dialog's heading scale stays intact.
 */
.ak-belehrung {
	margin-bottom: var(--ak-gutter);
	padding: var(--ak-gutter);
	background: var(--ak-surface);
	border: var(--ak-border-dim);
	color: var(--ak-text-soft);
}

.ak-belehrung h1 { font-size: 1.5rem; }
.ak-belehrung h2 { font-size: 1.25rem; }
.ak-belehrung h3 { font-size: 1.05rem; }

.ak-belehrung hr {
	border: 0;
	border-top: var(--ak-border-dim);
	margin: var(--ak-gutter) 0;
}

.ak-belehrung code { font-family: inherit; }

/* The § 10-Verlangen checkbox sits apart from the Belehrung text above it. */
.ak-verlangen { margin-top: var(--ak-gutter); }