/*
 * ILM Register -- the account action (1.21.0).
 *
 * `register.account`: one button or link in a site header ("Sign in" /
 * "My account") and, for a visitor, the dialog that signs in. The action
 * takes the header's colour and font (`currentColor`, `inherit`) and is
 * drawn like the header's other outlined controls; the dialog uses the
 * site's design tokens, each with a neutral fallback. Plain CSS, no build.
 */

.ilm-register-account {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 100%;
}

.ilm-register-account [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- the action */

.ilm-register-account__action {
	display: inline-flex;
	gap: var(--ilm-spacing-xs, 0.5rem);
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0.875rem;
	font: inherit;
	line-height: 1.2;
	color: inherit;
	white-space: nowrap;
	text-decoration: none;
	background: none;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	cursor: pointer;
}

/*
 * Pointed at, focused, pressed (1.22.0): a tint of the action's own colour
 * that deepens, eased like the site's buttons -- colour only, nothing
 * moves -- and immediate for a reader who asked for less motion.
 */
.ilm-register-account__action {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ilm-register-account__action:hover,
.ilm-register-account__action:focus-visible {
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
}

.ilm-register-account__action:active {
	background: color-mix(in srgb, currentColor 24%, transparent);
}

.ilm-register-account__action:focus-visible,
.ilm-register-account__close:focus-visible {
	outline: 2px solid var(--ilm-color-focus-ring, currentColor);
	outline-offset: 2px;
}

.ilm-register-account__icon {
	flex: 0 0 auto;
}

/*
 * Small (1.22.0): the height, type and corners of a small site button, for
 * a bar of small controls -- a header's top bar beside a small call to
 * action. Still at least 2rem square.
 */
.ilm-register-account--size-sm .ilm-register-account__action {
	min-width: 2rem;
	min-height: 2rem;
	padding: 0.375rem 0.875rem;
	font-size: var(--ilm-font-size-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
	border-radius: var(--ilm-radius-md, 0.375rem);
}

.ilm-register-account--size-sm .ilm-register-account__icon {
	width: 1.125em;
	height: 1.125em;
}

@media (prefers-reduced-motion: reduce) {
	.ilm-register-account__action {
		transition: none;
	}
}

/* Only the icon below a breakpoint; the words stay the action's name. */
@media (max-width: 575.98px) {
	.ilm-register-account--compact-sm .ilm-register-account__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.ilm-register-account--compact-sm .ilm-register-account__action { padding: 0.5rem; }
	.ilm-register-account--compact-sm.ilm-register-account--size-sm .ilm-register-account__action { padding: 0.375rem; }
}

@media (max-width: 767.98px) {
	.ilm-register-account--compact-md .ilm-register-account__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.ilm-register-account--compact-md .ilm-register-account__action { padding: 0.5rem; }
	.ilm-register-account--compact-md.ilm-register-account--size-sm .ilm-register-account__action { padding: 0.375rem; }
}

@media (max-width: 991.98px) {
	.ilm-register-account--compact-lg .ilm-register-account__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.ilm-register-account--compact-lg .ilm-register-account__action { padding: 0.5rem; }
	.ilm-register-account--compact-lg.ilm-register-account--size-sm .ilm-register-account__action { padding: 0.375rem; }
}

@media (max-width: 1199.98px) {
	.ilm-register-account--compact-xl .ilm-register-account__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.ilm-register-account--compact-xl .ilm-register-account__action { padding: 0.5rem; }
	.ilm-register-account--compact-xl.ilm-register-account--size-sm .ilm-register-account__action { padding: 0.375rem; }
}

/* ---------------------------------------------------------------- the dialog */

.ilm-register-account__dialog {
	box-sizing: border-box;
	width: min(28rem, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	font-family: var(--ilm-font-family-base, inherit);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: start;
	white-space: normal;
	color: var(--ilm-color-fg, CanvasText);
	background: var(--ilm-color-surface, Canvas);
	border: 1px solid var(--ilm-color-border, rgba(127, 127, 127, 0.35));
	border-radius: var(--ilm-radius-md, 10px);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);

	/*
	 * The dialog's error colour (1.23.1): the site's danger colour drawn
	 * towards the dialog's text colour, so it stays clear of the surface
	 * whether the site is dark or light. Marks only -- bar, border, icon;
	 * the words keep the text colour.
	 */
	--ilm-register-account-danger: color-mix(in srgb, var(--ilm-color-danger, #b02a37) 62%, var(--ilm-color-fg, CanvasText));
}

.ilm-register-account__dialog::backdrop {
	background: rgba(0, 0, 0, 0.65);
}

.ilm-register-account__dialog *,
.ilm-register-account__dialog *::before,
.ilm-register-account__dialog *::after {
	box-sizing: border-box;
}

.ilm-register-account__panel {
	padding: var(--ilm-spacing-md, 1.5rem);
}

.ilm-register-account__head {
	display: flex;
	gap: var(--ilm-spacing-sm, 1rem);
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var(--ilm-spacing-sm, 1rem);
}

.ilm-register-account__title {
	margin: 0;
	font-family: var(--ilm-font-family-heading, inherit);
	font-size: 1.75rem;
	line-height: 1.1;
	color: inherit;
}

.ilm-register-account__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -0.5rem -0.5rem -0.5rem 0;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: var(--ilm-radius-sm, 6px);
	cursor: pointer;
}

.ilm-register-account__close:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/* ---------------------------------------------------------------- the form, in the dialog */

.ilm-register-account__sign-in .ilm-register-sign-in__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
}

.ilm-register-account__sign-in .ilm-register-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.ilm-register-account__sign-in .ilm-register-field__label {
	font-weight: 600;
}

.ilm-register-account__sign-in input[type="text"],
.ilm-register-account__sign-in input[type="password"] {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	color: inherit;
	background: var(--ilm-color-bg, transparent);
	border: 1px solid var(--ilm-color-border-strong, currentColor);
	border-radius: var(--ilm-radius-sm, 6px);
}

/*
 * The fields a refusal describes (1.23.1). Like the eye's room above, not
 * decoration: a theme's border for every input (ILM Theme's is a chain of
 * :not()s) must not hide which fields the message is about.
 */
.ilm-register-account__dialog .ilm-register-account__sign-in input[aria-invalid="true"] {
	border-width: 2px !important;
	border-style: solid !important;
	border-color: var(--ilm-register-account-danger, currentColor) !important;
}

.ilm-register-account__sign-in input:focus-visible,
.ilm-register-account__sign-in button:focus-visible,
.ilm-register-account__sign-in a:focus-visible {
	outline: 2px solid var(--ilm-color-focus-ring, currentColor);
	outline-offset: 2px;
}

/* Show/hide: the eye inside the field's end (1.22.0), as on a sign-in page (embed.css). */
.ilm-register-account__sign-in .ilm-register-sign-in__password {
	position: relative;
	display: block;
}

.ilm-register-account__sign-in .ilm-register-sign-in__password input {
	/* Room for the eye is not decoration: a theme's input padding must not let typing run under it. */
	padding-inline-end: 3rem !important;
}

.ilm-register-account__sign-in .ilm-register-sign-in__reveal {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: auto 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--ilm-radius-sm, 6px);
	opacity: 0.75;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ilm-register-account__sign-in .ilm-register-sign-in__reveal:hover,
.ilm-register-account__sign-in .ilm-register-sign-in__reveal:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.ilm-register-account__sign-in .ilm-register-sign-in__reveal:focus-visible {
	outline-offset: -2px;
}

.ilm-register-account__sign-in .ilm-register-sign-in__remember {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.ilm-register-account__sign-in .ilm-register-sign-in__remember input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--ilm-color-primary, auto);
}

.ilm-register-account__sign-in .ilm-register-submit {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	margin: 0.25rem 0 0;
}

.ilm-register-account__sign-in .ilm-register-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: none;
	border: 1px solid var(--ilm-color-border-strong, currentColor);
	border-radius: var(--ilm-radius-sm, 6px);
	cursor: pointer;
}

.ilm-register-account__sign-in .ilm-register-button--primary {
	min-width: 8rem;
	color: var(--ilm-color-on-primary, #fff);
	background: var(--ilm-color-primary, #333);
	border-color: var(--ilm-color-primary, #333);
}

.ilm-register-account__sign-in .ilm-register-button--primary:hover {
	background: var(--ilm-color-primary-hover, var(--ilm-color-primary, #333));
	border-color: var(--ilm-color-primary-hover, var(--ilm-color-primary, #333));
}

.ilm-register-account__sign-in .ilm-register-button--primary:disabled {
	cursor: progress;
	opacity: 0.75;
}

.ilm-register-account__sign-in .ilm-register-sign-in__lost {
	color: var(--ilm-color-link, inherit);
}

/*
 * What stopped the sign-in (1.23.1): an alert, not a note -- tinted with
 * the error colour, bordered and barred in it, with a warning mark before
 * the sentence. The sentence itself is in the dialog's text colour, so it
 * reads as well as the rest of the form. Nothing moves.
 *
 * Scoped to the dialog. Before 1.23.1 these rules were exactly as specific
 * as embed.css's `.ilm-register-sign-in .ilm-register-sign-in__error`,
 * which comes later and whose colours (`--ilm-re-*`) exist only inside a
 * sign-in page: in the dialog its background and border fell away, and the
 * refusal was drawn as plain bold text.
 */
.ilm-register-account__dialog .ilm-register-account__sign-in .ilm-register-account__error {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem 0.75rem 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ilm-color-fg, inherit);
	background: color-mix(in srgb, var(--ilm-color-danger, #b02a37) 16%, var(--ilm-color-surface, Canvas));
	border: 1px solid color-mix(in srgb, var(--ilm-register-account-danger) 60%, transparent);
	border-inline-start: 4px solid var(--ilm-register-account-danger);
	border-radius: var(--ilm-radius-sm, 6px);
}

/* A circled exclamation mark, decorative: the role and the words carry the meaning. */
.ilm-register-account__dialog .ilm-register-account__sign-in .ilm-register-account__error::before {
	content: "";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.0625rem;
	background-color: var(--ilm-register-account-danger);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.25 5h2.5v7h-2.5zm0 9h2.5v2.5h-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.25 5h2.5v7h-2.5zm0 9h2.5v2.5h-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ilm-register-account__dialog .ilm-register-account__sign-in .ilm-register-account__error:empty {
	display: none;
}

.ilm-register-account__dialog .ilm-register-account__sign-in .ilm-register-account__error p {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Forced colours drop tints: the border and the mark stay, in the system's text colour. */
@media (forced-colors: active) {
	.ilm-register-account__dialog .ilm-register-account__sign-in .ilm-register-account__error {
		border-color: CanvasText;
	}

	.ilm-register-account__dialog .ilm-register-account__sign-in .ilm-register-account__error::before {
		background-color: CanvasText;
	}
}

.ilm-register-account__status {
	margin: 0;
	color: var(--ilm-color-fg-muted, inherit);
}

.ilm-register-account__status:empty {
	display: none;
}

.ilm-register-account__status:not(:empty) {
	margin: 0 0 1rem;
}

@media (max-width: 575.98px) {
	.ilm-register-account__panel {
		padding: var(--ilm-spacing-sm, 1rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ilm-register-account__dialog[open] {
		animation: ilm-register-account-in 0.15s ease-out;
	}

	@keyframes ilm-register-account-in {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}
	}
}