/*
 * Loginly frontend styles.
 *
 * Every custom property in PLUGIN-SPEC.md section 12b is declared exactly once
 * in the :root block below. Nothing beneath that block may use a literal
 * colour, radius, font size or spacing value.
 */

:root {
	/* Layout */
	--loginly-form-max-width: 420px;
	--loginly-form-align: auto;
	--loginly-form-bg: #ffffff;
	--loginly-form-padding: 32px;
	--loginly-form-min-height: 0px;
	--loginly-form-radius: 12px;
	--loginly-form-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.08);
	--loginly-form-border-width: 1px;
	--loginly-form-border-color: #e5e7eb;
	--loginly-form-bg-image: none;
	--loginly-form-bg-fit: cover no-repeat;
	--loginly-form-bg-position: center center;
	--loginly-form-overlay: transparent;
	--loginly-page-bg: transparent;
	--loginly-page-overlay: transparent;
	--loginly-page-bg-image: none;
	--loginly-page-bg-fit: cover no-repeat;
	--loginly-page-bg-position: center center;

	/* Typography */
	--loginly-title-size: 24px;
	--loginly-title-weight: 700;
	--loginly-title-color: #111827;
	--loginly-title-align: left;
	--loginly-title-letter-spacing: -0.01em;
	--loginly-subtitle-size: 14px;
	--loginly-subtitle-color: #6b7280;
	--loginly-subtitle-align: left;
	--loginly-label-size: 14px;
	--loginly-label-weight: 600;
	--loginly-label-color: #1e1e1e;
	--loginly-label-align: left;
	--loginly-help-size: 13px;
	--loginly-help-color: #6b7280;
	--loginly-help-align: left;
	--loginly-required-color: #dc2626;

	/* Inputs */
	--loginly-input-height: 48px;
	--loginly-input-bg: #ffffff;
	--loginly-input-color: #1e1e1e;
	--loginly-input-placeholder-color: #9ca3af;
	--loginly-input-border-width: 1px;
	--loginly-input-border-color: #d1d5db;
	--loginly-input-radius: 8px;
	--loginly-input-padding-x: 14px;
	--loginly-input-padding-y: 10px;
	--loginly-input-font-size: 15px;
	--loginly-input-focus-border-color: #2563eb;
	--loginly-input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
	--loginly-input-invalid-border-color: #dc2626;

	/* Button */
	--loginly-btn-bg: #2563eb;
	--loginly-btn-color: #ffffff;
	--loginly-btn-hover-bg: #1d4ed8;
	--loginly-btn-hover-color: #ffffff;
	--loginly-btn-height: 48px;
	--loginly-btn-padding-y: 0px;
	--loginly-btn-radius: 8px;
	--loginly-btn-font-size: 15px;
	--loginly-btn-font-weight: 600;
	--loginly-btn-letter-spacing: 0;
	--loginly-btn-width: 100%;
	--loginly-btn-transition: background-color 150ms ease;
	--loginly-btn-disabled-opacity: 0.6;
	--loginly-btn-align: left;
	--loginly-btn-border-color: transparent;
	--loginly-btn-border-width: 1px;

	/* Links, checkboxes, messages, spacing */
	--loginly-link-color: #2563eb;
	--loginly-link-hover-color: #1d4ed8;
	--loginly-link-size: 13px;
	--loginly-link-decoration: none;
	--loginly-links-align: center;
	--loginly-check-size: 16px;
	--loginly-check-border-color: #d1d5db;
	--loginly-check-checked-bg: #2563eb;
	--loginly-check-checked-color: #ffffff;
	--loginly-check-radius: 3px;
	--loginly-error-bg: #fef2f2;
	--loginly-error-color: #991b1b;
	--loginly-error-border: #fecaca;
	--loginly-success-bg: #f0fdf4;
	--loginly-success-color: #166534;
	--loginly-success-border: #bbf7d0;
	--loginly-info-bg: #eff6ff;
	--loginly-info-color: #1e40af;
	--loginly-info-border: #bfdbfe;
	--loginly-message-radius: 8px;
	--loginly-status-icon-size: 56px;
	--loginly-status-icon-bg: #eff6ff;
	--loginly-status-icon-color: #2563eb;
	--loginly-message-padding-y: 10px;
	--loginly-message-padding-x: 14px;
	--loginly-links-padding-x: 0px;
	--loginly-field-gap: 18px;
	--loginly-section-gap: 28px;
	--loginly-label-gap: 6px;
	--loginly-hint-gap: 6px;
	--loginly-check-gap: 8px;

	/* Social buttons */
	--loginly-social-bg: #ffffff;
	--loginly-social-color: #1e1e1e;
	--loginly-social-border-color: #d1d5db;
	--loginly-social-border-width: 1px;
	--loginly-social-radius: 8px;
	--loginly-social-height: 48px;
	--loginly-social-gap: 10px;
	--loginly-social-icon-size: 18px;
	--loginly-social-icon-gap: 10px;
	--loginly-social-padding-x: 12px;
	--loginly-social-padding-y: 0px;
	--loginly-social-font-size: 14px;
	--loginly-social-font-weight: 500;
	--loginly-social-width: 100%;
	--loginly-social-divider-color: #9ca3af;

	/* Password meter, hints and loading */
	--loginly-meter-height: 6px;
	--loginly-meter-track-bg: #e5e7eb;
	--loginly-meter-radius: 4px;
	--loginly-meter-weak: #dc2626;
	--loginly-meter-medium: #f59e0b;
	--loginly-meter-strong: #16a34a;
	--loginly-hint-size: 13px;
	--loginly-hint-color: #6b7280;
	--loginly-hint-success-color: #166534;
	--loginly-hint-error-color: #991b1b;
	--loginly-spinner-color: #2563eb;

	/* Added rows */
	--loginly-content-text-size: 14px;
	--loginly-content-text-color: #4b5563;
	--loginly-content-text-align: left;
	--loginly-content-text-line-height: 1.6;
	--loginly-content-image-max-width: 100%;
	--loginly-content-image-radius: 0px;

	/* Brand panel */
	--loginly-panel-width: 44%;
	--loginly-panel-bg: #111827;
	--loginly-panel-bg-image: none;
	--loginly-panel-bg-fit: cover no-repeat;
	--loginly-panel-bg-position: center center;
	--loginly-panel-overlay: transparent;
	--loginly-panel-color: #ffffff;
	--loginly-panel-padding: 40px;
	--loginly-panel-align: center;
	--loginly-panel-min-height: 420px;
	/* A length rather than auto, so it can be compared with the form's own
	   minimum below. Zero and auto both mean no minimum on a block. */
	--loginly-page-min-height: 0px;
}

.loginly-form {
	box-sizing: border-box;
	max-width: var(--loginly-form-max-width);
	margin-left: var(--loginly-form-align);
	margin-right: var(--loginly-form-align);
	padding: var(--loginly-form-padding-y, var(--loginly-form-padding)) var(--loginly-form-padding-x, var(--loginly-form-padding));
	border: var(--loginly-form-border-width) solid var(--loginly-form-border-color);
	border-radius: var(--loginly-form-radius);
	box-shadow: var(--loginly-form-shadow);
	background: linear-gradient(var(--loginly-form-overlay, transparent), var(--loginly-form-overlay, transparent)), var(--loginly-form-bg-image, none) var(--loginly-form-bg-position, center center) / var(--loginly-form-bg-fit, cover no-repeat), var(--loginly-form-bg, transparent);
	color: var(--loginly-label-color);
	font-family: var( --loginly-font-family, inherit );
	font-size: var(--loginly-input-font-size);
	min-height: max(var(--loginly-form-min-height), var(--loginly-page-min-height));
	text-align: left;
}

.loginly-form *,
.loginly-form *::before,
.loginly-form *::after {
	box-sizing: inherit;
}

.loginly-form .loginly-form-title {
	margin: 0 0 var(--loginly-label-gap);
	color: var(--loginly-title-color);
	font-size: var(--loginly-title-size);
	font-weight: var(--loginly-title-weight);
	line-height: 1.25;
	letter-spacing: var(--loginly-title-letter-spacing);
	text-align: var(--loginly-title-align);
}

/* The title carries the section gap when nothing follows it. */
.loginly-form .loginly-form-title:last-of-type {
	margin-bottom: var(--loginly-title-space, var(--loginly-section-gap));
}

.loginly-form .loginly-form-intro {
	margin: 0 0 var(--loginly-subtitle-space, var(--loginly-section-gap));
	color: var(--loginly-subtitle-color);
	font-size: var(--loginly-subtitle-size);
	line-height: 1.5;
	text-align: var(--loginly-subtitle-align);
}

/*
 * The gap belongs to the row, not to the field inside it. A field that renders
 * a live message puts it after the field box and inside the row, so a gap held
 * on the field ends up between the field and its own message, leaving the row
 * itself flush against the next one and the message reading as though it
 * belonged to the field below.
 */
.loginly-form .loginly-row {
	margin-bottom: var(--loginly-field-gap);
}

.loginly-form .loginly-field {
	margin-bottom: 0;
}

/*
 * A row somebody added. One block of content in whichever region the row sits
 * in: the image carries its own width and nothing else here establishes a
 * column, a track or a nesting context.
 */
.loginly-form .loginly-row-content {
	margin-bottom: var(--loginly-content-space, var(--loginly-field-gap));
}

.loginly-form .loginly-content-text {
	color: var(--loginly-content-text-color);
	font-size: var(--loginly-content-text-size);
	line-height: var(--loginly-content-text-line-height);
	text-align: var(--loginly-content-text-align);
}

.loginly-form .loginly-content-text > *:first-child {
	margin-top: 0;
}

.loginly-form .loginly-content-text > *:last-child {
	margin-bottom: 0;
}

.loginly-form .loginly-content-image {
	line-height: 0;
}

.loginly-form .loginly-content-align-left {
	text-align: left;
}

.loginly-form .loginly-content-align-center {
	text-align: center;
}

.loginly-form .loginly-content-align-right {
	text-align: right;
}

.loginly-form .loginly-content-img {
	display: inline-block;
	max-width: var(--loginly-content-image-max-width);
	height: auto;
	border-radius: var(--loginly-content-image-radius);
}

.loginly-form .loginly-field-submit {
	margin-top: var(--loginly-submit-space, var(--loginly-section-gap));
	margin-bottom: 0;
	text-align: var(--loginly-btn-align);
}

.loginly-form .loginly-label {
	display: block;
	margin-bottom: var(--loginly-label-gap);
	color: var(--loginly-label-color);
	font-size: var(--loginly-label-size);
	font-weight: var(--loginly-label-weight);
	text-align: var(--loginly-label-align);
}

.loginly-form .loginly-required {
	color: var(--loginly-required-color);
}

.loginly-form .loginly-input {
	display: block;
	width: 100%;
	border: var(--loginly-input-border-width) solid var(--loginly-input-border-color);
	border-radius: var(--loginly-input-radius);
	background: var(--loginly-input-bg);
	color: var(--loginly-input-color);
	font-family: inherit;
	font-size: var(--loginly-input-font-size);
}

/* Sizing for the controls that hold text. A checkbox is drawn by
   .loginly-checkbox at its own size and is deliberately not sized here. */
.loginly-form .loginly-input:not(.loginly-checkbox) {
	min-height: var(--loginly-input-height);
	padding: var(--loginly-input-padding-y) var(--loginly-input-padding-x);
}

.loginly-form .loginly-input::placeholder {
	color: var(--loginly-input-placeholder-color);
}

.loginly-form .loginly-input:focus {
	border-color: var(--loginly-input-focus-border-color);
	outline: none;
	box-shadow: var(--loginly-input-focus-shadow);
}

.loginly-form .loginly-input-invalid,
.loginly-form .loginly-input[aria-invalid="true"] {
	border-color: var(--loginly-input-invalid-border-color);
}

/*
 * A native checkbox ignores border, border-radius and color, so three of the
 * five check tokens painted nothing. appearance: none hands the box to us and
 * makes them real. It stays a real input: focusable, keyboard operable and
 * announced exactly as before, because only the painting changed.
 */
.loginly-form .loginly-checkbox {
	appearance: none;
	-webkit-appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: var(--loginly-check-size);
	height: var(--loginly-check-size);
	margin: 0;
	padding: 0;
	border: var(--loginly-input-border-width) solid var(--loginly-check-border-color);
	border-radius: var(--loginly-check-radius);
	background: var(--loginly-input-bg);
	accent-color: var(--loginly-check-checked-bg);
	color: var(--loginly-check-checked-color);
	cursor: pointer;
}

/* Two borders rotated into a tick, so the mark takes its colour from a token
   and scales with the box instead of needing an image. */
.loginly-form .loginly-checkbox::before {
	content: "";
	width: calc(var(--loginly-check-size) / 3.2);
	height: calc(var(--loginly-check-size) / 1.7);
	border: solid var(--loginly-check-checked-color);
	border-width: 0 calc(var(--loginly-check-size) / 8) calc(var(--loginly-check-size) / 8) 0;
	transform: rotate(45deg) translate(0, calc(var(--loginly-check-size) / -14));
	opacity: 0;
}

.loginly-form .loginly-checkbox:checked {
	border-color: var(--loginly-check-checked-bg);
	background: var(--loginly-check-checked-bg);
}

.loginly-form .loginly-checkbox:checked::before {
	opacity: 1;
}

/*
 * A password manager filling a checkbox sets :checked, which the rule above
 * already paints. This keeps Chrome's autofill wash from repainting over it.
 * Its own rule, because an unknown pseudo-class invalidates a whole selector
 * list in browsers that do not know it.
 */
.loginly-form .loginly-checkbox:-webkit-autofill:checked {
	border-color: var(--loginly-check-checked-bg);
	background: var(--loginly-check-checked-bg);
}

.loginly-form .loginly-checkbox:focus-visible {
	outline: none;
	border-color: var(--loginly-input-focus-border-color);
	box-shadow: var(--loginly-input-focus-shadow);
}

/*
 * Forced colors paints its own controls and ignores author colours, so the box
 * goes back to the platform rather than becoming an unreadable custom one.
 */
@media ( forced-colors: active ) {
	.loginly-form .loginly-checkbox {
		appearance: auto;
		-webkit-appearance: auto;
	}

	.loginly-form .loginly-checkbox::before {
		content: none;
	}
}

.loginly-form .loginly-checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--loginly-check-gap);
	cursor: pointer;
	user-select: none;
}

.loginly-form .loginly-checkbox-text {
	font-size: var(--loginly-help-size);
}

.loginly-form .loginly-description {
	margin: var(--loginly-hint-gap) 0 0;
	color: var(--loginly-help-color);
	font-size: var(--loginly-help-size);
	text-align: var(--loginly-help-align);
}

.loginly-form .loginly-button {
	display: inline-block;
	width: var(--loginly-btn-width);
	min-height: var(--loginly-btn-height);
	padding: var(--loginly-btn-padding-y) var(--loginly-btn-padding-x, var(--loginly-section-gap));
	border: var(--loginly-btn-border-width) solid var(--loginly-btn-border-color);
	border-radius: var(--loginly-btn-radius);
	background: var(--loginly-btn-bg);
	color: var(--loginly-btn-color);
	font-family: inherit;
	font-size: var(--loginly-btn-font-size);
	font-weight: var(--loginly-btn-font-weight);
	letter-spacing: var(--loginly-btn-letter-spacing);
	transition: var(--loginly-btn-transition);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.loginly-form .loginly-button:hover,
.loginly-form .loginly-button:focus {
	background: var(--loginly-btn-hover-bg);
	color: var(--loginly-btn-hover-color);
}

.loginly-form .loginly-button:focus {
	outline: none;
	box-shadow: var(--loginly-input-focus-shadow);
}

.loginly-form.loginly-is-loading .loginly-button,
.loginly-form .loginly-button[disabled] {
	opacity: var(--loginly-btn-disabled-opacity);
	cursor: default;
}

.loginly-form .loginly-button-secondary {
	background: transparent;
	color: var(--loginly-link-color);
}

.loginly-form .loginly-button-secondary:hover,
.loginly-form .loginly-button-secondary:focus {
	background: transparent;
	color: var(--loginly-link-hover-color);
}

.loginly-form .loginly-form-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--loginly-links-align);
	gap: var(--loginly-field-gap);
	margin: var(--loginly-links-space, var(--loginly-section-gap)) 0 0;
	padding-top: var(--loginly-links-padding-y, var(--loginly-field-gap));
	padding-bottom: var(--loginly-links-padding-y, 0px);
	padding-left: var(--loginly-links-padding-x);
	padding-right: var(--loginly-links-padding-x);
	border-top: var(--loginly-input-border-width) solid var(--loginly-form-border-color);
	font-size: var(--loginly-link-size);
}

.loginly-form .loginly-link {
	color: var(--loginly-link-color);
	font-size: var(--loginly-link-size);
	text-decoration: var(--loginly-link-decoration);
}

.loginly-form .loginly-link:hover,
.loginly-form .loginly-link:focus {
	color: var(--loginly-link-hover-color);
	text-decoration: underline;
}

.loginly-form .loginly-notice {
	margin: 0 0 var(--loginly-field-gap);
	padding: var(--loginly-message-padding-y) var(--loginly-message-padding-x);
	border: var(--loginly-input-border-width) solid transparent;
	border-radius: var(--loginly-message-radius);
	font-size: var(--loginly-help-size);
}

.loginly-form .loginly-notice-error {
	border-color: var(--loginly-error-border);
	background: var(--loginly-error-bg);
	color: var(--loginly-error-color);
}

.loginly-form .loginly-notice-success {
	border-color: var(--loginly-success-border);
	background: var(--loginly-success-bg);
	color: var(--loginly-success-color);
}

.loginly-form .loginly-notice-info {
	border-color: var(--loginly-info-border);
	background: var(--loginly-info-bg);
	color: var(--loginly-info-color);
}

.loginly-form .loginly-messages {
	margin-bottom: var(--loginly-field-gap);
}

.loginly-form .loginly-messages:empty {
	display: none;
}

.loginly-form .loginly-field-error {
	margin: var(--loginly-hint-gap) 0 0;
	color: var(--loginly-hint-error-color);
	font-size: var(--loginly-hint-size);
}

.loginly-form .loginly-availability,
.loginly-form .loginly-match {
	margin: var(--loginly-hint-gap) 0 0;
	color: var(--loginly-hint-color);
	font-size: var(--loginly-hint-size);
}

.loginly-form .loginly-availability[data-state="ok"],
.loginly-form .loginly-match[data-state="ok"] {
	color: var(--loginly-hint-success-color);
}

.loginly-form .loginly-availability[data-state="error"],
.loginly-form .loginly-match[data-state="error"] {
	color: var(--loginly-hint-error-color);
}

.loginly-form .loginly-strength {
	margin-top: var(--loginly-hint-gap);
}

.loginly-form .loginly-strength-track {
	height: var(--loginly-meter-height);
	border-radius: var(--loginly-meter-radius);
	background: var(--loginly-meter-track-bg);
	overflow: hidden;
}

.loginly-form .loginly-strength-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--loginly-meter-radius);
	background: var(--loginly-meter-weak);
	transition: var(--loginly-btn-transition);
}

/* Three bands, matching the three meter colours the contract defines. */
.loginly-form .loginly-strength[data-score="0"] .loginly-strength-bar {
	width: 33%;
	background: var(--loginly-meter-weak);
}

.loginly-form .loginly-strength[data-score="1"] .loginly-strength-bar {
	width: 66%;
	background: var(--loginly-meter-medium);
}

.loginly-form .loginly-strength[data-score="2"] .loginly-strength-bar {
	width: 100%;
	background: var(--loginly-meter-strong);
}

.loginly-form .loginly-strength-label {
	margin: var(--loginly-hint-gap) 0 0;
	color: var(--loginly-hint-color);
	font-size: var(--loginly-hint-size);
}

.loginly-form .loginly-logout-confirm {
	margin-bottom: var(--loginly-field-gap);
}

.loginly-form .loginly-logout-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--loginly-field-gap);
	align-items: center;
}

/*
 * One control fills the row; two share it. Without this the width token made
 * every control full width, so the confirmation stacked two identical blocks
 * and neither read as the safer answer.
 */
.loginly-form .loginly-logout-actions .loginly-button {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

/* Honeypot: visually hidden from people, still reachable by bots. */
.loginly-form .loginly-hp-wrap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Loading spinner. The label stays in the DOM so the button keeps an
 * accessible name; only its glyph is hidden while the spinner shows.
 */
.loginly-form .loginly-spinner {
	display: none;
	width: var(--loginly-meter-height);
	height: var(--loginly-meter-height);
	margin-right: var(--loginly-check-gap);
	border: var(--loginly-input-border-width) solid var(--loginly-spinner-color);
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: middle;
	animation: loginly-spin 700ms linear infinite;
}

.loginly-form.loginly-is-loading .loginly-spinner {
	display: inline-block;
}

.loginly-form.loginly-is-loading .loginly-button-label {
	visibility: hidden;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.loginly-form .loginly-spinner {
		animation: none;
		border-top-color: var(--loginly-spinner-color);
		opacity: var(--loginly-btn-disabled-opacity);
	}

	.loginly-form .loginly-strength-bar,
	.loginly-form .loginly-button {
		transition: none;
	}
}

/*
 * Show and hide password. The button sits inside the field's own box, so the
 * input keeps its full width and the control never overlaps typed text.
 */
.loginly-form .loginly-password-wrap {
	display: block;
	position: relative;
}

.loginly-form .loginly-input-with-toggle {
	padding-right: calc(var(--loginly-input-height) - var(--loginly-input-border-width));
}

.loginly-form .loginly-password-toggle {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	width: var(--loginly-input-height);
	height: var(--loginly-input-height);
	padding: 0;
	border: 0;
	background: none;
	color: var(--loginly-help-color);
	cursor: pointer;
}

.loginly-form .loginly-password-toggle:hover {
	color: var(--loginly-input-color);
}

.loginly-form .loginly-password-toggle:focus-visible {
	outline: none;
	border-radius: var(--loginly-input-radius);
	box-shadow: var(--loginly-input-focus-shadow);
}

/* An eye, drawn from two shapes so no image or font is needed. */
.loginly-form .loginly-password-icon {
	display: block;
	position: relative;
	width: var(--loginly-check-size);
	height: var(--loginly-check-size);
	border: var(--loginly-input-border-width) solid currentColor;
	border-radius: 100% 0;
	transform: rotate(45deg);
}

.loginly-form .loginly-password-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 40%;
	border: var(--loginly-input-border-width) solid currentColor;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* Revealed: a bar across the eye, so the state is visible as well as announced. */
.loginly-form .loginly-password-toggle[aria-pressed="true"] .loginly-password-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -20%;
	width: 140%;
	height: var(--loginly-input-border-width);
	background: currentColor;
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * Social buttons. A row in the field order like any other, so the Content tab
 * decides whether they sit above or below the form.
 * ------------------------------------------------------------------------ */

.loginly-form .loginly-social-buttons {
	margin-top: var(--loginly-social-space, var(--loginly-field-gap));
	display: flex;
	flex-direction: column;
	gap: var(--loginly-social-gap);
}

.loginly-form .loginly-social-buttons {
	align-items: center;
}

.loginly-form .loginly-social-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--loginly-social-width);
	max-width: 100%;
	min-height: var(--loginly-social-height);
	padding: var(--loginly-social-padding-y) var(--loginly-social-padding-x);
	gap: var(--loginly-social-icon-gap);
	border: var(--loginly-social-border-width) solid var(--loginly-social-border-color);
	border-radius: var(--loginly-social-radius);
	background: var(--loginly-social-bg);
	color: var(--loginly-social-color);
	font-size: var(--loginly-social-font-size);
	font-weight: var(--loginly-social-font-weight);
	line-height: 20px;
	text-decoration: none;
}

.loginly-form .loginly-social-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--loginly-social-icon-size);
	height: var(--loginly-social-icon-size);
}

.loginly-form .loginly-social-icon {
	width: 100%;
	height: 100%;
	display: block;
}

.loginly-form .loginly-social-layout-icon-only .loginly-social-button {
	width: var(--loginly-social-height);
	min-width: var(--loginly-social-height);
	padding: 0;
	gap: 0;
}

.loginly-form .loginly-social-buttons.loginly-social-layout-icon-only {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.loginly-form .loginly-social-button:hover,
.loginly-form .loginly-social-button:focus {
	color: var(--loginly-social-color);
	border-color: var(--loginly-input-focus-border-color);
}

.loginly-form .loginly-social-button:focus-visible {
	outline: none;
	box-shadow: var(--loginly-input-focus-shadow);
}

/* A rule with the word sitting in a gap in it. */
.loginly-form .loginly-social-divider {
	display: flex;
	align-items: center;
	gap: var(--loginly-check-gap);
	margin: var(--loginly-social-space, var(--loginly-field-gap)) 0 0;
	color: var(--loginly-social-divider-color);
	font-size: var(--loginly-help-size);
	text-align: center;
}

.loginly-form .loginly-social-divider::before,
.loginly-form .loginly-social-divider::after {
	content: "";
	flex: 1 1 auto;
	height: var(--loginly-input-border-width);
	background: var(--loginly-social-divider-color);
}
/* A paragraph field is the one input with no height of its own. */
.loginly-form textarea.loginly-input {
	min-height: calc(var(--loginly-input-height) * 2);
	line-height: 1.5;
	resize: vertical;
}


/*
 * Verification states. Every part is a row, so these join the field order list
 * like anything else, and the card is .loginly-form so the active template
 * draws them without a template file of their own.
 */
.loginly-form .loginly-status-icon {
	width: var(--loginly-status-icon-size);
	height: var(--loginly-status-icon-size);
	border-radius: 50%;
	background: var(--loginly-status-icon-bg);
	color: var(--loginly-status-icon-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.loginly-form .loginly-status-icon svg {
	width: 50%;
	height: 50%;
}

/* States 2 and 3 recolour the mark; the rest use the info default. */
.loginly-verify-success .loginly-status-icon {
	background: var(--loginly-success-bg);
	color: var(--loginly-success-color);
}

.loginly-verify-warn .loginly-status-icon {
	background: var(--loginly-error-bg);
	color: var(--loginly-error-color);
}

/* The address, spelled out, because a typo is caught here or never. */
.loginly-form .loginly-address {
	text-align: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	color: var(--loginly-title-color);
	background: var(--loginly-info-bg);
	border: 1px solid var(--loginly-info-border);
	border-radius: var(--loginly-message-radius);
	padding: var(--loginly-message-padding-y) var(--loginly-message-padding-x);
	word-break: break-all;
}

.loginly-form .loginly-verify-help {
	font-size: var(--loginly-help-size);
	color: var(--loginly-help-color);
	text-align: center;
	margin: 0;
	line-height: 1.55;
}

/* A resend inside a running sentence, as state 5 has it. */
.loginly-form .loginly-inline-submit {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.loginly-form .loginly-verify-resend {
	margin: 0;
}