/* Shared spatial system for Webaro authentication and account surfaces. */
.webaro-auth {
	--webaro-space-1: 4px;
	--webaro-space-2: 8px;
	--webaro-space-3: 12px;
	--webaro-space-4: 16px;
	--webaro-space-5: 20px;
	--webaro-space-6: 24px;
	--webaro-space-7: 32px;
	--webaro-space-8: 40px;
	--webaro-space-9: 48px;
	--webaro-space-10: 56px;
	--webaro-space-11: 64px;
	--webaro-space-12: 80px;
	--webaro-space-13: 96px;
	--webaro-gap-inline: var(--webaro-space-2);
	--webaro-gap-control: var(--webaro-space-3);
	--webaro-gap-field: var(--webaro-space-4);
	--webaro-gap-section: var(--webaro-space-6);
	--webaro-gap-button: var(--webaro-space-2);
	--webaro-gap-navigation: var(--webaro-space-1);
	--webaro-control-height: 48px;
	--webaro-touch-target: 44px;
	--webaro-reading-width: 60ch;
	font-family: var(--webaro-font-family, inherit);
	font-size: var(--webaro-body-size, 16px);
	line-height: var(--webaro-line-height, 1.6);
	caret-color: var(--webaro-primary);
}

.webaro-auth__surface {
	padding: var(--webaro-form-padding, clamp(var(--webaro-space-5), 5vw, var(--webaro-space-7)));
	border-radius: var(--webaro-radius);
}

.webaro-auth__brand {
	display: flex;
	align-items: center;
	gap: var(--webaro-gap-control);
	margin-block-end: var(--webaro-space-5);
	color: var(--webaro-muted);
	font-size: .8125rem;
	line-height: 1.55;
}
.webaro-auth__brand img { display: block; flex: 0 0 auto; max-width: 56px; max-height: 48px; object-fit: contain; }
.webaro-auth__brand > div { display: grid; gap: var(--webaro-space-1); min-width: 0; }
.webaro-auth__brand strong { color: var(--webaro-text); font-size: .9375rem; font-weight: 650; }
.webaro-auth__brand span { color: var(--webaro-muted); }

.webaro-auth__header { margin-block-end: var(--webaro-gap-section); }
.webaro-auth__title { margin-block: 0 var(--webaro-space-2) !important; }
.webaro-auth__intro { max-width: var(--webaro-reading-width); line-height: 1.75; }
.webaro-auth__form { gap: var(--webaro-field-gap, var(--webaro-gap-field)); }
.webaro-auth__field { gap: var(--webaro-space-2); }
.webaro-auth__label { font-size: var(--webaro-label-size, .875rem); line-height: 1.55; }

.webaro-auth__input {
	height: var(--webaro-input-height, var(--webaro-control-height)) !important;
	padding-inline: var(--webaro-space-3) !important;
	border-radius: var(--webaro-input-radius, max(4px, calc(var(--webaro-radius) - 2px))) !important;
	background: var(--webaro-bg) !important;
}
.webaro-auth__input:focus-visible {
	outline: 2px solid var(--webaro-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--webaro-primary) 16%, transparent) !important;
}
.webaro-auth__password-toggle {
	min-height: var(--webaro-touch-target);
	font-family: inherit;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.25;
}
.webaro-auth__password-toggle:hover { background: color-mix(in srgb, var(--webaro-primary) 8%, transparent); }

.webaro-auth__check { gap: var(--webaro-gap-inline); min-height: var(--webaro-touch-target); }
.webaro-auth__submit,
.webaro-auth__secondary,
.webaro-auth__danger {
	min-height: var(--webaro-button-height, var(--webaro-control-height));
	gap: var(--webaro-gap-button);
	padding-inline: var(--webaro-space-5);
	border-radius: var(--webaro-button-radius, max(4px, calc(var(--webaro-radius) - 2px)));
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
}
.webaro-auth__submit:focus-visible,
.webaro-auth__secondary:focus-visible,
.webaro-auth__danger:focus-visible,
.webaro-auth__password-toggle:focus-visible,
.webaro-auth a:focus-visible {
	outline: 2px solid var(--webaro-primary);
	outline-offset: 3px;
}
.webaro-auth__secondary:hover { background: var(--webaro-primary); color: #fff; }
.webaro-auth__secondary:disabled,
.webaro-auth__danger:disabled { cursor: wait; opacity: .7; }
.webaro-auth__danger { border-color: var(--webaro-danger); background: var(--webaro-bg); color: var(--webaro-danger); }
.webaro-auth__danger:hover { background: var(--webaro-danger); color: #fff; }

.webaro-auth__notice {
	gap: var(--webaro-gap-control);
	margin-block: 0 var(--webaro-gap-field);
	padding: var(--webaro-space-3) var(--webaro-space-4);
	border-radius: max(4px, calc(var(--webaro-radius) - 2px));
	line-height: 1.65;
}
.webaro-auth__notice--info { border-color: #b8cadb; background: #f3f7fb; color: #25445f; }
.webaro-auth__notice--info .webaro-auth__notice-mark { background: #39739d; }
.webaro-auth__notice--warning { border-color: #dec98e; background: #fff8e5; color: #684f14; }
.webaro-auth__notice--warning .webaro-auth__notice-mark { background: #9a6d0a; }
.webaro-auth__notice ul { margin-block: var(--webaro-space-2) 0; padding-inline-start: var(--webaro-space-5); }
.webaro-auth__notice code { padding: var(--webaro-space-1) var(--webaro-space-2); border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; font-size: .9em; }
.webaro-auth__links { gap: var(--webaro-gap-control) var(--webaro-space-5); margin-block-start: var(--webaro-gap-section); padding-block-start: var(--webaro-gap-field); line-height: 1.6; }
.webaro-auth__otp { margin-block-start: var(--webaro-gap-field); padding-block-start: var(--webaro-gap-field); }
.webaro-auth__otp summary { min-height: var(--webaro-touch-target); }
.webaro-auth__otp[open] summary { margin-block-end: var(--webaro-gap-field); }
.webaro-auth__otp .webaro-auth__form + .webaro-auth__form { margin-block-start: var(--webaro-gap-section); padding-block-start: var(--webaro-gap-section); }
.webaro-auth__input[inputmode="numeric"] { font-variant-numeric: tabular-nums; letter-spacing: .14em; text-align: center; }
.webaro-auth__form[aria-busy="true"] { opacity: .78; }
.webaro-auth__strength { min-height: var(--webaro-space-5); line-height: 1.5; }
.webaro-auth[data-card-style="flat"] .webaro-auth__surface { padding-inline: 0; border: 0; box-shadow: none; }
.webaro-auth[data-button-style="outline"] .webaro-auth__submit { background: transparent; color: var(--webaro-primary); }
.webaro-auth[data-button-style="outline"] .webaro-auth__submit:hover { background: var(--webaro-primary); color: #fff; }
.webaro-auth[data-template="minimal"] .webaro-auth__surface { border-color: transparent; background: transparent; box-shadow: none; }
.webaro-auth[data-template="compact"] .webaro-auth__surface { padding: calc(var(--webaro-form-padding, 32px) * .7); }
.webaro-auth[data-template="compact"] .webaro-auth__header { margin-block-end: var(--webaro-gap-field); }
.webaro-auth[data-template="compact"] .webaro-auth__form { gap: max(var(--webaro-space-2), calc(var(--webaro-field-gap, 16px) * .8)); }

@media (max-width: 480px) {
	.webaro-auth__surface { padding: min(var(--webaro-form-padding, var(--webaro-space-5)), var(--webaro-space-6)) var(--webaro-space-4); }
	.webaro-auth[data-template="compact"] .webaro-auth__surface { padding: var(--webaro-space-4); }
	.webaro-auth__title { font-size: 1.5rem; }
	.webaro-auth__brand { margin-block-end: var(--webaro-space-4); }
	.webaro-auth__form { gap: min(var(--webaro-field-gap, var(--webaro-gap-field)), var(--webaro-space-5)); }
	.webaro-auth__links { display: grid; gap: var(--webaro-gap-control); }
	.webaro-auth__submit,
	.webaro-auth__secondary,
	.webaro-auth__danger { width: 100%; min-height: 48px; }
	.webaro-auth__password-wrap .webaro-auth__input { padding-inline-end: 112px !important; }
}
@media (max-width: 360px) {
	.webaro-auth__surface { padding-inline: var(--webaro-space-3); }
	.webaro-auth[data-template="compact"] .webaro-auth__surface { padding: var(--webaro-space-3); }
	.webaro-auth__password-wrap .webaro-auth__input { padding-inline-end: 98px !important; }
	.webaro-auth__password-toggle { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
	.webaro-auth__input,
	.webaro-auth__submit,
	.webaro-auth__secondary { transition: none; }
	.webaro-auth__spinner { animation: none; }
}
@media (forced-colors: active) {
	.webaro-auth__notice-mark { forced-color-adjust: none; }
	.webaro-auth__submit,
	.webaro-auth__secondary,
	.webaro-auth__danger { border: 1px solid ButtonText; }
}