/**
 * kutri-register — front-end styles for the free-membership signup form
 * + the email-verify landing page.
 *
 * Handle: kutri-register. Wrapper: .kutri-reg. All hooks: .kreg-* / #kreg_*.
 * RUCSS safelist (Agent CACHE) MUST keep: .kutri-reg, .kreg-*, :focus-visible,
 * [aria-invalid]. Keep selectors here stable so the safelist stays valid.
 *
 * Accessibility invariants (research/.../2026-06-28-19-redux-accessibility.md
 * checklist, items 9–12):
 *  - off-screen honeypot (.kreg-hp), NOT display:none
 *  - :focus-visible 3px outline / 2px offset on EVERY control + link + button
 *  - error = icon + words + colour, NEVER colour alone
 *  - ≥44px touch targets
 *  - Lexend, white bg, laivasto headings/labels, only sanctioned #4a4a4a hint grey
 *  - 4.5:1 text / 3:1 UI contrast
 *  - prefers-reduced-motion disables transitions + the spinner animation
 *  - mobile-first single column
 *
 * Brand tokens copied from ~/.claude/rules/kutri-design-system.md (do not invent).
 */

/* ------------------------------------------------------------------ tokens */
.kutri-reg {
	/* Colour palette (Swiss design system) */
	--kreg-laivasto: #002136;          /* darkest navy — headings + labels      */
	--kreg-petrooli: #094f7c;          /* primary — buttons, links, focus ring  */
	--kreg-petrooli-hover: #073d61;    /* button hover (darker petrooli)        */
	--kreg-keskisininen: #0081b2;      /* input border lines                    */
	--kreg-ok: #0078a5;                /* keskisininen-a11y — 4.96:1 on white    */
	--kreg-turkoosi: #02c4e4;          /* success fill / accent bar             */
	--kreg-varoitus: #cc2d35;          /* errors ONLY — ~5.9:1 on white          */
	--kreg-text: #000000;              /* body text — always near-black          */
	--kreg-hint: #4a4a4a;              /* sanctioned secondary grey — 8.9:1      */
	--kreg-white: #ffffff;
	--kreg-surface-1: #f8fafc;         /* lightest grey — alt rows / disabled    */
	--kreg-bg-sininen: #ebfcff;        /* info tint                              */
	--kreg-bg-success: #e9fbff;        /* light turkoosi tint for the success box */
	--kreg-bg-error: #fdecec;          /* light red tint for the error summary   */
	--kreg-radius: 6px;

	font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--kreg-text);
	background: var(--kreg-white);
	max-width: 38rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 2.5rem;
	font-size: 1rem;
	line-height: 1.6;
	box-sizing: border-box;
}

.kutri-reg *,
.kutri-reg *::before,
.kutri-reg *::after {
	box-sizing: border-box;
}

/* Make sure our JS-toggled regions actually hide regardless of theme resets. */
.kutri-reg [hidden] {
	display: none !important;
}

/* ----------------------------------------------------------- typography */
.kutri-reg h1,
.kutri-reg h2,
.kutri-reg h3 {
	color: var(--kreg-laivasto);
	line-height: 1.25;
	margin: 0 0 0.5em;
	font-weight: 700;
}

.kutri-reg h1 { font-size: 1.778rem; }   /* 32px */
.kutri-reg h2 { font-size: 1.444rem; }   /* 26px */
.kutri-reg h3 { font-size: 1.222rem; }   /* 22px */

.kutri-reg p {
	margin: 0 0 1rem;
}

.kutri-reg a {
	color: var(--kreg-petrooli);
	text-decoration: underline;
}

.kutri-reg a:hover {
	text-decoration: none;
}

/* ----------------------------------------------------- focus (2.4.11 AA) */
/* 3px solid outline, 2px offset, on EVERY interactive element + link. */
.kutri-reg a:focus-visible,
.kutri-reg button:focus-visible,
.kutri-reg input:focus-visible,
.kutri-reg select:focus-visible,
.kutri-reg textarea:focus-visible,
.kutri-reg [tabindex]:focus-visible {
	outline: 3px solid var(--kreg-petrooli);
	outline-offset: 2px;
	border-radius: var(--kreg-radius);
}

/* Focus-moved containers (summary, interstitial heading) get a visible ring
   too, but no offset jump that would shift layout. */
.kutri-reg #kreg_summary:focus-visible,
.kutri-reg [tabindex="-1"]:focus-visible {
	outline: 3px solid var(--kreg-petrooli);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- the form */
.kreg-form {
	display: block;
	margin: 0;
}

.kreg-field {
	margin: 0 0 1.25rem;
}

.kreg-label,
.kutri-reg label {
	display: block;
	font-weight: 600;
	color: var(--kreg-laivasto);
	margin: 0 0 0.35rem;
}

/* "(pakollinen)" word — never colour-only, just a touch lighter weight. */
.kreg-required {
	font-weight: 400;
	color: var(--kreg-hint);
}

.kreg-hint {
	color: var(--kreg-hint);
	font-size: 0.889rem;   /* 16px */
	margin: 0.3rem 0 0;
}

/* Text-style inputs (everything except checkbox / radio). */
.kutri-reg input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.kutri-reg textarea,
.kutri-reg select {
	display: block;
	width: 100%;
	min-height: 44px;                       /* 44px touch target (2.5.8)   */
	padding: 0.6rem 0.75rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--kreg-text);
	background: var(--kreg-white);
	border: 1px solid var(--kreg-keskisininen);
	border-radius: var(--kreg-radius);
	-webkit-appearance: none;
	appearance: none;
}

.kutri-reg input::placeholder,
.kutri-reg textarea::placeholder {
	color: var(--kreg-hint);
	opacity: 1;                              /* placeholders are supplementary only */
}

/* Invalid fields: 2px red border (supplementary). The icon+words live in
   .kreg-err so colour is never the only signal (1.4.1). */
.kutri-reg [aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--kreg-varoitus);
}

/* ---------------------------------------------------- inline error text */
.kreg-err {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	color: var(--kreg-varoitus);
	font-size: 0.944rem;
	font-weight: 500;
	margin: 0.4rem 0 0;
}

/* Error icon (warning circle) — baked-in red SVG so it survives without any
   icon font. Marks the message as an error in addition to the words. */
.kreg-err::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.05em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cc2d35'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

/* ----------------------------------------------- password show/hide row */
.kreg-password-row {
	position: relative;
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.kreg-password-row input {
	flex: 1 1 auto;
}

.kreg-pass-toggle {
	flex: 0 0 auto;
	min-height: 44px;
	min-width: 44px;
	padding: 0 0.85rem;
	font-family: inherit;
	font-size: 0.944rem;
	font-weight: 600;
	color: var(--kreg-petrooli);
	background: var(--kreg-white);
	border: 1px solid var(--kreg-keskisininen);
	border-radius: var(--kreg-radius);
	cursor: pointer;
}

.kreg-pass-toggle:hover {
	background: var(--kreg-surface-1);
}

/* ------------------------------------------- username availability badge */
#kreg_uname_status,
.kreg-uname-status {
	display: block;
	min-height: 1.4em;        /* reserve space so the layout never jumps */
	margin: 0.4rem 0 0;
	font-size: 0.944rem;
	font-weight: 600;
}

/* Words + symbol carry the meaning; colour is only reinforcement. */
.kreg-uname-status.kreg-uname--ok { color: var(--kreg-ok); }
.kreg-uname-status.kreg-uname--taken { color: var(--kreg-varoitus); }

/* --------------------------------------------- newsletter fieldset group */
.kreg-news {
	margin: 0 0 1.25rem;
	padding: 1rem 1rem 0.6rem;
	border: 1px solid var(--kreg-keskisininen);
	border-radius: var(--kreg-radius);
}

.kreg-news legend {
	font-weight: 700;
	color: var(--kreg-laivasto);
	padding: 0 0.4rem;
}

/* The fieldset help (#kreg_news_help uses .kreg-hint) needs a bottom gap
   before the checkboxes. */
.kreg-news .kreg-hint {
	margin: 0 0 0.75rem;
}

/* Checkbox / terms rows: 44px hit area via generous padding.
   The terms label is .kreg-check.kreg-check--terms, so .kreg-check covers it. */
.kreg-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.4rem 0;
	font-weight: 400;
	color: var(--kreg-text);
	cursor: pointer;
}

.kutri-reg input[type="checkbox"],
.kutri-reg input[type="radio"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0.1rem 0 0;
	accent-color: var(--kreg-petrooli);
	cursor: pointer;
}

/* The tekoäly "you will also get the AI newsletter" notice — real prose. */
.kreg-note {
	background: var(--kreg-bg-sininen);
	border-radius: var(--kreg-radius);
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	color: var(--kreg-text);
}

/* ---------------------------------------------------- the submit button */
.kreg-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 52px;
	padding: 0.8rem 1.5rem;
	font-family: inherit;
	font-size: 1.111rem;
	font-weight: 700;
	color: var(--kreg-white);
	background: var(--kreg-petrooli);
	border: 1px solid var(--kreg-petrooli);
	border-radius: var(--kreg-radius);
	cursor: pointer;
}

.kreg-submit:hover {
	background: var(--kreg-petrooli-hover);
	border-color: var(--kreg-petrooli-hover);
}

.kreg-submit[disabled],
.kreg-submit.is-loading {
	cursor: progress;
	opacity: 0.85;
}

/* Spinner shown while submitting (animation killed under reduced-motion). */
.kreg-submit.is-loading::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	border: 3px solid rgba(255, 255, 255, 0.45);
	border-top-color: var(--kreg-white);
	border-radius: 50%;
	animation: kreg-spin 0.8s linear infinite;
}

@keyframes kreg-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------- error summary block */
#kreg_summary,
.kreg-summary {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: var(--kreg-bg-error);
	border: 2px solid var(--kreg-varoitus);
	border-radius: var(--kreg-radius);
}

.kreg-summary h2 {
	color: var(--kreg-varoitus);
	font-size: 1.222rem;
	margin: 0 0 0.5rem;
}

.kreg-summary ul {
	margin: 0;
	padding: 0 0 0 1.2rem;
}

.kreg-summary li {
	margin: 0.25rem 0;
}

.kreg-summary a {
	color: var(--kreg-varoitus);
	font-weight: 600;
}

/* ----------------------------------- polite live region for form status */
#kreg_form_status,
.kreg-form-status {
	display: block;
	margin: 0 0 1rem;
	color: var(--kreg-laivasto);
	font-weight: 500;
}

.kreg-form-status:empty {
	margin: 0;
}

/* ---------------------------------------------------- success / interstitial */
#kreg_interstitial,
.kreg-interstitial {
	padding: 1.5rem 1.25rem;
	background: var(--kreg-bg-success);
	border: 1px solid var(--kreg-turkoosi);
	border-radius: var(--kreg-radius);
}

.kreg-interstitial h2 {
	color: var(--kreg-laivasto);
	margin-top: 0;
}

#kreg_sent_email {
	font-weight: 700;
	color: var(--kreg-laivasto);
	word-break: break-all;
}

.kreg-interstitial .kreg-resend {
	min-height: 44px;
	margin: 0.5rem 0;
	padding: 0.6rem 1.2rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--kreg-white);
	background: var(--kreg-petrooli);
	border: 1px solid var(--kreg-petrooli);
	border-radius: var(--kreg-radius);
	cursor: pointer;
}

.kreg-interstitial .kreg-resend:hover {
	background: var(--kreg-petrooli-hover);
}

/* "Wrong address? Fix here" escape = #kreg_restore, styled as an inline link
   (WCAG 2.5.8 inline-link exception applies; not a block 44px target). */
.kreg-restore {
	display: inline;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--kreg-petrooli);
	text-decoration: underline;
	cursor: pointer;
}

.kreg-restore:hover {
	text-decoration: none;
}

/* -------------------------------------------------- the verify landing */
#kreg_verify,
.kutri-reg--verify {
	max-width: 38rem;
	margin: 0 auto;
}

/* State sections share padding; the tint comes from the section id, because
   the template emits no per-state modifier class (only id="kreg_verify_*"). */
.kreg-verify-state {
	padding: 1.25rem;
	border-radius: var(--kreg-radius);
}

#kreg_verify_success,
#kreg_verify_already {
	background: var(--kreg-bg-success);
	border: 1px solid var(--kreg-turkoosi);
}

#kreg_verify_pending,
#kreg_verify_needs_username,
#kreg_verify_expired,
#kreg_verify_missing {
	background: var(--kreg-bg-sininen);
	border: 1px solid var(--kreg-keskisininen);
}

.kreg-verify-state h1,
.kreg-verify-state h2,
.kreg-verify__title {
	margin-top: 0;
}

/* The verify confirm + re-pick submit buttons reuse .kreg-submit (styled above). */

/* ----------------------------------------- the honeypot (off-screen) */
/* MUST be off-screen, NOT display:none — naive bots skip display:none /
   [hidden] fields, which would defeat the trap. */
.kreg-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------- <noscript> fallback box */
.kreg-noscript {
	padding: 1rem 1.15rem;
	margin: 0 0 1.5rem;
	background: var(--kreg-bg-sininen);
	border: 1px solid var(--kreg-keskisininen);
	border-radius: var(--kreg-radius);
	color: var(--kreg-text);
}

/* ------------------------------------------------ reduced-motion (a11y) */
@media (prefers-reduced-motion: reduce) {
	.kutri-reg *,
	.kutri-reg *::before,
	.kutri-reg *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.kreg-submit.is-loading::after {
		animation: none !important;
		/* keep a static ring so the busy state is still perceivable */
		border-top-color: var(--kreg-petrooli);
	}
}

/* --------------------------------------------------- wider screens (≥640px) */
@media (min-width: 640px) {
	.kreg-submit {
		width: auto;
		min-width: 16rem;
	}
}

/* ======================================================================= */
/* --- quick-join (pikaliity) --- */
/* The logged-in member's one-flow "Liity" block. It can render standalone
   (via the [kutri_join] shortcode) OR inside .kutri-reg (the /liity logged-in
   delegation). The brand tokens are re-declared on the container so these
   styles never depend on a .kutri-reg ancestor — same re-scope pattern used
   for canvas-scoped vars elsewhere. Hooks (markup <-> join.js <-> CSS agree):
   [data-kreg-join] container with data-membership; .kreg-join-start +
   .kreg-join-confirm buttons (they reuse the .kreg-submit look, defined above);
   .kreg-join-panel reveal region; .kreg-join-fields fieldset; .kreg-join-result
   role="status" region; .kreg-join-success / .kreg-join-member success states. */
/* ======================================================================= */

[data-kreg-join] {
	--kreg-laivasto: #002136;
	--kreg-petrooli: #094f7c;
	--kreg-petrooli-hover: #073d61;
	--kreg-keskisininen: #0081b2;
	--kreg-turkoosi: #02c4e4;
	--kreg-varoitus: #cc2d35;
	--kreg-text: #000000;
	--kreg-hint: #4a4a4a;
	--kreg-white: #ffffff;
	--kreg-bg-sininen: #ebfcff;
	--kreg-bg-success: #e9fbff;
	--kreg-radius: 6px;

	font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--kreg-text);
	line-height: 1.6;
	font-size: 1rem;
	box-sizing: border-box;
}

[data-kreg-join] *,
[data-kreg-join] *::before,
[data-kreg-join] *::after {
	box-sizing: border-box;
}

/* Make the JS-toggled regions hide regardless of theme resets (standalone). */
[data-kreg-join] [hidden] {
	display: none !important;
}

[data-kreg-join] p {
	margin: 0 0 1rem;
}

/* Focus ring on every interactive element + link (standalone-safe copy of the
   .kutri-reg focus rule, scoped to the join container). */
[data-kreg-join] a:focus-visible,
[data-kreg-join] button:focus-visible,
[data-kreg-join] input:focus-visible,
[data-kreg-join] select:focus-visible,
[data-kreg-join] textarea:focus-visible,
[data-kreg-join] [tabindex]:focus-visible {
	outline: 3px solid var(--kreg-petrooli);
	outline-offset: 2px;
	border-radius: var(--kreg-radius);
}

/* Intro line above the button. */
.kreg-join-intro {
	color: var(--kreg-text);
	margin: 0 0 0.85rem;
}

/* The "Liity …" reveal button + the "Liity nyt" confirm button render with
   .kreg-submit (the canonical petrooli button, ≥44px, with its own hover,
   [disabled]/.is-loading spinner and reduced-motion override defined above).
   The .kreg-join-start / .kreg-join-confirm classes are kept purely as the
   JS hooks (and below for confirm spacing) — no duplicated button look here. */

/* The revealed newsletter fieldset. */
.kreg-join-fields {
	margin: 1rem 0 1.25rem;
	padding: 1rem 1rem 0.6rem;
	border: 1px solid var(--kreg-keskisininen);
	border-radius: var(--kreg-radius);
}

.kreg-join-fields legend {
	font-weight: 700;
	color: var(--kreg-laivasto);
	padding: 0 0.4rem;
}

/* Checkbox sizing for the standalone case (.kutri-reg scopes its own copy). */
[data-kreg-join] input[type="checkbox"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0.1rem 0 0;
	accent-color: var(--kreg-petrooli);
	cursor: pointer;
}

/* Confirm button sits below the fieldset with a little breathing room. */
.kreg-join-confirm {
	margin: 0.25rem 0 0;
}

/* ----------------------------------- polite result region (role="status") */
.kreg-join-result {
	display: block;
	margin: 0.75rem 0 0;
	color: var(--kreg-laivasto);
	font-weight: 600;
}

.kreg-join-result:empty {
	margin: 0;
}

/* Error variant: icon + words + colour (colour is never the only signal). */
.kreg-join-result--error {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	color: var(--kreg-varoitus);
}

.kreg-join-result--error::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.05em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cc2d35'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

/* Success state (JS-injected) + already-a-member state (server-rendered). */
.kreg-join-success,
.kreg-join-member {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 1rem 1.15rem;
	background: var(--kreg-bg-success);
	border: 1px solid var(--kreg-turkoosi);
	border-radius: var(--kreg-radius);
	color: var(--kreg-laivasto);
	font-weight: 700;
	font-size: 1.111rem;
}

.kreg-join-success:focus-visible {
	outline: 3px solid var(--kreg-petrooli);
	outline-offset: 2px;
}

/* ------------------------------------------------ reduced-motion (a11y) */
/* The confirm-button spinner under reduced motion is handled by the
   .kreg-submit.is-loading::after override above (the join buttons are .kreg-submit). */
@media (prefers-reduced-motion: reduce) {
	[data-kreg-join] *,
	[data-kreg-join] *::before,
	[data-kreg-join] *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}